chrome插件开发杂记

刷新当前 tab 页的3中方式

// 1. 通过在页面中执行js代码
chrome.tabs.getSelected(null, function(tab) {
    var code = 'window.location.reload();';
    chrome.tabs.executeScript(tab.id, {code: code});
});
// 2. 通过chrome的api更新tab的url
chrome.tabs.update(null, {url: url});
// 3. 通过chrome的api刷新
chrome.tabs.reload();

popup 和 background 之间的通讯

以修改 cookie 为例子：

popup:                            -> 修改cookie                          -> 更新UI
background: -> 监听cookie的修改事件               -> 触发监听，与 popup 通讯

// 在background中
chrome.cookies.onChanged.addListener(function (changeInfo) {
    var cookie = changeInfo.cookie;
    if (cookie.domain == 'tool.lu' && cookie.name == 'X-Backend-Server') {
        chrome.runtime.sendMessage({event: "cookie", data: cookie.value}, function (response) {
            // ...
        });
    }
});
// 在popup中
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    // do things
});

popup弹出时候，更新popup的UI

// 在popup中绑定 window.onload 事件
window.onload = init;

background中获取当前加载页面的网页头信息

chrome.webRequest.onHeadersReceived.addListener(function (o) {
    // 判断是否是主页面, 因为页面中可能包含 iframe, image, css, js 等其他资源的加载
    if (o.frameId != 0 || o.type != "main_frame") {
        return;
    }
    for (var i in o.responseHeaders) {
        var header = o.responseHeaders[i];
        console.log(header.name, header.value);
    }
}, {
    "urls":["http://tool.lu/*"]
}, ["responseHeaders"]);

background在页面加载完成之后触发事件

chrome.webNavigation.onCompleted.addListener(function(o) {
    if (o.frameId == 0) {
        // do something...
    }
}, {
    url: [
        {hostContains: 'tool.lu'}
    ]
});