Chrome 扩展：插入固定 div 作为 UI

Posted 2023-02-22

【中文标题】Chrome 扩展：插入固定 div 作为 UI

【英文标题】：Chrome extension: Insert fixed div as UI

【发布时间】：2013-08-01 12:58:33

【问题描述】：

我想使用 chrome 扩展将 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  );             

【参考方案1】：

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

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

【讨论】：

为什么从后台操作内容是个坏主意？我不想在页面加载时插入 div。它将等待事件被触发，插入 div，等待用户单击“关闭”按钮，然后删除 div。这可以使用内容脚本吗？

当然可以。只需将代码包装在一个函数中，然后在你想要的地方调用它。它应该等待哪个事件被触发？

在后台脚本中，我有更多的代码来监听上下文菜单（右键菜单）选项。当按下该上下文菜单选项时，我希望插入 div。我想我将能够处理其余的 :) 感谢您的帮助和解释！

假设我想在页面中插入一个巨大的 html 片段。我该怎么做？我显然无法使用 DOM API 构建它，因为它需要永远编码。