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

1、首先，推薦360的chrome外掛開發文件：http://open.chrome.360.cn/extension_dev/overview.html

2、從chrome18開始往後，chrome瀏覽器外掛開發的 manifest.json 檔案中的 "manifest_version": 2 屬性就必須被顯式（固定）的聲明瞭。

3、chrome外掛開發，很大程度上需要chrome.* API 的支援，附上chrome歷史版本的API更新記錄：http://lmk123.duapp.com/chrome/extensions/whats_new.html

4、如果需要下載不同的chrome版本進行安裝測試，推薦一個下載網址：http://www.mykurong.com/chrome/

5、為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、外掛通訊：

　　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;}); 的形式。

7、關於 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"]
    );
}

8、題外：如何在頁面中插入包含透明圖片的頂層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 的子節點序列中即可。