Content-scripts

ontent-scripts，是 Chrome 插件中向页面注入脚本的一种形式，借助 content-scripts 我们可以实现通过配置的方式向指定页面注入 JS 和 CSS 实现对指定页面的dom操作。

修改百度输入框颜色示例

第一步 : 在 script.js 编写以下代码

// script.js
// 修改背景
$('#kw').css({background:"red", color:'#FFFFFF'});
// 设置默认搜索关键字
$('#kw').val('php');

第二步 : 重载插件

第三步 : 浏览器打开百度

运行后即可体验到浏览器插件的效果。

有什么意义

通过上面的操作我们实现了对页面元素 百度输入框 背景颜色、默认值的修改，以此类推您可以实现更多的基于 html dom 的操作。这样您就可以实现 : 屏蔽广告、元素内容获取、自动填表等等丰富的功能了。

如何查看 dom 元素

打开谷歌浏览器控制器，点击元素获取按钮，选择元素后可以在控制台中找到对应的 dom 元素，利用它们的 id class 选中它们，然后进行 dom 操作即可。

content-scripts 说明

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来帮你调用（ 后文有详细介绍）。