仅在单击某些网页时才起作用的 Chrome 扩展程序答案

【问题标题】：Chrome extension that acts only when clicked on certain webpages仅在单击某些网页时才起作用的 Chrome 扩展程序
【发布时间】：2014-03-19 16:13:25
【问题描述】：

我正在尝试让我的 Chrome 扩展程序在用户使用 http://google.com/ 并单击扩展程序图标时弹出警报。

我有以下清单：

{
   "manifest_version": 2,

   "name":  "One Megahurt",
   "version": "0.1",

   "permissions": [
       "activeTab"
    ],

   "background": {
       "scripts": ["bg.js"],
       "persistent": false
    },

    "browser_action": {
        "default_icon": "icon.png"
    } 
}

这是 bg.js：

chrome.browserAction.onClicked.addListener(function(tab) {
     alert('Test!');
})

此代码将允许在任何网站上弹出警报，因为我对它适用于哪些网站没有任何限制。我尝试使用

if(tab.url === "https://google.com/")

在第一行和第二行之间，但这不起作用。

我不确定我是否应该使用后台脚本而不是内容脚本。我查看了 Google 的示例并尝试使用“按 URL 进行页面操作”中的实现，但这对我也不起作用。

任何帮助将不胜感激。我应该注意，我并不真正关心 URL 的具体问题——google.com 只是一个例子。我想学习将其用于其他项目和网站。

编辑：将 url 添加到权限也不会限制弹出警报的网站。

【问题讨论】：

是的，页面操作是要走的路。如果你不能让它工作，你必须更加努力;）developer.chrome.com/extensions/pageAction
你确定在http://google.com/ 上吗？当我访问http://google.com/ 时，我被重定向到https://www.google.com/，后跟一个查询字符串。
可能有路径和查询参数，所以你可能想要tab.url.indexOf("http://google.com/") === 0
@abraham，我尝试在函数内部添加一个 if 子句，但现在我没有在任何网页上收到警报。有什么建议吗？
@FelixKling，我不是想在多功能栏中获取图标，我只是想限制调用函数的时间。

标签： javascript google-chrome-extension

【解决方案1】：

根据 Felix King 的建议，我最终使用页面操作作为我的解决方案。回想起来，这是最好的解决方案，因为它不会在每个页面上加载扩展程序并导致浏览器速度变慢（据我所知）。

除了将域添加到清单中的权限之外，还将以下代码添加到background.js。

// When the extension is installed or upgraded ...
chrome.runtime.onInstalled.addListener(function() {
  // Replace all rules ...
  chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
    // With a new rule ...
    chrome.declarativeContent.onPageChanged.addRules([
      {
        // That fires when a page's URL matches one of the following ...
        conditions: [
          new chrome.declarativeContent.PageStateMatcher({
            pageUrl: { urlMatches: 'http://google.com/' }, // use https if necessary or add another line to match for both
          }),
          new chrome.declarativeContent.PageStateMatcher({
            pageUrl: { urlMatches: 'http://facebook.com/*' },
          }) // continue with more urls if needed
        ],
        // And shows the extension's page action.
        actions: [ new chrome.declarativeContent.ShowPageAction()]
      }
    ]);
  });
});

chrome.pageAction.onClicked.addListener(function(tab) {
    chrome.tabs.executeScript(null, { file: "script.js" });
});

在manifest.js 中添加的关键部分是：

"background": {
  "scripts": ["res/background.js"],
  "persistent": false
}

"permissions": [
        "declarativeContent", "tabs", "activeTab", "http://google.com", "http://facebook.com/*"
    ]

【讨论】：

【解决方案2】：

我对此没有太多经验，但是查看我所看到的示例清单，它们通常具有权限下的域列表。我敢打赌，如果你使用：

"permissions": ["http://www.google.com/", "https://www.google.com/", https://google.com, https://google.com],

它只会在允许的页面上运行代码。

示例来自： http://developer.chrome.com/extensions/overview

这里有更多详细信息： http://developer.chrome.com/extensions/declare_permissions

【讨论】：

虽然我可能需要使用权限才能访问页面上的某些功能，但将 URL 添加到权限并不会限制扩展程序适用的页面。