在 iFrame 中注入 JS 文件，通过 Google chrome 扩展名中的 ContentScript 进行

Injecting JS file in iFrame via ContentScript in Google chrome extension

本文关键字：扩展名 chrome ContentScript 进行 Google 注入 iFrame JS 文件 通过      更新时间：2023-09-26

我正在构建一个chrome扩展，通过内容脚本文件将我的script.js文件注入网页的所有iFrame中。循环浏览网页中的所有iFrame，并在head部分中注入我的script.js file。

我的内容脚本文件包含以下代码：

  var $iframe = $('#iframe');
    $iframe.ready(function() {
        $iframe.contents().find("head")
           .append("<script src='chrome://ext3241241234/script.js'/>");
    });

我的script.js文件包含以下代码：

var html = "<div id='cksBox'></div>"
$('body').append(html);

script.js只需在body中插入一个div元素即可。因此，我希望所有 iFrame 的主体最终都会有这个div 元素。

但这并没有发生。取而代之的是，我的主/父body元素有这个div 元素，而不是在 iFrame 正文中。假设以下是加载我的chrome扩展程序的网页：

<html>
<body>
    <div id='cksBox'></div>
    <iframe>
        <html>
            <head>
                <script src='chrome://ext3241241234/script.js'/>
            </head>
            <body/>
        </html>
    <iframe>
</body>

我可以看到我的script.js文件已加载到 iFrame 中。我尝试在脚本.js文件中调试这个，当我查询文档时，它返回父/主 html 的文档而不是 iFrame 的文档。我不明白当我的script.js文件被执行时，它的上下文应该是iframe，但它是主/父网页的文档。

希望我在这里清楚我的问题。

有人可以帮忙吗？

如果需要更多信息，请告诉我。

您应该直接使用script.js而不是chrome-extension前缀。

相关文章：