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

http://open.chrome.360.cn/extension_dev/messaging.html

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

轉載于:https://www.cnblogs.com/developer-ios/p/6502461.html

總結

以上是生活随笔為你收集整理的chrome浏览器插件开发经验（一）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。