⽤VueJS写⼀个Chrome浏览器插件的实现⽅法
浏览器基本已经天下⼤统了，放眼望去都是Chromium的天下。那么，能写⼀个浏览器插件也算是⼀种回报率不错的技能。
基本知识
浏览器插件官⽅的说法叫扩展程序，允许你为浏览器增加各种功能，但不需要深⼊研究浏览器本⾝的代码。你可以⽤HTML，CSS和JavaScript创建新的扩展程序，如果你曾经写过⽹页，那么写⼀个插件是⾮常轻松的事情。
常见的插件⼀般就是地址栏后⾯的⼀个图标，点击后给你当前⽹页提供各种功能，或者在你点击⽹页右键时弹出额外的菜单。
程序⽬录结构
最简单的扩展程序只需要3个⽂件，或者更少。
my-addon
|- manifest.json
|- icon.png
└─ popup.html
manifest.json：清单⽂件，⽤来描述插件本⾝，必须。
icon.png：图标⽂件，如果你不想⽤默认图标这也是必须的。
popup.html：算是插件的功能页吧，你⾄少得有点功能才有存在的意义吧。
当然上⾯的例⼦是最精简的情况了，⼀般的插件会有多个html，还有js⽬录，css⽬录等等，你可以把插件当成⼀个静态⽹站，唯⼀的区别是多了⼀个manifest⽂件⽤来描述这个静态⽹站。
清单⽂件⽰例
下⾯是⼀个精简版的manifest.json。
{
"manifest_version": 2,
"name": "One-click Kittens",
"description": "This extension demonstrates a browser action with kittens.",
"version": "1.0",
"permissions": [
"secure.flickr/"
],
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
}
}
看上去是不是很直观，名字，版本，描述，权限，⾏为。如果要深⼊再查查官⽅⽂档就OK了。
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",
chrome浏览器最新版
"128": "img/icon.png"
},
"browser_action":
{
"default_icon": "img/icon.png",
"default_title": "Hello World",
"default_popup": "popup.html"
},
"permissions":
[
"<all_urls>"
]
,
"homepage_url": "github/tobyqin/"
}
再补⼀下图标⽂件和popup.html。
<!DOCTYPE html>
<html>
<body>
<h1>Hello world!</h1>
</body>
</html>
打开浏览器插件页⾯，右上⾓打开开发者模式，加载插件⽬录。
这时我们的第⼀个插件就好了，点击插件图标就可以显⽰Hello World。
把Vue加进来
好像很容易嘛，我们直接⽤CDN的Vue，改造⼀下popup.html。
<!DOCTYPE html>
<html>
<body>
<div id="app">
{{ message }}
</div>
<script src="cdn.bootcss/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 'cdn.bootcss/vue/2.6.6/vue.js' because it violates the following C
ontent 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 ('') 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' cdn.bootcss; object-src 'self' ;"
}
因为这个CSP写起来实在不怎么友好，伟⼤的⽹友做了⼀个⼯具可以帮你⼀把。
接下来，把页⾯内的script内容搬到单独的⽂件。
// popup.html
<!DOCTYPE html>
<html>
<body>
<div id="app">
{{ message }}
</div>
<script src="cdn.bootcss/vue/2.6.6/vue.js"></script>
<script src="app.js"></script>
</body>
</html>
// app.js
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
刷新⼀下插件，搞定了。
如何调试插件
调试插件和调试⼀个普通的⽹页⼀样简单，右键选择审查元素就好了。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。