Chrome 扩展：在注入给定页面后更改 iframe 源内容答案

【问题标题】：Chrome Extension : changing iframe source content after injected to a given pageChrome 扩展：在注入给定页面后更改 iframe 源内容
【发布时间】：2014-09-01 07:08:39
【问题描述】：

我已经开始编写一个 chrome 扩展，我想做的是以下内容： 1）检测新标签加载，并在完全加载时执行（2） 2) 在加载的页面中注入 iframe 3) 更改 iframe 的 src 内部 HTML。

我的清单是：（此时我没有使用 localhost 权限）

{
    "manifest_version" : 2,
    "name" : "My extension",
    "version" : "0.1",
    "description" : "Extensioning",
    "background" : {
        "page" : "background.html"
        },

    "permissions": [
        "tabs","https://*/*","http://*/*","http://localhost/*"],
    "web_accessible_resources" : ["background.js","content_script.js","MainExtension.html","MainExtension.css","MainExtension.js","jquery-1.11.1.min.js"]
}

我的背景.html：

<html>
    <head>
        <script type="text/javascript" src ="jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="background.js"></script>
    </head>
    <body>
    </body>
</html>

我的 background.js（检测加载的选项卡并将脚本注入页面）

chrome.tabs.onUpdated.addListener(function(tabId,changeInfo,tab)
{
    if(changeInfo.status == "complete")
    {
        alert("good");
        chrome.tabs.executeScript(tabId,{ file : "content_script.js"});
    }

});

我的 content_script.js :(使用 src "MainExtension.html" 添加元素 'injected_frame')

var f = document.createElement('iframe');
f.id = "injected_frame";
f.style.zIndex = "2147483647";
f.style.top = "10%";
f.style.left = "0px";
f.style.position = "fixed";
f.style.width = "320px";
f.style.height = "240px";
f.style.border = "0px";
f.style.margin = "0px";
f.style.padding  = "0px";
f.src = chrome.extension.getURL('MainExtension.html');
document.body.appendChild(f);

MainExtension.html（显示在 iframe 中）：

<!DOCTYPE html>
<html>
<head >
    <link rel="stylesheet" href ="MainExtension.css">
    <script type="text/javascript" src ="jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src ="MainExtension.js"></script>
</head>
<body>
<div id = "wrapper">
    <div id = "headersection">
        <p id = "imgwrapper">
            <img src ="mystock.png" alt = "My E" id = "logoimg">
        </p>
        <p id = "headertext">My Extension</p>
    </div>
    <hr>
    <div id = "infosection">
        <p> p found : bla1,bla2,</p>
        <p> a : s1 </p>
        <hr>
    </div>
</div>
<div id = "datas">sdfsdfsdfsdfsdf</div>
</body>
</html>

我想做的是：在注入脚本（content_script.js）中添加 iframe 后，我想更改 MainExtention.html，它是 'injected_frame' 元素的 src。

我该怎么做，或者您能提出任何替代方案吗？

谢谢。

【问题讨论】：

上面的代码当前是否正常工作，即 iframe 是否被正确创建？另外，您希望 iframe html 在什么条件下更改？用户点击了什么？具体网站？
是的，iframe 已正确创建。我希望在我的 background.js 脚本向远程服务器请求数据后更改 iframe html，然后我想在 iframe html 中显示它（这里的请求不是问题）。

标签： javascript iframe google-chrome-extension

【解决方案1】：

我会尝试以下两种方法之一：

1) 直接从内容脚本向服务器发出数据请求（推荐）。

2) 通过消息传递发送 HTML：

修改content_script.js:

chrome.runtime.onMessage.addListener(function(html) {
  if (html) {
    f.innerHTML = html;
  }
});

并修改background.js 以包含以下内容：

function onReceiveFromServer(html) {
  chrome.tabs.sendMessage(tabId, html);
}

【讨论】：

我还没有检查它，但我的 content_script 不是真正的 content_script，它是一个注入脚本，从文档中我了解到我不能在那里使用 chrome API，或者我是错了吗？
我认为它仍然被视为内容脚本。您不能使用 chrome.tabs 之类的东西，但 chrome.runtime 应该使用适当的权限。
嘿。我使用您的建议从内容脚本向服务器发出数据请求（完美运行）。在我的 background.js 我现在得到了：chrome.tabs.onUpdated.addListener(function(tabId,changeInfo,tab) { if(changeInfo.status == "complete") { chrome.tabs.query({active: true, currentWindow ：true}，函数（标签）{ chrome.tabs.sendMessage（标签[0].id，{url：“”+tab.url}，函数（响应）{警报（响应.告别）；}）；}） ; } });在这里我向注入的脚本发送消息
在inject_script.js中我得到了：chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) { var content = ""; var mainurl = //my server $.get (mainurl,function(data) { content = data; if(content.trim() != ""){ AddFrame(); } }); });我在这里收到消息并向服务器请求。问题是我无法将响应发送回后台，如果我将它放在 $.get 中，它不会发送任何响应......