代码改变世界

Chrome扩展开发常见问题汇总

2012-11-16 12:01 by 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");
});