Где читать консольные сообщения из background.js в расширении Chrome?

Я только начал с расширений Google Chrome, и я не могу войти в консоль с моего фона js. Когда возникает ошибка (например, из-за синтаксической ошибки), я также не могу найти никаких сообщений об ошибках.

Мой файл манифеста:

{
  "name": "My First Extension",
  "version": "1.0",
  "manifest_version": 2,
  "description": "The first extension that I made.",
  "browser_action": {
    "default_icon": "icon.png"
  },
  "background": {
    "scripts": ["background.js"]
  },
  "permissions": [
    "pageCapture",
    "tabs"
  ]
}

background.js:

alert("here");
console.log("Hello, world!")

Когда я загружаю расширение, появляется предупреждение, но я не вижу ничего записанного в консоль. Что я делаю неправильно?

10 ответов

Решение

Ты смотришь не на то место. Зарегистрированные сообщения консоли отображаются не на веб-странице, а на (невидимой) фоновой странице. Чтобы увидеть эти сообщения в консоли, выполните следующие действия:

Визит chrome://extensions/,
Вы также можете щелкнуть правой кнопкой мыши значок расширения, а затем нажать "Управление расширениями".

  1. Включить режим разработчика
  2. Нажмите на ссылку вашей фоновой страницы (в "Просмотр просмотров").
  3. Консоль разработчика открывается для этой страницы.

Новый пользовательский интерфейс:

Старый интерфейс:

образ

У меня была такая же проблема, в моем случае для ведения журнала было установлено значение "Скрыть все" на вкладке консоли в инструментах разработчика Chrome. Я даже не понял, что это был вариант, и я не помню, чтобы отключить его

снимок экрана настройки на вкладке консоли в инструментах Chrome Dev

Для последователей, которые хотят видеть консоль отладки для "сценария содержимого" своего расширения chrome, она доступна, выполнив обычную "show developer console", затем используйте стрелку раскрывающегося меню, чтобы выбрать ее "среду javascript", после чего у вас будет доступ к его методам и т. д.

введите описание изображения здесь

Дополнительно

если хочешь увидеть content_script файл js (когда свойство background не установлено) в manifest.json

"content_scripts": [{
    "matches": ["<all_urls>"],
    "js": ["popup.js"],
  }]

"browser_action": {
    "default_icon": "icon_32.png",
    "default_popup": "popup.html"
  }

затем щелкните правой кнопкой мыши на значке расширения и нажмите на всплывающее окно Inspect, и откроется окно разработчика с открытым popup.html, там вы увидите вкладку консоли.

Как и в ответе Михила, у меня также была забавная конфигурация консоли: фильтр, который я не помню, настройку:

После очистки фильтра я увидел сообщения.

Если мы хотим читать сообщения, выводимые на консоль из всплывающей страницы, мы можем щелкнуть значок расширения, чтобы открыть всплывающую страницу, затем щелкнуть правой кнопкой мыши всплывающую страницу в любом месте, появится раскрывающееся меню, мы просто нажимаем меню "Проверить", откройте инструмент разработчика. Обратите внимание, что всплывающая страница должна открываться. Если он закрыт (с помощью window.close()), инструмент разработчика также будет закрыт.

Другой ответ (-а) работает (-и) для background.js, но, если вы ищете console.logs из всплывающего окна, вы можете попробовать:

      var bkg = chrome.extension.getBackgroundPage();
bkg.console.log('foo');

Я разрабатывал с помощью cra, и это сработало для меня.

Для тех, кто разрабатывает расширения для Firefox:

Версия TL;DR: вам нужно использовать Ctrl+Shift+J, чтобы вызвать окно консоли браузера, щелкнуть значок настроек в верхнем правом углу и убедиться, что установлен флажок «Показать сообщения о содержании».

Более подробное объяснение из связанного вопроса stackoverflow: Как просмотреть вывод console.log фонового скрипта в Firefox WebExtension?

В моем случае мне пришлось нажать кнопку «Проверить всплывающее окно» на панели « Расширения », после чего открылось новое окно со специальной консолью для расширения.

У меня тоже была эта проблема. Похоже, моя веб-страница не обновлялась до только что сохраненного скрипта. Это было решено нажатиемCtrl + обновить (или Ctrl + F5) в браузере Chrome.

Другие вопросы по тегам