一般而言，一个chrome插件一般包含以下目录的文件。

├── manifest.json
├── icon.png
├── popup.html
├── options.html
├── js
│ ├── background.js
│ ├── app.js

对于前端而言，除了manifest.json，以上的其他文件大家都比较熟悉。作为类似chrome插件开发的配置文件，manifest.json的结构大致是这样的：

{
    "manifest_version": 2,
 
    "name": "测试插件",
    "description": "一款测试插件的说明",
    "version": "0.0.1",
 
    "icons": {
        "16": "icon16.png",
        "32": "icon32.png",
        "48": "icon48.png",
        "128": "icon128.png"
    },
 
    "browser_action": {
        "default_icon": "icon.png",
        "default_title": "测试插件",
        "default_popup": "popup.html"
    },
 
    "page_action": {
        "default_icon": {
            "19": "images/icon19.png",
            "38": "images/icon38.png"
        },
        "default_title": "测试插件",
        "default_popup": "popup.html"
    },
 
    "content_scripts": [
        {
            "matches": ["*://www.baidu.com/*"],
            "js": ["js/test.js"],
            "css": ["css/test.css"]
        }
    ],
 
    "background": {
        "scripts": ["js/background01.js", "js/background02.js"]
    },
 
    "options_page": "options.html",
 
    "permissions": [
        "https://www.baidu.com/"
    ]
}

或许你很好奇以上的属性或配置的作用，接下来，我们就分别对这些属性进行说明，你也根据自身插件的需要对属性进行增加和删除：

一、manifest_version

manifest_version：插件配置文件manifest.json的版本号，是由chrome官方发布的。

二、name

name：插件的名称

三、description

description：对插件的描述。定义了之后，打开chrome://extensions/，在插件名称的底部可以看到。

四、version

version：插件的版本

五、icons

icons：打开扩展程序界面 chrome://extensions/，你会在每个插件的左侧看到对应的图标，这个也就在manifest.json定义的icons。一般而言，一个插件应用都有一套对应的图标，分别是四种大小的格式（16px, 32px, 48px, 128px）。在不同的分辨率下，chrome会根据不同情况采用不同大小的图标。

值得注意的是，这个属性不是必须的。倘若你未指定icons，则chrome会采用默认的“拼图”图标。

六、browser_action

browser_action：一般包含 “default_icon”、”default_title” 以及 “default_popup”

6.1 default_icon

位于工具栏右侧的插件图标，它的值可以是字符串。也可以是一个对象(如下面)，当值为对象时，在不同的分辨率会选择不同图标。当未指定图标时，chrome会采用icons中指定的图标。但如果icons也没指定图标，那地址栏右侧的图标会变成一个带有“方块?”的深灰色图标，也就是系统默认的图标。 

"browser_action": {
    "default_icon": {
        "19": "images/icon19.png",
        "38": "images/icon38.png"
    }
}

在js中，我们可以通过setIcon这个API来改变这个图标：

chrome.browserAction.setIcon(details, callback);
  • details–包含了三个属性。分别是”imageData”，”path”，”tabId”
  • imageData–可选，值为对象，canvas元素。
  • path–可选，值为字符串。图片在扩展中的的相对路径。
  • tabId–可选，值为整数。切换到某一特定标签时，图标改变！关闭标签时，图标重置。
  • callback–图标改变后，执行的函数。

6.2 default_title

指定了鼠标悬停到工具栏右侧插件图标时显示的文字信息，很像普通html标签的title属性。我们也可以通过setTitle这个API来改变标题，如果插件有后台处理功能，那么我们就可以通过改变title来告知用户的当前状态：

chrome.browserAction.setTitle(details);
  • details–包含了二个属性。分别是”title”，”tabId”
  • title–值为字符串。鼠标经过图标时要显示的文字。
  • tabId–可选，值为整数。切换到某一特定标签时，标题改变！关闭标签时，标题重置。

6.3 default_popup

看到带popup字样，我们便能联想到这是关于弹出层的信息。default_popup指定了鼠标点击工具栏右侧插件图标时显示的弹出层，它是一个html页面（popup.html）,主要用于展示插件内容。我们也可以通过setPopup这个API来改变popup展示的内容：

chrome.browserAction.setPopup(details);
  • details–包含了二个属性。分别是”tabId”，”popup”
  • tabId–可选，值为整数。切换到某一特定标签时，popup展示的内容改变！关闭标签时，内容重置。
  • popup–值为string。鼠标点击插件图标时弹出的html文件，如果为空字符串，则不弹出内容。

七、Badge

Badge翻译成中文表示徽章、标记的意思，它是位于图标底部的信息块。在前面，我们必须通过点击图标或悬停在图标的方式来查看消息，这样看起来或许不那么便捷。而Badge的出现又给我们多提供了一种展现信息状态的选择！它能很直观的反馈消息。

我们可以通过以下API对Badge进行设置和读取:

chrome.browserAction.setBadgeText(details);
chrome.browserAction.getBadgeText(details, callback);
  • details–包含了二个属性。分别是”text”，”tabId”
  • text–值为字符串。显示在Badge里字，只能显示四个字符。
  • tabId–可选，值为整数。切换到某一特定标签时，设置生效！关闭标签时，Badge重置。
  • callback–设置改变后，执行的回调函数。
chrome.browserAction.setBadgeBackgroundColor(details);
chrome.browserAction.getBadgeBackgroundColor(details, callback);
  • details–包含了二个属性。分别是”color”，”tabId”
  • text–值为数组或字符串。设置Badge的背景色，可以是#cccccc，也可以是类似rgba的[100, 200, 200, 50]。
  • tabId–可选，值为整数。切换到某一特定标签时，设置生效！关闭标签时，Badge重置。
  • callback–设置改变后，执行的回调函数。

值得注意的时，当设置了Badge，我们在重新加载了插件后，还需要点击工具栏右侧图标，才会看到设置或更新的Badge。

八、page_action

page_action：page_action与browser_action的功能大同小异。不同点主要有：

  1. browser_action中的插件图标”default_icon”是在工具栏右侧，而page_action是在地址栏的右侧。如我们看到chrome中的收藏夹图标，是一个五角星！
  2. page_action具有显示和隐藏图标的API。
chrome.pageAction.show(tabId);
chrome.pageAction.hide(tabId);

tabId–值为整数。在指定标签下显示或隐藏插件图标。

九、content_scripts

content_scripts：通常在使用chrome插件时，我们可以对需要操作的页面进行DOM操作。它的值是一个数组，其中数组的第一个项是一个对象。包含了match、exclude_matches、css以及js等属性。这里要说明的是，chrome不允许在页面里直接内嵌js代码，因为你必须外链js文件。

match–匹配需要操作页面所在的域，即匹配到的页面，才做相应的处理。如果不作域名限制，可通过以下方式：

"matches": ["*://*/*"]

js、css–被注入到操作页面的样式和脚本，当用户打开页面，被注入的文件就会自动运行。改变UI界面，处理各种逻辑与行为。
关于content_scripts，我写了个进入百度首页，然后倒计时5秒对 chrome插件 进行搜索的chrome插件！点击下载

十、background

background：如果插件没有default_popup或者前台界面展示，而是通过后台脚本运行，去改变工具栏右侧插件图标的状态（比如page_action改变显示数）来通知用户。这种情况下，我们可以在manifest.json中加入background属性。

它的值是一个对象，这个对象它包含了一个scripts属性，而scripts属性的值为一个数组，数组的每项是对应的js文件。有点绕？看看配置文件里的 background 吧。

"background": {
    "scripts": ["js/background.js"]
}

比如，我们在background.js中对某个站点发送ajax请求，当站点有信息更新时，background.js也会更新工具栏右侧插件图标的状态，进而通知到用户！

关于background，我写了个每隔5s改变 Badge 内容为 yes 的chrome插件！点击下载

十一、options_page

options_page：当我们鼠标右键工具栏右侧的插件图标时，会弹出一个菜单，菜单里包含了插件名称、选项、chrome移除和菜单隐藏操作、管理扩展程序以及审查弹出内容这几项。在我们没有在manifest.json指定options_page属性前，“选项”那项是置灰不可选。options_page的属性值是一个页面，假如像以下方式引入了options_page：

"options_page": "options.html"

再次右键插件图标会发现“选项”变为可选状态，点击它会跳转到我们创建的options.html。当然，页面名称你可以选择自定义。

通过这个页面，我们可以对插件进行个性化的功能设置，而设置后的值通常以键值对的格式保存在localstorage，虽然localstorage存在跨域限制，但chrome在插件开发方面却没有对此作要求，也正因为如此，我们能轻松读取到用户设置的数据，从而插件也能按照用户设置的状态进行运行！

十二、permissions

permissions：web开发中跨域请求是不允许的，如前面讲到的localstrong一样，这个规则在chrome插件中也被打破。我们可以通过在permissions中指定请求的域，在后台js文件对这个域发送ajax，从而完成信息获取。permissions的值是一个数组，每项是对应的url。

"permissions": [
    "https://www.baidu.com/" // 设置跨域地址
]

关于permissions，我写了一个可预览城市一周天气的chrome插件！里面包含了前面所讲的 options_page。点击下载