从 JavaScript 函数写入 HTML 元素答案

【问题标题】：Write to HTML Element from JavaScript Function从 JavaScript 函数写入 HTML 元素
【发布时间】：2019-02-03 01:19:01
【问题描述】：

我有一个 JavaScript 文件，我在其中使用 Chrome 扩展程序来收集有关网页的数据，我想在 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>

【问题讨论】：

大多数元素中没有text 这样的属性。您可能是指textContent。还假设弹出窗口是 browserAction 弹出窗口，onActivated 侦听器将不起作用，因为弹出窗口仅在显示时运行并在选项卡开关上隐藏时销毁 - 您完全不需要此侦听器，或者您需要重新设计扩展以使用背景脚本和不同的指示方法。请务必阅读文档中的架构文章。
明白了，你是对的。我很难找到正确的事件监听器，因为如果browser_action 有一个弹出窗口，chrome.browserAction.onClicked.addListener(function callback) 不会触发，我这样做了。对于我正在测试的这个示例，我的目标是在单击扩展时在弹出窗口中简单地显示域。到目前为止，这仅在导航到已加载页面的页面时才有效，但我的目标是即使单击新选项卡并导航到网址也使其工作。

标签： javascript html google-chrome-extension google-chrome-app

【解决方案1】：

假设您已经定义了manifest.json 和popup.js correctly，您可以使用.innerHTML 或.textContent：

var x = document.getElementsByName("output1");
x[0].innerHTML = host;
/*x[0].textContent = host;*/

请注意，getElementsByName 正在使用您选择的名称选择所有元素。如果您有超过 1 个使用相同名称的元素，则示例中为 output1。然后你需要从0中选择使用索引，就像sn-p中的例子一样。

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>

【讨论】：

由于某种原因，我收到一个错误，提示无法在 x[0].innerHTML = host; 上设置 undefined 的 innerHTML
不，它没有。我正在使用var x = document.getElementsByName("output1").value = url; console.log("popup element to populate: " + x); 记录内容，但由于某种原因，当我单击我的扩展程序以显示页面时，UI 中没有为output1 填充任何内容。
我不知道为什么，但它正在工作here，问题可能在 js 函数中。此外，当我测试时，没有 innerHTML 的未定义错误。 .innerHTML 和 .textContent 都可以正常工作。

【解决方案2】：

通过使用以下解决并使用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"];

}); });

【讨论】：

【解决方案3】：

你应该在输出元素中添加一个id，然后通过你的js访问它。

用 id 更新你的输出标签：

<output id="output1" name="output1"></output>

在 js 中更改你的赋值行：

  output1.text = host;

到：

document.getElementById("output1").value = host;

【讨论】：

似乎无法使用 Chrome 扩展设置：“响应 tabs.query 时出错：TypeError：无法在 Object.callback 处设置 _generated_background_page.html:1 属性‘值’为空（ chrome-extension://kbpcibnddgfmioggkflampdafhgkibij/popup.js:80:20) 在 chrome-extension://kbpcibnddgfmioggkflampdafhgkibij/popup.js:49:15"