這篇文章給大家介紹使用Vue怎么實(shí)現(xiàn)一個(gè)Chrome瀏覽器插件，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。
創(chuàng)新互聯(lián)公司為您提適合企業(yè)的網(wǎng)站設(shè)計(jì)?讓您的網(wǎng)站在搜索引擎具有高度排名，讓您的網(wǎng)站具備超強(qiáng)的網(wǎng)絡(luò)競爭力！結(jié)合企業(yè)自身，進(jìn)行網(wǎng)站設(shè)計(jì)及把握，最后結(jié)合企業(yè)文化和具體宗旨等，才能創(chuàng)作出一份性化解決方案。從網(wǎng)站策劃到網(wǎng)站建設(shè)、成都網(wǎng)站制作， 我們的網(wǎng)頁設(shè)計(jì)師為您提供的解決方案。
Vue具體輕量級(jí)框架、簡單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運(yùn)行速度快等優(yōu)勢，Vue中頁面使用的是局部刷新，不用每次跳轉(zhuǎn)頁面都要請求所有數(shù)據(jù)和dom，可以大大提升訪問速度和用戶體驗(yàn)。
基本知識(shí)
瀏覽器插件官方的說法叫擴(kuò)展程序，允許你為瀏覽器增加各種功能，但不需要深入研究瀏覽器本身的代碼。你可以用HTML，CSS和JavaScript創(chuàng)建新的擴(kuò)展程序，如果你曾經(jīng)寫過網(wǎng)頁，那么寫一個(gè)插件是非常輕松的事情。
常見的插件一般就是地址欄后面的一個(gè)圖標(biāo)，點(diǎn)擊后給你當(dāng)前網(wǎng)頁提供各種功能，或者在你點(diǎn)擊網(wǎng)頁右鍵時(shí)彈出額外的菜單。
程序目錄結(jié)構(gòu)
最簡單的擴(kuò)展程序只需要3個(gè)文件，或者更少。
my-addon |- manifest.json |- icon.png └─ popup.html
manifest.json：清單文件，用來描述插件本身，必須。
icon.png：圖標(biāo)文件，如果你不想用默認(rèn)圖標(biāo)這也是必須的。
popup.html：算是插件的功能頁吧，你至少得有點(diǎn)功能才有存在的意義吧。
當(dāng)然上面的例子是最精簡的情況了，一般的插件會(huì)有多個(gè)html，還有js目錄，css目錄等等，你可以把插件當(dāng)成一個(gè)靜態(tài)網(wǎng)站，唯一的區(qū)別是多了一個(gè)manifest文件用來描述這個(gè)靜態(tài)網(wǎng)站。
清單文件示例
下面是一個(gè)精簡版的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í)，我們速度來個(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":
[
""
],
"homepage_url": "https://github.com/tobyqin/"
} 再補(bǔ)一下圖標(biāo)文件和popup.html。
Hello world!
打開瀏覽器插件頁面，右上角打開開發(fā)者模式，加載插件目錄。
這時(shí)我們的第一個(gè)插件就好了，點(diǎn)擊插件圖標(biāo)就可以顯示Hello World。
把Vue加進(jìn)來
好像很容易嘛，我們直接用cdn的Vue，改造一下popup.html。
