console.log
Chrome扩展分为三部background.html/js,popup.html和content_script.js。background和content_script可以通过console.log打印调试信息。popup不能用console.log,在stackoverflow上有一些解决方案,但是都不好使,最后退而求其次,用alert代替。
如何刷新扩展?
popup.html和内嵌的css和js修改后,下次再打开popup页时,popup页已经自动更新了。
content_scropt.js修改后,更新扩展并且刷新页面(只刷新页面没用)后,修改才会生效。
popup.html内嵌script不执行
popup.html只能添加js文件。如果在script标签中要运行一段js代码,打开popup页时在扩展程序页会报错,这段代码不会执行。如下所示,提示违反了内容安全政策。
内嵌js错误提示.png
解决方法是把这段代码放到内嵌的js文件里面去。
popup.html加载js跟content_scripts不同
popup.html生命周期很短(从点击扩展图标弹出popup页到popup页失去焦点而关闭),而且是唯一的,但是很完整(有自己的页面,也自己的css和js)。
content_script.js生命周期基本上跟被扩展的网页一样长(受content_scripts.run_at影响),不是唯一的(content_scripts.js可指定多个js),依附于被扩展的网页(可访问DOM,但跟页面内嵌的js不在同一个名字空间,也就不能访问内嵌js)
js的异步回调
接连好几个bug,发现都是没有理解js的异步回调导致的,还是用的过程化方式来考虑。例如,如下代码
elNo.addEventListener('change', function() {
chrome.storage.local.get('choise', function(item) {
//alert('Your choise:' + item.choise);
})
// popup主动发消息给content-script
sendMessageToContentScript({cmd:'get-selected'}, (response) => {
if(response) {
var issues = JSON.parse(response)
alert('respond from content-script:selected num='+ issues.length + ', items=' + issues[0] + ', ' + issues[1]);
}
});
$(function() {
$('.demo').fSelect();
});
})
这段代码的原意是先从chrome.storage.local获取配置,然后再通过content-script获取被扩展页面的信息,最后再调用fSelect(fSelect依赖前两步的结果)。
但是chrome.storage.local.get和** sendMessageToContentScript都是异步函数,也就是说,上面代码这三部分虽然是顺序写的,但是运行时却是并行执行的,fSelect执行的时候,chrome.storage.local.get可能都没有返回,导致fSelect**执行时总是数据不对。加了一堆打印,才发现是时序的问题。
异步的玩法是这样的:
elNo.addEventListener('change', function() {
chrome.storage.local.get('choise', function(item) {
//alert('Your choise:' + item.choise);
sendMessageToContentScript({cmd:'get-selected'}, (response) => {
if(response) {
var issues = JSON.parse(response)
alert('respond from content-script:selected num='+ issues.length + ', items=' + issues[0] + ', ' + issues[1]);
$(function() {
$('.demo').fSelect();
});
}
});
})
})
打包和解析消息
发送请求和接收回应
// 获取当前选项卡ID
function getCurrentTabId(callback)
{
chrome.tabs.query({active: true, currentWindow: true}, function(tabs)
{
if(callback) callback(tabs.length ? tabs[0].id: null);
});
}
// 向content-script主动发送消息
function sendMessageToContentScript(message, callback)
{
getCurrentTabId((tabId) =>
{
chrome.tabs.sendMessage(tabId, message, function(response)
{
if(callback) callback(response);
});
});
}
sendMessageToContentScript({cmd:'get-selected'}, (response) => {
if(response) {
var issues = response
alert('respond from content-script:selected num='+ issues.length + ', items=' + issues[0] + ', ' + issues[1]);
$(function() {
$('.demo').fSelect();
});
}
});
接收请求和发送回应
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse)
{
//alert('收到来自 ' + (sender.tab ? "content-script(" + sender.tab.url + ")" : "popup或者background") + ' 的消息:'+ request);
if(request.cmd == 'get-selected') {
var selected = [];
$('.demo').find('option:selected').each(function() {
selected.push(this.innerText);
});
console.log('recv from popup(get-selected).')
sendResponse(selected)
}
});
值得注意的是,通信双方是通过JSON对象进行通信的,而不是JSON字符串,所以可以直接取用,不需要解析。