谷歌Chrome扩展:传递javascript变量到iframe src

Google Chrome Extension: Passing javascript variable to iframe src

本文关键字：变量 iframe src javascript 传递 Chrome 扩展 谷歌      更新时间：2023-09-26

我在权限中添加了"tabs"，但这段代码不起作用。当url直接传递而不是从脚本传递时，iframe才会工作。

    <html> 
    <head> 
    </head>
    <body >
    <iframe src="www" id="link" width="400" height="300">
    <p>Your browser does not support iframes.</p>
    </iframe>
    <script>
    var url1="xxx";
    chrome.tabs.getSelected(null,function(tab) {
    var url1= tab.url;
    });
    document.getElementById("link").src=url1;
    </script>
    </body>
    </html>

让我看看我是否理解了这个问题。

您需要在您的内容脚本清单中添加访问具有iframe的页面的权限。一旦你这样做，你使用内容脚本和它的消息传递传递数据到该iframe。

在上面的例子中，你需要注入一个内容脚本，所以在你的manifest中: 
"content_scripts": [{
    "matches": ["https://www.my.injected.url/*"],
    "js": ["injected_script_that_has_the_iframe.js"],
    "run_at": "document_end",
    "all_frames": true
}]

然后在该内容脚本中，您可以使用普通JavaScript设置URL:

document.getElementById("link").src= someURL;

现在，URL从哪里来?是你的分机吗?如果是，使用Message Passing请求。

chrome.extension.sendRequest({method: "GetURL"}, function(response) {
  document.getElementById("link").src= response.url;
});

在后台页面中，监听来自后台页面的请求:

chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
    if (request.method == "GetURL")
      sendResponse({url: "http://rim.com"});
    else
      sendResponse({}); // snub them.
});

回顾一下，您的内容脚本询问您的扩展(背景页)，URL是什么，一旦它得到响应，它就更新iframe

相关文章：