Hey all I am trying to load an HTML page within the content part of the page. The HTML page is a drag and drop type of box that I want to float around the content page. This page allows the user to move the box anywhere around the area they wish.
However, I am unable to find any good examples of how to inject my HTML page within the content page? The HTML page does have calls to load CSS and JS as well.
I can do the following:
$('body').prepend(HTMLcodeHere);
And it does load into the content page but like I said above, I have css and js that need to also be loaded when that page loads so doing it that way would not work out.
Example of a free floting window :
I've found a few extension examples that have those type of free floating windows but either the code behind it is packed or I just dont plain understand how they did it.
So any help would be great!
Manifest:
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/*.*"]
And I am loading up the page like so:
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>' +
'');
The only thing i see on the page is the "module" button. and it never executes the alert("hello"); nor the console.log(\\'loadedhere\\'); in the window.onload = function(e){ script....
There is no right or wrong way to do this, but your your html has to be dynamically added, so using $('body').prepend()
is fine.
for the css and js you can use content scripts as so:
"content_scripts": [
{
"matches": ["http://www.google.com/*"],
"css": ["mystyles.css"],
"js": ["jquery.js", "myscript.js"]
}
],
optionally, you can use web accessible resources to allow you to inject your css(or js) into the page like so: $('head').append('<link href="<chrome-extension://ext id/mycssfile.css" rel="stylesheet" type="text/css" />')
.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.