Jquery 谷歌播放音乐浏览器扩展

我正在尝试为chrome创建一个扩展，当你点击一个按钮后，它会在Google Play音乐网站上显示一个覆盖图。我可以添加一个按钮很好，但不能让div在所有内容上方弹出，它只是被塞进页面底部

我在按钮和div中添加了这些方法，它们运行得很好。问题是div永远卡在页面底部

    injectCanvas: function( callback ) {
        var ivCanvas = $('<div />', {
            id: 'iv-canvas',
            style: 'top:0px;'
        //}).append( $('<img />', {
            //src: chrome.extension.getURL('images/icon.png')
        }).append('<span>Test</span');

        $('body').append(ivCanvas);
    },

    injectButton: function ( callback ) {
        var button = $('<button />', {
                id: 'iv-button-toggle',
                class: 'button small vertical-align'
            }).append('<span>Add Overlay Div</span>');

        button.on('click', function() {
            console.log("making visible");
            $('#iv-canvas').addClass('show');
            console.log("done making visible");
        });

        $('#headerBar .nav-bar').prepend(button);

        //callback();
    }

---

我是不是走错了路？我可以在按下按钮时创建div而不是隐藏和显示它吗？

您可以为我们附加popup.html代码吗？我计划在这个脚本中创建整个内容，这可行吗？当前生成的只是测试。我远非任何web开发方面的专家，因此这可能是我的全部问题。你不能在一个脚本中创建全部内容，因为默认的内容安全策略限制内联JavaScript是不允许的。请记住，将JavaScript文件移动到外部脚本文件，并将其嵌入html文件中。

$canvas-background #141517;
#iv-canvas {    
  &.show {
        opacity: .8;
        background-color: $canvas-background;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
        z-index: 1500;
  }
}