用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 。