这篇文章给大家介绍一下使用Vue怎么实现一个浏览器插件，内容非常详细，感兴趣的小伙伴可以参考帖子，希望对大家能有所帮助。
Vue 的优点
Vue具体轻量级框架、简单易学、结构数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势，Vue中页面是局部刷新，不用每次跳转页面都要请求所有数据和dom，可以大幅度提升访问和用户体验。
基本知识
浏览器插件官方的说法叫扩展程序，允许你为浏览器增加各种功能，但不需要深入研究浏览器本身的代码。你可以用HTML，CSS创建新的扩展程序，如果你曾经写过网页，那么写一个插件是非常轻松的事情。
常见的插件一般就是地址栏后面的一个图标，点击后给你当前网页提供各种功能，或者在你点击网页右键时弹出额外的菜单。
程序目录结构
最简单的扩展程序只需要3个文件，或者更少。
我的插件 |- manifest.json |- 图标.png └─ popup.html
当然上面的例子是最专业的情况了，一般的插件会有多个html，还有js目录，css目录等等，你可以把插件当成一个静态网站，唯一的区别是多了一个文件来描述这个静态网站。
清单文件示例
下面是一个专业版的.json。
{
“manifest_version”：2，
"name": "一键小猫",
"description": "此扩展演示了小猫的浏览器操作。",
"版本"："1.0"，
"权限": [
“https://secure.flickr.com/”
]，
“浏览器操作”：{
"default_icon": "icon.png",
"default_popup": "popup.html"
}
}
看来不是很欣赏，名字，版本，描述，权限，行为。如果要深入再查官方文档就OK了。
你好世界插件
有了基础知识，我们速度来个Hello World，先写.json。
{
“manifest_version”：2，
“name”：“你好”，
"版本"："1.0.0"，
"description": "您好，Chrome 扩展程序。",
“图标”：
{
"16": "img/icon.png",
"48": "img/icon.png",
"128": "img/icon.png"
}，
“浏览器操作”：
{
"default_icon": "img/icon.png",
"default_title": "你好，世界",
"default_popup": "popup.html"
}，
“权限”：
[
“ ”
]，
"homepage_url": "https://github.com/tobyqin/"
}
再补一下图标文件和popup.html。
你好世界！
打开浏览器插件页面，右上角打开开发者模式，加载插件目录。
现在我们的第一个插件就完成了，点击插件图标就可以显示Hello World。
把Vue加进来
看起来很简单嘛，我们直接用CDN的Vue，改造一下popup.html。
{{ 信息 }}<script src="https://cdn.bootcss.com/vue/2.6.6/vue.js " > var app = new Vue({ el: '#app', 数据： { 消息：“你好，Vue！” } })
不用卸载刚才安装的插件目录，只要再点击一下插件按钮就会自动加载最新的代码。不过好像没有，和期望的结果不一样。
注意还要看插件页面，出现错误了。
加载'#39;它：“-src'self'blob::-:”。请注意，未设置'-src-elem'，因此'-src'被用作。
对它来说：“-src'self'blob::-:”。'-'、哈希值（'-/='）或随机数（'nonce-...'）是。
默认情况下，浏览器插件权限是非常低的，不允许访问除了插件本身的文件以外的文件，不能调用页面内（脚本），也不能使用eval之类的函数。
你需要在文件中配置好（CSP）才能使用Vue。
{
“manifest_version”：2，
// ...
“浏览器操作”：{
// ...
}，
"content_security_policy": "style-src'self''unsafe-inline';script-src'self''unsafe-eval'https://cdn.bootcss.com;object-src'self';"
}
因为这个 CSP 写起来根本不怎么友好，伟大的网友做了一个可以帮助解决的工具。
接下来，把页面内的内容搬到单独的文件中。
// 弹出窗口.html{{ 信息 }}//应用程序.js 新的 Vue({ el: '#app', 数据： { 消息：“你好，Vue！” } })
刷新一下插件，搞定了。
如何调试插件
调试插件和调试一个普通的网页一样简单，右键选择审查就好了。
包括插件的配置页面，新弹出的页面等等，都可以使用相同的方法调试。
如何发布插件
当你完成插件开发后，在启用开发者模式的插件中心就可以备份插件按钮，这个按钮可以快速救援资源crx文件，第一次资源你不需要提供快捷键，它会帮你生成一个快捷键，之后的版本升级你需要用同一个快捷键备份，不然就被看到认为是一个新的插件了，所以切记保存好快捷键。
压缩拥有好的国内crx文件你就可以到商店发布啦，不过发布到谷歌商店是要交钱的，一年9.9美刀的开发者会员。各种商店收不收费不知道。
比较恶心的是，如果你的插件没有在谷歌浏览器的商店里上架，浏览器是不认的，以前还可以拖到插件页面安装，现在怎么都走了不过。但基于开发的第三方浏览器还是可以安装的，比如Opera，QQ，360等等。
一些技巧
他山之石
也许你想做的插件已经参加了，或者你想收集别人的插件，有两个方法。
右键审查其他的插件页面，看看代码怎么工作的。
安装一个下载crx的插件，然后把其他的插件从商店下载到本地，重命名为zip并解压，就可以看到源码了。
当然啦，其他的源码可能会混淆加密。
插件页面大小
如果你的插件会弹出一个页面，浏览器默认会根据内容自适应页面大小，就像上面例子里的那个hello world，很丑吧。一般插件页面限制都是body高度和宽度的，这样才不会歪。
