Chrome拡張機能：ページ内のonfocus div（テキスト/入力）にボタンを挿入するにはどうすればよいですか？特に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を見つけることである...それは常にページの下部に表示されています特にコメント欄の入力ボックスを対象とすることができないフェイスブックのページにあります。

私を助けてください！私は

Answer 1

はあなたの拡張機能のcontent scriptで（それがfocusイベントとは異なりバブル）focusinイベントを使用して...今必死だ：

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