官方
https://developer.chrome.com/extensions/devguide
https://developer.chrome.com/extensions/api_index
谷歌瀏覽器插件是一種小型的用于定制瀏覽器體驗的程序献幔。通過插件幢妄，可以自定義瀏覽器的一些行為來適應(yīng)個人的需要，只要你會HTML熊镣，JavaScript，CSS就可以動手開發(fā)瀏覽器插件了。
開發(fā)谷歌瀏覽器插件字旭，就相當于在谷歌瀏覽器的基礎(chǔ)之上進行活動然想，站在巨人的肩膀上莺奔，操作很多東西都方便了一些。有了插件变泄，我們可以定制js爬蟲令哟、屏蔽網(wǎng)頁廣告，網(wǎng)頁實時查詞杖刷，修改http請求頭励饵，等等，能做的東西很多滑燃。
基礎(chǔ)概念與入門案例
廢話少說役听，先看一下插件版的hello world，了解插件的大體結(jié)構(gòu)表窘，麻雀雖小典予，五臟俱全。
- 創(chuàng)建manifest.json乐严。任何插件都必須要有這個文件瘤袖，用來描述插件的元數(shù)據(jù)，插件的配置信息昂验。
{
"name": "Hello Extensions",
"description" : "Hello world Extension",
"version": "1.0",
"manifest_version": 2,
}
定義當前插件的名字捂敌，描述版本號等信息。
注意： version在打包完插件的時候既琴，根據(jù)version判斷插件是否需要更新占婉。
-
給插件加一個瀏覽器右上角的圖標。
image
{
"name": "Hello Extensions",
"description" : "Hello world Extension",
"version": "1.0",
"manifest_version": 2甫恩，
#新增內(nèi)容如下
"browser_action": {
"default_popup": "hello.html",
"default_icon": "hello_extensions.png"
}
}
hello.html
<html>
<body>
<h1>Hello Extensions</h1>
</body>
</html>
- 新增快捷鍵逆济，通過鍵盤快速打開，修改manifest.json
{
"name": "Hello Extensions",
"description" : "Hello world Extension",
"version": "1.0",
"manifest_version": 2,
"browser_action": {
"default_popup": "hello.html",
"default_icon": "hello_extensions.png"
},
#新增內(nèi)容如下
"commands": {
"_execute_browser_action": {
"suggested_key": {
"default": "Ctrl+Shift+F",
"mac": "MacCtrl+Shift+F"
},
"description": "Opens hello.html"
}
}
}
4 permissions 此插件用到的瀏覽器的權(quán)限。常用的權(quán)限如下奖慌。在Chrome 插件API概覽頁面點進去抛虫，會看到此api需要的權(quán)限。
"permissions": [
"tabs",
"storage",
"http://*/*",
"https://*/*"
],
5简僧、contentScripts建椰，運行在瀏覽器網(wǎng)頁的上下文頁面，使用標準的DOM模型涎劈，contentScripts標簽在控制臺可以看到广凸。
"content_scripts": [
{
"matches": [
"http://*/*",
"https://*/*"
],
"js": [
"scripts/contentscript.js"
],
"run_at": "document_end",
"all_frames": false
}
],
6、 background后臺頁面蛛枚，在瀏覽器前臺看不到的頁面谅海，可以以后臺進程的方式進行運行，也可以以事件的方式運行蹦浦。需要打開擴展程序的開發(fā)者模式才能看到扭吁。
"background": {
"scripts": [
"scripts/background.js"
]
},
更詳細的manifest.json文件配置信息請參考官方manifest.json文件格式
7、 常用到的開發(fā)方式說明
一般我們會在瀏覽器的前臺頁面盲镶，也就是直接打開控制臺就可以看到的擴展程序侥袜，通過contentScript指定加載的程序。在這里監(jiān)聽當前瀏覽器當前打開的頁面溉贿，然后做一些與用戶交互的東西枫吧。
在前臺的交互，以消息的形式傳遞到background指定的腳本宇色。
contentScript執(zhí)行的程序一般可以跨域九杂，瀏覽器的安全限制，而background指定的腳本可以跨域運行宣蠕，獲取所有瀏覽器cookie信息等等例隆。
交互案例，詳細的操作看一下項目的腳手架中。
chrome.runtime.sendMessage(string extensionId, any message, object options, function responseCallback)
chrome.runtime.onMessage.addListener(function callback)
- 在前后臺可以通信之后，很多功能可以依賴第三方的庫嘉汰，當前我們參考的腳手架，可以直接使用npm安裝第三方庫唱逢。可以多花點心思研究插件的具體結(jié)構(gòu)屋休。
使用腳手架工具
https://gitee.com/XinGithub/generator-chrome-extension
npm install --global yo gulp-cli bower
# Install the generator:
npm install -g generator-chrome-extension
# Make a new directory, and `cd` get into it:
mkdir my-new-chrome-extension && cd $_
# Generate a new project
yo chrome-extension
//不要使用sass
//Cannot download "https://github.com/sass/node-sass/releases/download/v3.13.1/win32-x64-64_binding.node":
# Transform updated source written by ES2015 (default option)
gulp babel
# or Using watch to update source continuously
gulp watch //修改文件后會自動更新到插件
# Make a production version extension
gulp build
//cannot find module 'eslint-scope'
npm i eslint-scope --save
. 安裝瀏覽器擴展
進入擴展程序
加載項目目錄下的app的文件夾坞古。
開發(fā)時gulp watch 即可同步
修改app下的文件，導(dǎo)入插件也是該文件夾博投，script腳本修改script.bable下的，babel命令會copy到scripts下
