Question

我在弹出式窗口中找到的所有教程与我需要的内容略有不同，而且我没有专门的知识来根据我的需要修改它们。

我有一个browser_action图标集，当你点击它时会从HTML创建一个弹出窗口，我在一个单独的文件中有一个javascript，它将XMLHttpRequest发送给API。

这就是我想要完成的事情，但如果不可行，我可以采取其他方式来完成类似的结果：

我希望在按下浏览器加载项按钮时显示popup.html;然后popup.html应该运行脚本httpsdetect.js，它将从另一个站点接收数据;最后，httpsdetect.js应该将它收到的数据显示回popup.html。

这是我到目前为止所拥有的。

manifest.json：

＆＃13;

  "manifest_version": 2,
  "name": "HTTPS Detect",
  "version": "1.0",

  "description": "Whatever",

  "icons": {
    "48": "icons/border-48.png"
},

"browser_action": {
  "default_icon": "icons/browser-32.png",
  "default_title": "Page Info",
  "default_popup": "popup/popup.html"
}

}

＆＃13;

Popup.html：

＆＃13;

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="popup.css"/>
  </head>

  <body>

<script src="httpsdetect.js"></script> 
    
    
  </body>

</html>

＆＃13;

CSS文件：

＆＃13;

html, body {
  width: 100px;
}

.responseText {
  margin: 3% auto;
  padding: 4px;
  text-align: center;
  font-size: 1.5em;
  background-color: #E5F2F2;
  cursor: pointer;
}

.responseText:hover {
  background-color: #CFF2F2;
}

＆＃13;

将GET请求发送到另一个API的JavaScript。目前，它只是将收到的数据发送到控制台，但我希望它填充popup.html：

＆＃13;

console.log("Site hostname is: " + window.location.hostname);
var requestURL = "http://www.freegeoip.net/xml/" + window.location.hostname;
getRequest(requestURL, theCallback);

function getRequest(requestURL, theCallback) {
var xhr = new XMLHttpRequest();
xhr.open("GET", requestURL, true);
xhr.onload = function (e) {
  if (xhr.readyState === 4) {
    if (xhr.status === 200) {
      theCallback(xhr.responseText);
    } else {
      console.error(xhr.statusText);
    }
  }
};
xhr.onerror = function (e) {
  console.error(xhr.statusText);
};
xhr.send(null);
}

function theCallback(theResponse) {
  console.log(theResponse);
}

＆＃13;

Answer 1

这是一个简单的版本。你需要完成更复杂的事情：）

<body>
<span id="mySpan"></span>
</body>

JS：

function theCallback(theResponse) {
    var text = theResponse; // I don't know what you want... Just put the text of your response here.
    var mySpan = document.getElementById("mySpan");
    mySpan.textContent=text;
}

<强>更新

看看：https://developer.mozilla.org/en-US/Add-ons/SDK/Tutorials/Display_a_Popup

核心是：

var text_entry = require("sdk/panel").Panel({
  contentURL: data.url("text-entry.html"),
  contentScriptFile: data.url("get-text.js")
});

如何创建一个弹出式html，其中填充了从单独的Javascript生成的数据

1 个答案: