Chrom插件开发：入门教程 _插件

插件由不相同但是内聚的组件组成，这些组件可以包括多个后台脚本、多个内容脚本、一个设置页面、多个图形用户界面元素以及其他多种逻辑文件组成。插件组件通过HTML、CSS以及这些Web开发技术构建，组件依赖于这些Web开发技术所提供的功能，但却又不必包含其全部功能。
【Chrom插件开发：入门教程】本教程会教你创建一个可以任意改变网站页面背景颜色的插件，在此插件中会用到许多关键组件，用于讲解每个组件以及展示各个组件之间的关系。
就让我们从创建一个保存此插件文件的目录开始此教程。你也可以从此处下载完整的插件。
创建
插件开发都是从开始的。创建一个.json文件并填入一下内容，或者从此处下载该文件。
{"name": "Getting Started Example","version": "1.0","description": "Build an Extension!","manifest_version": 2}
一个包含这个文件的目录此时便可以作为一个插件通过开发者模式添加到浏览器中。
通过://打开插件管理页面（插件管理页面也可以通过点解浏览器菜单按钮，依次选择【更多工具】【扩展程序】来打开）；打开开发者模式开关使能开发者模式；点击 LOAD按钮并选择插件所在目录。

文章插图
哒哒！插件就被安装好了，由于中并未包含任何图标，因此浏览器会为其创建一个通用的图标。
添加指令
虽然插件已经安装好了，但它并未包含任何指令。通过创建一个名为.js的文件（或者从此处下载）并放置与上面创建的目录中可以引入一个后台脚本。
后台脚本以及其他重要的组件都必须在中进行注册，通过注册后台脚本可以让插件知道应该索引哪一个文件，以及该文件可用来做什么。

{"name": "Getting Started Example","version": "1.0","description": "Build an Extension!","background": {"scripts": ["background.js"],"persistent": false},"manifest_version": 2}

现在插件便知道它包含了一个非持久性的后台脚本，并且后扫描该脚本以便确定它该监听哪些重要的事件。
这个插件在安装好后需要从一个持久变量中获取信息，首先在后台脚本中为.设置一个监听事件，插件会在监听函数中通过API设置一个值，使得该插件的其他组件也可以访问并更新这个值。

chrome.runtime.onInstalled.addListener(function() {chrome.storage.sync.set({color: '#3aa757'}, function() {console.log("The color is green.");});});

许多API（包括）为了让插件能使用他们，都需要在中的字段中进行注册。

{"name": "Getting Started Example","version": "1.0","description": "Build an Extension!","permissions": ["storage"],"background": {"scripts": ["background.js"],"persistent": false},"manifest_version": 2}

回到我们刚打开的插件管理页面并点击重新加载链接，会出现一个新的字段—— view，它的值变成了一个显示为.js可点击的蓝色的链接。
点击该链接会看到该后台脚本的控制台日志：The color is green. 。
引入用户图形界面
插件的用户图形界面可以有多种表现形式，但在本例中我们使用一个弹窗作为用户界面。在插件所在目录中创建一个名为popup.html的文件（你也可以从此处
下载）。此插件使用一个按钮来改变颜色。
<