Javascript Chrome扩展：如何将按钮插入页面中的onfocus div（texterea/input）中？尤其是在facebook页面

几个星期以来，我一直在试图找到一种方法，当窗口文档中的文本区域被ClickedInfo…点击时，插入一个按钮，但我没有这样做

该函数与Grammarly的扩展功能类似。

问题是，我想在焦点或按键时在文本区域附近或文本区域添加一个按钮。然后我可以将文本值返回到扩展名。检测内容脚本中div的正确方法是什么

按钮代码如下所示：

function appendBtn (){
  var btn = document.createElement("INPUT");
  btn.setAttribute("type", "button");
  btn.setAttribute("value", "button");
  document.body.appendChild(btn);
}

document.onclick = function() {
  appendBtn();
}

我想要的是找到正确的div，而不是在body之后添加元素……它总是显示在页面底部，尤其是在facebook页面上，我甚至无法将其定位在评论区域的输入框中

请帮我做这个！我现在非常绝望…

在您的分机中使用事件，它与焦点事件不同：

var btn = createButton();
document.addEventListener('focusin', onFocusIn);

function onFocusIn(event) {
    var el = event.target;
    if (el.contentEditable ||
        el.matches('input, textarea') && el.type.match(/email|number|search|text|url/))
    {
        appendButton(el);
    }
}

function createButton() {
    var btn = document.createElement('button');
    btn.textContent = 'Yay!';
    btn.onclick = function(event) {
        btn.textContent += '!';
    };
    return btn;
}

function appendButton(textElement) {
    textElement.parentElement.insertBefore(btn, textElement.nextElementSibling);
}

---

它起作用了！！非常感谢你！！但是，按钮是否可以只附加一次，而不是每次聚焦时都重复？非常感谢！你救了我的命！现在我可以开始下一步了！“高兴得流泪”~按钮出现了，但onclick根本不起作用。@SKYnine，使用devtools设置断点并调试代码。请注意，我不会在评论中提供对旧答案的支持，因此您可能想发布一个新问题。@wOxxOm刚刚做了：