将数据注入 HTML 标签

Question

我正在为 Microsoft Edge 开发一个扩展，并从这里的文档中了解到 https://docs.microsoft.com/en-us/microsoft-edge/extensions/guides/creating-an-extension#writing-a-more-complex-extension 我可以使用 Javascript 进行数据操作。

虽然出于某种原因，当我尝试像这样修改 DOM 元素时：

<!DOCTYPE html>
<html>
<body>

<p></p>

<script type='text/javascript'>
  document.getElementsByTagName('P')[0].innerHTML = 'something';

</script>
</body>
</html>

我在任何 HTML / JAVASCRIPT 解释器中都得到了想要的结果，但是当我尝试在扩展中对其进行测试时，DOM 操作不起作用。 p 元素未填充 'something'。 manifest.json 文件包含在扩展文件夹中，我只是不在此处包含它，因为它与问题无关。

我该怎么办？

更新：

window.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
    <link rel='stylesheet' href='window.css'>

  </head>

<body>
<div><p></p></div>

<script src="window.js"></script>
</body>
</html>

window.js:

window.onload() {
  document.getElementsByTagName('P')[0].innerHTML = 'hakuna matata';
};

Answer 1

您应该使用 <script> 标签导入 JavaScript 函数，如下所示：

在 js 文件夹的 myfunction.js 文件中：

document.getElementsByTagName('p')[0].innerHTML = 'something';

在 html 文件中：

<!DOCTYPE html>
<html>
  <body>
    <p></p>
    <script src="js/myfunction.js"></script>
  </body>
</html>

我在Edge extension中测试过：如果直接在html页面中使用JavaScript函数是不行的。如果我们对 js 文件使用 link 那么它就可以工作了。

将数据注入 HTML 标签

Injecting data into HTML tag

javascript

microsoft-edge-extension