Расширение Chrome: Как ввести кнопку в onfocus div (texterea/input) на странице? особенно на facebook странице

Question

Я пытался найти способ ввести кнопку, когда текстовое поле в документе окна было нажато (onfocus) ... в течение нескольких недель, но я этого не сделал.

Функция аналогична расширению Grammarly. Grammarly's extension

Дело в том, я хочу, чтобы добавить кнопку поблизости или в текстовое поле, когда он OnFocus или Keypressed. Затем я мог бы вернуть текстовое значение в расширение. Каков правильный способ обнаружения 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 события (это пузырей в отличии от focus события) в 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); 
}