Создание расширения для браузера Vivaldi 7.0

Степень завершённости урока: 50%    <

Расширения это небольшие программы, которые добавляют новые возможности в браузеры. Для просмотра установленных расширений наберите в адресной строке браузера "vivaldi://extensions" (без кавычек).

Расширение состоит из нескольких файлов, которые должны находиться в одной папке. Далее необходимо создать файл манифеста, в котором будет содержаться информация о названии, версии и описании нашего расширения. Файл должен называться "manifest" (без кавычек) и иметь расширение .json.

Откроем созданный файл manifest.json в любом текстовом редакторе и внесём туда следующую информацию.

{}

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

{"name": "Полезное расширение","version": "1.0.0","description": "Это очень полезное расширение для www.historian.by","manifest_version": 3}

"Name" это имя нашего расширения, "version" - версия нашего расширения, "description" - описание расширения, "manifest_version" - здесь просто должна стоять цифра 3.

По состоянию на 2023 год только три поля являются обязательными для размещения в манифесте:

• "manifest_version"
• "name" (длина названия не может превышать 75 символов)
• "version"

Также в манифесте рекомендуется заполнить следующие поля:

• "action"
• "default_locale"
• "description"
• "icons"

Дополнительно в манифесте расширения можно использовать следующие поля:

• "author"
• "background" (содержит информацию о JavaScript-файле, используемым в качестве обработчика событий)
• "chrome_settings_overrides"
• "chrome_url_overrides"
• "commands" (определение сочетаний клавиш, используемых расширением)
• "content_scripts"
• "content_security_policy"
• "cross_origin_embedder_policy"
• "cross_origin_opener_policy"
• "declarative_net_request"
• "devtools_page"
• "event_rules"
• "export" (наличие этого поля свидетельствует о том, что расширение может экспортировать свои ресурсы, т.е. один код может использоваться в разных частях расширения или в разных расширениях)
• "externally_connectable"
• "file_browser_handlers"
• "file_handlers"
• "file_system_provider_capabilities"
• "homepage_url"
• "host_permissions"
• "import"
• "incognito"
• "input_components"
• "key"
• "minimum_chrome_version"
• "oauth2"
• "omnibox"
• "optional_host_permissions"
• "optional_permissions"
• "options_page"
• "options_ui"
• "permissions" (accessibilityFeatures.modify, accessibilityFeatures.read, activeTab, alarms, audio, background, bookmarks, browsingData, certificateProvider, clipboardRead, clipboardWrite, contentSettings, contextMenus, cookies, debugger, declarativeContent, declarativeNetRequest, declarativeNetRequestWithHostAccess, declarativeNetRequestFeedback, dns, desktopCapture, documentScan, downloads, downloads.open, downloads.ui, enterprise.deviceAttributes, enterprise.hardwarePlatform, enterprise.networkingAttributes, enterprise.platformKeys, favicon, fileBrowserHandler, fileSystemProvider, fontSettings, gcm, geolocation, history, identity, identity.email, idle, loginState, management, nativeMessaging, notifications, offscreen, pageCapture, platformKeys, power, printerProvider, printing, printingMetrics, privacy, processes, proxy, readingList, runtime, scripting, search, sessions, sidePanel, storage, system.cpu, system.display, system.memory, system.storage, tabCapture, tabGroups, tabs, topSites, tts, ttsEngine, unlimitedStorage, userScripts, vpnProvider, wallpaper, webAuthenticationProxy, webNavigation, webRequest, webRequestBlocking)
• "requirements"
• "sandbox"
• "short_name"
• "side_panel"
• "storage"
• "tts_engine"
• "update_url"
• "version_name"
• "web_accessible_resources"

На этом этапе расширение для проверки можно загрузить в браузер. В данном случае видим, что расширение успешно отображается, но оно пока ничего не может сделать, т.к. логика работы отдельно прописывается в JavaScript.

Добавим в наш файл manifest.json ссылку на JavaScript-файл с обработчиком событий (формат Manifest V3):

{	"name": "Полезное расширение",	"version": "1.0.0",	"description": "Это очень полезное расширение для www.historian.by",	"background": {		"service_worker": "background.js"	},	"manifest_version": 3}

Теперь создадим в папке с манифестом новый файл — background.js, в котором будут размещены обработчики событий. Добавим в него следующий код:

chrome.runtime.onInstalled.addListener(<function() {    // здесь размещается код, выполняемый при установке});

Событие API onInstalled из кода выше срабатывает в трёх случаях:

• когда устанавливается расширение браузера
• когда обновляется расширение браузера
• когда обновляется браузер

Наряду с onInstalled могут использоваться и другие события:

• onConnect
• onConnectExternal
• onMessage
• onMessageExternal
• onStartup
• onSuspend
• onSuspendCanceled
• onUpdateAvailable
• onUserScriptConnect
• onUserScriptMessage

Страница обновлена 17 мая 2026 года.