Question

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

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

Answer 1

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

首先，它不会始终工作。如果页面使用history.pushState，则页面操作将消失，直到您再次触发onUpdated或onHighlighted事件^{Chromium issue 231075}后才会返回。 / p>

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

使页面操作在某些域上显示的最有效和最可靠的方法是使用declarativeContent API。此功能仅在Chrome 33之后可用。在此之前，webNavigation API是最合适的API。与使用tabs API的方法相比，这些API的优势在于您可以安全地使用event pages，因为您可以声明URL filters。使用这些URL过滤器，只有在导航到与URL过滤器匹配的页面时才会触发事件。因此，在真正需要之前，您的扩展/事件页面不会被激活（=没有浪费的RAM或CPU）。

以下是使用background.js API的最小示例（webNavigation）：

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()] }]); }); });

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

Answer 2

创建background.js，检查更新和突出显示的标签。

function checkForValidUrl(tabId, changeInfo, tab) {

   // If  'example.com' is the hostname for the tabs url.
   var a = document.createElement ('a');
   a.href = tab.url;
   if (a.hostname == "example.com") {
       // ... show the page action.
       chrome.pageAction.show(tabId);
   }
};

// Listen for any changes to the URL of any tab.
chrome.tabs.onUpdated.addListener(checkForValidUrl);
//For highlighted tab as well
chrome.tabs.onHighlighted.addListener(checkForValidUrl);

以类似的方式创建popup.html和popup.js.

您可以在内容脚本（popup.js）中使用background.js中定义的变量 chrome.extension.getBackgroundPage().variableName

这是example extention download link。

供您参考和使用，这是示例manifest.json文件

 {
    "manifest_version": 2,
    "name": "Example Extension",
    "version": "1.0",

    "background": {
        "scripts": ["background.js"]
    },

    "page_action":{
        "default_icon": "images/icon_16.png",
        "default_popup": "popup.html",
        "default_title": "Title for the extension"
    },
    "permissions": [
        "tabs"
    ]
}

Answer 3

更新方式：

我使用以下内容取得了巨大成功：

var x = 1;
switch(x) {
   case 0: console.log(0);
   case 1: console.log(1);
   case 2: console.log(2);
   case 3: console.log(2);
}

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

3 个答案: