javascript - 通过操作加载网页的 DOM 创建侧边栏

Question

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

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

我正在考虑的一个选择是这样做:

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

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

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

<小时/>

页面加载.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')

<小时/>

list .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