溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家介紹使用Vue怎么實現一個Chrome瀏覽器插件，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。
Vue具體輕量級框架、簡單易學、雙向數據綁定、組件化、數據和結構的分離、虛擬DOM、運行速度快等優勢，Vue中頁面使用的是局部刷新，不用每次跳轉頁面都要請求所有數據和dom，可以大大提升訪問速度和用戶體驗。
基本知識
瀏覽器插件官方的說法叫擴展程序，允許你為瀏覽器增加各種功能，但不需要深入研究瀏覽器本身的代碼。你可以用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": [
"https://secure.flickr.com/"
],
"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",
"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> <h2>Hello world!</h2> </body> </html>
打開瀏覽器插件頁面，右上角打開開發者模式，加載插件目錄。
這時我們的第一個插件就好了，點擊插件圖標就可以顯示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/content-security-policy.com/
接下來，把頁面內的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 。
完整的例子
不想推薦文檔什么的，自己需要會去搜索的。那么有沒有一個完整的例子？當然有啦，去看我的github吧，覺得不錯就點個贊。
https://github.com/tobyqin/chrome_vue_ext_demo
關于使用Vue怎么實現一個Chrome瀏覽器插件就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
