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

Question

我已经开始编写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"]
}

我的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>

我的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 ：（添加元素“ injected_frame”和src“ MainExtension.html”）

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。

我该怎么办，或者您可以提出其他建议？

谢谢。

Answer 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);
}

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

问题描述

1 个解决方案

解决方案1
0 2014-09-01 20:19:38

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

问题描述

1 个解决方案

解决方案1 0 2014-09-01 20:19:38

解决方案1
0 2014-09-01 20:19:38