Google Chrome / Firefox не видит вывод расширения в консоли

Я пытаюсь проверить пример кода для веб-расширения для браузеров. Но это не работает. Я проверил консоль для Google Chrome, а также для Firefox. Это ничего не печатает. Вот мой код:

manifest.json:

{
    "description": "Demonstrating webRequests",
    "manifest_version": 2,
    "name": "webRequest-demo",
    "version": "1.0",

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

background.js:

function logURL(requestDetails) {
    console.log("Loading: " + requestDetails.url);
}

chrome.webRequest.onBeforeRequest.addListener(
    logURL,
    {urls: ["<all_urls>"]}
);
console.log("Hell o extension background script executed");

Я что-то пропустил?

Источник

3 ответа

Fire Fox

В Firefox ваш код работает (выводится на консоль), как написано в вопросе.

Если вы не видите его в консоли, то вы, вероятно, смотрите не на ту консоль.

Mozilla описывает, какие выходные данные расширения можно увидеть в какой консоли на их странице отладки.

Консоль браузера

Вы должны использовать консоль браузера. Вы можете получить к нему доступ из Tools➜Web Developer➜Browser Console (сочетание клавиш Ctrl - Shift - J или Cmd - Shift - J на Mac).

Панель инструментов браузера

Если он у вас включен, вы также можете использовать консоль Browser Toolbox. Вы можете получить к нему доступ из Tools➜Web Developer➜Browser Toolbox (сочетание клавиш Ctrl- Alt- Shift- I; На Mac: Cmd- Alt- Shift- I).

Отладчик дополнений

Для отладки вашего дополнения вы можете использовать Add-on Debugger. Вы можете получить к нему доступ, хотя about:debugging➞Debug.

Веб-консоль

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

Гугл Хром

Показ правильной консоли для вашего расширения немного сложнее в Chrome. Вывод на консоль будет отображаться только в одном из нескольких возможных мест, в зависимости от того, из какого контекста console.log() был выполнен. Каждый из следующих DevTools не зависит друг от друга и отображается в отдельных окнах или вкладках. Отображение на соответствующей вкладке (внизу или сбоку) является значением по умолчанию для DevTools, связанных с веб-страницами и скриптами содержимого, поскольку они относятся к вкладке. Для сценария веб-страницы / содержимого DevTools у вас есть возможность отобразить его в отдельном окне или закрепить внутри вкладки (сбоку или снизу).

Для вашей фоновой страницы

Как объяснил Сружан Редди, вам нужно пройти через несколько пунктов в раскрывающемся меню, чтобы перейти к chrome://extensions страницу (или вы можете ввести это вручную в качестве URL-адреса, или использовать закладку), затем установите оба флажка ("Режим разработчика") и затем нажмите ссылку "фоновая страница". Затем вы должны выбрать вкладку "Консоль" в появившемся окне.

Намного проще показать, что вы должны сделать:
Показать консоль для расширения в Google Chrome

Для ваших скриптов контента

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

Делая вышеизложенное с шоу console.* выводится из вашего расширения, но приведет к тому, что консольная командная строка JavaScript, отладчик и т. д. будут находиться в контексте страницы, а не в скрипте содержимого.

Если вы хотите использовать консольную командную строку JavaScript в контексте сценариев содержимого, которые вставляются в веб-страницу, вам необходимо выбрать контекст содержимого сценария расширения в раскрывающемся меню в левом верхнем углу окна консоли. Это раскрывающееся меню обычно начинается со значения "top". В раскрывающемся списке будут выбраны параметры для каждого контекста сценария содержимого (по одному на каждое расширение, в которое вставлены сценарии).

Для вашего всплывающего окна

Щелкните правой кнопкой мыши на вашем browserAction Нажмите кнопку и выберите "Проверить всплывающее окно". Или щелкните правой кнопкой мыши во всплывающем окне и выберите "Осмотреть". Либо откроет DevTools для всплывающей страницы. Всплывающее окно будет оставаться открытым в большем количестве условий, чем обычно, но все равно будет закрыто, если вы переключите вкладки и т. Д.

Для вашей страницы настроек

Щелкните правой кнопкой мыши основное содержимое всплывающего окна "Параметры" (не строка заголовка) и выберите "Проверить". Это откроет DevTools для страницы параметров.

Для вашей панели или страницы из вашего расширения, загруженной во вкладку

Когда панель или вкладка сфокусированы, вы можете открыть DevTools, нажав F12 (или другие ярлыки) или открыв контекстное меню (щелчок правой кнопкой мыши) и выбрав "Осмотреть".

Источник

На какой консоли вы просматриваете журналы?

Если вы просматриваете консоль на вкладке, то это не то место.

Открыть настройки / Расширения или в новой вкладке типа

chrome://extensions

Под расширением нажмите на ссылку "фоновая страница", где вы можете посмотреть логи

** Убедитесь, что режим разработчика отмечен

Источник

Да, для Chrome вы должны щелкнуть упомянутую ссылку на фоновую страницу, но ее не будет, если вы не установите ее как постоянную:

"background": {
    "persistent": true,
    "scripts": ["background.js"]
}
Источник
Другие вопросы по тегам