google扩展开发popup.html,chrome扩展开发问题总结

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字符串，所以可以直接取用，不需要解析。