Chrome 扩展程序权限

Chrome Extension Permissions

本文关键字：权限 程序 扩展 Chrome      更新时间：2023-09-26

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

  1. 有了下面的权限代码片段，它不应该只在视频页面上注入 CSS/JS 由于"watch？v=*"吗？

  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"
      ]
    }
  ]

首先，让我们在清单文件中假设以下内容。此代码段相当于您在问题中发布的内容，但只是短了一点，"*://" = 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. 有没有更好的方法来检测视频页面？

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

相关文章：