Chrome 扩展权限

Question

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

1. 使用下面的权限代码sn-p，它不应该因为“watch?v=*”而只在视频页面上注入CSS/JS吗？

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

"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

首先，让我们假设清单文件中有以下内容。这个 sn-p 相当于你在问题中发布的内容，但更短一点，"*://" = http 和 https;如果通过清单文件注入内容脚本，则无需声明权限。

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

关于你的两个问题：

1. 不应该因为“watch?v=*”而只在视频页面上注入CSS/JS吗？

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

• 当您最初访问非观看页面（例如主页）然后单击视频时会出现“未注入”。您会认为脚本会在视频页面上激活，因为 URL 已更改为“watch?v”，但这不会发生，因为页面实际上并未重新加载。

• 当您从观看页面导航到非视频页面（例如主页）时，会出现“运行太频繁”。您可能会认为该脚本不会在主页上运行，因为 URL 与“watch?v=”不匹配，但由于页面未卸载，因此之前的脚本仍然处于活动状态。

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

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