Question

我的简单Chrome扩展程序是在document.body的顶部注入DIV，然后您可以将页面中的文本拖到扩展名中。问题是我希望扩展DIV不位于顶部，而是像左侧的侧栏那样。

换句话说，我需要知道如何以编程方式重新排列已加载的DOM结构，以便将所有内容移动到右侧并水平压缩，然后左侧区域可供进一步操作。

我考虑的一个选择就是这样做：

tmp = document.body.innerHTML
document.body.innerHTML = '<table><tr><td id=sidebar></td><td>'
   + tmp + '</td></tr></table>'

但是这将是有效的，会导致重新出现并可能产生其他不良副作用。

顺便说一下，当前版本的扩展程序会在“加载”时注入每个页面，但这只是一个临时解决方案，单击扩展按钮时必须显示侧栏。这不是这个问题的一部分，我知道如何做到这一点。只是为了让您知道，当用户选择单击按钮时，可以随时创建侧边栏。这就是为什么使用innerHTML不是一个好选择。

pageload.js

function allowDrop(ev) {ev.preventDefault()}

function drop(ev) {
    ev.preventDefault();
    var t = 'text', T = Array.prototype.slice.apply(ev.dataTransfer.types)
    if (T.indexOf('text/html') >= 0)
        t = "text/html"
    console.log('text type:', t)
    d1.innerHTML += '<div style="display:inline;border:2px solid #000000;">'+ev.dataTransfer.getData(t)+'</div> '
}

function createDragbar(id) {
    var n = document.createElement('div')
//  n.style.position = "absolute";
    n.setAttribute('id', id)
    n.style.border = '1px solid #aaaaaa'
    n.style.height = 532
    n.style.background = "teal"
    n.innerHTML = "Drop your text here "
    n.ondrop = drop
    n.ondragover = allowDrop
    document.body.insertBefore(n, document.body.firstChild)
}
createDragbar('d1')

的manifest.json

{
    "name": "Yakov's Demo Extension",
    "description": "Just a demo",
    "version": "0.1",
    "permissions": [
        "activeTab"
    ],
    "content_scripts": [{
        "matches": ["http://*/*", "https://*/*", "file://*/*"],
        "js": ["pageload.js"]
    }],

    "manifest_version": 2
}

Answer 1

element.insertAdjacentHTML(position, text)怎么样？

https://developer.mozilla.org/en-US/docs/Web/API/Element.insertAdjacentHTML

通过操纵加载的网页的DOM来创建侧边栏

1 个答案: