动态更新 popup.html 内容答案

【问题标题】：update popup.html content dynamically动态更新 popup.html 内容
【发布时间】：2015-05-28 03:27:09
【问题描述】：

我正在从 contentscript 向 popup 发送一条消息，并尝试在点击扩展程序时显示收到的消息。

只有当我检查弹出窗口

时，我才能看到正在接收消息

contentscript.js

    console.log("content script");      

    chrome.runtime.sendMessage("hello",function(response)
    {
        console.log("sending message");        
    });

popup.js

console.log("popup script");   

function onReq(request, sender, sendResponse)
{
  ph=request;
    console.log("msg: "+request);
  document.getElementById("para").innerHTML = "msg: "+request;
}

chrome.runtime.onMessage.addListener(onReq);

popup.html

<!doctype html>
<html>
  <head>
    <title>Example</title>

  </head>
  <body>
    <div id="status"></div>
    <p id="para">shows received message here</p>
  </body>
   <script src="popup.js"></script>
</html>

我想接收消息并在单击时显示消息，而无需打开控制台。我怎样才能做到这一点。

【问题讨论】：

标签： javascript google-chrome-extension popup google-chrome-devtools

【解决方案1】：

每次打开/关闭弹出窗口时都会创建/销毁弹出窗口。因此，在关闭时向其发送消息将不起作用。一个简单的解决方案是将最新消息存储在chrome.storage 中，然后从弹出窗口中读取值。

【讨论】：

每次我打开一个新选项卡并运行扩展程序时，仍会显示以前的值。如何创建不同的存储实例，以便每个选项卡都有自己的存储空间。
@Vinay 整个扩展共享存储。因此，您需要将消息存储在一个对象中，其中每条消息都由选项卡 ID 索引。 chrome.tabs API 可能会有所帮助。
见这里 - stackoverflow.com/questions/6202953/…