Chrome扩展加载内容页面中的HTML页面

Question

嘿，我试图加载页面的内容部分内的HTML页面。 HTML页面是我想在内容页面周围浮动的拖放式框。此页面允许用户将框移动到他们希望的区域的任何地方。

但是，我无法找到任何好如何在内容页面中注入我的HTML页面的示例？ HTML页面也有加载CSS和JS的调用。

我可以做到以下几点：

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

而且它加载到内容页面，但就像我上面说的，我有CSS和需要，也可以加载JS当页面加载这样做是方式不会奏效。

例一免费floting窗口的：

我发现有这些类型的自由浮动窗户，但无论是代码背后却是几个扩展示例包装或者我只是不明白他们是如何做到的。

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

清单：

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/*.*"] 

而且我加载了页面，如下所示：

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>' + 
        ''); 

我在网页上看到的唯一的事情就是“模块”按钮。并且它从不执行警报（“hello”）;也不是console.log（\'loadedhere \'）;在的window.onload =函数（E） {脚本....

Answer 1

没有这样做对或错的方式，但你对你的HTML有动态添加，因此使用$('body').prepend()是罚款。

的CSS和JS，你可以使用内容脚本，所以：

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

可选，您可以使用web accessible resources，让你注入你的CSS（或JS），进入页面，如下所示：$('head').append('<link href="<chrome-extension://ext id/mycssfile.css" rel="stylesheet" type="text/css" />')。