Chrome插件开发简记

建议先看官方参考文档 Overview ，该文档有个简单的入手教程，之后自己尝试开发时可以参考 Chrome Extension API 。另外，扩展文件要求 HTML 与 JavaScript 代码分离，因此需要单独写js文件

manifest清单文件

文件内错误会导致扩展无法加载！！！

清单文件，主要包括版本、权限信息，如下为示例：

{
	"name": "ChangeBGColor",
	"version": "1.0",
	"description": "Change font or background color of a page",
	"permissions": [
		"storage",
		"declarativeContent",
		"activeTab"
	],
	"background": {
	"scripts": [
		"background.js"
	],
	"persisent": false
	},
	"options_page": "options.html",
	"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
}

background.js默认执行文件

当启用扩展、关闭、打开、刷新网页时会执行这个文件，主要用来确定规则（如针对某个url启用扩展）或执行简单的任务，示例：

chrome.runtime.onInstalled.addListener(function () { // 监听器
	// 存储一个数值（到本地）
    chrome.storage.sync.set({ color: { whitesomke: '#f5f5f5' } }, function () { 
        console.log("color whitesomke has storaged into color");
    });
	// 定义一个规则
    let rule = {         conditions: [
            new chrome.declarativeContent.PageStateMatcher({
                pageUrl: { schemes: ['http', 'https'] } // 指定匹配的scheme
            })
        ],
        actions: [new chrome.declarativeContent.ShowPageAction()] // 指定行为
};
// 页面更改时，先移除规则然后再添加规则，避免重复移除或添加
    chrome.declarativeContent.onPageChanged.removeRules(undefined, function () {
        chrome.declarativeContent.onPageChanged.addRules([rule]);
    });
});

options.html, options.js 选项页面

扩展的设置页面，与传统HTML无异，主要在于 options.js 中的操作。

popup.html, popup.js 弹出菜单页面

弹出菜单页面，一般为按钮或文字组成，用户交互入口，同样关键是 popup.js 中的操作。

向网页中注入JavaScript与CSS

1. 可以通过 chrome.tabs 向网页中注入（inject）CSS 或者 JavaScript 代码，参考 insertCSS 以及 executeScript。
2. 也可以通过在manifest中声明content_scripts方法注入，详情可以参考chrome官方文档，示例：

   {
   	"manifest_version": 2,
   	"content_scripts":{
   		"matches":["https://*/*"],
   		"css":["content_css.css"],
   		"js":["content_script.js"]
   	}
   }
   

``

数据存储

如前所述，chrome.storage 可以用来存储数据到本地中，删除扩展后会清除数据。

网页，扩展消息传递

主要通过 chrome.tabs.sendMessage 以及 chrome.runtime.onMessage.addListener 两个实现消息传递。后者可以通过 JavaScript代码注入 的方式将监听器代码注入到网页中，前者可以在扩展的任意 JavaScript 文件中执行，详情可参考官方文档 。