Chrome 扩展程序似乎忽略了 javascript 来启动新的 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.单击后，我将其设置为仅启动 google.com，直到我找到它不工作的原因。 It seems to me that the javascript is not running at all.在我看来，javascript 根本没有运行。 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.清单文件 - 我认为这里不需要调用 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"]
}

the html file 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>

the js file - i tried adding an alert (uncommented before) to see if it was even getting to the java script js 文件 - 我尝试添加一个警报（之前未注释）以查看它是否甚至进入了 java 脚本

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

Answer 1

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.在 Chrome 中，您可以在弹出窗口中右键单击，然后单击“检查”，您将在 devtools 控制台中看到有关尝试使用 null 的 addEventListener 的错误。 In Firefox the method is different .在 Firefox 中，方法是不同的。

The problem is that popup.js runs before other elements are added in DOM.问题是 popup.js 在其他元素添加到 DOM 之前运行。

Solution 1 is to load the script at the end of the page:解决方案1是在页面末尾加载脚本：

  <script src="popup.js"></script>
</body>
</html>

Solution 2 is to wait for DOMContentLoaded in popup.js :解决方案 2是在popup.js 中等待 DOMContentLoaded ：

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 .如果你使用 jQuery，你可以像这样使用$ $(() => { /* your code here */ }) ，文档。

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

问题描述

1 个解决方案

解决方案1
0 2020-08-31 04:48:20

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

问题描述

1 个解决方案

解决方案1 0 2020-08-31 04:48:20

解决方案1
0 2020-08-31 04:48:20