google-chrome - 如何在某些域上显示 Chrome 扩展程序？

Question

我正在编写我的第一个 Chrome 扩展程序。我已经使用了许可，但我到处都能看到我的按钮。

我怎样才能只在我正在为其编写扩展程序的地址上显示按钮？

Answer 1

虽然 answer from @Sorter有效，这不是解决问题的最佳方法。

首先，它并不总是有效。如果页面使用了history.pushState ，页面操作将消失，直到您触发 onUpdated或 onHighlighted再次事件Chromium issue 231075 .

其次，该方法效率低下，因为每次更新所有页面上的选项卡状态都会触发该方法。

让页面操作出现在某些域上的最有效和最可靠的方法是使用 declarativeContent API。这仅在 Chrome 33 之后可用。在此之前， webNavigation API 是最合适的 API。这些 API 相对于使用 tabs 的方法的优势API是你可以放心使用event pages , 因为你可以声明 URL filters .使用这些 URL 过滤器，只有当您导航到与 URL 过滤器匹配的页面时才会触发事件。因此，在真正需要之前不会激活您的扩展/事件页面(= 不会浪费 RAM 或 CPU)。

这是一个使用 background.js 的最小示例( webNavigation )接口(interface):

function onWebNav(details) {
    if (details.frameId === 0) {
        // Top-level frame
        chrome.pageAction.show(details.tabId);
    }
}
var filter = {
    url: [{
        hostEquals: 'example.com'
    }]
};
chrome.webNavigation.onCommitted.addListener(onWebNav, filter);
chrome.webNavigation.onHistoryStateUpdated.addListener(onWebNav, filter);

manifest.json :

{
    "name": "Name ",
    "version": "1",
    "manifest_version": 2,
    "background": {
        "scripts": ["background.js"],
        "persistent": false
    },
    "page_action": {
        "default_title": "Only visible on stackoverflow.com"
    },
    "permissions": [
        "webNavigation"
    ]
}

如果您的目标是 Chrome 33 及更高版本，那么您也可以改用 declarativeContent API。只需将“webNavigation”权限替换为“declarativeContent”，并使用以下后台脚本(background.js):

chrome.runtime.onInstalled.addListener(function() {
    chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
        chrome.declarativeContent.onPageChanged.addRules([{
            conditions: [
                new chrome.declarativeContent.PageStateMatcher({
                    pageUrl: {
                        hostEquals: 'example.com'
                    }
                })
            ],
            actions: [new chrome.declarativeContent.ShowPageAction()]
        }]);
    });
});

在这两个示例中，我都使用了 UrlFilter匹配 example.com领域。