Расширение Chrome - установить текст по нажатому элементу

Question

Я пытаюсь создать расширение, которое позволяет пользователю заполнить поле ввода предопределенным текстом. Пользователь должен щелкнуть правой кнопкой мыши на поле ввода, выбрать опцию, и код должен будет автоматически установить текст.

После некоторого поиска я понимаю, что мне нужно работать со скриптом контента, но я не могу понятьКак найти выбранное поле ввода и изменить текст.

event.js

chrome.contextMenus.create({
    id: "context_positive",
    title: "✔ Positief",
    contexts: ["all"]
});

chrome.contextMenus.onClicked.addListener(function(info, tab) {
    if (tab) {
        if (info.menuItemId === "context_positive"){
            // Call content script and get it to locate the source element and set text value
        }
    }
});

content_script.js

Поскольку вы щелкнете по полю ввода,он должен быть доступен с помощью document.activeElement, но во время тестирования он обычно выбирает BODY в качестве activeElement ..

document.activeElement.innerHTML = "test";

Так что я не уверен, как перейти от действия event.js к content_script. JS раздел для ввода текста в выбранном поле ввода. Любой совет, как поступить?

Answer 1

Вы можете получить преимущество от события клика:

let input = document.querySelector("input");

document.querySelector(".editable").addEventListener("click", function(event) {
  let element = event.target;
  if (element.innerText) {
    element.innerText = input.value;
  }
});

<div class="editable">
  <span>Example text one</span>
  <p>Example text two</p>
  <div>
    <span>Child text example one</span>
    <span>Child text example two</span>
  </div>
  <div>Example text three</div>
</div>

<br><br>
Text to replace: <input type="text">