Firefox WebExtensions 在 iframe 中注入脚本

Question

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

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

也许我的想法是完全错误的，我需要尝试其他方法，例如使用 post 消息（我也不知道如何实现）或完全不同的方法。所以无论如何，我期待着您的回复。

Answer 1

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

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

不同的来源禁止此操作。

Answer 2

As far as I know I should be able to simply inject my script directly in the iframe and get the wanted result. But I haven't been able to do so.

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

有以下几点考虑：

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

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

Answer 3

解决方案

感谢 erosman 的评论，我再次查看了我的 manifest.json 并尝试了一下，最终让我的脚本按照我想要的方式工作。我的问题实际上是错误的 URL-我提供的模式。对于任何像我一样有类似问题的人，我会提供可以节省我过去很多时间的东西。

喜欢erosman 说：

iframe is just like a web page and you can inject scripts into it like any web page.

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

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

Firefox WebExtensions 在 iframe 中注入脚本

Firefox WebExtensions inject script in iframe

html

javascript

iframe

firefox-addon-webextensions