Question

我想在单击获取数据按钮时显示我在后台的数组数据但是当我点击按钮时，没有任何操作完成chrome ext。感谢。

的manifest.json：

{
    "name":"modz",
    "manifest_version":2,
    "version":"1.0",
    "description":"this ext. will help you record all the urls you have visited",

    "background": {
    "scripts": ["background.js"]

  },

    "browser_action":
    {
    "default_icon":"icon.png",
    "default_popup":"popup.html"
    },

    "permissions":[
          "tabs"
        ]

}

background.js：

var data=[];
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
    var url = tab.url;
    if (url!=="undefined" && changeInfo.status=="complete")
  {
   data.push (tab.url);
   alert(data.length);
  }
  }

); 
chrome.runtime.onMessage.addListener(function(message,sender,sendrespose){
//send the array data back
});

popup.js：

document.addEventListener('DOMContentLoaded', function () {
   document.getElementById('btn').addEventListener('click',function(){
    chrome.runtime.sendMessage("getdata");
   });
});

popup.html

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="C:\Users\modz\Desktop\modz_extention\popup.js"></script>
    <style type="text/css">
     body{
       width:440px;
     }
    </style>
</head>
<body>
<input  id="btn"  type="button"  value="get data" />
<div id="data"></div>

</body>
</html>

Answer 1

消息传递的官方参考是here。在您的情况下，您希望background.js拥有

chrome.runtime.onMessage.addListener(function(message,sender,sendResponse){
    sendResponse({"dataArray":data});
});

popup.js会有

document.addEventListener('DOMContentLoaded', function () {
    document.getElementById('btn').addEventListener('click',function(){
        chrome.runtime.sendMessage({},function(response){
            document.getElementById("data").textContent = response.dataArray.toString();
        });
    });
});

这也适用于内容脚本。但是，如果内容脚本以默认document_end运行，则不需要DOMContentLoaded事件，因为之后会发生document_end。

这实际上是发送一条空消息（空对象{}）。如果您要发送不同的消息，则需要更改它。这也是message中未使用background.js的原因。

由于您实际上并未发送消息，因此另一种方法是使用getBackgroundPage。 background.js不需要听众，popup.js会有：

chrome.runtime.getBackgroundPage(function(backgroundWindow){
    document.getElementById("data").textContent = backgroundWindow.data.toString();
});

还有两件事：

popup.html无法使用popup.js的绝对路径。将两者放在扩展目录中，并使用相对路径：src="popup.js"。
Google建议您将背景页面转换为event pages。最大的区别是你不能在事件页面中拥有全局变量data（你可以，但是当事件页面重新加载时它会被重置）。如果您无法正常工作，我建议您将扩展程序作为后台页面，然后发布其他问题。

如何从后台获取数据以显示在弹出页面中

1 个答案: