Fatal编程技术网
  • javascript/
  • Javascript Chrome扩展：在注入到给定页面后更改iframe源内容

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

javascript iframe google-chrome-extension

Javascript Chrome扩展：在注入到给定页面后更改iframe源内容,javascript,iframe,google-chrome-extension,Javascript,Iframe,Google Chrome Extension,我已经开始编写一个chrome扩展，我尝试做的是： 1检测新标签加载，并在完全加载时执行2 2将iframe注入加载的页面 3更改iframe的src内部HTML 我的清单是：目前我没有使用localhost权限 { "manifest_version" : 2, "name" : "My extension", "version" : "0.1", "description" : "Extensioning", "background" : {

我已经开始编写一个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"]
}
my background.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>
my content_script.js：使用src main extension.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);
iframe中显示main extension.htmls：

<!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>
我想做的是： 在注入的scriptcontent_script.js中添加iframe之后，我想更改maintextion.html，它是'injected_frame'元素的src

我该怎么做，或者你能建议其他选择吗

谢谢。

我想试试两件事中的一件：

1通过直接推荐的内容脚本向服务器发出数据请求

2通过消息传递发送HTML：

修改content_script.js：

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

function onReceiveFromServer(html) {
  chrome.tabs.sendMessage(tabId, html);
}
上面的代码当前是否正常工作，即iframe是否正确创建？另外，您希望在什么条件下更改iframe html？用户点击什么？特定网站？是的，iframe创建正确。我希望在我的background.js脚本请求远程服务器获取数据后，iframe html会发生变化，然后我希望在iframe html中显示它。这里的请求不是问题。我还没有检查它，但我的content\u脚本不是真正的content\u脚本，它是一个注入脚本，从文档中我了解到我不能使用ChromeAPI，或者我错了吗？我认为它仍然被认为是一个内容脚本。你不能使用诸如chrome.tabs之类的东西，但是chrome.runtime应该具有适当的权限。我使用了您的建议，使content scriptworks向服务器发出的数据请求变得完美。在我的background.js中，我现在得到了：chrome.tabs.onUpdate.addListenerfunctiontabId，changeInfo，tab{ifchangeInfo.status==complete{chrome.tabs.query{active:true，currentWindow:true}，functiontabs{chrome.tabs.sendMessagetabs[0].id，{url:+tab.url}，functionresponse{alertresponse.Afference；}；}；}；在这里，我向注入的脚本发送消息，在注入的脚本中，我得到了：chrome.runtime.onMessage.addListener functionrequest，sender，sendResponse{var content=；var mainurl=//我的服务器$.getmainurl，functiondata{content=data；ifcontent.trim！={AddFrame；}；}；在这里，我收到消息并向服务器发出请求。问题是我无法将响应发送回后台，如果我将其放在$.get中，它不会将任何响应发送回。。。 
chrome.runtime.onMessage.addListener(function(html) {
  if (html) {
    f.innerHTML = html;
  }
});

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