为特定页面启动 Chrome 扩展程序时出错答案

【问题标题】：Error in launching Chrome Extension for a specific page为特定页面启动 Chrome 扩展程序时出错
【发布时间】：2012-05-10 22:00:41
【问题描述】：

我正在编写一个简单的 Chrome 扩展程序，它会显示一个 JavaScript 警报，上面写着“Hello World”。在此示例中，我已指定扩展程序仅适用于 google.com（通过将其放在 manifest.json 中的权限属性中）。

即使目标页面中的所有内容都已加载，警报也不会出现。到目前为止，这是我的脚本：

文件：manifest.json

{
  "name": "Hello",
  "version": "1.0",
  "description": "Says hello to Google",
  "permissions": ["http://*.google.com/"]
  "browser_action": {
    "popup": "Hello.html"
  }
}

文件：Hello.html

<script language="Javascript">
   alert("Hello World");
</script>

【问题讨论】：

我不明白这个问题的介绍句。有人可以修复它吗？鉴于此 q 有 39 票赞成，对马虎感到非常惊讶！
@CorneliusRoemer 希望现在更好

标签： google-chrome-extension

【解决方案1】：

您正在添加一个浏览器操作弹出窗口，它会在浏览器的右上角添加一个按钮。（它可能是不可见的，因为您尚未为其指定图像。地址栏右侧应该有一些空白区域；尝试单击它以在弹出窗口中查看您的 Hello.html。）

你想要的是content script。内容脚本可以注入到 Chrome 加载的每个页面中。您可以在清单文件中使用 matches 和 exclude_matches 子项来指定哪些页面获取您注入的脚本。

{
  "name": "Hello",
  "version": "1.0",
  "description": "Says hello to Google",
  "permissions": ["tabs", "*://*.google.com/*"],
  "content_scripts": [
    {
      "matches": ["*://*.google.com/*"],
      "js": ["hello.js"]
    }
  ]
}

确保将Hello.html 重命名为hello.js（并去掉<script> 标签）。

另请注意，我将您的 http://*.google.com/ 更改为 *://*.google.com/*，以便它将通过 HTTP 和 HTTPS 应用于 Google（并且结尾的 * 确保它将应用于 google.com 上的所有页面，而不仅仅是主页）。

【讨论】：

不需要tabs 权限。事实上，不需要所有权限，因为alert('Hello World!') 没有访问页面的 DOM。 URL 模式遵循非常严格的规则，请参阅Match patterns。
哎呀，这些是其他东西的权限；您确实不需要运行内容脚本的权限。（不过，您在内容脚本中执行的特定操作可能需要权限。）
您在 ...com/* 之后的第五行缺少逗号]
由于您正在更新答案，您还可以将其升级到清单版本 2。
似乎这是清单 V3 中的旧答案，这是无效的。

【解决方案2】：

我遇到了这个答案，试图找到一种仅在某些页面上启用图标的方法，我就是这样做的。 Docs

background.js

chrome.runtime.onInstalled.addListener(function() {
  chrome.tabs.onActivated.addListener(async info => {
    const tab = await chrome.tabs.get(info.tabId);
    
    const isGithub = tab.url.startsWith('https://github.com/');
    isGithub 
      ? chrome.action.enable(tab.tabId) 
      : chrome.action.disable(tab.tabId);
  });
});

确保在清单中添加 tabs 权限

【讨论】：

这就是我想要的一切。泰！
是的，在 manifest v3 中我们只能使用 background.js 来实现这一点，不要忘记 platform.tabs.onUpdated.addListener(async (tabId, changeInfo) => { var tab = await platform.tabs.get(tabId); if (tab.active && changeInfo.url) { /* Do something */ } }); 。否则当 url 改变时不调用 enable

【解决方案3】：

First of all there are 2 types of extensions:

1. Browser Action - which work for multiple websites or almost all websites
2. Page Action - which work for specific websites or webpages [which is needed 
   in our case]

Follow these steps to show your extension only on google:

Step 1: Go to manifest.json file and add the below code snippet

        "background":{
           "scripts":["background.js"],
           "persistent":false
         }
         
         ***also make sure you have page action not browser action** 
        
         "page_action" : { "default_popup":"your_popup.html" }

Step 2: Now add permissions in manifest:
        
        "permissions":["declarativeContent"]

Step 3: Now create background.js in root folder of extension and add the 
        below code in it, this will let the extension to work only on 
        urls that contain google.com
        
        // 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 contains a 'g' ...
          conditions: [
          new chrome.declarativeContent.PageStateMatcher({
            pageUrl: { urlContains: 'google.com' },
          })
         ],
          // And shows the extension's page action.
          actions: [ new chrome.declarativeContent.ShowPageAction() ]
        }
      ]);
    });
  });

Step 4: Now reload your extension, you'll find that your extension will work 
        only for google.com

Hope this solved your query, If Yes, then Upvote the answer Thanks!

【讨论】：