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