Chrome扩展程序:插入固定的div作为用户界面 [英] Chrome extension: Insert fixed div as UI

问题描述

我想使用chrome扩展名将div插入固定位置.它将覆盖您当前正在查看的页面.我担心的是，我希望它可以在任何页面上工作而不更改它(除了插入固定的div之外)，但是我不知道这种方式是否可行.目前，该按钮不会显示，并且让div显示时遇到了很多麻烦.顺便说一下，现在的定位只是暂时的，一旦在页面上将其正确定位！:)这就是我所拥有的:

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:

这是我的清单:

{
    "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中将执行此功能的功能:

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 } );             

}

推荐答案

操纵background.js的内容是一个非常糟糕的主意.为什么不使用内容脚本?

Manipulating content from background.js is a very bad idea. Why don't you use content script?

{
    "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%';

这篇关于Chrome扩展程序:插入固定的div作为用户界面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！