Question

在Youtube扩展程序上工作，并希望将其中的一部分带入Facebook，
我可以修改Facebook帖子中的Youtube iframe，但问题是它在每个网站都修改它，而不仅仅是在Facebook上。所以我想知道如何设置特定的父窗口？

我希望有一种方法可以在manifest文件中设置它，
否则我可以使用JS检查location.href，因为它返回Facebook：

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

您可以通过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嵌入的，您还可以尝试通过匹配网址在框架中插入样式。例如，在没有任何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
}]

Answer 2

如果将内容脚本注入iframe和父框架，则可以（使用后台页面作为消息“router”）询问外部脚本。

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

所以，逻辑是：

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

告诉我你是否需要任何这些步骤的帮助。

修改特定父级的外部网站的iframe - Chrome扩展程序

2 个答案: