gpt4 book ai didi

javascript - 无法使用 Chrome 扩展程序弹出窗口中的按钮打开新选项卡

转载 作者:行者123 更新时间:2023-12-03 10:59:49 25 4
gpt4 key购买 nike

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

ma​​nifest.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});
});

当我尝试执行此操作时,我可以看到弹出窗口,但是当我单击“生成”时,没有任何反应。我的代码有什么问题吗?

最佳答案

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

一旦遇到<script>标签,它被执行。

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

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

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

关于javascript - 无法使用 Chrome 扩展程序弹出窗口中的按钮打开新选项卡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28142515/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com