Chrom插件开发：入门教程

本文主要是介绍Chrom插件开发：入门教程，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

插件由不相同但是内聚的组件组成，这些组件可以包括多个后台脚本、多个内容脚本、一个设置页面、多个图形用户界面元素以及其他多种逻辑文件组成。插件组件通过HTML、CSS以及JavaScript这些Web开发技术构建，组件依赖于这些Web开发技术所提供的功能，但却又不必包含其全部功能。

本教程会教你创建一个可以任意改变developer.chrome.com网站页面背景颜色的插件，在此插件中会用到许多关键组件，用于讲解每个组件以及展示各个组件之间的关系。

就让我们从创建一个保存此插件文件的目录开始此教程。你也可以从此处下载完整的插件。

创建 Manifest

插件开发都是从manifest开始的。创建一个manifest.json文件并填入一下内容，或者从此处下载该文件。

  {"name": "Getting Started Example","version": "1.0","description": "Build an Extension!","manifest_version": 2}

一个包含这个manifest文件的目录此时便可以作为一个插件通过开发者模式添加到浏览器中。

通过chrome://extensions打开插件管理页面（插件管理页面也可以通过点解Chrome浏览器菜单按钮，依次选择【更多工具】【扩展程序】来打开）；
打开开发者模式开关使能开发者模式；
点击 LOAD UNPACKED 按钮并选择插件所在目录。

哒哒！插件就被安装好了，由于manifest中并未包含任何图标，因此浏览器会为其创建一个通用的图标。

添加指令

虽然插件已经安装好了，但它并未包含任何指令。通过创建一个名为background.js的文件（或者从此处下载）并放置与上面创建的目录中可以引入一个后台脚本。

后台脚本以及其他重要的组件都必须在manifest中进行注册，通过注册后台脚本可以让插件知道应该索引哪一个文件，以及该文件可用来做什么。

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

现在插件便知道它包含了一个非持久性的后台脚本，并且后扫描该脚本以便确定它该监听哪些重要的事件。

这个插件在安装好后需要从一个持久变量中获取信息，首先在后台脚本中为runtime.onInstalled设置一个监听事件，插件会在onInstalled监听函数中通过 storage API设置一个值，使得该插件的其他组件也可以访问并更新这个值。

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

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

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