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

问题描述

我正在为 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> 

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）