javascript - Chrome 扩展 : How to inject button to an onfocus div(texterea/input) in the page? 特别是在 Facebook 页面中

Question

几周以来，我一直在尝试找到一种在窗口文档中的文本区域被单击(onfocus)时注入(inject)按钮的方法，但我没有这样做。

该功能与 Grammarly 的扩展类似。 Grammarly's extension

问题是，我想在焦点或按键时在文本区域附近或添加一个按钮。然后我可以将文本值返回给扩展程序。 检测内容脚本中的 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页面上，我不能甚至瞄准评论区的输入框..

请帮我解决这个问题!我现在很绝望...

Answer 1

使用focusin content script 中的事件(与 focus 事件不同，它冒泡)您的扩展程序:

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);
}