Это невозможно, browser.* или chrome.* недоступны на консоли разработчика, поскольку для их запуска требуется контекст расширения, а на консоли разработчика выполняются команды в контексте текущей страницы.
Следующий подход требует изучения / знания модульного тестирования и интеграционного тестирования в JavaScript и node.js, приведенный пример слишком упрощен, это ни в коем случае не готовый к работе код.
Лучший подход для тестирования ваших отладок и отладки - это написать для него тесты.
Выберите среду тестирования (Jest, Mocha + chai и т. Д.) И настройте ее в соответствии с вашими потребностями
Установите sinon-chrome пакет, который предоставляет вам заглушки для browser.* методов / API, запустив npm install --save-dev sinon-chrome
(Необязательно) Установите webextensions-api-fake , который предоставляет вам mocks для browser.* методов / apis, запустив npm install --save-dev webextensions-api-fake
(Необязательно) Установите webextensions-jsdom , который поможет вам написать тесты для вашего браузера default_popup, sidebar_action default_panel или фоновой страницы / скриптов
Начните писать тесты, следуя приведенному ниже примеру
Чтобы отладить ваше расширение, установите точку останова в выбранной вами IDE / Editor и запустите тесты, выполнение остановится на точке останова, и у вас будет доступ к состояниям объектов и переменных в это время в выполнение. Это поможет вам узнать, что и как именно выполняется, и что происходит с данными, которые вы передаете в функциях. Нет необходимости писать везде операторы console.log для проверки ваших выходных данных или переменных, отладчики могут помочь с этим.
(Необязательно) webextensions-toolbox - еще один отличный инструмент для написания кросс-браузерных расширений (ваше расширение будет работать на chrome, firefox, opera, edge) с той же кодовой базой. Это также происходит с горячей перезагрузкой вашего расширения page, поэтому вам не нужно нажимать кнопку обновления каждый раз, когда вы вносите какие-либо изменения.
Следуя этому подходу, он улучшит ваш рабочий процесс разработки и сократит количество раз, когда вы должны нажимать кнопку Обновить в вашем браузере.
Пример использования заглушек sinon-chrome с использованием инфраструктуры Jest-тестирования.
Допустим, вы написали свой код в yourModule.js, чтобы затем проверить / убедиться, что он работает в
yourModule.test.js Вы пишете:
import browser from 'sinon-chrome';
import yourModule from './lib/yourModule';
describe('moduleName', () => {
beforeAll(() => {
// To make sure yourModule uses the stubbed version
global.browser = browser;
});
it('does something', async () => {
await yourModule();
// Lets assume your module creates two tabs
expect(browser.tabs.create.calledTwice).toBe(true);
// If you want to test how those browser methods where called
expect(browser.tabs.create.firstCall.calledWithExactly({
url: 'https://google.com',
})).toBe(true);
// Notice the usage of `.firstCall` here, this makes sure only the first time
// `browser.tabs.create` was called with the given args.
});
});
Когда вы запустите этот тест с использованием jest, ваш модуль будет ожидать существования глобальной переменной browser с используемым API, который возможен только в реальном браузере, но мы подделали его с помощью пакета sinon-chrome, вашего модуля. будет выполняться в среде node.js, как и ожидалось.
Вам не нужно запускать его в браузере, чтобы увидеть изменения. Вы просто пишете тесты, пишете код для прохождения этих тестов и когда все тесты пройдены. Проверьте ваше расширение, запустив его в браузере, в этот момент ваше расширение будет работать так, как вы ожидаете. Если вы добавите еще одну функцию в свой модуль и ваши тесты не пройдут, вы точно знаете, что пошло не так.
Однако в приведенном выше примере проверяется только то, как были вызваны browser.* методы / apis. Чтобы протестировать поведение вашего модуля, вам необходимо смоделировать эти методы / apis, это был пакет webextensions-api-fake. in. Вы можете найти пример в репозитории на github.
Примеры тестирования вашего browser_action default_popup, sidebar_action default_panel или фоновой страницы / скриптов также представлены в репозитории webextensions-jsdom на github.