chrome瀏覽器插件開發經驗（一）

最近在進行chrome瀏覽器插件的開發，一些小的經驗總結隨筆。

一、首先，推薦360的chrome插件開發文檔：http://open.chrome.360.cn/extension_dev/overview.html

二、從chrome18開始日後，chrome瀏覽器插件開發的 manifest.json 文件中的 "manifest_version": 2 屬性就必須被顯式（固定）的聲明瞭。

三、chrome插件開發，很大程度上須要chrome.* API 的支持，附上chrome歷史版本的API更新記錄：http://lmk123.duapp.com/chrome/extensions/whats_new.html

四、若是須要下載不一樣的chrome版本進行安裝測試，推薦一個下載網址：http://www.mykurong.com/chrome/

五、爲chrome網頁添加右鍵選項：

　　首先，須要在 manifest.json 文件中添加權限支持：

　　"permissions": [

　　...

　　"contextMenus",

　　...

　　]

　　

chrome.contextMenus.create({
"title" : "菜單項文字",
"type" : "normal", //菜單項類型 "checkbox", "radio","separator"
"contexts" : ["frame"], //菜單項影響的頁面元素 "anchor","image"
"documentUrlPatterns":["http://*.163.com/*"],//iframe的src匹配
"targetUrlPatterns" : ["http://*.163.com/*"],//href的匹配
"onclick" : changeSCHandler() //單擊時的處理函數
});

六、插件通訊：

　　6.1 background.js 和 content_script.js 通訊推薦使用 chrome.extension.sendRequest()、chrome.extension.onRequest.addListener(function(request, sender, sendRequest){}); 的形式。

　　6.2 其餘頁面調用 background.js 裏的函數和變量時推薦在其餘頁面使用 var backgroundObj = chrome.extension.getBackgroundPage(); if(backgroundObj){ backgroundObj.func(param); }的形式。

　　6.3 若是插件運行中會有多個tab頁同時打開和加載，則須要注意通訊過程當中使用 tab.id 參數，由於每一個加載插件的tab頁都會保留本身的一個 content_script.js 運行，因此和 content_script.js 通訊時須要指定是向哪一個tab頁進行通訊；獲取當前打開的 tab 頁的 id 可使用 chrome.tabs.getSelected(function(tab){current_tab_id = tab.id;}); 的形式。

七、關於 xmlhttprequest

　　在chrome插件中可能會用到ajax請求，以及跨域請求的出現，推薦使用 xmlhttprequest，會比較穩定。但使用 xmlhttprequest 會有一個不完善的地方，就是在 chrome 中，xmlhttprequest 請求的HTTP requestHeaders 頭不包含 Referer 數據，若是須要這個字段就必須對 chrome 的 xmlhttprequest 請求進行監聽和修改，具體以下：

　　

首先，須要在 manifest.json 文件中添加權限支持：

　　"permissions": [

　　...

　　"webRequest", "webRequestBlocking",  //用於獲取 xmlhttprequest 以及對 xmlhttprequest 進行 block 操做

　　...

　　]

而後使用以下方式：

var wR=chrome.webRequest||chrome.experimental.webRequest; //兼容17以前版本的chrome，若須要使用chrome.experimental，須要在 about:flags 中「啓用「實驗用。。API」
if(wR){
    wR.onBeforeSendHeaders.addListener(
        function(details) {
            if (details.type === 'xmlhttprequest') {
                var exists = false;
                for (var i = 0; i < details.requestHeaders.length; ++i) {
                    if (details.requestHeaders[i].name === 'Referer') {
                        exists = true;
                        
                        break;
                    }
                }
                if (!exists) {//不存在 Referer 就添加
                    details.requestHeaders.push({ name: 'Referer', value: 'http://www.yourname.com'});
                }
                return { requestHeaders: details.requestHeaders };
            }
},
        {urls: ["https://*.google.com/*","http://*.google.com/*"]},//匹配訪問的目標url
        ["blocking", "requestHeaders"]
    );
}

八、題外：如何在頁面中插入包含透明圖片的頂層div

var topDiv = document.createElement('div');
        topDiv.style.width=document.documentElement.scrollWidth+"px";
        topDiv.style.height=document.documentElement.scrollHeight+"px";
        topDiv.style.position="absolute";
        topDiv.style.left=0;
        topDiv.style.top=0;
        topDiv.style.zIndex = 999;
        var title = document.createElement('a');
        var img = document.createElement('img');
        img.src = "http://.../.../transparent.gif";
        img.setAttribute("width","100%");
        img.setAttribute("height","100%");
        title.appendChild(img);
        topDiv.appendChild(title);
        document.getElementsByTagName('body')[0].insertBefore(topDiv,document.getElementsByTagName('body')[0].childNodes[0]);

在document中建立和body一樣寬度、高度的div，而後在其中添加透明圖片，最後將div的zIndex設爲最大，並添加到 body 的子節點序列中便可。