什么是谷歌浏览器
谷歌浏览器插件由background scripts, content scripts, page, UI elements 和各种逻辑文件，manifest.json 组成。
扩展组件是使用 Web 开发技术创建的：HTML、CSS 和 JavaScript 和图片等资源组成的一个压缩包。
扩展的组件将取决于其功能，并且可能不需要每个选项。
谷歌浏览器插件能力
谷歌浏览器插件提供了很多实用 API 供我们使用：
- 书签控制；
- 下载控制；
- 窗口控制；
- 标签控制；
- 网络请求控制、事件监听；
- 自定义原生菜单；
- 通信机制；
- 等等；
配置文件（manifest.json）
manifest.json 是一个谷歌浏览器插件必须要有的配置文件，用来配置所有和插件相关的配置，且必须在根目录下面。其中manifest_version、name、version是必须配置的。
{
// 清单文件的版本，这个必须写，而且必须是 2
"manifest_version": 2,
// 插件的名称
"name": "demo",
// 插件的版本
"version": "1.0.0",
// 插件描述
"description": "简单的 Chrome 扩展 demo",
// 图标，一般偷懒全部用一个尺寸的也没问题
"icons":
{
"16": "img/icon.png",
"48": "img/icon.png",
"128": "img/icon.png"
},
// 会一直常驻的后台 JS 或后台页面
"background":
{
// 2 种指定方式，如果指定 JS，那么会自动生成一个背景页
"page": "background.html"
//"scripts": ["js/background.js"]
},
// 浏览器右上角图标设置，browser_action、page_action、app 必须三选一
"browser_action":
{
"default_icon": "img/icon.png",
// 图标悬停时的标题，可选
"default_title": "这是一个示例 Chrome 插件",
"default_popup": "popup.html"
},
// 当某些特定页面打开才显示的图标
/*"page_action":
{
"default_icon": "img/icon.png",
"default_title": "我是 pageAction",
"default_popup": "popup.html"
},*/
// 需要直接注入页面的 JS
"content_scripts":
[
{
//"matches": ["http://*/*", "https://*/*"],
// "<all_urls>" 表示匹配所有地址
"matches": ["<all_urls>"],
// 多个 JS 按顺序注入
"js": ["js/jquery-1.8.3.js", "js/content-script.js"],
// JS 的注入可以随便一点，但是 CSS 的注意就要千万小心了，因为一不小心就可能影响全局样式
"css": ["css/custom.css"],
// 代码注入的时间，可选值： "document_start", "document_end", or "document_idle"，最后一个表示页面空闲时，默认 document_idle
"run_at": "document_start"
},
// 这里仅仅是为了演示 content-script 可以配置多个规则
{
"matches": ["*://*/*.png", "*://*/*.jpg", "*://*/*.gif", "*://*/*.bmp"],
"js": ["js/show-image-content-size.js"]
}
],
// 权限申请
"permissions":
[
"contextMenus", // 右键菜单
"tabs", // 标签
"notifications", // 通知
"webRequest", // web 请求
"webRequestBlocking",
"storage", // 插件本地存储
"http://*/*", // 可以通过 executeScript 或者 insertCSS 访问的网站
"https://*/*" // 可以通过 executeScript 或者 insertCSS 访问的网站
],
// 普通页面能够直接访问的插件资源列表，如果不设置是无法直接访问的
"web_accessible_resources": ["js/inject.js"],
// 插件主页，这个很重要，不要浪费了这个免费广告位
"homepage_url": "https://www.baidu.com",
// 覆盖浏览器默认页面
"chrome_url_overrides":
{
// 覆盖浏览器默认的新标签页
"newtab": "newtab.html"
},
// Chrome40 以前的插件配置页写法
"options_page": "options.html",
// Chrome40 以后的插件配置页写法，如果 2 个都写，新版 Chrome 只认后面这一个
"options_ui":
{
"page": "options.html",
// 添加一些默认的样式，推荐使用
"chrome_style": true
},
// 向地址栏注册一个关键字以提供搜索建议，只能设置一个关键字
"omnibox": { "keyword" : "go" },
// 默认语言
"default_locale": "zh_CN",
// devtools 页面入口，注意只能指向一个 HTML 文件，不能是 JS 文件
"devtools_page": "devtools.html"
}
vue-cli3 开发谷歌浏览器插件实践
搭建环境：
- 用 vue-cli3 创建一个项目：
vue create vue-extension。 - 进入创建好的项目
cd vue-extension - 安装 vue-cli-plugin-chrome-ext 插件：
npm i vue-cli-plugin-chrome-ext - 删除跟谷歌浏览器无用的文件夹：
src/main.js、src/components
运行项目 npm run build-watch 运行开发环境，对修改文件进行实时编译并自动在根目录下生成dist文件夹，然后在浏览器上加载dist文件夹完成插件安装 npm run build，运行生产环境，编译打包，将所有文件进行打包生成dist文件夹。
实时刷新插件 单纯地通过 vue-cli3 更新代码并不能使插件的 background.js、content.js 也跟着更新，因为代码已经加载到浏览器了，浏览器并不会监听这些文件的变化。** crx-hotreload**可以完美实现实时刷新功能，而不用重新手动加载。代码还简单易用，在这里我们直接将代码复制到src/utils/hot-reload.js文件：
// https://github.com/xpl/crx-hotreload/edit/master/hot-reload.js
const filesInDirectory = dir => new Promise(resolve =>
dir.createReader().readEntries(entries =>
Promise.all(entries.filter(e => e.name[0] !== '.').map(e =>
e.isDirectory ?
filesInDirectory(e) :
new Promise(resolve => e.file(resolve))
))
.then(files => [].concat(...files))
.then(resolve)
)
)
const timestampForFilesInDirectory = dir =>
filesInDirectory(dir).then(files =>
files.map(f => f.name + f.lastModifiedDate).join())
const reload = () => {
window.chrome.tabs.query({
active: true,
currentWindow: true
}, tabs => { // NB: see https://github.com/xpl/crx-hotreload/issues/5
if (tabs[0]) {
window.chrome.tabs.reload(tabs[0].id)
}
window.chrome.runtime.reload()
})
}
const watchChanges = (dir, lastTimestamp) => {
timestampForFilesInDirectory(dir).then(timestamp => {
if (!lastTimestamp || (lastTimestamp === timestamp)) {
setTimeout(() => watchChanges(dir, timestamp), 1000) // retry after 1s
} else {
reload()
}
})
}
window.chrome.management.getSelf(self => {
if (self.installType === 'development') {
window.chrome.runtime.getPackageDirectoryEntry(dir => watchChanges(dir))
}
})
然后在 vue.config.js 对热刷新代码进行处理，如果是开发环境的话就将其复制到 assets 文件夹里面：
// vue.config.js const plugins = [ CopyWebpackPlugin([ manifest ]) ]
开发环境将热加载文件复制到 dist 文件夹:
if (process.env.NODE_ENV !== 'production') {
plugins.push(
CopyWebpackPlugin([{
from: path.resolve("src/utils/hot-reload.js"),
to: path.resolve("dist")
}])
)
}
开发
谷歌历览器插件没有严格的项目结构要求，只需要有 manifest.json 即可，也不需要专门的开发环境和编辑器，普通的前端开发工具就可以。首先点击谷歌浏览器右上角菜单->更多工具->扩展程序进入 扩展程序管理页面，打开开发者模式，然后加载你打包好的文件，就可以加载你的插件了。
