授予 Chrome 扩展程序对 iframe 内容的访问权限

Give Chrome extension access to iframe contents

本文关键字：访问 访问权 权限 iframe Chrome 扩展 程序 授予      更新时间：2023-09-26

我制作了一个Chrome扩展程序，该扩展程序将我的"新标签页"加载到我的YouTube订阅页面的<iframe>（我解决了X-frame-options问题），并希望隔离文档的特定元素，确切地说#content（即订阅提要）。无论是减去所有:not(#content)的东西，还是#content切下来，把它放到另一个<div>都是可行的。这是我的代码：

背景.html 

<html> 
    <head>   
        <script type="text/javascript" src="jquery-2.2.0.min.js"></script>
        <script type="text/javascript" src="script.js"></script>
        <script type="text/javascript" src="window.js"></script>
    </head>
    <body>
        <iframe id="left"  name="left"></iframe>
        <div id="canvas"></div>
    </body>
</html>

窗口.js

$(document).ready(function(){
    var $left = $('#left');    
    $left.on('load', function() {
        $(this).contents().find('#content').clone().appendTo('#canvas');
    });    
    $left.attr('src', 'https://www.youtube.com/feed/subscriptions');    
});

脚本.js

chrome.webRequest.onHeadersReceived.addListener(
    function(info) {
        var headers = info.responseHeaders;
        for (var i = headers.length - 1; i >= 0; --i) {
            var header = headers[i].name.toLowerCase();
            if (header == 'x-frame-options' || header == 'frame-options') {
                headers.splice(i, 1); // Remove header
            }
        }
        return {
            responseHeaders: headers
        };
    }, {
        urls: ['*://*/*'], // Pattern to match all http(s) pages
        types: ['sub_frame']
    }, ['blocking', 'responseHeaders']
);

Manifest.json

{
    "manifest_version": 2,
    "version": "1.0",
    "background": "background.html",
    "chrome_url_overrides" : {
        "newtab": "background.html"
    },
    "permissions": [
        "background",
        "contextMenus",
        "webRequest",
        "webRequestBlocking",
        "tabs",
        "<all_urls>"
    ]   
}

就像现在一样，YouTube加载，但我无法在<iframe>中获取文档，因为它记录了以下错误：

Uncaught SecurityError: Failed to read the 'contentDocument' property from 
'HTMLIFrameElement': Blocked a frame with origin "chrome-extension://ID" from 
accessing a frame with origin "https://www.youtube.com".  The frame requesting 
access has a protocol of "chrome-extension", the frame being accessed has a 
protocol of "https". Protocols must match.

我正在尝试隔离该div#content以便于从我的新标签页导航。我见过建议在manifest.json文件中使用 "all_frames":true 的解决方案，但这似乎并不能解决它。有什么想法吗？谢谢！

从这里的描述和您最近提出的 chrome 扩展相关问题来看，我想建议您从官方指南中了解更多信息，因为您似乎对事件页面和内容脚本感到困惑（您应该知道all_frames仅适用于内容脚本）。

看看同源政策，你应该知道Chrome扩展程序不允许您访问内容iframe的文档。

由于您的目的是从 youtube 中提取 #content 部分，然后将其附加到新标签页中的画布中，为什么不呢

  1. 只需向YouTube发送Ajax请求
  2. 解析返回的 HTML 响应并提取 #content 部分
  3. 然后将其附加到画布

代码如下所示：

Manifest.json

{
    "name": "Your extension name",
    "manifest_version": 2,
    "version": "1.0",
    "chrome_url_overrides": {
        "newtab": "newtab.html"
    }, 
    "permissions": [
        "https://www.youtube.com/feed/subscriptions/*"
    ]
}

新标签.html

<!DOCTYPE html>
<html> 
    <head>   
    </head>
    <body>
        <div id="canvas"></div>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="script.js"></script>
    </body>
</html>

脚本.js

$.post("https://www.youtube.com/feed/subscriptions", function(html) {
   $(html).find("#content").appendTo('#canvas');
});

请注意，youtube页面中的原始图片src看起来像src="//..."，您应该在Chrome扩展程序//之前添加正确的域。而且YouTube有很多脚本要加载，你还需要处理这部分逻辑。

最后并非最不重要的一点是，我认为最好的方法是从 youtube 中找到一些公共的 3rd 方 api，我没有使用它，但似乎 Youtube |Google Developer 可能会有所帮助。

相关文章：