Chrome扩展：在弹出窗口中从iframe创建选项卡

Question

Chrome扩展：在弹出窗口中从iframe创建选项卡

3

在我的弹出页面中，有一个 iframe 标签，在其中有一个按钮。当点击该按钮时，会调用包含在 iframe 脚本中的函数。该函数包含对 chrome.tabs.create({ url: "..."}); 的调用，但是我一直收到 "Uncaught TypeError: Cannot call method 'create' of undefined". 的错误信息。我猜原因是我在 iframe 中，而不是在弹出页面本身。

是否有办法在 iframe 中创建一个新选项卡来克服这个障碍？编辑以下是我的代码。

以下内容加载到弹出页面的 iframe 中：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" type="text/css" href="style/frame_style.css" media="screen" />
  <script src='jquery-1.8.3.js'></script>
  <script src='scripts/frame_functions.js'></script>
</head>

<body>
  <div>
    <button value="Click to open Google in a new tab" class='new_tab_bt'></button>
  </div>
</body>
</html>

frame_functions.js:

$(document).on("click", '.new_tab_bt', function(){
  openNewTab(); 
});

function openNewTab()
{
chrome.tabs.create({ url: "https://www.google.com" });
}

- Subway

你是如何在iframe中添加onclick代码到按钮的？你能分享一下iframe和相关的点击代码吗？ - Sudarshan

感谢您的评论。已内联添加。 - Subway

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sudarshan · Answer 1

您的代码没有任何更改就可以正常工作，我已经添加了一个可供参考的工作代码；您的目标源HTML页面在哪里使用了iframe，您是如何从浏览器操作弹出窗口引用它的？如果这没有解决问题，请分享您是如何从浏览器操作弹出窗口引用您的iframe。

工作版本

manifest.json

简单的代码，注册了浏览器操作。

{
    "name": "Iframe Holder",
    "description": "https://dev59.com/u23Xa4cB1Zd3GeqPenGG",
    "version": "1",
    "manifest_version": 2,
    "browser_action": {
        "default_popup": "popup.html",
        "default_title": "Iframe."
    }
}

popup.html

在浏览器操作的弹出窗口中包含了目标页面。

<html>

    <body>
        <iframe width="300" height="300" src="iframe.html"></iframe>
    </body>

</html>

iframe.html

使用了您的代码，并删除了不相关的CSS文件等

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script src='jquery.js'></script>
        <script src='iframe.js'></script>
    </head>

    <body>
        <div>
            <button value="Click to open Google in a new tab" class='new_tab_bt'></button>
        </div>
    </body>

</html>

iframe.js

没有进行任何修改，直接使用了您的代码

$(document).on("click", '.new_tab_bt', function () {
    openNewTab();
});

function openNewTab() {
    chrome.tabs.create({
        url: "https://www.google.com"
    });
}