Chrome 扩展：如何将按钮注入页面中的焦点 div(texterea/input)？特别是在Facebook页面

Question

我一直在尝试找到一种方法来在 window 文档中的文本区域被单击（onfocus）时插入按钮……数周时间，但我没有这样做。

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

问题是，我想在文本区域 附近或 中添加一个按钮，当它处于焦点或按键状态时。然后我可以 return 扩展名的文本值。 在内容脚本中检测 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 而不是在正文之后附加元素...它总是显示在页面底部，尤其是在Facebook页面上，我什至无法定位评论区的输入框..

请帮帮我！我现在很绝望...

Answer 1

使用您的分机的focusin event (it bubbles unlike the focus event) in a content script：

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

Chrome 扩展：如何将按钮注入页面中的焦点 div(texterea/input)？特别是在Facebook页面

Chrome extension: How to inject button to an onfocus div(texterea/input) in the page? especially in facebook page

javascript

google-chrome

button

google-chrome-extension

content-script