Chrome 扩展权限

Question

我一直在开发一个 Chrome 扩展，它在 Youtube 视频页面上注入 Javascript，但出于某种原因，它也在主页和其他非视频页面上注入 JS。我通读了 Google 用于构建 Chrome 扩展的文档，并阅读了此处的其他一些问题，并认为我对通配符 (*) 有很好的理解，但也许不是。

使用下面的权限代码片段，由于 "watch?v=*"，它不应该只在视频页面上注入 CSS/JS 吗？
是否有更好的方法来检测视频页面？

"permissions": [
    "https://youtube.com/watch?v=*",
    "http://youtube.com/watch?v=*"
  ],
  "content_scripts": [
    {
      "matches": [
        "https://youtube.com/watch?v=*",
        "http://youtube.com/watch?v=*"
      ],
      "css": [
        "src/inject/inject.css"
      ]
    },
    {
      "matches": [
        "https://youtube.com/watch?v=*",
        "http://youtube.com/watch?v=*"
      ],
      "js": [
        "src/inject/inject.js"
      ]
    }
  ]

Answer 1

首先，我们假设清单文件中包含以下内容。此片段等同于您在问题中发布的内容，但更短一些，"*://" = http 和 https；如果通过清单文件注入内容脚本，则无需声明权限。

"content_scripts": [{
  "matches": [ "*://youtube.com/watch?v=*" ],
  "css": [ "src/inject/inject.css" ],
  "js": [ "src/inject/inject.js" ]
}]

关于你的两个问题：

shouldn't it only inject the CSS/JS on the video pages due to "watch?v=*"?

是的，确实如此。但是，当您导航到其他页面时，YouTube 并没有真正 "unload" 该页面。相反，显示的 HTML 已更新，URL 使用 history.pushState API 更改。因此，扩展开发人员通常会发现他们的代码是 "not injecting" 或 "run too often"，即使他们将内容 scripts/styles 限制为 "watch?v=" 页。

"not injecting" 当您最初访问非观看页面（例如主页）然后点击视频时发生。您可能希望脚本在视频页面上激活，因为 URL 已更改为 "watch?v"，但这并没有发生，因为页面实际上并未重新加载。
"run too often"。您预计该脚本不会在主页上运行，因为 URL 与 "watch?v=" 不匹配，但由于页面没有卸载，所以以前的脚本仍然有效。

Is there a better way to go about detecting video pages?

您可以使用 here 中描述的方法来检测这些转换并适当地响应这些事件。例如。 enable/disable 您的逻辑取决于当前页面是否是 /watch 页面。这意味着您必须仔细编码，并确保正确清理 DOM 和事件。（请注意，要做到这一点并不简单：仅在您保留引用的文档中插入一个元素就足以防止垃圾收集器释放上面整个断开连接的 DOM 树所使用的内存！）

Chrome 扩展权限

Chrome Extension Permissions

javascript

google-chrome

google-chrome-extension

browser-extension