vue 开发谷歌浏览器插件

什么是谷歌浏览器

谷歌浏览器插件由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 即可，也不需要专门的开发环境和编辑器，普通的前端开发工具就可以。首先点击谷歌浏览器右上角菜单->更多工具->扩展程序进入 扩展程序管理页面，打开开发者模式，然后加载你打包好的文件，就可以加载你的插件了。

原文链接：点击这里