Chrome擴展開發常見問題匯總

如何輸出和查看調試信息

有時我們需要看看我們的程序是否按照我們預想的那樣執行了，可以輸出一些調試信息，如下：

console.log("clicked");

那這樣信息在哪里查看呢？其實有兩個地方，這取決於log語句在后台執行，還是前台執行。

這個功能還可以測試js語句是否執行正確。

分清前台還是后台

chrome擴展的開發語言是js，后台background的js代碼通常掌握整個擴展程序的運行狀態；而前台js可以控制和操作我們打開的Tab頁面的DOM樹，例如點擊某鏈接，改變當前頁面的背景顏色等。后台js在manifest.json文件中配置：

{
  "name": "我的chrome插件",
  "version": "1.0",
  "manifest_version": 2,
  "description": "第一個chrome插件！",
  "browser_action": {
    "default_icon": "icon.png"
  },
  "options_page": "options.html",
  "background": { "scripts": ["background.js"] },
  "permissions": [
    "tabs", "http://*/*"
  ]
}

以上配置了擴展程序的名稱、描述、版本、類型(在工具欄里添加一個圖標)，后台js、選項頁面和權限。

后台js在插件加載后立即執行並常駐內存，不像前台頁面js變量狀態會因為頁面的重新加載而失效。所以，對於需要保持狀態的變量，只能定義在后台js里。

那么前台如何訪問這些變量呢？通過消息傳遞。

消息傳遞

消息傳遞很重要，因為前后台的分工不同，要完成一件事情，通常需要前后台相互協作才能完成。

1、后台send

chrome.tabs.sendMessage(dTabid,
                        {  
                           'msg': '傳給前台的消息' 
                        }, 
                        function(response) {  
                            //回傳函數    
                        });   
//dTabid是前台Tab的id

前台listen:

//接收消息
chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {  
    console.log('收到消息' + request.msg);
}); 

2、前台send：

chrome.extension.sendMessage({'msg':'前台發給后台的消息'},function(response) {
    //后台又回復過來的        
});

后台listen：

chrome.extension.onMessage.addListener(function(msg, _, sendResponse) {
  　　console.log("收到消息，開始任務");
}

讓前台執行js代碼

chrome.tabs.executeScript(sTabid, { file: "click.js" });

sTabid表示要執行代碼的標簽頁的id，如果為null，表示當前標簽頁。有時頁面還沒有加載完成，可以通過訂閱window.onload事件或者使用setTimeout延時幾秒再執行。

點擊插件圖標才執行代碼

chrome.browserAction.onClicked.addListener(function(tab) {
    console.log("click");
});

新建標簽並在此標簽訪問網頁

chrome.tabs.create({'url': ‘http://www.cnblogs.com’,'selected':false}, function(tab2) {
                console.log("OK");
});