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");
});