无法使用 Chrome 扩展程序弹出窗口中的按钮打开新标签页

Unable to open a new tab using a button within a Chrome Extension popup

本文关键字：新标签 按钮 标签 Chrome 扩展 程序 窗口      更新时间：2023-09-26

我正在尝试编写一个Chrome扩展弹出窗口，其中包含一些选项：根据所选选项，我必须生成一个URL并将其加载到新选项卡中。我已经尝试了几乎所有我找到的解决方案，但我仍然无法理解我做错了什么。我在下面提供了详细信息。

manifest.json 

{
    "name": "New Extension",
    "version": "1",
    "description": "New Extension",
    "manifest_version": 2,
    "browser_action": {
    "name": "New Extension",
    "default_popup": "popup.html",
    "default_icon": "icon.png"
    },
    "permissions": [ "tabs" , "<all_urls>"]
}

弹出窗口.html

<html>
<head>
  <link rel="stylesheet" href="style.css" type="text/css" />
  <script src="popup.js"></script>
</head>
<body style="width: 400px" bgcolor= "#FFFFFF">
    Operation:<input type="radio" name="operation" id="Google"     checked="checked">Google
    <input type="radio" name="operation" id="Yahoo">Yahoo<br/>
    <input type="button" name="btngenerate" id="btngenerate" value="Generate" />
</body>
</html>

弹出窗口.js

document.getElementById("btngenerate").addEventListener('click', function() {
    alert("in generate URL");
    var URL = "http://google.com";
    if (document.getElementById("yahoo").checked == true) 
        URL = "http://yahoo.com";
    chrome.tabs.create({url: URL});
});

当我尝试执行此操作时，我能够看到弹出窗口，但是，当我单击"生成"时，没有任何反应。我的代码有什么问题？

Chrome 开始逐个标记解析您的 HTML 文件标记并填充 DOM。

一旦遇到<script>标签，它就会被执行。

因此，您的代码在 DOM 中存在#btngenerate之前执行。

您需要将其包装在一个事件中，该事件将在文件完全读取并构造 DOM 后触发：

document.addEventListener("DOMContentLoaded", function() {
  document.getElementById("btngenerate").addEventListener(/*...*/);
});
相关文章：