Question

我想创建一个Chrome扩展程序，点击后会显示一个文本，但我希望JavaScript文件将该文本（h1标记）添加到DOM层次结构中。为了做到这一点，我添加了一个html文件，一旦加载DOM就应该调用js文件。

代码：

清单文件：

{
  "manifest_version": 2,

  "name": "MyFirstApp",
  "description": "This is Hello World App",
  "version": "1.0",

  "browser_action": {
    "default_icon": "hello.png",
    "default_popup" : "helloworld.html"
  }
}

的helloworld.html

<html>
    <head>
    <style type="text/css">
        h1 
            {
                text-align:center;
                font-size:50px;
                color:#089786;
            }
        body
            {
                background-color:#890541;
                height:100;
                width:500;
            }
    </style>
    <script src= "helloworld.js" />
    </head>
    <body>
    </body> 
 </html>

helloworld.js

document.addEventListener('DOMContentLoaded', function () {
  kittenGenerator.requestKittens();
});

var kittenGenerator = {

    requestKittens : function() {

        var h1 = document.createElement('h1');
        var content = document.createTextNode('text');
        h1.appendChild(content);
        document.body.appendChild(h1);

        var element = document.createElement('h1');
        element.innerHTML = 'teeeekst';
        document.body.appendChild(element);
    }
};

chrome extension无法从Javascript添加DOM元素

0 个答案: