我有哪里我使用的是Chrome扩展程序来收集数据aboout网页中的JavaScript文件，我想在一个popup显示它。我是新来的web开发时遇到了问题确定后一些事件侦听器执行从我.js文件发送本网页的信息文本到我的.html文件的最好方法。我试图写该元素output1。
popup.js
chrome.tabs.onActivated.addListener(function (tab) {
chrome.tabs.query({
active: true,
currentWindow: true
},
function (tabs) {
var tab = tabs[0];
var id = tab.id;
var url = tab.url;
var title = tab.title;
var host = new URL(url).hostname;
console.log("id: " + id + "\nurl:" + url + "\nhost:" + host + "\ntitle: " + title);
output1.text = host;
});
});
popup.html
<!doctype html>
<html>
<head>
</head>
<body>
<h3>Domain output</h3>
<output name="output1"></output>
<script src="popup.js"></script>
</body>
</html>
假设您已经定义manifest.json和popup.js correctly您可以使用.innerHTML或.textContent：
var x = document.getElementsByName("output1");
x[0].innerHTML = host;
/*x[0].textContent = host;*/
需要注意的是getElementsByName是选择您选择使用的所有元素名称。这在例子是output1，如果使用相同的名称有超过1元。然后，你需要使用从0指数像在片段的例子来选择。
var host = "host content";
document.addEventListener('DOMContentLoaded', function () {
var x = document.getElementsByName("output1");
x[0].textContent = host;
x[1].innerHTML = "h3";
});<output name="output1"></output>
<h3 name="output1"></h3>通过使用以下和使用chrome.storage.sync检索要传递到HTML中保存的值来解决。
popup.js
document.addEventListener("DOMContentLoaded", function (event) {
chrome.storage.sync.get("key", function (value) {
console.log("New key value: " + value["key"]);
document.getElementById("outputKey").value = value["key"];
}); });
你应该添加一个id输出元素，然后通过从您的js访问它。
更新ID为你的输出标签：
<output id="output1" name="output1"></output>
修改你的分配线从JS：
output1.text = host;
至：
document.getElementById("output1").value = host;