如何过滤掉附加 SDK 扩展中的 iframe？答案

【问题标题】：How to filter out iframes in an Add-on SDK extension?如何过滤掉附加 SDK 扩展中的 iframe？
【发布时间】：2011-09-07 18:41:24
【问题描述】：

主要问题是我的扩展程序正在加载到目标网页上的每个 iframe 中。它还放置了出现在 iframe 内的按钮。我希望他们消失。窗口和文档对象显示为父窗口和文档对象。因此无法检查文档位置，例如，因为它显示的是父级的位置而不是 iframe 的位置。

【问题讨论】：

您是否使用 page-mod 或 tabs 模块将您的内容脚本附加到页面？目前无法使用 page-mod 仅定位顶部框架，内容脚本将被加载到任何匹配的文档中。
我也想使用 WYSIWYG 编辑器，我选择了一个名为 CLEditor 的编辑器。唯一的问题是，如果我使用 page-mod 而不是将扩展加载到它的 iframe 中。如果我使用 tab 模块而不是那个，我会收到一个安全错误，扩展程序没有权限访问编辑器 iframe 的窗口对象。
您可以为 page-mod 制作 url 过滤器的精确度如何？您是在尝试对所有页面还是非常特定的页面进行页面修改？
如果window.top != windowwindow.top != window，为什么不在您的内容脚本中添加检查并停止执行任何操作？
我见过人们使用 if(unsafeWindow.self == unsafeWindow.top) {} ，请参阅此论坛讨论：forums.mozilla.org/addons/viewtopic.php?t=3841

标签： javascript firefox-addon firefox-addon-sdk

【解决方案1】：

您可以编写一个使用 @noframes 元数据标头键的用户脚本，并使用 this user script package for the addon sdk 将该用户脚本包含到您的 Jetpack 中。

编写用户脚本也比编写 Page Mods 容易得多。

【讨论】：

有趣的解决方法！我们确实需要直接在 page-mod 中解决这个问题，尽管只是为了在将内容脚本注入到富含 iframe 的页面中时的性能考虑。

【解决方案2】：

编辑：现在（已发布附加 SDK 版本 1.11）pagemod 支持您正在寻找的内容。 See the docs 和新的 attachTo 选项。

以下信息已过时（如果您针对 Add-on SDK 1.10 或更早版本构建，则可以使用：

不幸的是，pagemod 将您的脚本注入到页面的所有框架中，而不是像您使用 Chrome 的内容脚本实现的那样，在顶部框架中每页只注入一次。当然，有一些解决方法可以停止脚本的执行（请参阅其他答案）。

但如果你真的想在每页上只注入一次脚本，在顶部框架，你必须使用tabs。使用此解决方案，您的脚本仅在必要时才会被注入。

下面我提供了从pagemod 移植到tabs 的示例，使所有消息接收系统与port 一起工作。如果您不仅需要接收消息，还需要使用相同的 port 对象发送消息，则可以轻松修改它。当我们在 youtube.com 域中时，脚本会被注入：

旧的pagemod方式：

var self = require("self");
var pagemod = require("page-mod");

pagemod.PageMod(
{
    include: "*.youtube.com",
    contentScriptFile: self.data.url("myContentScript.js"),
    onAttach: function(worker)
    {
        worker.port.on("myMessageId", function(payload)
        {
            console.log("Message received: " + payload);
        });
    }
});

新标签方式：

var self = require("self");
var tabs = require("tabs");

tabs.on("ready", function(tab)
{
    if (tab != undefined && tab.url != undefined && tab.url.split("/")[2] != undefined)
    {
        var domain = "youtube.com";
        var host = tab.url.split("/")[2];
        if (host == domain || host.substr(host.length - domain.length - 1) == "." + domain)
        {
            var worker = tab.attach({ contentScriptFile: self.data.url("myContentScript.js") });
            worker.port.on("myMessageId", function(payload)
            {
                console.log("Message received: " + payload);
            });
        }
    }
});

【讨论】：

【解决方案3】：

一种解决方法是在您的内容脚本中添加这样的内容：

   if (window.frameElement === null){
     // I'm in the topmost window
     // Add buttons and things to the page.
   }else{
     // I'm in an iFrame... do nothing!
   }

内容脚本仍将添加到每个页面，但它是对 iFrame 的相对简单和轻量级的检查。

【讨论】：