修改来自特定父级的外部站点的 Iframe - Chrome 扩展

Question

正在开发 Youtube 扩展程序，希望将其中的一些内容引入 Facebook，
我可以修改 Facebook 帖子中的 Youtube iframe，但问题是它在每个站点都在修改它，而不仅仅是在 Facebook 上。
所以我想知道如何设置特定的父级 window？

我希望有一种方法可以在 manifest 文件中简单地设置它，
否则我只能使用 JS 来检查 location.href，就像在 Facebook 中一样 returns:

https://s-static.ak.facebook.com/common/referer_frame.php

目前在我的 manifest 文件中：

"content_scripts": [
    {
        "matches": [
            "*://*.facebook.com/*",
            "*://*.youtube.com/embed/*"
        ],
        "css": ["styles/facebook.css"],
        "all_frames": true
    }
]

Answer 1

如果您将内容脚本同时注入 iframe 和父框架，您可以（使用背景页面作为消息 "router"）询问外部脚本。

有用：内容脚本可以learn their place in the frame hierarchy。

所以，逻辑是：

Youtube 内容脚本检查其层次结构，获取其在树上的 "index"，并计算其父级的索引。
CS 向后台发送其父索引的消息，请求检查。
后台页面从消息中获取选项卡ID，并通过请求和父索引向目标选项卡中的所有帧发送消息。
所有收到消息的内容脚本都检查它们的索引。如果它与父框架匹配，内容脚本会检查它的 URL 并返回报告。
后台页面将答案路由回原始内容脚本。

如果您需要任何这些步骤的帮助，请告诉我。

Answer 2

您可以通过 location.ancestorOrigins 轻松找到父框架的域，甚至可以跨不同的域。例如，使用以下清单文件：

"content_scripts": [{
    "matches": [
        "*://*.youtube.com/embed/*"
    ],
    "js": ["js/facebook.js"],
    "all_frames": true
}],
"web_accessible_resources": ["styles/facebook.css"],

和以下 JS:

// Note: parentOrigin could be `undefined` in the top-level frame.
var parentOrigin = location.ancestorOrigins[0];

if (parentOrigin === 'https://facebook.com' ||
    parentOrigin === 'http://facebook.com') {

    var style = document.createElement('link');
    style.rel = 'stylesheet';
    // NOTE: This only works because the file is declared at the
    // web_accessible_resources list in manifest.json
    style.href = chrome.runtime.getURL('styles/facebook.css');
    (document.head || document.documentElement).appendChild(style);
}

如果 YouTube 视频是通过 Iframe API 嵌入的，您还可以尝试通过匹配 URL 在框架中插入样式。例如，没有任何 JavaScript，可以使用以下方式将样式加载到 YouTube 框架中：

"content_scripts": [{
    "matches": [
        "*://*.youtube.com/embed/*origin=https://facebook.com/*",
        "*://*.youtube.com/embed/*origin=http://facebook.com/*"
    ],
    "css": ["styles/facebook.css"],
    "all_frames": true
}]

修改来自特定父级的外部站点的 Iframe - Chrome 扩展

Modify Iframe of external site from a specific parent - Chrome Extension

google-chrome-extension