Google chrome 如何在某些域上显示Chrome扩展？

我正在写我的第一个Chrome扩展。我使用了权限，但到处都能看到我的按钮

---

我如何才能只显示我正在为其编写扩展名的地址上的按钮？

创建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

这是我的建议

为了便于参考，这里是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"
    ]
}

虽然效果不错，但这并不是解决问题的最佳方法

首先也是最重要的是，它并不总是有效的。如果页面使用了

history.pushState

，页面操作将消失，并且不会返回，直到您再次触发

onUpdated

或

onHighlighted

事件

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

让页面操作出现在某些域上的最有效、最可靠的方法是使用API。这仅在Chrome 33之后提供。在此之前，API是最合适的API。与使用

选项卡的方法相比，这些API的优点是您可以安全地使用，因为您可以声明。使用这些URL筛选器，仅当您导航到与URL筛选器匹配的页面时，才会触发事件。因此，您的扩展/事件页面在真正需要之前不会被激活（=没有浪费的RAM或CPU）

下面是一个使用
webNavigation
API的简单示例（
background.js
）：

网络导航功能（详细信息）{
如果（details.frameId==0）{
//顶层框架
chrome.pageAction.show（details.tabId）；
}
}
变量过滤器={
网址：[{
hostEquals:'example.com'
}]
};
chrome.webNavigation.onCommitted.addListener（onWebNav，filter）；
chrome.webNavigation.onHistoryStateUpdated.addListener（onWebNav，filter）；

manifest.json
：

{
“名称”：“名称”，
“版本”：“1”，
“清单版本”：2，
“背景”：{
“脚本”：[“background.js”]，
“持续”：假
},
“页面操作”：{
“默认标题”：“仅在stackoverflow.com上可见”
},
“权限”：[
“网络导航”
]
}

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

chrome.runtime.onInstalled.addListener（函数（）{
chrome.declarativeContent.onPageChanged.removeRules（未定义，函数（）{
chrome.declarativeContent.onPageChanged.addRules([{
条件：[
新chrome.declarativeContent.PageStateMatcher({
页面URL：{
hostEquals:'example.com'
}
})
],
操作：[新建chrome.declarativeContent.ShowPageAction（）]
}]);
});
});

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

我成功地使用了以下方法：

chrome.tabs.onUpdated.addListener(function(tabId, info, tab) {
    var url = info.url || tab.url;
    if(url && url.indexOf('example.com') > -1)
        chrome.pageAction.show(tabId);
    else
        chrome.pageAction.hide(tabId);
});

我将如何实现这一点？在后台脚本中？您应该创建两个文件。background.html和background.js。在html文件中包含js文件，并将上述代码粘贴到js文件中。如果它不起作用，请告诉我。我收到一个
未捕获的类型错误：无法读取控制台中未定义的
的属性“onUpdate”：（可能是“选项卡”许可：P@KeesC.Bakker不，不是。
选项卡
API始终可用。您可能已将代码放入内容脚本中，而API仅在扩展页中可用（例如）。不幸的是，它对我不起作用。不知道为什么。我的chrome版本是41.xxxx，我在后台脚本中添加了webNavigation权限。但它仍然没有在页面上隐藏扩展。我尝试了您建议的两种方法：（@rahulserver）您是否重新加载了扩展（不仅仅是后台脚本）添加新权限后？是的。我重新加载了扩展表单“更多工具->扩展”。也重新加载了网页。也重新启动了chrome。结果仍然相同。@WolfWar创建了多个
chrome.declarativeContent.PageStateMatcher
s，每个主机一个。例如
var条件=['example.com'，'example.org'].map（函数（主机）{返回新的chrome.declarativeContent.PageStateMatcher（{pageUrl:{hostQuals:host}}}）；}）；//现在在规则集中使用条件。
@WolfWar是的。我的评论中给出的示例是通用的，可以用于任何长度的数组。请注意，每次更新用户浏览器中的任何选项卡时，都会触发一个事件。@Rob W使用declarativeContent API的回答不太占用资源。