- 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字符串，所以可以直接取用，不需要解析。
- 代码参考：
github上的chrome扩展demo代码
jsfree上的下拉多选框实现代码