javascript - 如何在 chrome 扩展中的 popup.html 页面中附加列表？

Question

我正在为 chrome 扩展编写一个简单的 javascript 代码，它将从网页中提取一些数据。我的计划是，如果我单击按钮，它将在弹出的 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> 

过滤器.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");
    });
    });
}