Создание одного расширения браузера для всех браузеров: Edge, Chrome, Firefox, Opera, Brave и Vivaldi

  1. Об авторе Дэвид Руссет - старший менеджер программ в Microsoft, отвечающий за внедрение стандартов HTML5. Он был спикером в нескольких известных сетях ... Подробнее о Дэвиде ... В сегодняшней статье мы создадим расширение JavaScript, которое будет работать во всех основных современных браузерах, используя ту же самую базу кода. Действительно, модель расширений Chrome, основанная на HTML, CSS и JavaScript, теперь доступна почти везде, и даже существует стандартная группа сообщества расширений для браузеров. Я объясню, как вы можете установить это расширение, которое поддерживает модель веб-расширений (например, Edge, Chrome, Firefox, Opera, Brave и Vivaldi), и дам несколько простых советов о том, как получить уникальную базу кода для всех из них, но также как отлаживать в каждом браузере. Я объясню, как вы можете установить это расширение, которое поддерживает модель веб-расширений (например, Edge, Chrome, Firefox, Opera, Brave и Vivaldi), и дам несколько простых советов о том, как получить уникальную базу кода для всех из них, но также как отлаживать в каждом браузере. Примечание. Мы не будем рассматривать Safari в этой статье, потому что не поддерживает ту же модель расширения как и другие. основы
  2. Наше расширение
  3. Совет, чтобы сделать ваш код совместимым со всеми браузерами
  4. Архитектура расширения
  5. Сгенерируйте ключ Computer Vision на другой вкладке.
  6. Загрузка расширения в каждом браузере
  7. Предпосылки
  8. Microsoft Edge
  9. Google Chrome, Opera, Вивальди
  10. Mozilla Firefox
  11. Храбрый
  12. Отладка расширения в каждом браузере
  13. Microsoft Edge
  14. Google Chrome, Opera, Вивальди, Храбрый
  15. Сгенерируйте ключ Computer Vision на другой вкладке.
  16. Загрузка расширения в каждом браузере
  17. Предпосылки
  18. Microsoft Edge
  19. Google Chrome, Opera, Вивальди
  20. Mozilla Firefox
  21. Храбрый
  22. Отладка расширения в каждом браузере
  23. Microsoft Edge
  24. Google Chrome, Opera, Вивальди, Храбрый
  25. Mozilla Firefox
  26. Публикация вашего расширения в каждом магазине

Об авторе

Дэвид Руссет - старший менеджер программ в Microsoft, отвечающий за внедрение стандартов HTML5. Он был спикером в нескольких известных сетях ... Подробнее о Дэвиде ...

В сегодняшней статье мы создадим расширение JavaScript, которое будет работать во всех основных современных браузерах, используя ту же самую базу кода. Действительно, модель расширений Chrome, основанная на HTML, CSS и JavaScript, теперь доступна почти везде, и даже существует стандартная группа сообщества расширений для браузеров. Я объясню, как вы можете установить это расширение, которое поддерживает модель веб-расширений (например, Edge, Chrome, Firefox, Opera, Brave и Vivaldi), и дам несколько простых советов о том, как получить уникальную базу кода для всех из них, но также как отлаживать в каждом браузере.

Я объясню, как вы можете установить это расширение, которое поддерживает модель веб-расширений (например, Edge, Chrome, Firefox, Opera, Brave и Vivaldi), и дам несколько простых советов о том, как получить уникальную базу кода для всех из них, но также как отлаживать в каждом браузере.

Примечание. Мы не будем рассматривать Safari в этой статье, потому что не поддерживает ту же модель расширения как и другие.

основы

Я не буду освещать основы разработки расширений, потому что у каждого поставщика уже есть множество хороших ресурсов:

Итак, если вы никогда ранее не создавали расширение или не знаете, как оно работает, взгляните на эти ресурсы. Не волнуйтесь: строить это просто и понятно.

Наше расширение

Давайте создадим доказательство концепции - расширение, которое использует искусственный интеллект (ИИ) и компьютерное зрение, чтобы помочь слепым анализировать изображения на веб-странице.

Мы увидим, что с помощью нескольких строк кода мы можем создать некоторые мощные функции в браузере. В моем случае, я обеспокоен доступностью в Интернете, и я уже потратил некоторое время на размышления о том, как сделать прорывная игра доступна с использованием веб-аудио и SVG , например.

Тем не менее, я искал что-то, что помогло бы слепым людям в более общем плане. Недавно я был вдохновлен, слушая Крис Хайльманн в Лиссабоне: « Пиксели и скрытое значение в пикселях «.

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

Мое небольшое доказательство концепции просто извлекает изображения с веб-страницы (той, которая находится на активной вкладке) и отображает миниатюры в списке. При нажатии на одно из изображений расширение запрашивает API-интерфейс Computer Vision, чтобы получить некоторый описательный текст для изображения, а затем использует API-интерфейс Web Speech или Bing Speech API, чтобы поделиться им с посетителем.

Видео ниже демонстрирует это в Edge, Chrome, Firefox, Opera и Brave.

Вы заметите, что даже когда API-интерфейс Computer Vision анализирует некоторые изображения CGI, это очень точно! Я действительно впечатлен прогрессом, достигнутым индустрией в этом в последние месяцы.

Я пользуюсь этими услугами:

Но не стесняйтесь попробовать другие подобные услуги:

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

Совет, чтобы сделать ваш код совместимым со всеми браузерами

Большая часть кода и учебных пособий, которые вы найдете, используют пространство имен chrome.xxx для API расширения (например, chrome.tabs).

Но, как я уже сказал, модель Extension API в настоящее время стандартизируется в browser.xxx, и некоторые браузеры тем временем определяют свои собственные пространства имен (например, Edge использует msBrowser).

К счастью, большая часть API остается неизменной за браузером. Итак, очень просто создать небольшой трюк для поддержки всех браузеров и определений пространства имен, благодаря красоте JavaScript:

window.browser = (function () {return window.msBrowser || window.browser || window.chrome;}) ();

И вуаля!

Конечно, вам также необходимо использовать подмножество API, поддерживаемое всеми браузерами. Например:

Архитектура расширения

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

Давайте начнем с файл манифеста :

( Посмотреть большую версию )

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

Например, вы должны указать свойство автора, чтобы загрузить его в Edge; в противном случае будет выдано сообщение об ошибке. Вам также нужно будет использовать ту же структуру для иконок. Свойство default_title также важно, потому что оно используется программами чтения с экрана в некоторых браузерах.

Вот ссылки на документацию, которые помогут вам создать файл манифеста, совместимый везде:

Пример расширения, используемый в этой статье, в основном основан на концепции контентный скрипт , Это сценарий, живущий в контексте страницы, которую мы хотели бы проверить. Поскольку он имеет доступ к DOM, он поможет нам получить изображения, содержащиеся на веб-странице. Если вы хотите узнать больше о том, что такое скрипт контента, опера , Mozilla а также Google есть документация на это.

наш контентный скрипт это просто:

( Посмотреть большую версию ) console.log («Сценарий контента Dare Angel запущен»); browser.runtime.onMessage.addListener (функция (запрос, отправитель, sendResponse) {if (request.command == "requestImages") {var images = document.getElementsByTagName ('img'); var imagesList = []; для (var i = 0; i 64 && images [i] .height> 64)) {imagesList.push ({url: images [i] .src, alt: images [i] .alt}); }} sendResponse (JSON.stringify (imagesList)); }}); смотреть сырье

Это первый вход в консоль, чтобы вы могли проверить, правильно ли загружено расширение. Проверьте это через инструмент разработчика вашего браузера, доступный из F12, Control + Shift + I или ⌘ + ⌥ + I.

Затем он ожидает сообщения со страницы пользовательского интерфейса с командой requestImages, чтобы получить все изображения, доступные в текущем DOM, а затем возвращает список их URL-адресов, если они больше 64 × 64 пикселей (чтобы избежать всех пиксельное отслеживание мусора и изображений с низким разрешением).

Затем он ожидает сообщения со страницы пользовательского интерфейса с командой requestImages, чтобы получить все изображения, доступные в текущем DOM, а затем возвращает список их URL-адресов, если они больше 64 × 64 пикселей (чтобы избежать всех пиксельное отслеживание мусора и изображений с низким разрешением)

( Посмотреть большую версию )

Всплывающее окно Страница интерфейса мы используем очень просто и будет отображать список изображений, возвращаемых сценарием содержимого внутри контейнер flexbox , Он загружает скрипт start.js, который сразу же создает экземпляр dareangel.dashboard.js отправить сообщение скрипту содержимого, чтобы получить URL-адреса изображений на видимой в данный момент вкладке.

Вот код, который живет на странице пользовательского интерфейса, запрашивая URL-адреса для скрипта содержимого:

browser.tabs.query ({active: true, currentWindow: true}, (tabs) => {browser.tabs.sendMessage (tabs [0] .id, {command: "requestImages"}, (response) => {this ._imagesList = JSON.parse (response); this._imagesList.forEach ((element) => {var newImageHTMLElement = document.createElement ("img"); newImageHTMLElement.src = element.url; newImageHTMLElement.alt = element.alt; newImageHTMLElement.tabIndex = this._tabIndex; this._tabIndex ++; newImageHTMLElement.addEventListener ("focus", (event) => {if (COMPUTERVISIONKEY! == "") {this.analyzeThisImage (event.target.src); var warningMsg = document.createElement ("div"); warningMsg.innerHTML = "

Сгенерируйте ключ Computer Vision на другой вкладке.

"; this._targetDiv.insertBefore (warningMsg, this._targetDiv.firstChild); browser.tabs.create ({active: false, url:" https://www.microsoft.com/cognitive-services/en-US/sign -up? ReturnUrl = / cognitive-services / en-us / подписки? productId =% 2fproducts% 2f54d873dd5eefd00dc474a0f4 "});}}); this._targetDiv.appendChild (newImageHTMLElement);});});});

Мы создаем элементы изображения. Каждое изображение будет вызывать событие, если оно имеет фокус, запрашивая API-интерфейс Computer Vision для просмотра.

Это делается с помощью этого простого вызова XHR:

analysisThisImage (url) {var xhr = new XMLHttpRequest (); xhr.onreadystatechange = () => {if (xhr.readyState == 4 && xhr.status == 200) {var response = document.querySelector ('# response'); var reponse = JSON.parse (xhr.response); var resultToSpeak = `С уверенностью $ {Math.round (reponse.description.captions [0] .confidence * 100)}%, я думаю, что это $ {reponse.description.captions [0] .text}`; console.log (resultToSpeak); if (! this._useBingTTS || BINGSPEECHKEY === "") {var synUtterance = new SpeechSynthesisUtterance (); synUtterance.text = resultToSpeak; window.speechSynthesis.speak (synUtterance); } else {this._bingTTSclient.synthesize (resultToSpeak); }}}; xhr.onerror = (evt) => {console.log (evt); }; try {xhr.open ('POST', 'https://api.projectoxford.ai/vision/v1.0/describe'); xhr.setRequestHeader ("Content-Type", "application / json"); xhr.setRequestHeader («Ocp-Apim-Subscription-Key», COMPUTERVISIONKEY); var requestObject = {"url": url}; xhr.send (JSON.stringify (requestObject)); } catch (ex) {console.log (ex); }} просмотреть сырье

Следующие статьи помогут вам понять, как работает этот API-интерфейс Computer Vision:

  • « Анализ версии изображения 1.0 »Microsoft Cognitive Services
  • « Computer Vision API, v1.0 »Microsoft Cognitive Services
    Это показывает вам через интерактивную консоль на веб-странице, как вызвать REST API с правильными свойствами JSON и объект JSON, который вы получите взамен. Полезно понять, как это работает и как вы это называете.

В нашем случае мы используем функцию описания API. В обратном вызове вы также заметите, что мы попытаемся использовать либо API-интерфейс Web Speech, либо службу Bing Text-to-Speech , в зависимости от ваших возможностей.

Вот глобальный рабочий процесс этого небольшого расширения:

( Посмотреть большую версию )

Загрузка расширения в каждом браузере

Давайте быстро рассмотрим, как установить расширение в каждом браузере.

Предпосылки

Скачать или клонировать мое маленькое расширение с GitHub где-то на вашем жестком диске.

Кроме того, измените dareangel.dashboard.js, добавив хотя бы ключ API Vision. В противном случае расширение сможет отображать только изображения, извлеченные с веб-страницы.

Microsoft Edge

Во-первых, вам понадобится как минимум Windows 10 Anniversary Update (OS Build 14393+), чтобы иметь поддержку расширений в Edge.

Затем откройте Edge и введите about: flags в адресной строке. Отметьте «Включить функции разработчика расширений».

Нажмите «…» на панели навигации Edge, затем «Расширения», затем «Загрузить расширение» и выберите папку, в которой вы клонировали мой репозиторий GitHub. Вы получите это:

Вы получите это:

Нажмите на это недавно загруженное расширение и включите «Показать кнопку рядом с адресной строкой».

Нажмите на это недавно загруженное расширение и включите «Показать кнопку рядом с адресной строкой»

Обратите внимание на кнопку «Обновить расширение», которая полезна при разработке вашего расширения. Вы не будете вынуждены удалять или переустанавливать его в процессе разработки; просто нажмите кнопку, чтобы обновить расширение.

Перейдите к BabylonJS и нажмите кнопку Dare Angel (DA), чтобы перейти к той же демонстрации, как показано на видео.

Google Chrome, Opera, Вивальди

В Chrome перейдите к chrome: // extensions. В Opera перейдите к opera: // extensions. А в Вивальди перейдите к vivaldi: // extensions. Затем включите «Режим разработчика».

Нажмите «Загрузить распакованное расширение» и выберите папку, в которую вы распаковали мое расширение.

( Посмотреть большую версию )

Перейдите к BabylonJS и откройте расширение, чтобы убедиться, что оно работает нормально.

Mozilla Firefox

У вас есть два варианта здесь. Первый - временно загрузить расширение, которое так же просто, как в Edge и Chrome.

Откройте Firefox, перейдите к пункту «Отладка» и нажмите «Загрузить временное дополнение». Затем перейдите к папке расширения и выберите файл manifest.json. Это оно! Теперь иди в BabylonJS проверить расширение.

( Посмотреть большую версию )

Единственная проблема, связанная с этим решением, заключается в том, что каждый раз, когда вы закрываете браузер, вам придется перезагружать расширение. Второй вариант - использовать упаковку XPI. Вы можете узнать больше об этом в « Расширение Упаковка В сети разработчиков Mozilla.

Храбрый

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

Как объяснялось в этой статье, после того, как вы клонировали Brave, вам нужно открыть файл extensions.js в текстовом редакторе. Найдите строки ниже и введите регистрационный код для вашего добавочного номера. В моем случае я только что добавил две последние строки:

// Вручную устанавливаем расширение braveExtension и torrentExtensionInfo.setState (config.braveExtensionId, extensionStates.Rurable) loadExtension (config.braveExtensionId, getExtensionsPath ('brave'), generateBraveManifest (), 'component') extensionInfo.setState ('DareAntes', расширение .Rurable) loadExtension ('DareAngel', getExtensionsPath ('DareAngel /')), вид необработанный

Скопируйте расширение в папку app / extensions. Откройте две командные строки в папке браузера-ноутбука. В первом из них запустите npm run watch и подождите, пока webpack завершит сборку приложения Brave's Electron. В нем должно быть сказано: «webpack: bundle теперь VALID». В противном случае вы столкнетесь с некоторыми проблемами.

( Посмотреть большую версию )

Затем во второй командной строке запустите npm start, который запустит нашу слегка настраиваемую версию Brave.

В Brave перейдите к about: extensions, и вы увидите, что расширение отображается и загружается в адресную строку.

В Brave перейдите к about: extensions, и вы увидите, что расширение отображается и загружается в адресную строку

( Посмотреть большую версию )

Отладка расширения в каждом браузере

Совет для всех браузеров : с помощью console.log () просто зарегистрируйте некоторые данные из потока вашего расширения. В большинстве случаев, используя инструменты разработчика браузера, вы сможете щелкнуть файл JavaScript, в котором он зарегистрирован, чтобы открыть его и отладить.

Microsoft Edge

Чтобы отладить часть клиентского скрипта, живущую в контексте страницы, вам просто нужно открыть F12. Затем нажмите на вкладку «Отладчик» и найдите папку вашего расширения.

Откройте файл сценария, который вы хотите отладить - в моем случае - dareangel.client.js - и отладьте ваш код как обычно, настройте точки останова и т. Д.

( Посмотреть большую версию )

Если ваше расширение создает отдельную вкладку, чтобы сделать свою работу (например, Анализатор страниц , который наш Vorlon.js команда опубликована в магазине), просто нажмите F12 на этой вкладке, чтобы отладить его.

( Посмотреть большую версию )

Если вы хотите отладить всплывающую страницу, вам сначала нужно получить идентификатор вашего расширения. Для этого просто перейдите в свойство расширения и вы найдете свойство ID:

Затем вам нужно будет ввести в адресной строке что-то вроде ms-browser-extension: //ID_of_your_extension/yourpage.html. В нашем случае это будет расширение ms-browser: //DareAngel_vdbyzyarbfgh8/dashboard.html. Затем просто используйте F12 на этой странице:

Затем просто используйте F12 на этой странице:

( Посмотреть большую версию )

Google Chrome, Opera, Вивальди, Храбрый

Поскольку Chrome и Opera используют одну и ту же базу кода Blink, они используют один и тот же процесс отладки. Несмотря на то, что Brave и Vivaldi являются форками Chromium, они также в большинстве случаев используют один и тот же процесс отладки.

Чтобы отладить часть клиентского скрипта, откройте инструменты разработчика браузера на странице, которую вы хотите отладить (нажав F12, Control + Shift + I или ⌘ + ⌥ + I, в зависимости от браузера или платформы, которые вы используете).

Затем нажмите на вкладку «Сценарии содержимого» и найдите папку вашего расширения. Откройте файл сценария, который вы хотите отладить, и отладьте свой код так же, как и с любым другим кодом JavaScript.

Откройте файл сценария, который вы хотите отладить, и отладьте свой код так же, как и с любым другим кодом JavaScript

( Посмотреть большую версию )

Всплывающее окно Страница интерфейса мы используем очень просто и будет отображать список изображений, возвращаемых сценарием содержимого внутри контейнер flexbox , Он загружает скрипт start.js, который сразу же создает экземпляр dareangel.dashboard.js отправить сообщение скрипту содержимого, чтобы получить URL-адреса изображений на видимой в данный момент вкладке.

Вот код, который живет на странице пользовательского интерфейса, запрашивая URL-адреса для скрипта содержимого:

browser.tabs.query ({active: true, currentWindow: true}, (tabs) => {browser.tabs.sendMessage (tabs [0] .id, {command: "requestImages"}, (response) => {this ._imagesList = JSON.parse (response); this._imagesList.forEach ((element) => {var newImageHTMLElement = document.createElement ("img"); newImageHTMLElement.src = element.url; newImageHTMLElement.alt = element.alt; newImageHTMLElement.tabIndex = this._tabIndex; this._tabIndex ++; newImageHTMLElement.addEventListener ("focus", (event) => {if (COMPUTERVISIONKEY! == "") {this.analyzeThisImage (event.target.src); var warningMsg = document.createElement ("div"); warningMsg.innerHTML = "

Сгенерируйте ключ Computer Vision на другой вкладке.

"; this._targetDiv.insertBefore (warningMsg, this._targetDiv.firstChild); browser.tabs.create ({active: false, url:" https://www.microsoft.com/cognitive-services/en-US/sign -up? ReturnUrl = / cognitive-services / en-us / подписки? productId =% 2fproducts% 2f54d873dd5eefd00dc474a0f4 "});}}); this._targetDiv.appendChild (newImageHTMLElement);});});});

Мы создаем элементы изображения. Каждое изображение будет вызывать событие, если оно имеет фокус, запрашивая API-интерфейс Computer Vision для просмотра.

Это делается с помощью этого простого вызова XHR:

analysisThisImage (url) {var xhr = new XMLHttpRequest (); xhr.onreadystatechange = () => {if (xhr.readyState == 4 && xhr.status == 200) {var response = document.querySelector ('# response'); var reponse = JSON.parse (xhr.response); var resultToSpeak = `С уверенностью $ {Math.round (reponse.description.captions [0] .confidence * 100)}%, я думаю, что это $ {reponse.description.captions [0] .text}`; console.log (resultToSpeak); if (! this._useBingTTS || BINGSPEECHKEY === "") {var synUtterance = new SpeechSynthesisUtterance (); synUtterance.text = resultToSpeak; window.speechSynthesis.speak (synUtterance); } else {this._bingTTSclient.synthesize (resultToSpeak); }}}; xhr.onerror = (evt) => {console.log (evt); }; try {xhr.open ('POST', 'https://api.projectoxford.ai/vision/v1.0/describe'); xhr.setRequestHeader ("Content-Type", "application / json"); xhr.setRequestHeader («Ocp-Apim-Subscription-Key», COMPUTERVISIONKEY); var requestObject = {"url": url}; xhr.send (JSON.stringify (requestObject)); } catch (ex) {console.log (ex); }} просмотреть сырье

Следующие статьи помогут вам понять, как работает этот API-интерфейс Computer Vision:

  • « Анализ версии изображения 1.0 »Microsoft Cognitive Services
  • « Computer Vision API, v1.0 »Microsoft Cognitive Services
    Это показывает вам через интерактивную консоль на веб-странице, как вызвать REST API с правильными свойствами JSON и объект JSON, который вы получите взамен. Полезно понять, как это работает и как вы это называете.

В нашем случае мы используем функцию описания API. В обратном вызове вы также заметите, что мы попытаемся использовать либо API-интерфейс Web Speech, либо службу Bing Text-to-Speech , в зависимости от ваших возможностей.

Вот глобальный рабочий процесс этого небольшого расширения:

( Посмотреть большую версию )

Загрузка расширения в каждом браузере

Давайте быстро рассмотрим, как установить расширение в каждом браузере.

Предпосылки

Скачать или клонировать мое маленькое расширение с GitHub где-то на вашем жестком диске.

Кроме того, измените dareangel.dashboard.js, добавив хотя бы ключ API Vision. В противном случае расширение сможет отображать только изображения, извлеченные с веб-страницы.

Microsoft Edge

Во-первых, вам понадобится как минимум Windows 10 Anniversary Update (OS Build 14393+), чтобы иметь поддержку расширений в Edge.

Затем откройте Edge и введите about: flags в адресной строке. Отметьте «Включить функции разработчика расширений».

Нажмите «…» на панели навигации Edge, затем «Расширения», затем «Загрузить расширение» и выберите папку, в которой вы клонировали мой репозиторий GitHub. Вы получите это:

Вы получите это:

Нажмите на это недавно загруженное расширение и включите «Показать кнопку рядом с адресной строкой».

Нажмите на это недавно загруженное расширение и включите «Показать кнопку рядом с адресной строкой»

Обратите внимание на кнопку «Обновить расширение», которая полезна при разработке вашего расширения. Вы не будете вынуждены удалять или переустанавливать его в процессе разработки; просто нажмите кнопку, чтобы обновить расширение.

Перейдите к BabylonJS и нажмите кнопку Dare Angel (DA), чтобы перейти к той же демонстрации, как показано на видео.

Google Chrome, Opera, Вивальди

В Chrome перейдите к chrome: // extensions. В Opera перейдите к opera: // extensions. А в Вивальди перейдите к vivaldi: // extensions. Затем включите «Режим разработчика».

Нажмите «Загрузить распакованное расширение» и выберите папку, в которую вы распаковали мое расширение.

( Посмотреть большую версию )

Перейдите к BabylonJS и откройте расширение, чтобы убедиться, что оно работает нормально.

Mozilla Firefox

У вас есть два варианта здесь. Первый - временно загрузить расширение, которое так же просто, как в Edge и Chrome.

Откройте Firefox, перейдите к пункту «Отладка» и нажмите «Загрузить временное дополнение». Затем перейдите к папке расширения и выберите файл manifest.json. Это оно! Теперь иди в BabylonJS проверить расширение.

( Посмотреть большую версию )

Единственная проблема, связанная с этим решением, заключается в том, что каждый раз, когда вы закрываете браузер, вам придется перезагружать расширение. Второй вариант - использовать упаковку XPI. Вы можете узнать больше об этом в « Расширение Упаковка В сети разработчиков Mozilla.

Храбрый

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

Как объяснялось в этой статье, после того, как вы клонировали Brave, вам нужно открыть файл extensions.js в текстовом редакторе. Найдите строки ниже и введите регистрационный код для вашего добавочного номера. В моем случае я только что добавил две последние строки:

// Вручную устанавливаем расширение braveExtension и torrentExtensionInfo.setState (config.braveExtensionId, extensionStates.Rurable) loadExtension (config.braveExtensionId, getExtensionsPath ('brave'), generateBraveManifest (), 'component') extensionInfo.setState ('DareAntes', расширение .Rurable) loadExtension ('DareAngel', getExtensionsPath ('DareAngel /')), вид необработанный

Скопируйте расширение в папку app / extensions. Откройте две командные строки в папке браузера-ноутбука. В первом из них запустите npm run watch и подождите, пока webpack завершит сборку приложения Brave's Electron. В нем должно быть сказано: «webpack: bundle теперь VALID». В противном случае вы столкнетесь с некоторыми проблемами.

( Посмотреть большую версию )

Затем во второй командной строке запустите npm start, который запустит нашу слегка настраиваемую версию Brave.

В Brave перейдите к about: extensions, и вы увидите, что расширение отображается и загружается в адресную строку.

В Brave перейдите к about: extensions, и вы увидите, что расширение отображается и загружается в адресную строку

( Посмотреть большую версию )

Отладка расширения в каждом браузере

Совет для всех браузеров : с помощью console.log () просто зарегистрируйте некоторые данные из потока вашего расширения. В большинстве случаев, используя инструменты разработчика браузера, вы сможете щелкнуть файл JavaScript, в котором он зарегистрирован, чтобы открыть его и отладить.

Microsoft Edge

Чтобы отладить часть клиентского скрипта, живущую в контексте страницы, вам просто нужно открыть F12. Затем нажмите на вкладку «Отладчик» и найдите папку вашего расширения.

Откройте файл сценария, который вы хотите отладить - в моем случае - dareangel.client.js - и отладьте ваш код как обычно, настройте точки останова и т. Д.

( Посмотреть большую версию )

Если ваше расширение создает отдельную вкладку, чтобы сделать свою работу (например, Анализатор страниц , который наш Vorlon.js команда опубликована в магазине), просто нажмите F12 на этой вкладке, чтобы отладить его.

( Посмотреть большую версию )

Если вы хотите отладить всплывающую страницу, вам сначала нужно получить идентификатор вашего расширения. Для этого просто перейдите в свойство расширения и вы найдете свойство ID:

Затем вам нужно будет ввести в адресной строке что-то вроде ms-browser-extension: //ID_of_your_extension/yourpage.html. В нашем случае это будет расширение ms-browser: //DareAngel_vdbyzyarbfgh8/dashboard.html. Затем просто используйте F12 на этой странице:

Затем просто используйте F12 на этой странице:

( Посмотреть большую версию )

Google Chrome, Opera, Вивальди, Храбрый

Поскольку Chrome и Opera используют одну и ту же базу кода Blink, они используют один и тот же процесс отладки. Несмотря на то, что Brave и Vivaldi являются форками Chromium, они также в большинстве случаев используют один и тот же процесс отладки.

Чтобы отладить часть клиентского скрипта, откройте инструменты разработчика браузера на странице, которую вы хотите отладить (нажав F12, Control + Shift + I или ⌘ + ⌥ + I, в зависимости от браузера или платформы, которые вы используете).

Затем нажмите на вкладку «Сценарии содержимого» и найдите папку вашего расширения. Откройте файл сценария, который вы хотите отладить, и отладьте свой код так же, как и с любым другим кодом JavaScript.

Откройте файл сценария, который вы хотите отладить, и отладьте свой код так же, как и с любым другим кодом JavaScript

( Посмотреть большую версию )

Чтобы отладить вкладку, созданную вашим расширением, она точно такая же, как и в Edge: просто используйте инструменты разработчика.

( Посмотреть большую версию )

Для Chrome и Opera, чтобы отладить всплывающую страницу, щелкните правой кнопкой мыши кнопку вашего расширения рядом с адресной строкой и выберите «Проверка всплывающего окна», или откройте панель HTML всплывающего окна и щелкните правой кнопкой мыши внутри нее, чтобы «Проверить. «Vivaldi поддерживает только щелчок правой кнопкой мыши и затем« Проверять »внутри HTML-панели после ее открытия.

( Посмотреть большую версию )

Для Храброго это тот же процесс, что и для Edge. Сначала вам нужно найти GUID, связанный с вашим расширением, в about: extensions:

А затем, на отдельной вкладке, откройте страницу, которую вы хотите отладить, как - в моем случае, chrome-extension: //bodaahkboijjjodkbmmddgjldpifcjap/dashboard.html - и откройте инструменты разработчика.

html - и откройте инструменты разработчика

( Посмотреть большую версию )

Что касается макета, вам немного помогло использование Shift + F8, которое позволит вам проверить весь кадр Brave. И вы обнаружите, что Brave - это электронное приложение, использующее React!

Обратите внимание, например, на атрибут data -actroot.

Обратите внимание, например, на атрибут data -actroot

( Посмотреть большую версию )

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

Mozilla Firefox

Мозилла действительно здорово документация по отладке веб-расширений ,

Для клиентского скрипта он такой же, как в Edge, Chrome, Opera и Brave. Просто откройте инструменты разработчика на вкладке, которую вы хотите отладить, и вы найдете раздел moz-extension: // guid с вашим кодом для отладки:

( Посмотреть большую версию )

Если вам нужно отладить вкладку, которую будет создавать ваше расширение (например, расширение Page Analyzer Vorlon.js), просто используйте инструменты разработчика:

( Посмотреть большую версию )

Наконец, отладка всплывающего окна немного сложнее, но хорошо объясняется в Отладка всплывающих окон Раздел документации.

( Посмотреть большую версию )

Публикация вашего расширения в каждом магазине

У каждого поставщика есть подробная документация о процессе, которым необходимо следовать, чтобы опубликовать ваше расширение в своем магазине. Все они используют сходные подходы. Вам необходимо упаковать расширение в определенный формат файла - в большинстве случаев это ZIP-подобный контейнер. Затем вы должны отправить его на выделенный портал, выбрать модель ценообразования и дождаться завершения процесса проверки. Если оно будет принято, ваше расширение будет загружаться в самом браузере любым пользователем, который посещает магазин расширений.

Вот различные процессы:

Обратите внимание, что отправка расширения Microsoft Edge в Магазин Windows в настоящее время ограничена. Обратитесь в команду Microsoft Edge с вашим запросом стать частью Магазина Windows, и они рассмотрят вас в будущем обновлении.

Я пытался поделиться как можно большей частью того, что я узнал, работая над нашими Расширение Vorlon.js Page Analyzer и это небольшое доказательство концепции.

Некоторые разработчики помнят боль, возникающую при работе с различными реализациями для создания своих расширений - будь то использование разных каталогов компоновки, работа с немного отличающимися API расширений или следование совершенно другим подходам, таким как расширения XUL Firefox или BHO Internet Explorer и ActiveX.

Удивительно видеть, что сегодня, используя наши обычные навыки работы с JavaScript, CSS и HTML, мы можем создавать отличные расширения, используя одну и ту же кодовую базу и для всех браузеров!

Не стесняйтесь пингуй меня в твиттере за любой отзыв.

Новости

Социальные сети в России, зима 2015-2016 Цифры, тренды, прогнозы | Блог Brand Analуtics — все о бренд мониторинге и социальной аналитике
Представляем данные регулярного исследования активной аудитории социальных сетей в России, зима 2015-2016. В исследовании представлены данные по аудитории, возрасту, полу и региональному распределению

SMM маркетинг от А до Я
Развитие социальных сетей породило новую огромную бизнес отрасль — СММ маркетинг. Это когда мы приходим с нашим продуктом в какую-нибудь соцсеть, находим там нашу целевую аудиторию, и предлагаем ей наш

Полезно знать
20.02.2014 Что такое Pinterest. Визуальный PR и маркетинг Pinterest или ПИНТЕРЕСТ – социальная сеть, использующая вместо текстов картинки и изображения, которые можно добавлять в аккаунт,

Фейсбук Моя страница: ВХОД на свою страницу Facebook
Фейсбук (Facebook) Моя страница — это личная страница каждого зарегистрированного пользователя самой большой в мире социальной сети.  Фейсбук даёт возможность людям с разных уголков Земли общаться между

Анализ социальных сетей
АНАЛИЗ СОЦИАЛЬНЫХ СЕТЕЙ (social network analysis) - новое направление структурного подхода, основными целями которого являются исследование взаимодействий между социальными объектами и выявление условий

Социальные сети для продвижения бизнеса: какие выбрать?
  Привет, друзья! Социальные сети занимают львиную часть времени в нашей жизни. Ежедневный просмотр новостей, любимых групп и переписка с друзьями – это любимое дело большинства молодых людей. Вот и

ВРЕДНОЕ ВЛИЯНИЕ СОЦИАЛЬНЫХ СЕТЕЙ НА ЗДОРОВЬЕ ЧЕЛОВЕКА - VI Студенческий научный форум (15 февраля - 31 марта 2014 года)
ВРЕДНОЕ ВЛИЯНИЕ СОЦИАЛЬНЫХ СЕТЕЙ НА ЗДОРОВЬЕ ЧЕЛОВЕКА Гущина Н. В., Люлина Н.В. С распространением всемирной паутины рост социальных сетей по всему миру стал глобальным явлением. С каждым

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

Маркетинг в социальных сетях (SMM) для продвижения компании
Деятельность в социальных сетях, на блогах и форумах по повышению лояльности клиентов получила название SMM — от аббревиатуры английского звучания этого термина – Social Media Marketing. Аудитория

Фейсбук (Facebook) - что это за сеть: как пользоваться ФБ
Фейсбук — это самая популярная и большая социальная сеть в мире. Если Вам интересно узнать больше о Facebook, про то как пользоваться сетью и о некоторых «фишках» ФБ — этот материал именно для вас!