Javascript Chrome扩展:插入固定div作为UI
我想使用镀铬扩展插件将div插入固定位置。它将覆盖您当前查看的页面。我担心的是,我希望它能在任何页面上工作,而不改变它(除了插入我的固定div),但我不知道我这样做是否可行。目前,按钮不会显示,我在让div显示时遇到了很多麻烦。顺便说一句,现在的定位只是临时的,一旦我在页面上找到它,我就会正确定位它以下是我所拥有的: 这是我的舱单:Javascript Chrome扩展:插入固定div作为UI,javascript,css,dom,google-chrome-extension,Javascript,Css,Dom,Google Chrome Extension,我想使用镀铬扩展插件将div插入固定位置。它将覆盖您当前查看的页面。我担心的是,我希望它能在任何页面上工作,而不改变它(除了插入我的固定div),但我不知道我这样做是否可行。目前,按钮不会显示,我在让div显示时遇到了很多麻烦。顺便说一句,现在的定位只是临时的,一旦我在页面上找到它,我就会正确定位它以下是我所拥有的: 这是我的舱单: { "name":"poop", "version":"0.1", "manifest_version":2, "descripti
{
"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 } );
}
操纵background.js中的内容是一个非常糟糕的主意。 为什么不使用内容脚本 manifest.json content.js
为什么从后台操纵内容是个坏主意?我不想在页面加载时插入div。它将等待事件被触发,插入div,等待用户单击“关闭”按钮,然后删除div。这是否可能使用内容脚本?当然可能。只需将代码包装在一个函数中,然后在需要的地方调用它。它应该等待哪个事件被触发?在后台脚本中,我有更多的代码侦听上下文菜单(右键单击菜单)选项。当按下关联菜单选项时,我希望插入div。我想我能处理剩下的:)谢谢你的帮助和解释!假设我想在页面中插入一个巨大的html片段。我该怎么做呢?显然,我无法使用domapi构建它,因为编写代码需要花费很长时间。
{
"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"
}
}
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%';