用VueJS写一个Chrome浏览器插件的实现方法

来源：懂视网责编：小采时间：2020-11-27 22:00:28

用VueJS写一个Chrome浏览器插件的实现方法

用VueJS写一个Chrome浏览器插件的实现方法:浏览器基本已经天下大统了，放眼望去都是Chromium的天下。那么，能写一个浏览器插件也算是一种回报率不错的技能。基本知识浏览器插件官方的说法叫扩展程序，允许你为浏览器增加各种功能，但不需要深入研究浏览器本身的代码。你可以用HTML，CSS和Java

推荐度：

点击下载本文 文档为doc格式

导读用VueJS写一个Chrome浏览器插件的实现方法:浏览器基本已经天下大统了，放眼望去都是Chromium的天下。那么，能写一个浏览器插件也算是一种回报率不错的技能。基本知识浏览器插件官方的说法叫扩展程序，允许你为浏览器增加各种功能，但不需要深入研究浏览器本身的代码。你可以用HTML，CSS和Java

默认情况下，浏览器插件权限是非常低的，不允许访问除了插件本身的文件以外的文件，不能调用页面内脚本（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/content-security-policy.com/

接下来，把页面内的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/chrome_vue_ext_demo