vue 开发谷歌浏览器插件

2,677 阅读4分钟

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://*/*"],
 // "<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"
}

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.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")
    }])

  )
}

5.开发

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

WechatIMG37.png

WechatIMG40.png

WechatIMG39.png