Chrome扩展程序:如何将div作为身体第一个孩子附加?

时间:2014-05-29 00:43:31

标签: javascript google-chrome-extension css-selectors document-body

我几个小时都遇到这个问题,我需要将我从Javascript文件创建的div作为第一个孩子添加到正文中。

我的 manifest.js 看起来就是这样:

    {

    "background": {
        "scripts": ["background.js"]
    },

    "browser_action": {
        "default_icon": "img/icone.png",
        "default_title": "displayer."
    },

    "icons" : {
        "128" : "img/icone_128.png",
        "48" : "img/icone_48.png",
        "32" : "img/icone_32.png",
        "24" : "img/icone_24.png",
        "16" : "img/icone_16.png"
    },

    "manifest_version": 2,
    "name": "displayer.",
    "description": "This extension helps you to compare your wireframe with your current coded page..",
    "version": "1.0.2",

    "content_scripts": [
        {
            "matches": [ "<all_urls>"],
            "css":["css/grid.css", "css/font-awesome.min.css"],
            "js":["js/jquery-1.11.1.min.js","js/jquery-ui.js", "js/jquery.nicefileinput.min.js"]
        }
    ],

    "permissions": [ "activeTab"]

    }

以下是 contentscript.js

的一部分
//Create div panel
var panel = document.createElement('div');
panel.setAttribute('id', 'panel');

//Create div toolbox
var toolbox = document.createElement('div');
toolbox.setAttribute('id', 'toolbox');

//Create div canvas
var canvas = document.createElement('div');
canvas.setAttribute('id', 'canvas');

//Appending to DOM 
document.body.appendChild(panel);
document.body.appendChild(toolbox);
document.body.appendChild(canvas);

var first = document.body.children[0];
document.body.insertBefore(canvas, first);

//Create Panel Menu
panel.innerHTML = '<span id="close"><i id="icone" class="fa fa-check"></i></span><h2>disp<span>layer.</span></h2><label>Mockup location :</label><input type="file" id="files" class="nicefileinput nice" name="imageLoader" value=""/><a id="die"><i class="fa fa-exclamation-triangle"></i>Reset all <span>(your image will be deleted.)</span></a>';

//Create toolbox
toolbox.innerHTML = '<a href="#" id="left"><i class="fa fa-align-left"></i></a><a href="#" id="center"><i class="fa fa-align-center"></i></a><a href="#" id="right"><i class="fa fa-align-right"></i></a><div id="slider"></div>';

我试过这个:

    var first = document.body.children[0];
document.body.insertBefore(canvas, first);

但我没有结果。

非常感谢任何帮助。

0 个答案:

没有答案
相关问题