Mikel
[转载]Chrome扩展开发常见问题汇总 – slmk – 博客园.
有时我们需要看看我们的程序是否按照我们预想的那样执行了，可以输出一些调试信息，如下：
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"); });
