简单的按钮和链接插入Firefox插件：insertAdjacentHTML用法

Question

我想创建一个简单的Firefox插件，该插件将指向Achavi（可视化工具）的链接插入OpenStreetMap变更集页面。

示例：https://www.openstreetmap.org/changeset/77264942→https://overpass-api.de/achavi/?changeset=77264942

这是我的尝试：

manifest.json：

{
  "manifest_version": 2,
  "name": "modify-page",
  "version": "1.0",

  "content_scripts": [
    {
      "matches": ["https://www.openstreetmap.org/changeset/*"],
      "js": ["achavi-insert.js"]
    }
  ]
}

achavi-insert.js：

    var address = new String(document.location);
    var a_strings = address.match(/changeset\/([0-9]+)/);
    //first capturing group
    var a_string = a_strings[1];

    var d1 = document.getElementById('browse-section');

    var zNode       = document.createElement('div');
    zNode.innerHTML = '<button type="button" onclick="=window.open('
                    + '\'https://overpass-api.de/achavi/?changeset='+a_string+'\')">'
                    + 'Achavi</button>'
                    ;
    zNode.setAttribute ('id', 'achavi');

    d1.insertAdjacentHTML('afterend', zNode);

使用document.body.appendChild时可以使用，但是我需要在左侧边栏中的某个位置插入按钮。

如何正确使用insertAdjacentHTML？

Answer 1

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

第二个参数是“要解析为HTML或XML并插入树中的字符串。”因此，请勿传递DOM节点。

恕我直言，您必须使用appendChild()或insertBefore()，这取决于您所说的“左侧边栏某处”]]