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

來源：懂視網(wǎng) 責編：小采時間：2020-11-27 22:00:28

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

用VueJS寫一個Chrome瀏覽器插件的實現(xiàn)方法:瀏覽器基本已經(jīng)天下大統(tǒng)了，放眼望去都是Chromium的天下。那么，能寫一個瀏覽器插件也算是一種回報率不錯的技能。基本知識瀏覽器插件官方的說法叫擴展程序，允許你為瀏覽器增加各種功能，但不需要深入研究瀏覽器本身的代碼。你可以用HTML，CSS和Java

推薦度：

點擊下載本文 文檔為doc格式

導讀用VueJS寫一個Chrome瀏覽器插件的實現(xiàn)方法:瀏覽器基本已經(jīng)天下大統(tǒng)了，放眼望去都是Chromium的天下。那么，能寫一個瀏覽器插件也算是一種回報率不錯的技能。基本知識瀏覽器插件官方的說法叫擴展程序，允許你為瀏覽器增加各種功能，但不需要深入研究瀏覽器本身的代碼。你可以用HTML，CSS和Java

默認情況下，瀏覽器插件權(quán)限是非常低的，不允許訪問除了插件本身的文件以外的文件，不能調(diào)用頁面內(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' ;"
}

因為這個CSP寫起來實在不怎么友好，偉大的網(wǎng)友做了一個工具可以幫你一把。

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

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

// 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)試一個普通的網(wǎng)頁一樣簡單，右鍵選擇審查元素就好了。

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

如何發(fā)布插件

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

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

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

一些技巧

他山之石

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

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

當然啦，別人的源碼可能做過混淆加密。

插件頁面大小

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

安全請求

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

插件配置

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

完整的例子

不想推薦文檔什么的，自己需要會去搜索的。那么有沒有一個完整的例子？當然有啦，去看我的github吧，覺得不錯就點個贊。

https://github.com/tobyqin/chrome_vue_ext_demo