Chrome扩展程序：如何通过单击html弹出窗口中的按钮在新选项卡中打开指定链接？答案

【问题标题】：Chrome extension: How to open a specified link in a new tab by clicking a button in the html popup?Chrome扩展程序：如何通过单击html弹出窗口中的按钮在新选项卡中打开指定链接？
【发布时间】：2025-12-29 23:45:16
【问题描述】：

我正试图将脚浸入正在创建镀铬扩展的池水中。我试着从我认为很简单的东西开始，但事实证明它让我很困惑，因为我真的不知道在哪里可以阅读关于这类事情的信息。

无论如何，目前我的目标是拥有一个执行以下操作的 chrome 扩展：您单击扩展图标 -> 一个 HTML 弹出文件打开并显示单个按钮 -> 当您单击此按钮时，它会在新的 chrome 选项卡中打开一个指定的链接，并将其更改为您的活动选项卡。

从我的搜索中，我发现我可能必须使用后台脚本，这样我才不会违反关于 Manifest 版本 2 或类似内容的政策，我试过了，但它并没有真正适合我.如果这不是问题，我真的不想去创建一个全新的脚本。

这是我的 manifest.json 文件，后面是我的 popup.html 文件。

 {
  "manifest_version": 2,

  "name": "strong text",
  "author": "authorname",
  "description": "desctext",
  "version": "1.4",

  "permissions": [
    "tabs"
  ],

"icons": { "16": "icon16.png",
           "48": "icon48.png",
          "128": "icon128.png" },


  "browser_action": {
    "default_popup": "popup.html"
  }
}

<!doctype html>
<html>
<head>
    <title>Hovertext</title>
    <script src="popup.js"></script>
</head>
<body>

    <div id="header">
    <h1>Header</h1>
    </div>
    <div id="divider">
        <p><button type="button" id="buttonA">Button Text</button>
	<script>
	var button1 = document.getElementById("buttonA");
	button1.addEventListener("click", function() {
    chrome.tabs.create({url: "http://www.google.com/"});
	});
	</script>
    </div>
        <div id="footer">
            footer stuff here
            </div>
</body>
<style>
    body {
        background-image: url("https://s-media-cache-ak0.pinimg.com/736x/51/3e/4f/513e4f5274ec48f29b894b0b8409658f.jpg");
    }
    #header {
        background-color:rgb(96, 222, 72);
        text-align:center;
        padding:1px;
    }
    #footer {
        background-color:rgb(96, 222, 72);
        clear:both;
        text-align:center;
        padding:1px;
    }
    #divider {
        text-align:center;
    }
    #buttonA {
        color:white;
        background-color:rgb(0, 152, 255);
        border-width:3px;
        border-color:white;
    }
    #buttonA:hover {
        color:rgb(0, 152, 255);
        background-color:white;
        border-width:3px
        border-color:rgb(0, 152, 255);
    }
</style>
</html>

我对这种类型的东西和堆栈溢出一般是新手，所以如果我没有正确澄清某些事情，请告诉我，提前感谢您的帮助！

【问题讨论】：

检查这个问题*.com/questions/3188384/…
这个链接非常感谢@Rio，尽管我不太确定如何更改 sn-p chrome.browserAction.onClicked.addListener(function(activeTab) { var newURL = "http://www.google.com/"; chrome.tabs.create({ url: newURL }); }); 以在 popup.html 中的按钮上使用。我开始认为我可能需要一个后台脚本来在后台监听按钮推送。

标签： javascript jquery html google-chrome

【解决方案1】：

点击某个按钮打开新标签的简单代码。尝试在您的扩展程序上使用它。

manifest.json：

{
  "name": "Test",
  "version": "1.1",
  "description":
    "Description",
  "permissions": [
    "notifications",
    "fontSettings"
  ],
  "options_page": "options.html",
  "manifest_version": 2
}

option.html:

<!doctype html>
<html>
  <head>
    <title>Demo</title>
    <link href="style.css" rel="stylesheet" type="text/css">
    <script src="options.js"></script>
  </head>
  <body>
    <input type="button" id="btnOpenNewTab" value="Click to open new tab"/>
  </body>
</html>

option.js：

window.addEventListener('DOMContentLoaded', function() {
    // your button here
    var link = document.getElementById('btnOpenNewTab');
    // onClick's logic below:
    link.addEventListener('click', function() {
        var newURL = "http://*.com/";
        chrome.tabs.create({ url: newURL });
    });
});

【讨论】：

非常感谢 Rio，您帮我解决了这个问题，它可以无缝运行，非常适合帮助我前进。

【解决方案2】：

您将此源代码用于弹出窗口的按钮

window.opener.open("http://www.google.com/");

【讨论】：

感谢您给我的帮助，尽管您提供的源代码我相信是用来打开新窗口的，而不是新标签页。
我也在这里查看了这篇文章：*.com/questions/4907843/…，其中指出可能无法在 javascript 的新标签中打开链接，并且它的所有浏览器首选项。