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

Question

我正在尝试编写一个 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>"]
}

popup.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>

popup.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});
});

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

Answer 1

Chrome 开始按标签解析您的 HTML 文件标签并填充 DOM.

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

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

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

document.addEventListener("DOMContentLoaded", function() {
  document.getElementById("btngenerate").addEventListener(/*...*/);
});

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

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

javascript

google-chrome-extension