Javascript Chrome扩展在内容页面内加载HTML页面

嘿，我正在尝试在页面的内容部分加载一个HTML页面。HTML页面是一种拖放类型的框，我想在内容页面周围浮动。此页面允许用户将框移动到所需区域周围的任意位置

但是，我找不到任何关于如何在内容页面中插入HTML页面的好的示例？HTML页面也有加载CSS和JS的调用

我可以做到以下几点：

$('body').prepend(HTMLcodeHere);

它确实会加载到内容页面中，但正如我上面所说的，我有css和js，在页面加载时也需要加载，这样做是行不通的

自由浮动窗口的示例：

我发现了一些扩展示例，它们都有自由浮动的窗口类型，但要么它背后的代码是打包的，要么我就是不明白它们是如何实现的

所以，任何帮助都将是伟大的

舱单：

content_scripts": [ {
      "css": [],
      "js": ["js/jquery.js"],
      "matches": ["<all_urls>"],
      "run_at": "document_start"
 }],

"permissions": [
    "background", 
    "notifications", 
    "contextMenus",
    "tabs",
    "storage",
    "unlimitedStorage",
    "activeTab",
    "<all_urls>",
    "http://*/*", 
    "bookmarks",
    "https://*/*"
 ],
"web_accessible_resources": ["img/*.*", "js/*.*", "css/*.*", "*.*", "html/*.*"]

内容脚本”：[{
“css”：[]，
“js”：[“js/jquery.js”]，
“匹配项”：[“”]，
“运行时间”：“文档开始”
}],
“权限”：[
“背景”，
“通知”，
“上下文菜单”，
“标签”，
“存储”，
“无限制存储”，
“活动标签”，
"",
“http://*/*”，
“书签”，
“https://*/*”
],
“web可访问资源”：[“img/*.*”、“js/*.*”、“css/*.*”、“*.*”、“html/*.*”]

我正在加载页面，如下所示：

document.getElementById('lfMn')
                .insertAdjacentHTML('afterend',
                    '<link href="chrome-extension://' + applicationID + '/css/codemirror.css" rel="stylesheet" type="text/css" />' + 
                    '<link href="chrome-extension://' + applicationID + '/js/beautify.js" type="text/javascript" />' + 
                    '<link href="chrome-extension://' + applicationID + '/js/packerStuff.js" type="text/javascript" />' +                       
                    '<script type="text/javascript">' + 
                        'window.onload = function(e){' +
                            'Modal.init();' +
                            'Modal.open();' +
                            'alert("hello");' +
                            'console.log(\'loadedhere\');' +
                        '};' +
                    '</script>' +
                    '<button type="button" id="whitespaces" name="whitespaces" onClick="Modal.open();">module</button>' +
                    '<!-- modal -->' +
                    '<div class="modal">' +
                        '<header class="modal-header">' +
                            '<h1 class="modal-header-title left">Settings Code</h1>' +         
                            '<button class="modal-header-btn2 right" id="saveCode" name="saveCode" data-tipso="Save current code">Save Code</button>' +
                            '<button class="modal-header-btn right" id="cleanCode" name="cleanCode" data-tipso="Clean current code">Clean Code</button>' +
                            '<button class="modal-header-btn3 right modal-close" id="close" name="close" data-tipso="Close Box">Close</button>' +
                            '<button class="modal-header-btn5 right" id="dockR" name="dockR" data-tipso="Dock Right"> </button>' +
                            '<button class="modal-header-btn4 right" id="dockL" name="dockL" data-tipso="Dock Left"> </button>' +
                            '<button class="modal-header-btn6 right" id="dockF" name="dockF" data-tipso="Dock Fullscreen"> </button>' +
                            '<button class="modal-header-btn7 right" id="dockN" name="dockN" data-tipso="Dock Normal"> </button>' +
                            '<button class="modal-header-btn8 right" id="searchIt" name="searchIt" data-tipso="Seach thru code">Search</button>' +
                            '<fieldset class="searchField" id="thesearch">' +
                                '<div class="input">' +
                                    '<input type="text" name="s" id="s" value="Enter your search" />' +
                                '</div>' +
                                '<input type="button" id="searchSubmit" value="" />' +
                            '</fieldset>' +
                        '</header>' +
                        '<div class="modal-body">' +
                            '<section class="modal-content">' +
                                '<!-- MAIN CODE AREA -->' +
                                '<div style="line-height: 0;" id="mainDiv">' +
                                    '<textarea id="source" rows="30" cols="160">' +
                                        'function change() {' +                             
                                            'var myNewTitle = document.getElementById(\'myTextField\').value;' +
                                            'if (myNewTitle.length == 0) {' +
                                                'alert(\'Write Some real Text please.\');' +
                                                'return;' +
                                            '}' +                                       
                                            'var title = document.getElementById(\'title\');' +
                                            'title.innerHTML = myNewTitle;' +                               
                                        '}' +
                                    '</textarea>' +
                                '</div>' +
                                '<!-- MAIN CODE AREA -->' +
                            '</section>' +
                        '</div>' +
                    '</div>' +
                    '');

document.getElementById（'lfMn'））
.INSERTADJACENTHML（'afterend'，
'' + 
'' + 
'' +                       
'' + 
'window.onload=函数（e）{'+
'Modal.init（）；'+
'Modal.open（）；'+
“警惕（“你好”）；”+
'console.log（\'loadedhere\'）；'+
'};' +
'' +
“模块”+
'' +
'' +
'' +
“设置代码”+
“保存代码”+
“干净代码”+
“结束”+
' ' +
' ' +
' ' +
' ' +
“搜索”+
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'函数更改（）{'+
'var myNewTitle=document.getElementById（\'myTextField\'）.value；'+
'如果（myNewTitle.length==0）{'+
'提醒（\'请写一些真实的文本。\'）；'+
“返回；”+
'}' +                                       
'var title=document.getElementById（\'title\'）；'+
'title.innerHTML=myNewTitle；'+
'}' +
'' +
'' +
'' +
'' +
'' +
'' +
'');

---

我在页面上唯一看到的是“模块”按钮。它从不执行警报（“hello”）；或控制台.log（\'loadedhere\'）；中的窗口.onload=函数（e）{script….

这样做没有正确或错误的方法，但是必须动态添加html，因此使用

$（'body'）.prepend（）

就可以了

对于css和js，您可以使用如下内容脚本：

"content_scripts": [
    {
      "matches": ["http://www.google.com/*"],
      "css": ["mystyles.css"],
      "js": ["jquery.js", "myscript.js"]
    }
  ],

---

或者，您可以使用将css（或js）注入页面，如下所示：

$（'head'）。append（''）

它告诉我chrome-extension://fgajpnfeibefhialjchohaljbefddikc/css/main.css net:：ERR_FILE_未找到，尽管它位于css/目录中。但是，我正在开发模式下运行扩展…我假设您尝试编写指向web可访问资源的完整路径。因为我认为您无法以这种方式格式化它。