除了调试时，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被充分延迟，页面操作在加载新页面后显示

使用content scripts或chrome.tabs.onUpdated事件，除非您希望在启动请求后立即查看该网址。

方法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的值，则刷新页面时页面操作将不会显示。