Chrome extension: Insert fixed div as UI
15,184
Manipulating content from background.js is a very bad idea. Why don't you use content script?
manifest.json
{
"name":"poop",
"version":"0.1",
"manifest_version":2,
"description":"shitty app I'm making",
"background":{
"scripts":[
"scripts/modernizr.min.js",
"scripts/background.js"
],
"persistent": false
},
"content_scripts": [
{
"matches": ["https://*/*", "http://*/*"],
"js": ["content.js"],
"run_at": "document_end"
}
],
"permissions":[
"contextMenus",
"tabs",
"http://*/*",
"https://*/*"
],
"icons":{
"16":"images/icon_16.png",
"128":"images/icon_128.png"
}
}
content.js
document.documentElement.style.height = '100%';
document.body.style.height = '100%';
document.documentElement.style.width = '100%';
document.body.style.width = '100%';
var div = document.createElement( 'div' );
var btnForm = document.createElement( 'form' );
var btn = document.createElement( 'input' );
//append all elements
document.body.appendChild( div );
div.appendChild( btnForm );
btnForm.appendChild( btn );
//set attributes for div
div.id = 'myDivId';
div.style.position = 'fixed';
div.style.top = '50%';
div.style.left = '50%';
div.style.width = '100%';
div.style.height = '100%';
div.style.backgroundColor = 'red';
//set attributes for btnForm
btnForm.action = '';
//set attributes for btn
//"btn.removeAttribute( 'style' );
btn.type = 'button';
btn.value = 'hello';
btn.style.position = 'absolute';
btn.style.top = '50%';
btn.style.left = '50%';
Author by
Lebowski156
Updated on June 05, 2022Comments
-
Lebowski156 almost 2 years
I want to insert a div into a fixed position using a chrome extension. It will overlay the page that you are currently viewing. My concern is that I want this to work on any page without altering it (other than inserting my fixed div), but I don't know if that is possible with the way that I'm doing it. Currently, the button won't show up, and I had a lot of trouble getting the div to show up. By the way, the positioning is just temp for now, I will position it correctly once I get it on the page! :) Here's what I have:
Here is my manifest:
{ "name":"poop", "version":"0.1", "manifest_version":2, "description":"shitty app I'm making", "background":{ "scripts":[ "scripts/modernizr.min.js", "scripts/background.js" ], "persistent": false }, "permissions":[ "contextMenus", "tabs", "http://*/*", "https://*/*" ], "icons":{ "16":"images/icon_16.png", "128":"images/icon_128.png" } }
Here is the function in background.js that will be performing this functionality:
function insertUIDiv() { var prepHtmlStyle = "document.documentElement.style.height = '100%';" + "document.body.style.height = '100%';" + "document.documentElement.style.width = '100%';" + "document.body.style.width = '100%';"; var insertDiv = "var div = document.createElement( 'div' );" + "var btnForm = document.createElement( 'form' );" + "var btn = document.createElement( 'input' );" + //append all elements "document.body.appendChild( div );" + "div.appendChild( btnForm );" + "btnForm.appendChild( btn );" + //set attributes for div "div.id = 'myDivId';" + "div.style.position = 'fixed';" + "div.style.top = '50%';" + "div.style.left = '50%';" + "div.style.width = '100%';" + "div.style.height = '100%';" + "div.style.backgroundColor = 'red';" + //set attributes for btnForm "btnForm.action = '';" + //set attributes for btn //"btn.removeAttribute( 'style' );" + "btn.type = 'button';" + "btn.value = 'hello';" + "btn.style.position = 'absolute';" + "btn.style.top = '50%';" + "btn.style.left = '50%';"; chrome.tabs.executeScript( null, { code: prepHtmlStyle } ); chrome.tabs.executeScript( null, { code: insertDiv } ); }