快捷導(dǎo)航

用VueJS寫一個(gè)Chrome瀏覽器插件的實(shí)現(xiàn)方法

更新時(shí)間：2019年02月27日 15:23:32 作者：betacat

這篇文章主要介紹了用VueJS寫一個(gè)Chrome瀏覽器插件的實(shí)現(xiàn)方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧

瀏覽器基本已經(jīng)天下大統(tǒng)了，放眼望去都是Chromium的天下。那么，能寫一個(gè)瀏覽器插件也算是一種回報(bào)率不錯(cuò)的技能。

基本知識(shí)

瀏覽器插件官方的說(shuō)法叫擴(kuò)展程序，允許你為瀏覽器增加各種功能，但不需要深入研究瀏覽器本身的代碼。你可以用HTML，CSS和JavaScript創(chuàng)建新的擴(kuò)展程序，如果你曾經(jīng)寫過網(wǎng)頁(yè)，那么寫一個(gè)插件是非常輕松的事情。

常見的插件一般就是地址欄后面的一個(gè)圖標(biāo)，點(diǎn)擊后給你當(dāng)前網(wǎng)頁(yè)提供各種功能，或者在你點(diǎn)擊網(wǎng)頁(yè)右鍵時(shí)彈出額外的菜單。

程序目錄結(jié)構(gòu)

最簡(jiǎn)單的擴(kuò)展程序只需要3個(gè)文件，或者更少。

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

manifest.json：清單文件，用來(lái)描述插件本身，必須。
icon.png：圖標(biāo)文件，如果你不想用默認(rèn)圖標(biāo)這也是必須的。
popup.html：算是插件的功能頁(yè)吧，你至少得有點(diǎn)功能才有存在的意義吧。

當(dāng)然上面的例子是最精簡(jiǎn)的情況了，一般的插件會(huì)有多個(gè)html，還有js目錄，css目錄等等，你可以把插件當(dāng)成一個(gè)靜態(tài)網(wǎng)站，唯一的區(qū)別是多了一個(gè)manifest文件用來(lái)描述這個(gè)靜態(tài)網(wǎng)站。

清單文件示例

下面是一個(gè)精簡(jiǎn)版的manifest.json。

{
 "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"
 }
}

看上去是不是很直觀，名字，版本，描述，權(quán)限，行為。如果要深入再查查官方文檔就OK了。

Hello World插件

有了基礎(chǔ)知識(shí)，我們速度來(lái)個(gè)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/"
}

再補(bǔ)一下圖標(biāo)文件和popup.html。

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

打開瀏覽器插件頁(yè)面，右上角打開開發(fā)者模式，加載插件目錄。

這時(shí)我們的第一個(gè)插件就好了，點(diǎn)擊插件圖標(biāo)就可以顯示Hello World。

把Vue加進(jìn)來(lái)

好像很容易嘛，我們直接用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>

不用卸載剛才安裝的插件目錄，只要再點(diǎn)擊一下插件按鈕就會(huì)自動(dòng)加載最新的代碼。不過好像不對(duì)，和期望的結(jié)果不一樣。

而且注意看插件頁(yè)面，出現(xiàn)錯(cuò)誤了。

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.

默認(rèn)情況下，瀏覽器插件權(quán)限是非常低的，不允許訪問除了插件本身的文件以外的文件，不能調(diào)用頁(yè)面內(nèi)腳本（inline script），也不能使用eval之類的函數(shù)。

你需要在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' ;"
}

因?yàn)檫@個(gè)CSP寫起來(lái)實(shí)在不怎么友好，偉大的網(wǎng)友做了一個(gè)工具可以幫你一把。

https://github.com/foundeo/content-security-policy.com/

接下來(lái)，把頁(yè)面內(nèi)的script內(nèi)容搬到單獨(dú)的文件。

// 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!'
  }
})

刷新一下插件，搞定了。

如何調(diào)試插件

調(diào)試插件和調(diào)試一個(gè)普通的網(wǎng)頁(yè)一樣簡(jiǎn)單，右鍵選擇審查元素就好了。

包括插件的配置頁(yè)面，新彈出的頁(yè)面等等，都可以用一樣的方法調(diào)試。

如何發(fā)布插件

當(dāng)你完成插件開發(fā)后，在啟用開發(fā)者模式的插件中心就可以看到打包插件按鈕，這個(gè)按鈕可以幫你快速打包c(diǎn)rx文件，第一次打包你不需要提供密鑰，它會(huì)幫你生成一個(gè)密鑰，之后的版本升級(jí)你需要用同一個(gè)密鑰打包，否則就被認(rèn)為是一個(gè)新的插件了，所以切記保存好密鑰。

拿著打包好的crx文件你就可以到商店發(fā)布啦，不過發(fā)布到谷歌商店是要交錢的，一年9.9美刀的開發(fā)者會(huì)員。國(guó)內(nèi)的各種商店收不收費(fèi)不知道。

比較惡心的是，如果你的插件沒有在谷歌瀏覽器的商店里上架，Chrome瀏覽器是不認(rèn)的，以前還可以拖到插件頁(yè)面安裝，現(xiàn)在怎么都繞不過去了。但基于Chromium開發(fā)的第三方瀏覽器還是可以裝的，比如Opera，QQ，360等等。

一些技巧

他山之石

可能你要做的插件別人已經(jīng)做過了，或者你想借鑒別人的插件，有兩個(gè)方法。

右鍵審查別人的插件頁(yè)面，看看代碼怎么工作的。
安裝一個(gè)下載crx的插件，然后把別人的插件從商店下載到本地，重命名為zip并解壓，就可以看到源碼了。

當(dāng)然啦，別人的源碼可能做過混淆加密。

插件頁(yè)面大小

如果你的插件會(huì)彈出一個(gè)頁(yè)面，瀏覽器默認(rèn)會(huì)根據(jù)內(nèi)容自適應(yīng)頁(yè)面大小，就像上面例子里的那個(gè)hello world，很丑是吧。一般插件頁(yè)面都是限制body高度和寬度的，這樣才不會(huì)歪。

安全請(qǐng)求

現(xiàn)在很難找到不是https的頁(yè)面里，所以你的插件里如果會(huì)往后臺(tái)發(fā)送請(qǐng)求的話，也是需要支持https協(xié)議的，否則會(huì)被攔截的。

插件配置

如果你的插件是可配置的，怎么保存配置信息呢？直接用localStorage就行了。localStorage對(duì)每個(gè)站點(diǎn)都是獨(dú)立的，每一個(gè)插件可以看成獨(dú)立的站點(diǎn)，所以當(dāng)你在插件里調(diào)用localStorage對(duì)象時(shí)就是當(dāng)前插件的localStorage。如果你希望配置是可同步的，那么請(qǐng)考慮chrome.storage對(duì)象，里面提供了storage.local 和 storage.sync 。

完整的例子

不想推薦文檔什么的，自己需要會(huì)去搜索的。那么有沒有一個(gè)完整的例子？當(dāng)然有啦，去看我的github吧，覺得不錯(cuò)就點(diǎn)個(gè)贊。

https://github.com/tobyqin/chrome_vue_ext_demo