クロム拡張機能を使用して固定位置に div を挿入したい。現在表示しているページに重ねて表示されます。私の懸念は、これを変更せずに(固定divを挿入する以外に)どのページでも機能させたいということですが、私がやっている方法でそれが可能かどうかはわかりません。現在、ボタンは表示されず、div を表示するのに苦労しました。ちなみに、配置は今のところ仮です。ページに配置したら、正しく配置します。:)ここに私が持っているものがあります:
これが私のマニフェストです:
{
"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"
}
}
この機能を実行する background.js の関数は次のとおりです。
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 } );
}