除了调试时,Chrome pageAction图标不会显示

Question

我正在尝试显示Chrome pageAction图标,但它只会在页面加载后短暂闪烁然后消失.

然而,让我感到困惑的是,当我使用Dev Tools调试器并在chrome.pageAction.show()调用上粘贴断点时,它完美无缺!这是我的manifest.json:

{
    "manifest_version": 2,
    "name": "20130409-test",
    "description": "Page action icons don't work!",
    "version": "0.1",
    "icons": {"16": "icon16.png", "48": "icon48.png", "128": "icon128.png"},
    "background": {
        "scripts": ["background.js"],
        "persistent": true
    },
    "permissions": [
        "<all_urls>",
        "webRequest",
        "webRequestBlocking"
    ],
    "page_action": {
        "default_icon": {
            "19": "icon19.png",
            "38": "icon38.png"
        },
        "default_title": "Page action title here!"
    }
}

我的background.js页面是:

chrome.webRequest.onSendHeaders.addListener(
    function(details) {
        chrome.pageAction.show(details.tabId);
        chrome.pageAction.setTitle({
            "tabId": details.tabId,
            "title": "url=" + details.url
        });
    },
    {urls: ["<all_urls>"], types: ["main_frame"]},
    ["requestHeaders"]
);

Answer 1

当选项卡的页面卸载时,将删除绑定到特定选项卡的页面操作.

chrome.webRequest.onSendHeaders在新请求即将开始时触发.这意味着仍在显示上一页.当您调用时chrome.pageAction.show,将激活当前页面的页面操作,并在加载请求的页面后立即消失.

通过使用开发人员工具(或使用debugger;语句)设置断点,chrome.pageAction.show可以充分延迟,并在加载新页面后显示页面操作.

使用内容脚本或chrome.tabs.onUpdated事件,除非您希望在启动请求后立即查看URL.

方法1:内容脚本

内容脚本应仅在顶层框架注入.最好是尽快,所以"run_at":"document_start".

// PART of manifest.json
"background": {
    "scripts": ["background.js"]
},
"content_scripts": [{
    "matches": ["<all_urls>"],
    "js": ["contentscript.js"],
    "run_at": "document_start",
    "all_frames": false
}], ...........

// Content script: contentscript.js
chrome.extension.sendMessage({type:'showPageAction'});

// Background page: background.js
chrome.extension.onMessage.addListener(function(message, sender) {
    if (message && message.type === 'showPageAction') {
        var tab = sender.tab;
        chrome.pageAction.show(tab.id);
        chrome.pageAction.setTitle({
            tabId: tab.id,
            title: 'url=' + tab.url
        });
    }
});

此方法的缺点是它不适用于受限制的URL.例如,您将看不到数据URI,Chrome网上应用店等的页面操作.此问题不会出现在下一个方法中.

方法2: chrome.tabs.onUpdated

// background.js
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
    chrome.pageAction.show(tabId);
    chrome.pageAction.setTitle({
        tabId: tab.id,
        title: 'url=' + tab.url
    });
});

注意:onUpdated每个标签加载调用多次.最初一次更改URL时,每次(顶级/子)帧两次.减少不必要的chrome.pageAction调用次数会很好,但是没有简单的方法.
如果仅检查值changeInfo.url,则刷新页面时不会显示页面操作.