используйте расширение, чтобы добавить кнопку в текстовое поле - не кликабельно

Question

Я пытаюсь использовать расширение Chrome для динамического добавления кнопки при фокусировке на текстовом поле (поле ввода или текстовое поле).Идея состояла бы в том, чтобы нажать на кнопку, чтобы заполнить текстовое поле строкой по требованию.

Я нашел немного кода для добавления кнопки, но «onclick» не работает.Вы увидите, что у меня есть много способов вызвать консольный журнал, но ни один из них не работает.Я не могу найти способ заставить это работать, поэтому я прошу некоторые рекомендации относительно того, как этого добиться.

manifest

{
"name": "-",
"description": "-",
"version": "0.1",
"permissions": [
    "tabs","<all_urls>"
    ],
"browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
    },

"content_scripts": [
    {
    "matches": [
        "http://*/*",
        "https://*/*"
        ],
    "js": ["content.js"]
    }
],


"background" : { "scripts": ["background.js"] },

"manifest_version": 2
}

content script

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


var el;

function onFocusIn(event) {
    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.id = "explicite";
    console.log(btn);

    //not working
    btn.onclick = function(event) {
       btn.textContent += '!';
    };

    //not working
    btn.setAttribute("onClick", "alert('OnClick')");


    return btn;
}

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

    //not working
    document.getElementById("explicite").addEventListener('click', function() {
      alert("HI");
    });
}

Answer 1

Проблема в вашем onFocusIn коде document.addEventListener('focusin', onFocusIn);.Вы прикрепляете onFocusIn ко всем элементам в документах.Поскольку кнопка также является фокусируемым элементом onFocusIn, код, выполняющийся также и для этого.

Простое решение для этого:

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

Вы можете изменить код события document.addEventListener('focusin', onFocusIn); или настроить функцию связывания.

Надеюсь, что это полезно!