Как добавить список на страницу popup.html в расширении Chrome?

Question

Я пишу простой код javascript для расширения Chrome, который будет извлекать некоторые данные с веб-страницы. Я планирую, что если я нажму кнопку, на всплывающей HTML-странице появится несколько кнопок. Если я нажму одну из этих кнопок, она извлечет некоторые данные и отобразит их на той же странице в виде списка. Однако он не мог показать результат на всплывающей странице. Я что-то упустил?

Заранее спасибо.

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");
    });
    });
}