vue 开发谷歌浏览器插件

1.什么是谷歌浏览器

谷歌浏览器插件由**background scripts , content scripts , page , UI elements **和各种逻辑文件,manifest.json组成。扩展组件是使用 Web 开发技术创建的：HTML、CSS 和 JavaScript和图片等资源组成的一个压缩包。扩展的组件将取决于其功能，并且可能不需要每个选项。

2.谷歌浏览器插件能力

谷歌浏览器插件提供了很多实用API供我们使用：

  书签控制；

  下载控制；

  窗口控制；

  标签控制；

  网络请求控制、事件监听；

  自定义原生菜单；

  通信机制；

 等等；

3.配置文件（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://*/*”], // “” 表示匹配所有地址 “matches”: [“”], // 多个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”}复制代码4.vue-cli3开发谷歌浏览器插件实践

搭建环境

用vue-cli3创建一个项目： vue create vue-extension。进入创建好的项目cd vue-extension安装插件 vue-cli-plugin-chrome-ext：npm ivue-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.jsconst 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.jsconst 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”)    }])  )}复制代码5.开发

谷歌历览器插件没有严格的项目结构要求，只需要有manifest.json即可，也不需要专门的开发环境和编辑器，普通的前端开发工具就可以。首先点击谷歌浏览器右上角菜单->更多工具->扩展程序进入 扩展程序管理页面,打开开发者模式，然后加载你打包好的文件，就可以加载你的插件了