从JavaScript函数写入HTML元素_Javascript_Html_Google Chrome Extension_Google Chrome App

从JavaScript函数写入HTML元素

javascript html google-chrome-extension

从JavaScript函数写入HTML元素,javascript,html,google-chrome-extension,google-chrome-app,Javascript,Html,Google Chrome Extension,Google Chrome App,我有一个JavaScript文件，我正在使用Chrome扩展来收集网页中的数据，我想在弹出窗口中显示它。我是web开发新手，在某些事件侦听器执行时，我很难确定将此页面信息作为文本从我的.js文件发送到我的.html文件的最佳方式。我试图写入的元素是output1 popup.js chrome.tabs.onActivated.addListener(function (tab) { chrome.tabs.query({ active: true, currentWindow: t

我有一个JavaScript文件，我正在使用Chrome扩展来收集网页中的数据，我想在

弹出窗口中显示它。我是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;
  });
});

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"];

popup.html
<!doctype html>
<html>
  <head>
  </head>
  <body>
    <h3>Domain output</h3>
    <output name="output1"></output>
    <script src="popup.js"></script>
  </body>
</html>


域输出
您应该向输出元素添加一个id，然后从js通过该id访问它
使用id更新输出标记：
<output id="output1" name="output1"></output>

致：
假设您已经定义了manifest.json
和popup.js
，您可以使用或：
请注意，正在使用您选择的名称选择所有元素。如果有多个元素使用相同的名称，则示例中的输出为output1
。然后，您需要从0
中选择使用索引，就像代码段中的示例一样

var host=“主机内容”；
document.addEventListener（'DOMContentLoaded'，函数（）{
var x=document.getElementsByName（“output1”）；
x[0]。textContent=host；
x[1].innerHTML=“h3”；
});
使用以下方法解决，并使用chrome.storage.sync
检索要传递给HTML的保存值
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;
  });
});

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"];

}))；
});
 使用Chrome扩展设置似乎不起作用：“响应制表符时出错。查询：类型错误：无法设置\u生成的\u背景\u页面。html:1 Object.callback（Chrome）处null的属性“值”-extension://kbpcibnddgfmioggkflampdafhgkibij/popup.js:80:20)在铬-extension://kbpcibnddgfmioggkflampdafhgkibij/popup.js:49:15"由于某种原因，我收到一个错误，无法在x[0]上设置未定义的innerHTML不，它没有。我使用var x=document.getElementsByName（“output1”）.value=url记录内容；log（“要填充的弹出元素：“+x”）
但是由于某种原因，当我点击我的扩展显示页面时，UI中没有为output1
填充任何内容。我不确定为什么，但它正在工作，问题可能出在js函数中。此外，当我在测试时，没有未定义错误的innerHTML
。.innerHTML
和.textContent
都可以正常工作。在大多数元素中没有text
这样的属性。你的意思可能是textContent
。另外，假设弹出窗口是browserAction弹出窗口，onActivated listener将无法工作，因为弹出窗口仅在tab switch上显示时运行，而在隐藏时会被破坏-您可能不完全需要此侦听器，或者需要重新编写扩展以使用背景脚本和不同的指示方法。确保研究文档中的架构文章。明白了，你是对的。我很难找到正确的事件监听器，因为chrome.browserAction.onClicked.addListener（函数回调）
如果browser\u操作有一个弹出窗口，则不会触发，我就是这样做的。对于我正在测试的这个示例，我的目标是在单击扩展时在弹出窗口中显示域。到目前为止，这仅在导航到已加载页面的页面时有效，但我的目标是，即使在单击新选项卡并导航到web地址时也能工作。
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"];