Chrome扩展程序针对特定页面运行

Question

我正在写一个chrome扩展,只是在它警告Hello World我为权限指定的页面完成加载,但它不起作用,这是我的脚本

文件: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>

Answer 1

您正在添加一个浏览器操作弹出窗口,它会在浏览器的右上角添加一个按钮.(它可能是隐形的,因为你没有为它指定一个图像.你的地址栏右侧应该有一些空的空间;尝试点击它以Hello.html在弹出窗口中看到你的.)

你想要的是一个内容脚本.内容脚本可以注入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,而不仅仅是主页面).

Answer 2

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

背景.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);
  });
});

确保在清单中添加选项卡权限