content-scripts

所谓content-scripts，其实就是Chrome插件中向页面注入脚本的一种形式（虽然名为script，其实还可以包括css的），借助content-scripts我们可以实现通过配置的方式轻松向指定页面注入JS和CSS（如果需要动态注入，可以参考下文），最常见的比如：广告屏蔽、页面CSS定制，等等。

示例配置：

  1. {
  2.  // 需要直接注入页面的JS
  3.  "content_scripts": 
  4.  [
  5.  {
  6.  //"matches": ["http://*/*", "https://*/*"],
  7.  // "<all_urls>" 表示匹配所有地址
  8.  "matches": ["<all_urls>"],
  9.  // 多个JS按顺序注入
  10.  "js": ["js/jquery-1.8.3.js", "js/content-script.js"],
  11.  // JS的注入可以随便一点，但是CSS的注意就要千万小心了，因为一不小心就可能影响全局样式
  12.  "css": ["css/custom.css"],
  13.  // 代码注入的时间，可选值： "document_start", "document_end", or "document_idle"，最后一个表示页面空闲时，默认document_idle
  14.  "run_at": "document_start"
  15.  }
  16.  ],
  17. }

特别注意，如果没有主动指定run_at为document_start（默认为document_idle），下面这种代码是不会生效的：

  1. document.addEventListener('DOMContentLoaded', function()
  2. {
  3.  console.log('我被执行了！');
  4. });

content-scripts和原始页面共享DOM，但是不共享JS，如要访问页面JS（例如某个JS变量），只能通过injected js来实现。content-scripts不能访问绝大部分chrome.xxx.api，除了下面这4种：

  • chrome.extension(getURL , inIncognitoContext , lastError , onRequest , sendRequest)
  • chrome.i18n
  • chrome.runtime(connect , getManifest , getURL , id , onConnect , onMessage , sendMessage)
  • chrome.storage

其实看到这里不要悲观，这些API绝大部分时候都够用了，非要调用其它API的话，你还可以通过通信来实现让background来帮你调用（关于通信，后文有详细介绍）。

好了，Chrome插件给我们提供了这么强大的JS注入功能，剩下的就是发挥你的想象力去玩弄浏览器了。