Расширение Google Chrome :: console.log () с фоновой страницы?


173

Если я звоню console.log('something');со всплывающей страницы, или любой другой скрипт включен, он работает нормально.

Однако, поскольку фоновая страница не запускается непосредственно из всплывающей страницы, она не включается в консоль.

Есть ли способ, которым я могу получить console.log()на фоновой странице, чтобы показать в консоли для всплывающей страницы?

есть ли способ, с фоновой страницы вызвать функцию на всплывающей странице?


Что именно вы имеете в виду, говоря «все работает хорошо»? Где читают "что-то"? Использование console.log () во всплывающем окне не должно печатать в консоли загруженной страницы - поскольку вопросу исполнилось 2 года, изменился ли API?
Anddam

14
Если вы щелкнете правой кнопкой мыши -> проверить всплывающее окно в своем действии браузера, вы получите страницу инструментов разработчика для вашего расширения. popup.js распечатает логи для этого.
not_shitashi

Комментарий @ not_shitashi должен быть ответом на этот вопрос.
Гейб

Ответы:


154

Любая страница расширения (кроме скриптов контента ) имеет прямой доступ к фоновой странице через chrome.extension.getBackgroundPage().

Это означает, что на всплывающей странице вы можете просто сделать:

chrome.extension.getBackgroundPage().console.log('foo');

Чтобы сделать его проще в использовании:

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

Теперь, если вы хотите сделать то же самое в контентных скриптах, вы должны использовать Message Passing для достижения этого. Причина в том, что они оба принадлежат к разным доменам, что имеет смысл. На странице « Передача сообщений» есть много примеров, которые вы можете проверить.

Надеюсь, что все прояснит.


1
@MohamedMansour, это решение не работает для меня. Если я alert() chrome.extension.getBackgroundPage(), я получу null. Нужно ли мне установить разрешения или какую-то другую конфигурацию?
GWG

@gwg у вашего расширения есть фоновая страница? Согласно документации «Возвращает ноль, если у расширения нет фоновой страницы». developer.chrome.com/extensions/...
Mohamed Mansour

Это прекрасно работает для моих собственных сообщений в консоли. Спасибо. Любые мысли о том, как сделать исключения и т.д. из popup.js, появляются в консоли background.js?
steven_noble

196

Вы можете открыть консоль фоновой страницы, щелкнув ссылку «background.html» в списке расширений.

Для доступа к фоновой странице, которая соответствует вашим расширениям, откройте Settings / Extensionsили откройте новую вкладку и введите chrome://extensions. Вы увидите что-то вроде этого скриншота.

Диалог расширений Chrome

Под вашим расширением нажмите на ссылку background page. Это открывает новое окно. Для образца контекстного меню окно имеет заголовок: _generated_background_page.html.


4
Приветствия, я знаю об этом, однако открытие фоновой страницы напрямую не вызывает ничего из всплывающей страницы.
Hailwood

Открытие фоновой страницы не выводит никакой информации о регистрации в консоли.
Layke

@Hailwood, открывающий фоновую страницу, ничего не вызывает, но покажет консоль для фоновой страницы.
Anddam

1
@Layke, как только вы открыли фоновую страницу, вам все равно придется писать в нее, т.е. напрямую использовать console.log () из фоновой страницы или, как сказал mohamed-mansour, вызывать тот же метод для объекта, возвращаемого getBackgroundPage ()
anddam

3
Я нашел этот вопрос в поиске, как проверить вывод расширения (например, OP), и нашел этот ответ очень полезным, так как он позволял мне проверять журналы консоли, не проходя через страницу контента.
Anddam

66

Чтобы ответить на ваш вопрос напрямую, когда вы звоните console.log("something")из фона, это сообщение регистрируется в консоли фоновой страницы. Чтобы просмотреть его, перейдите по chrome://extensions/ссылке и нажмите на нее inspect viewпод своим расширением.

Когда вы нажимаете всплывающее окно, оно загружается на текущую страницу, поэтому console.log должен показывать сообщение журнала на текущей странице.


Я тоже! Это самый простой и прямой.
SaidbakR

мое расширение не имеет этого, другие расширения, однако! как мне это включить
Ахмед Ид

Если у вас есть 3 монитора, как я ... поверните голову. Он открывал ChromeDevTools на противоположном конце моего массива мониторов, и я его не видел.
Апен

26

Вы все еще можете использовать console.log (), но он регистрируется в отдельной консоли. Чтобы просмотреть его - щелкните правой кнопкой мыши значок расширения и выберите «Проверить всплывающее окно».


12

Простейшим решением было бы добавить следующий код вверху файла. И тогда вы можете использовать все полноценные консольные API Chrome, как обычно.

 console = chrome.extension.getBackgroundPage().console;
// for instance, console.assert(1!=1) will return assertion error
// console.log("msg") ==> prints msg
// etc

9
const log = chrome.extension.getBackgroundPage().console.log;
log('something')

Открыть журнал:

  • Открыть: chrome: // extensions /
  • Подробности> Фоновая страница

Не могли бы вы дать больше объяснений вашим командам?
inetphantom

7

Попробуйте это, если хотите войти в консоль активной страницы:

chrome.tabs.executeScript({
    code: 'console.log("addd")'
});

1
Требует разрешения хоста для текущей вкладки.
Ксан

Вы можете добавить его для тестирования и удалить, если освободите аддон.
Фаз

1

Относительно исходного вопроса я хотел бы добавить к принятому ответу Мохамеда Мансура, что есть также способ сделать эту работу наоборот:

Вы можете получить доступ к другим страницам расширения (т. Е. Странице параметров, всплывающей странице) из фоновой страницы / сценария с chrome.extension.getViews()вызовом. Как описано здесь .

 // overwrite the console object with the right one.
var optionsPage = (  chrome.extension.getViews()  
                 &&  (chrome.extension.getViews().length > 1)  ) 
                ? chrome.extension.getViews()[1] : null;

 // safety precaution.
if (optionsPage) {
  var console = optionsPage.console;
}

1

Это старый пост с уже хорошими ответами, но я добавляю свои два бита. Я не люблю использовать console.log, я бы предпочел использовать регистратор, который регистрирует данные на консоли или где угодно, поэтому у меня есть модуль, определяющий функцию журнала, немного похожую на эту.

function log(...args) {
  console.log(...args);
  chrome.extension.getBackgroundPage().console.log(...args);
}

Когда я вызываю журнал («это мой журнал»), он пишет сообщение как во всплывающей консоли, так и в фоновой консоли.

Преимущество заключается в возможности изменять поведение журналов без необходимости изменения кода (например, отключение журналов для производства и т. Д.)


0

Чтобы получить консольный журнал с фоновой страницы, вам нужно написать следующий фрагмент кода на фоновой странице background.js -

chrome.extension.getBackgroundPage () console.log ( 'Привет').

Затем загрузите расширение и осмотрите его фоновую страницу, чтобы увидеть журнал консоли.

Преуспевать!!

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.