Firefox WebExtensions 在 iframe 中注入脚本答案

【问题标题】：Firefox WebExtensions inject script in iframeFirefox WebExtensions 在 iframe 中注入脚本
【发布时间】：2019-11-06 21:46:02
【问题描述】：

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

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

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

【问题讨论】：

不要把答案放在你的问题中。本部分用于提问！把你的答案放在下面的答案部分。

标签： javascript html iframe firefox-addon-webextensions

【解决方案1】：

据我所知，我应该能够简单地直接注入我的脚本在 iframe 中并获得想要的结果。但我一直做不到所以。

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

有以下考虑：

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

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

【讨论】：

我之前已经尝试过all_frames的设置，但由于URL-patterns错误没有得到任何结果。在你发表评论后，我再次查看它并让它按照我想要的方式工作，所以感谢你让我走上正确的轨道。我会用我的manifest.json 的一部分来编辑我的问题，以便像我这样走错路的人。一个问题仍然存在。你写了一些关于正确的Permission。你指的是什么？因为我找不到任何可以帮助这种情况的权限，我也没有在我当前的解决方案中使用任何权限。
@rainbowschedule 根据脚本的作用，如果您只有站点 A 的权限并且 iframe 来自不同的站点 B，那么某些需要权限的功能（例如 XHR/fetch）由于您只有站点 A 的权限，因此可能无法按预期运行。

【解决方案2】：

解决方案

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

就像 erosman 说的：

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

由于我不关心从父文档访问 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"]
        }
     ]

【讨论】：

【解决方案3】：

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

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

异源禁止此动作。

【讨论】：

感谢您的回复。我读到理论上这是不可能的，但它们是一些解决方法。是否不可能以某种方式直接在该 iframe 的 .html 中运行我的脚本？我不一定需要任何跨域活动。只需更改它，而不用关心它是否显示在另一个网站上。
你好 Rainbowschedule。我不得不说我对这个问题很感兴趣，并且我多次面对它。你可以看到这个简单的例子：link 在这个例子中，生活如此简单，因为 iframe 和容器页面在同一个域中（并且具有所有权限），你可以轻松访问一切...... @ 987654323@
在我的情况下，幸运的是我不必从父文档访问 iframe，所以我可以直接在 iframe 中注入我的脚本（参见 erosman 的答案或我编辑的问题）。凭借我新获得的知识和我之前读过的内容，我认为您仍然可以通过Window.postMessage() 从外部访问 iframe，您必须在父文档和 iframe 中注入脚本才能通过此方法在它们之间进行通信。也许这对您将来有帮助。