用VueJS写一个Chrome浏览器插件

时间 2019-11-06

标签 vuejs 一个 chrome 浏览器插件栏目 Chrome 繁體版

原文原文链接

浏览器基本已经天下大统了，放眼望去都是Chromium的天下。那么，能写一个浏览器插件也算是一种回报率不错的技能。css

基本知识

浏览器插件官方的说法叫扩展程序，容许你为浏览器增长各类功能，但不须要深刻研究浏览器自己的代码。你能够用HTML，CSS和JavaScript建立新的扩展程序，若是你曾经写过网页，那么写一个插件是很是轻松的事情。html

常见的插件通常就是地址栏后面的一个图标，点击后给你当前网页提供各类功能，或者在你点击网页右键时弹出额外的菜单。vue

程序目录结构

最简单的扩展程序只须要3个文件，或者更少。git

my-addon
  |- manifest.json
  |- icon.png
  └─ popup.html

manifest.json：清单文件，用来描述插件自己，必须。
icon.png：图标文件，若是你不想用默认图标这也是必须的。
popup.html：算是插件的功能页吧，你至少得有点功能才有存在的意义吧。

固然上面的例子是最精简的状况了，通常的插件会有多个html，还有js目录，css目录等等，你能够把插件当成一个静态网站，惟一的区别是多了一个manifest文件用来描述这个静态网站。github

清单文件示例

下面是一个精简版的manifest.json。chrome

{
  "manifest_version": 2,

  "name": "One-click Kittens",
  "description": "This extension demonstrates a browser action with kittens.",
  "version": "1.0",

  "permissions": [
    "https://secure.flickr.com/"
  ],
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  }
}

看上去是否是很直观，名字，版本，描述，权限，行为。若是要深刻再查查官方文档就OK了。json

Hello World插件

有了基础知识，咱们速度来个Hello World，先写manifest.json。浏览器

{
    "manifest_version": 2,
    "name": "Hello",
    "version": "1.0.0",
    "description": "Hello, Chrome extension.",
    "icons":
    {
        "16": "img/icon.png",
        "48": "img/icon.png",
        "128": "img/icon.png"
    },
    "browser_action": 
    {
        "default_icon": "img/icon.png",
        "default_title": "Hello World",
        "default_popup": "popup.html"
    },
    "permissions":
    [
        "<all_urls>"
    ],
    "homepage_url": "https://github.com/tobyqin/"
}

再补一下图标文件和popup.html。安全

<!DOCTYPE html>
<html>
<body>
<h1>Hello world!</h1>
</body>
</html>

打开浏览器插件页面，右上角打开开发者模式，加载插件目录。app

这时咱们的第一个插件就行了，点击插件图标就能够显示Hello World。

把Vue加进来

好像很容易嘛，咱们直接用CDN的Vue，改造一下popup.html。

<!DOCTYPE html>
<html>
<body>
<div id="app">
    {{ message }}
</div>
<script src="https://cdn.bootcss.com/vue/2.6.6/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    })
</script>
</body>
</html>

不用卸载刚才安装的插件目录，只要再点击一下插件按钮就会自动加载最新的代码。不过好像不对，和指望的结果不同。

并且注意看插件页面，出现错误了。

Refused to load the script 'https://cdn.bootcss.com/vue/2.6.6/vue.js' because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem: chrome-extension-resource:". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem: chrome-extension-resource:". Either the 'unsafe-inline' keyword, a hash ('sha256-fMtOu4CF/4bYGHZuo6ltgNQyLcxFW9rBnAYSk3yz53w='), or a nonce ('nonce-...') is required to enable inline execution.

默认状况下，浏览器插件权限是很是低的，不容许访问除了插件自己的文件之外的文件，不能调用页面内脚本（inline script），也不能使用eval之类的函数。

你须要在manifest文件中配置好Content Security Policy（CSP）才能使用Vue。

{
  "manifest_version": 2,
  // ...
  "browser_action": {
    // ...
  },
  "content_security_policy": "style-src 'self' 'unsafe-inline';script-src 'self' 'unsafe-eval' https://cdn.bootcss.com; object-src 'self' ;"
}

由于这个CSP写起来实在不怎么友好，伟大的网友作了一个工具能够帮你一把。

https://github.com/foundeo/co...

接下来，把页面内的script内容搬到单独的文件。

// popup.html

<!DOCTYPE html>
<html>
<body>
<div id="app">
    {{ message }}
</div>

<script src="https://cdn.bootcss.com/vue/2.6.6/vue.js"></script>
<script src="app.js"></script>

</body>
</html>

// app.js

new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!'
    }
})

刷新一下插件，搞定了。

如何调试插件

调试插件和调试一个普通的网页同样简单，右键选择审查元素就行了。

包括插件的配置页面，新弹出的页面等等，均可以用同样的方法调试。

如何发布插件

当你完成插件开发后，在启用开发者模式的插件中心就能够看到打包插件按钮，这个按钮能够帮你快速打包crx文件，第一次打包你不须要提供密钥，它会帮你生成一个密钥，以后的版本升级你须要用同一个密钥打包，不然就被认为是一个新的插件了，因此切记保存好密钥。

拿着打包好的crx文件你就能够到商店发布啦，不过发布到谷歌商店是要交钱的，一年9.9美刀的开发者会员。国内的各类商店收不收费不知道。

比较恶心的是，若是你的插件没有在谷歌浏览器的商店里上架，Chrome浏览器是不认的，之前还能够拖到插件页面安装，如今怎么都绕不过去了。但基于Chromium开发的第三方浏览器仍是能够装的，好比Opera，QQ，360等等。

一些技巧

他山之石

可能你要作的插件别人已经作过了，或者你想借鉴别人的插件，有两个方法。

右键审查别人的插件页面，看看代码怎么工做的。
安装一个下载crx的插件，而后把别人的插件从商店下载到本地，重命名为zip并解压，就能够看到源码了。

固然啦，别人的源码可能作过混淆加密。

插件页面大小

若是你的插件会弹出一个页面，浏览器默认会根据内容自适应页面大小，就像上面例子里的那个hello world，很丑是吧。通常插件页面都是限制body高度和宽度的，这样才不会歪。

安全请求

如今很难找到不是https的页面里，因此你的插件里若是会日后台发送请求的话，也是须要支持https协议的，不然会被拦截的。

插件配置

若是你的插件是可配置的，怎么保存配置信息呢？直接用localStorage就好了。localStorage对每一个站点都是独立的，每个插件能够当作独立的站点，因此当你在插件里调用localStorage对象时就是当前插件的localStorage。若是你但愿配置是可同步的，那么请考虑chrome.storage对象，里面提供了storage.local 和 storage.sync 。

完整的例子

不想推荐文档什么的，本身须要会去搜索的。那么有没有一个完整的例子？固然有啦，去看个人github吧，以为不错就点个赞。

https://github.com/tobyqin/ch...

关于做者：
Toby Qin, Python 技术爱好者，目前从事测试开发相关工做，转载请注明原文出处。

欢迎关注个人博客 https://betacat.online，你能够到个人公众号中去当吃瓜群众。