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

本文轉載自： https://www.cnblogs.com/xiaosoldier/p/3557619.html 作者：xiaoSoldier 轉載請注明該聲明。

最近在進行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 的子節點序列中即可。