Как обратиться к элементу в popup расширения?

357
17 января 2018, 18:52

Всем привет! Изучаю создание расширения для Гугл и не могу понять, почему скрипт не может найти элемент во всплывающем окне, которое появляется при клике на иконку этого расширения. В варианте ниже я получаю null в консоль. Подскажите, пожалуйста.

manifest.json

{
  "manifest_version": 2,
  "name": "Payuot from test account",
  "description": "Payout extantion for test account.",
  "version": "0.1",
  "browser_action": {
    "default_title": "Simulation payout",
    "default_popup": "popup.html"
  },
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "content_scripts": [
    {
      "matches": ["https://*.com/*"],
      "js": ["popup.js"]
    }
  ],
  "permissions": [
    "activeTab",
    "storage"
  ]
}

popup.html

    <!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
      body {
        width: 150px;
        height: 15px;
      }
    </style>
</head>
<body>
    <label><input id="check" type="checkbox" /> Payout on/off </label>
    <script src="popup.js"></script>
</body>
</html>

popup.js

function checkedConfirme() {
  const checkbox = document.getElementById('check');
  console.log(checkbox);
}
checkedConfirme();
Answer 1

Ваш popup.js рабочий, хоть и используете вы его не совсем правильно: в манефесте он указан в как в качестве content-script, так и в качестве popop-скрипта для browser_action (рекомендуется иметь отдельные скрипты для каждого модуля).

Тем не менее, popup – это отдельная веб-страница, и для того, чтобы увидеть результат выполнения скрипта вам необходимо нажать правой кнопкой мыши на иконку в области рашсирений и выбрать там инспектор (последний пункт). В консоле будет искомый элемент.

READ ALSO
vk.com - как отключить преобразование ссылок в сообщениях?
javascript

vk.com - как отключить преобразование ссылок в сообщениях?

Речь идёт о моменте, когда любую ссылку вк преобразовывает в подобие vkcom/away?блаблабла

 415
JS таймаут между click и dbckick эвентами
javascript

JS таймаут между click и dbckick эвентами

Приветы, как сделать чтобы был таймаут между паузой видео и его переходом в фулл скрин?В инете нашел только JQuery и там реализовано вообще не так,...

 299
Один и тот же обработчик события несколько раз на элементе. Будут ли проблемы?
javascript

Один и тот же обработчик события несколько раз на элементе. Будут ли проблемы?

Добрый день! У меня есть функция, которая вешает на элемент обработчик divaddEventListener("click", move)

 275
Регулярные выражения, 2 условия
javascript

Регулярные выражения, 2 условия

Друзья, помогите пожалуйстаТребуется, чтобы строка проходила проверку телефона, а так же, чтобы не проходили пробелы (/^\s+$/) Такой код работает

 337