Chrome瀏覽器插件開發心得

1、學習基礎知識

從如今的經驗來看，基本只須要看一下，360翻譯的開發文檔便可，開發出一個適合大部分人要求的插件了。

文檔：http://open.chrome.360.cn/extension_dev/overview.html

2、實戰經驗

先給出我開發的XPlayer的配置，下面的經驗可參考。

{
「name」: 「XPlayer 「,
「version」: 「0.2″,
「description」: 「XP(XPlayer),豆瓣音樂播放器」,
「manifest_version」: 2,
「homepage_url」: 「http://www.xiongchuan.org/xplayer」,
「icons」:{
「16″ : 「icon_16.png」,
「48″ : 「icon_48.png」,
「128″ : 「icon_128.png」
},
「browser_action」: {
「default_icon」 : 「icon_128.png」,
「default_title」 : 「XPlayer」,
「default_popup」 : 「popup.htm」
},
「background」:{
「page」:」background.htm」
},
「permissions」: ["tabs"],
「content_scripts」:[
{
"matches":["http://*.douban.com/*"],
「js」:["js/jquery.min.js","js/content_scripts.js"]
}
]

 

}

一、權限問題

              Refused to execute JavaScript URL because it violates the following Content Security Policy directive: 「script-src ‘self’ chrome-extension-resource:」.

通常相似這樣的報錯有這樣兩種可能：

第1、在你的manifest.json裏面要加入 」permissions」: ["tabs","https://*/*"] 這樣的配置

第2、在你的html代碼裏面（如popup.htm,background.htm），a標籤之類的在onclick=」" ，href=」javascript:;」加了Inline(內斂)js腳本。在實際使用中，A標籤的href=」javasript:;」很常見，即便錯誤控制檯有這樣的報警也不用理會。

二、生命週期

a. popup.htm 頁面的變量會隨着popup.htm消失而消失

b.background.htm 會一直存在，直到瀏覽器關閉，可是若是你安裝了 Google的新聊天工具：」環聊」，它默認會使Chrome在後臺運行，就是說即便你關了瀏覽器，只要環聊還開着，實際上background.htm也是存在的。

三、調試

popup.htm 當彈出時 可使用Chrome的開發者工具調試。

background.htm 能夠 chrome://chrome/extensions/ 插件管理器界面 ，點擊background.htm連接打開開發者工具

 

四、消息交互

popup.htm,background.htm,content_scripts 之間大致上分爲兩種交互方式。

a.直接調用

popup.htm與background.htm 裏面的數據能夠直接調用，例如：

popup.htm調用background.htm的Window對象：var  backgroundWindow = chrome.extension.getBackgroundPage();

此時，popup.htm頁面就擁有了background.htm的整個對象，只須要獲取一次，若是background.htm裏面有計劃任務，數據一直在變，能夠經過backgroundWindow變量，直接使用。可是若是background.htm裏面的文檔也在變化，popup.htm想要直接使用background.htm文檔頁面，就不行，必需要實時刷新文檔頁面，能夠採用定時器實時的把background.htm的頁面，刷新到popup.htm頁面來。

setInterval(function(){
document.body.innerHTML = bgWindow.document.body.innerHTML;
popup.BindEvents();
},1000);

b.消息通訊

消息通訊，涉及到兩方，例如：A和B。

A要給B發消息，則須要使用 chrome.extension.sendRequest(msg); B要接收A的消息，就必需要設置接收器

chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {}));

一樣若是B要給A發消息也應該和上面的流程同樣。

對於寫過桌面程序、Android、Ios程序的人來講，這很好理解。對於純作web的人，或新手來講估計不大知道這回事。在此說明一下。更多的見文檔 http://open.chrome.360.cn/extension_dev/messaging.html

PS：popup.htm也能夠和background.htm進行消息通訊的方式交互。

五、部署

a.直接拖拽安裝

360極速瀏覽器、金山獵豹瀏覽器 支持的很好

Windows下的Chrome瀏覽器，會提示安全問題，沒法安裝，chrome://chrome/extensions/ 在這個頁面，勾選開發者模式便可。

b.google web store安裝

chrome,360極速，獵豹都支持Google的web store。

PS：如今註冊成爲google的web store開發者，須要5美圓認證，這裏你們不要着急，只要你用支持VISA的信用卡，而後網上搜索一個美國的地址，便可以開通。

 

到此、把我這幾天開發插件的經驗，簡單總結一下。

簡單說下個人插件Git地址：https://gitcafe.com/xiongchuan86/XPlayer/