Chrome扩展似乎忽略了javascript来启动新的url

Chrome扩展似乎忽略了javascript来启动新的url,javascript,html,google-chrome-extension,manifest,Javascript,Html,Google Chrome Extension,Manifest,因此,当我点击LoadUnpacket时,扩展就可以安装了,我可以填充这些框。点击后,我将它设置为只启动google.com,直到我找到它不工作的原因。在我看来,javascript根本没有运行。脚本文件似乎调用正确,我仔细检查了名称 清单文件——我认为这里不需要调用js文件 { "manifest_version":2, "name": "Market Refresher Ext", "description"

因此,当我点击LoadUnpacket时,扩展就可以安装了,我可以填充这些框。点击后,我将它设置为只启动google.com,直到我找到它不工作的原因。在我看来,javascript根本没有运行。脚本文件似乎调用正确,我仔细检查了名称

清单文件——我认为这里不需要调用js文件

{
"manifest_version":2, 
"name": "Market Refresher Ext", 
"description": "This extension will push a url with parameters for facebook marketplace",
"version": "1.0", 

"browser_action":{
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"activeTab"]
}
html文件

<!DOCTYPE html>
<html>
   <head>
       <title>Market Refresher</title>
       <script src="popup.js"></script>
   </head>
   <body>
   
   <h1>Market Refresher</h1>
    <label for="City">City:</label>
    <input type="text" id="City" name="City"><br><br>

    <label for="daysSinceListed">DaysSinceListed:</label>
    <input type="text" id="daysSinceListed" name="daysSinceListed"><br><br>

    <label for="query">Query:</label>
    <input type="text" id="Query" name="query"><br><br>

    <label for="category_id">category_id:</label>
    <input type="text" id="CategoryId" name="Category Id"><br><br>

    <label for="Refresh">Refresh:</label>
    <input type="text" id="Refresh" name="Refresh"><br><br>

    <label for="MaxPrice">MaxPrice:</label>
    <input type="text" id="MaxPrice" name="Max Price"><br><br>

     
    <button id="StartRefreshing">Start Rotation!</button><br></br>


    
</body>
</html>

由于弹出窗口是一个单独的窗口,因此它有自己的devtools。在Chrome中,您可以在弹出窗口中单击鼠标右键,然后单击“检查”,您将在devtools控制台中看到关于尝试使用空的addEventListener的错误。在Firefox中,方法是

问题在于popup.js在DOM中添加其他元素之前运行

解决方案1是在页面末尾加载脚本:


解决方案2是等待在popup.js中加载DOMContents:

document.addEventListener('DOMContentLoaded',()=>{
//这是您以前的popup.js内容
// ....................
},{once:true});
如果您使用jQuery,您可以像这样使用
$
(()=>{/*您的代码在这里*/})

document.getElementById("StartRefreshing").addEventListener("click", build);

//make a function that builds the string and then passes it to 
function build(){
//alert ("Hello World!");
 
//collect data from a text box if filled
let a = document.getElementById("City").value;
let b = document.getElementById("daysSinceListed").value;
let c = document.getElementById("Query").value;
let d = document.getElementById("CategoryId").value;
let e = document.getElementById("Refresh").value;
let f = document.getElementById("MaxPrice").value;
//alert (a+b+c+d+e+f);
//append to string if filled
//temporarily assume that it is all filled
let urlstring = "https://www.facebook.com/marketplace/" + a + "/search?daysSinceListed=1&query=" + c + "&category_id=" + d + "&exact=false";
//console.log(urlstring);
//window.location.href = "google.com";
chrome.tabs.update({
     url: "http://www.google.com/"
});
//place string into URL
}
//place string into URL