Firefox WebExtensions 注入 iframe 中的脚本

Question

我是 javascript 和编写 web 扩展的新手。 我想写一个 web 扩展来改变我的大学规划器中日程表条目的颜色。 经过一番努力，我终于能够在我的 uni 平台上编写一个 Firefox WebExtension。 问题是我的大学使用多个平台来完成不同的任务，这些任务可以直接访问，也可以通过连接它们的平台访问。 我只能在直接向我显示我的日程安排的平台上成功更改 colors，而不是在“通用”平台上。 经过更多研究，我发现了问题所在。 规划器加载在 iframe 中，由于两个平台具有不同的域，这似乎是一个比我想的更大的问题。 我阅读了很多关于如何使用这些我无法真正理解或无法执行的跨域 iframe 的令人困惑的信息。

据我所知，我应该能够简单地将我的脚本直接注入 iframe 并获得想要的结果。 但我一直无法这样做。 我没有找到任何有用的信息来说明如何使用 WebExtension 做到这一点。 如果有人能帮我解决这个问题，我将不胜感激。

也许我的想法是完全错误的，我需要尝试其他的东西，比如使用 post message（我也不明白如何实现）或完全不同的东西。 所以无论如何，我期待着你的回复。

Answer 1

据我所知，我应该能够简单地将我的脚本直接注入 iframe 并获得想要的结果。 但我一直无法这样做。

iframe 就像 web 页面一样，您可以像任何 web 页面一样将脚本注入其中。

有以下考虑：

• 扩展必须更正 iframe 的Permission （可能来自不同的域）
• 在content_scripts中设置all_frames: true （默认为 false）

如果您通过manifest.json以外的其他方法注入脚本，请告诉我，我也会解释。

Answer 2

很抱歉，如果 iframe 包含来自其他域的网站，则无法在 iframe 上修改一个网站。

也许，您使用 java 脚本创建了一些示例，但如果您深入了解这些示例，您会发现它们有效，因为域始终相同......

异源禁止这种行为。

Answer 3

解决方案

感谢erosman的评论，我再次查看了manifest.json并进行了一些尝试，最终让我的脚本按照我想要的方式工作。 我的问题实际上出在我提供的错误 URL 模式中。 对于像我这样有类似问题的人，我将提供可以为我过去节省很多时间的方法。

就像爱罗斯曼说的：

iframe 就像 web 页面一样，您可以像任何 web 页面一样将脚本注入其中。

由于我不关心从父文档访问 iframe 的内容，这意味着我确实可以直接将我的脚本注入 iframe 并让它在那里工作。 结果将显示在包含 iframe 的网页上。 就 Firefox WebExtensions 而言，这仅意味着在manifest.json中设置正确的参数。 在content_scripts中设置"all_frames": true以允许您的脚本被注入到帧中。 现在您必须提供显示 iframe 以及 iframe 的 URL 的网页的 URL。 您的content_scripts应如下所示：

    "content_scripts": [
        {
         "matches": ["*://*.webpage.org/*", "*://*.iframe.com/*"],
         "all_frames": true,
         "js": ["script.js"]
        }
     ]