Chrome 扩展 - javascript return 结果弹出 HTML

Question

我正在开发 chrome 扩展，但我不知道如何将 popup.js 中返回的 javascript 响应传递回 popup.html（这样用户就可以查看结果）。我尝试将 <div id="tabs"> </div> 添加到 popup.html 中，认为这会动态带回 function(tabs) 结果，但事实并非如此，非常感谢任何见解。

popup.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="myButton.css">
  </head>
  <body style="background-color:Gray;">
     <a href="#" class="myButton">Scan</a>
     <script src=popup.js></script>
     <div id="tabs"> </div>
  </body>
</html>

popup.js

chrome.tabs.query({
    active: true,
    currentWindow: true
}, function(tabs) {
    var tabURL = tabs[0].url;
    var api = "https://api.us-east-2.amazonaws.com..."
    console.log(tabURL);
    console.log(api)
    userdata = {"url":tabURL}
    console.log(userdata)
    
    fetch(api, {
    method: 'POST',
    body: JSON.stringify(userdata),
    })
   .then((resp) => resp.json())
   .then(function(response) {
    console.info('fetch()', response);
    return response;
}); 
});

Answer 1

您可以使用 popup.js 将元素插入 popup.html。

例如

function addSpan(response) {
        let tabDiv = document.getElementById('tabs');
        let newSpan = document.createElement('span');
        newSpan.innerText = "Test123".
        // newSpan.innerText = response;
    
        tabDiv.append(newSpan);
}

Chrome 扩展 - javascript return 结果弹出 HTML

Chrome Extension - javascript return results to popup HTML

javascript

html

google-chrome-extension