google-chrome-extension - 除调试外，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

当标签页面卸载时，绑定(bind)到特定标签的页面操作将被删除。

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

通过开发者工具设置断点(或者使用debugger;语句)，chrome.pageAction.show被充分延迟，页面action显示在新页面加载后。

使用content scripts ，或 chrome.tabs.onUpdated事件，除非您希望在发起请求后立即查看 URL。

方法一:内容脚本

内容脚本应该只在顶级框架中注入(inject)。最好尽快使用 "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 网上商店等的页面操作。下一个方法中不会出现此问题。

方法二: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 的值，如果您刷新页面，页面操作将不会显示。