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

• 代码参考：
  github上的chrome扩展demo代码
  jsfree上的下拉多选框实现代码