javascript - 使用 JS 添加 HTML 标签 | chrome 扩展

标签 javascript google-chrome-extension

我想构建一个 Chrome 扩展程序。

有一次我必须使用 JavaScript 添加一些新的 html 标签,但它不起作用。
因此,我在本地网络服务器和扩展程序中尝试了这个小示例。

HTML

<!DOCTYPE html>
<html>
<head>
  <title>||Working with elements||</title>
</head>
<body>
  <div id="div1">This is old</div>
  <script>
   document.body.onload = addElement;

    function addElement () { 
  var newDiv = document.createElement("div"); 
  var newContent = document.createTextNode("This is new!"); 
  newDiv.appendChild(newContent); 
  var currentDiv = document.getElementById("div1"); 
  document.body.insertBefore(newDiv, currentDiv); 
}
  </script>
</body>
</html>

http://www.jsfiddle.net/yz9v8479/

如您所见,它对于普通网页来说效果很好。
但它在我的扩展中不起作用。

enter image description here

但是我的代码是一样的。我不知道为什么它不起作用。

最佳答案

默认情况下,inline script won't be executed 。尝试将 JS 代码提取到外部 JavaScript 文件并将其作为脚本标记包含在内。

list .json

{
    "name": "36738850",
    "version": "0.1",
    "manifest_version": 2,
    "browser_action": {
        "default_title": "Your browser action title",
        "default_popup": "popup.html"
    }
}

popup.html

<!DOCTYPE html>
<html>

<head>
    <title>||Working with elements||</title>
</head>

<body>
    <div id="div1">This is old</div>
    <script src="popup.js"></script>
</body>

</html>

popup.js

document.body.onload = addElement;

function addElement() {
    var newDiv = document.createElement("div");
    var newContent = document.createTextNode("This is new!");
    newDiv.appendChild(newContent);
    var currentDiv = document.getElementById("div1");
    document.body.insertBefore(newDiv, currentDiv);
}  

关于javascript - 使用 JS 添加 HTML 标签 | chrome 扩展,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36738772/

相关文章:

javascript - 依赖注入(inject)在 Angular 2 入门应用程序中不起作用

javascript - 如何打开一个mailto : link from a Chrome Extension?

javascript - 我正在尝试在 Chrome 扩展的 innerHTML 元素内的 js 文件中添加图像

javascript - 突出显示悬停元素的事件?

javascript - 我可以跨子域使用 indexeddb 吗?

Javascript 将 CSV 字符串映射到 JSON 数组

javascript - 获取使用序列化动态检查输入复选框的所有最近字段的值

javascript - 如何遍历 react 状态变量数组并确定它是否有一个真值

javascript - Google map 平移控件显示但不起作用(在移动设备上)

api - 保护 google chrome 扩展程序中的代码