现在要实现一个chrome扩展，其功能是：当打开百度时，将百度的背景换为灰色。
分析功能：当打开一个URL时，对其进行匹配，若是百度，则直接注入js，将背景色修改。希望让扩展显示在地址栏右侧，但不需要弹出气泡界面。
于是，需要使用browser_action，background环境不需要，content_scripts需要。
首先新建一个文件夹，并添加manifest.json和3个文件夹：
1. 制作3个图标，大小分别为16×16、48×48、128×128，作为扩展使用的图标，放在image文件夹下。
2. 在js文件夹下创建一个js文件，命名为content.js，用于content_scripts。
3. content_scripts中希望使用jquery，于是将jquery库放在lib文件夹下。
最终结构如下：
然后修改manifest.json：
{
// 必须字段
"name": "Plugin Template",
"version": "1.0",
"manifest_version": 2,
// 建议字段
"description": "This is atemplate.",
"icons": {
"16": "image/icon-16.png",
"48": "image/icon-48.png",
"128": "image/icon-128.png"
},
// 可选
"browser_action": {
"default_icon": "image/icon-128.png",
"default_title": "My Test Template"
},
// 自定义
"content_scripts": [
{
"matches": [
"*://www.baidu.com/*"
],
"js": [
"lib/jquery-3.3.1.min.js",
"js/content.js"
]
}
]
}
其中：
1. 必须字段是必填的。
2. 建议字段可选填。注意icons数组，与添加的png一一对应。
3. 由于要在地址栏右侧显示图标，所以可选字段使用browser_action。不希望点击图标弹出气泡页面，所以不设置其default_popup属性。
4. 由于只需要一个js注入功能，所以自定义字段只需要一个content_scripts，permissions在这里可以省略。content_scripts需要设置mathces属性来匹配百度的页面，然后指定要注入的js。因为要引用jquery库，所以先注入jquery，再注入自定义的content.js。
manifest.json配置完成，接下来需要编写content.js：
var changeBKColor = function() { $("body").css("background-color", "lightgray"); }; changeBKColor();
content.js定义了一个修改body背景色的函数，并调用了它。这样，当js注入到页面且被调用后，页面背景色就会被修改。
打开chrome浏览器并进入扩展程序页面，开启开发者模式，点击加载已解压的扩展程序，选择上面的文件夹。
然后打开百度：
可见背景色已被修改。进入百度学术：
由于百度学术的网址是http://xueshu.baidu.com/，与content_scripts中的matches属性"*://www.baidu.com/*"不符合，所以百度学术并没有被注入js。