一个扩展插件由不同的组件构成。组件包括backgroud script、content script、选项页、ui元素及其它逻辑文件。插件的开发技术包括HTML,CSS及javascript。扩展插件并不一定依赖所有组件，依赖根据其自身功能而确定。

本文将创建一个插件，使用者可以通过点按钮来改变域名为developer.chrome.com的页面的背景颜色。通过这个例子演示多种组件的使用方式。

1 创建Manifest文件

扩展插件需要使用到manifest.json文件，来定义各种行为。

创建一个文件夹，在文件夹中添加如下的manmanifest.json文件。

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

按照什么是chrome扩展插件中介绍的方式安装插件。启用后可在工具条上看到。

2 添加命令

插件安装完毕，但还没有任何功能。接着定义行为，添加backgroud.js脚本。

background.js

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

接着在manifest文件中的background中增加配置。

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

为了使用storage API必须在manifest文件的permissions字段中增加配置storage。

runtime.onInstalled事件时间发生后，脚本将颜色数据进行存储。存储成功后会在插件控制台页打印“The color is green“。不同的插件都可以更新或访问该值。效果如下图所示。

3 添加交互界面

扩展插件可以有多种形式的用户交互接口，本例子中将使用弹出框。创建一个名为popup.html的文件，并放在插件目录下。插件使用一个按钮来改变背景颜色。

popup.html

 <!DOCTYPE html><html><head><style>button {height: 30px;width: 30px;outline: none;}</style></head><body><button id="changeColor"></button></body></html>

在manifest文件中添加该页面，在page_action对象的default_popup下配置该弹出页面。

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

接着设置工具条上插件的图标。在page_action的default_icon项下配置。

{"name": "Getting Started Example","version": "1.0","description": "Build an Extension!","permissions": ["storage"],"background": {"scripts": ["background.js"],"persistent": false},"page_action": {"default_popup": "popup.html","default_icon": {"16": "images/get_started16.png","32": "images/get_started32.png","48": "images/get_started48.png","128": "images/get_started128.png"}},"manifest_version": 2}

通过icons配置来设置在扩展插件管理页面上的图标。

  {"name": "Getting Started Example","version": "1.0","description": "Build an Extension!","permissions": ["storage","declarativeContent"],"background": {"scripts": ["background.js"],"persistent": false},"page_action": {"default_popup": "popup.html","default_icon": {"16": "images/get_started16.png","32": "images/get_started32.png","48": "images/get_started48.png","128": "images/get_started128.png"}},"icons": {"16": "images/get_started16.png","32": "images/get_started32.png","48": "images/get_started48.png","128": "images/get_started128.png"},"manifest_version": 2}

插件管理页面上的图标设置效果。

页面工具条上的插件图标设置效果。

但此时插件还没有包含任何功能。最终需要通过插件来通知浏览器什么时候显示弹出框(popup.html)。

我们在backgroud脚本中通过declarativeContent API来添加一条规则，当runtime.onInstalled事件发生时显示弹出框。

因此需要修改background.js文件，当用户访问的页面主机名为developer.chrome.com时，显示弹出框。

  chrome.runtime.onInstalled.addListener(function() {chrome.storage.sync.set({color: '#3aa757'}, function() {console.log('The color is green.');});chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {chrome.declarativeContent.onPageChanged.addRules([{conditions: [new chrome.declarativeContent.PageStateMatcher({pageUrl: {hostEquals: 'developer.chrome.com'},})],actions: [new chrome.declarativeContent.ShowPageAction()]}]);});});

由于使用declarativeContent API需要在permissions添加配置declarativeContent。

  {"name": "Getting Started Example",..."permissions": ["declarativeContent", "storage"],...}

效果如下图所示。点击按钮后显示一个包含了灰色按钮的弹出框。

接着我们需要设置按钮颜色。我们增加一个popup.js文件。该脚本获取按钮对象，并设置按钮颜色。

 let changeColor = document.getElementById('changeColor');chrome.storage.sync.get('color', function(data) {changeColor.style.backgroundColor = data.color;changeColor.setAttribute('value', data.color);});

在popup.html文件中引入该脚本。

  <!DOCTYPE html><html><head><style>button {height: 30px;width: 30px;outline: none;}</style></head><body><button id="changeColor"></button><script src="popup.js"></script></body></html>

重新加载插件将看到弹出框中显示一个绿色的按钮。

4 添加修改页面颜色的逻辑

我们在popup.js文件中增加修改页面颜色的逻辑。

  let changeColor = document.getElementById('changeColor');...changeColor.onclick = function(element) {let color = element.target.value;chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {chrome.tabs.executeScript(tabs[0].id,{code: 'document.body.style.backgroundColor = "' + color + '";'});});};

代码为按钮添加一个单击事件，该事件发生后会通过程序自动注入一段脚本，该脚本会将当前所浏览的页面的背景色设置为所点击按钮的颜色。

这段代码使用了activeTab，因此需要在manifest文件里修改permissions配置。增加activeTab。

  {"name": "Getting Started Example",..."permissions": ["activeTab", "declarativeContent", "storage"],...}

5 增加用户颜色选项

由于现在只设置一种颜色，我们增加一个用户选项功能。通过设置配置项来确定按钮点击后背景色。

options.html

 <!DOCTYPE html><html><head><style>button {height: 30px;width: 30px;outline: none;margin: 10px;}</style></head><body><div id="buttonDiv"></div><div><p>Choose a different background color!</p></div></body><script src="options.js"></script></html>

修改manifest文件。

  {"name": "Getting Started Example",..."options_page": "options.html",..."manifest_version": 2}

增加options.js文件。该文件定义了4种按钮颜色，当我们点击按钮，存储种的颜色数据将被更新。

  let page = document.getElementById('buttonDiv');const kButtonColors = ['#3aa757', '#e8453c', '#f9bb2d', '#4688f1'];function constructOptions(kButtonColors) {for (let item of kButtonColors) {let button = document.createElement('button');button.style.backgroundColor = item;button.addEventListener('click', function() {chrome.storage.sync.set({color: item}, function() {console.log('color is ' + item);})});page.appendChild(button);}}constructOptions(kButtonColors);

重新加载插件后在，插件 - 详细信息 - 扩展程序选项点击，可以看到我们新增的配置项页面。里面有4种颜色的按钮。

6 总结

开发一个插件涉及到了插件页面，逻辑处理操作。页面布局通过HTML，逻辑控制通过Javascript，存储、脚本注入等与chrome相关的操作通过chrome 提供的组件来完成。

7 原文地址

https://developer.chrome.com/extensions/getstarted

chrome扩展插件二：chrome插件开发入门相关推荐

悬浮窗播放器html,Chrome扩展插件悬浮画中画播放器推荐
今天给大家安利一个 Chrome 扩展插件,可将绝大多数的 HTML 5 直播或视频通过画中画悬浮窗的的形式播放,特别适合一边看视频一边工作.插件名称叫:[悬浮画中画播放器] 插件使用方法: 插件使用 ...
reactjs redux chrome扩展插件
reactjs redux chrome扩展插件 React Developer ToolsRedux DevTools
Chrome 扩展插件：如何开始一个插件的开发
欢迎点击查看个人站首发原文,访问个人站获取更多插件编程知识. Chrome扩展插件基础是基于前端html+js开发,然后通过官方提供的项目结构进行开发,需要注意的是,目前Chrome已经支持Manif ...
chrome扩展(插件)开发（五）监听网页的ajax请求
我的插件想要监听网页发出的请求, 然后根据请求的状态来做具体的操作. 实现的方法主要有三种方式 google官方提供的api chrome.webRequest 这里在插件中监听宿主页面的ajax 重 ...
Chrome扩展插件、360浏览器扩展插件中遇到的问题
Chrome扩展插件.360浏览器扩展插件中遇到的问题问题前瞻 script标签的问题谷歌官方API获取当前页面URL的问题前言: 因为朋友的请求,所以为他做一个小Chrome扩展,因为之前是没 ...
chrome扩展插件一：什么是chrome扩展插件
1 什么是chrome扩展插件? 扩展程序提供给用户对chrome的功能进行扩展.用户可以通过扩展程序来根据个人的需求和喜好定制开发一些chrome功能.这些程序开发是基于html,javascrip ...
Chrome扩展插件数次审核被拒的惨痛经历
在被Chrome商店拒绝不下十次之后,我做的Chrome扩展插件终于重新上架,我觉得有必要记录一下,跟大家分享下这个心酸的历程,以免跳坑里. 突然有一天,收到Chrome插件的邮件,说我的应用涉及用户 ...
chrome扩展插件拦截修改请求头
chrome扩展插件拦截修改请求头常见问题由于部分需求需要调用从三方抓包的来的接口取得一些数据,需要用谷歌扩展插件跨域请求三方接口,并携带部分头部信息,找了几个小时,终于找到了这个方法在扩展程序 ...
WEB之浏览器使用入门--chrome扩展插件安装及好用的扩展插件小集合
chrome插件 chrome本身是浏览器,提供最基本的谷歌提供的浏览器相关的功能.但是仅仅有基本的chrome本体在很多时候使用还是会感到力不从心,对浏览器本身通过安装一些常用的扩展(extenti ...

chrome扩展插件二：chrome插件开发入门