Chrome extension seems to be ignoring javascript to launch a new url
Question
So the extension installs when I hit load unpacked just fine, and I can fill in the boxes. On click, i have it set to just launch google.com until i can find why its not working. It seems to me that the javascript is not running at all. The script file seems to be called correctly, ive double checked the names.
The manifest file - I don't think that the js file needs to be called here.
{
"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"]
}
the html file
<!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>
the js file - i tried adding an alert (uncommented before) to see if it was even getting to the java script
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
1 answers
solution1
0 2020-08-31 04:48:20
Since the popup is a separate window, it has its own devtools. In Chrome you can right-click in the popup, then click "inspect" and you'll see an error in devtools console about trying to use addEventListener of null. In Firefox the method is different .
The problem is that popup.js runs before other elements are added in DOM.
Solution 1 is to load the script at the end of the page:
<script src="popup.js"></script>
</body>
</html>
Solution 2 is to wait for DOMContentLoaded in popup.js :
document.addEventListener('DOMContentLoaded', () => {
// here goes your old contents of popup.js
// ....................
}, {once: true});
If you use jQuery you can use $ like this $(() => { /* your code here */ }) , documentation .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.