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" />')。