How to append a list in popup.html page in chrome extension?

I’m writing a simple javascript code for chrome extension which will extract some data from the webpage. My plan is if I click the button it’ll popup a few buttons on a popup HTML page. If I click one of these buttons, it’ll extract some data and show it on the same page as a list. However, it couldn’t be able to show the result on the popup page. Am I missing something here?

Thanks in advance.

popup.js

        // Create an unordered list
        let list = document.createElement('ul');
      
        // Create a list item for each wizard
        // and append it to the list
        wizards.forEach(function (wizard) {
          let li = document.createElement('li');
          li.textContent = wizard;
          list.appendChild(li);
      
        });
        if(DisplayList)
        {
          DisplayList.appendChild(list);
          document.body.appendChild(DisplayList)
          console.log(DisplayList.textContent);
        } 

popup.html

    <button id="filterButton">Filter</button>  
    <ul  id="displayList" class="displayList"></ul>
    <script type="text/javascript" src="background.js"></script> 

filter.js

var filter = document.getElementById('filterButton');
if(filter){
    filter.addEventListener('click', function injectTheScript2() {
        chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
        chrome.tabs.executeScript(tabs[0].id, {file: "filter.js"});
        console.log("Filter.js Injected successfully");
    });
    });
}

Source: Ask Javascript Questions

LEAVE A COMMENT