Question

我一直致力于在Youtube视频页面上注入Javascript的Chrome扩展程序，但出于某种原因，它还在主页和其他非视频页面上注入了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" ]
}]

关于你的两个问题：

由于“看？v = *”，它不应该只在视频页面上注入CSS / JS吗？

是的，确实如此。但是，当您导航到其他页面时，YouTube并未真正“卸载”该页面。相反，更新显示的HTML并使用history.pushState API更改URL。因此，扩展程序开发人员通常会发现他们的代码“不会注入”或“经常运行”，即使他们将内容脚本/样式限制为“watch？v =”页面。

“未注入”。您可能希望脚本在视频页面上激活，因为URL已更改为“watch？v”，但这不会发生，因为页面实际上没有重新加载。
“经常运行”。您希望该脚本不在主页上运行，因为该URL与“watch？v =”不匹配，但由于该页面未卸载，因此之前的脚本仍处于活动状态。

有没有更好的方法来检测视频页面？

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

Chrome扩展权限

1 个答案: