web extension starter

Web-Extension-Starter

Стартер расширения веб -расширения для создания «Напишите один раз запустить в любом браузере»

? ‍♂️ @abhijithvijayan

Пожертвовать: Paypal , Patreon

---

❤ это? ️ это на GitHub или твит об этом.

? ‍♂️ React + TypeScript = эта ветвь

? React + javascript = проверка React-Javascript

?? HTML + JavaScript = Checkout Master Branch

Функции

• Поддержка браузера Cross (Web-Extensions API)
• Образование в браузере, адаптируемое манифестное поколение
• Автоматическая сборка на изменения кода
• Автопакетки для браузера специальные файлы сборки сборки
• Стиль нахлы
• TypeScript по умолчанию
• ES6 модули поддерживают
• React UI Library по умолчанию
• Умная перезагрузка

Поддержка браузера

49 и позже ✔	52 и позже ✔	36 и позже ✔	79 и позже ✔	Последний ✔	Последний ✔	Последний ✔

Используется расширениями в производстве, в котором более 100 000 пользователей.

• Daily.Dev в Daily.Dev Extension
• Jiffy reader в ansh/jiffyreader.com
• Кутт-избыток в Abhijithvijayan/Kutt-Extension
• DOUBANIMDB в LISONGX/DOUBANIMDB
• Помощник MOOC в Unbyte/MOOC-Assistant
• Artipub в Crawlab-Team/Artipub

И еще много ...

Используйте этот шаблон

Создайте новый каталог и запустите

 curl -fsSL https://github.com/abhijithvijayan/web-extension-starter/archive/react-typescript.tar.gz | tar -xz --strip-components=1

Быстрый старт

Убедитесь, что у вас есть

• Node.js 10 или позже установлен

Затем запустите следующее:

• npm install для установки зависимостей.
• npm run dev:chrome для запуска сервера разработки для расширения Chrome
• npm run dev:firefox для запуска сервера разработки для Addon Firefox
• npm run dev:opera для запуска сервера разработки для расширения Opera
• npm run build:chrome для построения хрома расширения
• npm run build:firefox для строительства Addon Firefox
• npm run build:opera для построения Opera расширение
• npm run build Builds and Packs расширения одновременно для расширения/ каталога

Разработка

• npm install для установки зависимостей.

• Чтобы посмотреть изменения файла в разработке

  • Хром
    • npm run dev:chrome
  • Firefox
    • npm run dev:firefox
  • Опера
    • npm run dev:opera

• Расширение нагрузки в браузере

• Хром

  • Перейдите в адресную панель браузера и тип chrome://extensions
  • Проверьте кнопку Developer Mode , чтобы включить его.
  • Нажмите на кнопку Load Unpacked Extension… кнопку.
  • Выберите папку браузеров в extension/ .

• Firefox

  • Загрузите надстройку через about:debugging как временное дополнение.
  • Выберите файл manifest.json в извлеченном каталоге

• Опера

  • Загрузите расширение через opera:extensions
  • Проверьте Developer Mode и загрузите как распаковку из извлеченного каталога расширения.

Производство

• npm run build строит расширение для всех браузеров для extension/BROWSER соответственно.

Примечание. По умолчанию manifest.json установлен с версией 0.0.0 . WebPack Loader будет обновлять версию в сборке с версией package.json . Чтобы выпустить новую версию, обновите версию в package.json и запустите скрипт.

Если вы не хотите использовать версию package.json , вы можете отключить опцию здесь.

Генерирование конкретного браузера Manifest.json

Обновление source/manifest.json файл с префиксом поставщика браузера

 {
  "__chrome__name" : "SuperChrome" ,
  "__firefox__name" : "SuperFox" ,
  "__edge__name" : "SuperEdge" ,
  "__opera__name" : "SuperOpera"
}

Если поставщик chrome это, компилируется:

 {
  "name" : "SuperChrome" ,
}

---

Добавьте ключи к нескольким поставщикам, разделяя их с помощью | в префиксе

 {
  __chrome|opera__name: "SuperBlink"
}

Если поставщик - chrome или opera , это собирает:

 {
  "name": "SuperBlink"
}

Для получения более подробной информации см. Оригинал Readme пакета wext-manifest-loader

Ошибки

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

Конфигурация вкладки и типографии

• Общая конфигурация Eslint & Creatier - @abhijithvijayan/eslint-config
• Конфигурация общей типовойписа - @abhijithvijayan/tsconfig

Лицензия

MIT © Абхиджит Виджаян