web extension starter

Web-Extension-Starter

Extensão da Web Starter para construir a extensão "Write uma vez executada em qualquer navegador"

? ‍♂️ feito por @abhijithvijayan

Doar: Paypal , Patreon

---

❤️ IT? ️ no github ou tweet sobre isso.

? ‍♂️ React + TypeScript = esta ramificação

? React + javascript = checkout react-javascript ramo

? Html + javascript = checkout mestre ramo

Características

• Suporte ao navegador cruzado (API da Web-Extensions)
• Geração manifesta sob medida do navegador
• Construção automática em alterações de código
• Pacotes automáticos navegadores específicos de arquivos de construção
• Estilo Sass
• TypeScript por padrão
• Suporte de módulos ES6
• Reactar a biblioteca da interface do usuário por padrão
• Recarregar inteligente

Suporte do navegador

49 e mais tarde ✔	52 e mais tarde ✔	36 e mais tarde ✔	79 e mais tarde ✔	✔ ✔ ✔	✔ ✔ ✔	✔ ✔ ✔

Usado por extensões na produção que possui mais de 100.000 usuários.

• Daily.Dev no Daily.Dev Extension
• Jiffy Reader em Ansh/Jiffyreader.com
• Kutt-Extension in Abhijithvijayan/Kutt-Extension
• Doubanimdb em Lisongx/Doubanimdb
• Assistente MOOC em Unbyte/MOOC-Assistente
• Artipub em Crawlab-Team/Artipub

E muito mais ...

Use este modelo

Crie um novo diretório e execute

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

Início rápido

Certifique -se de que você tem

• Node.js 10 ou posterior instalado

Em seguida, execute o seguinte:

• npm install para instalar dependências.
• npm run dev:chrome para iniciar o servidor de desenvolvimento para extensão Chrome
• npm run dev:firefox para iniciar o servidor de desenvolvimento para o Firefox Addon
• npm run dev:opera para iniciar o servidor de desenvolvimento para extensão de ópera
• npm run build:chrome para construir a extensão do Chrome
• npm run build:firefox para construir o Firefox Addon
• npm run build:opera para criar extensão de ópera
• npm run build Builds and Packs Extensions de uma só vez para extensão/ diretório

Desenvolvimento

• npm install para instalar dependências.

• Para assistir a alterações de arquivo no desenvolvimento

  • Cromo
    • npm run dev:chrome
  • Firefox
    • npm run dev:firefox
  • Ópera
    • npm run dev:opera

• Extensão de carga no navegador

• Cromo

  • Vá para a barra de endereço do navegador e digite chrome://extensions
  • Verifique o botão Developer Mode para ativá -lo.
  • Clique no botão Load Unpacked Extension… .
  • Selecione a pasta seus navegadores na extension/ .

• Firefox

  • Carregue o complemento via about:debugging como complemento temporário.
  • Escolha o arquivo manifest.json no diretório extraído

• Ópera

  • Carregue a extensão via opera:extensions
  • Verifique o Developer Mode e carregue como descompactado no diretório extraído da extensão.

Produção

• npm run build constrói a extensão para todos os navegadores para o diretório de extension/BROWSER respectivamente.

Nota: Por padrão, o manifest.json está definido com a versão 0.0.0 . O WebPack Loader atualizará a versão na versão com a versão package.json . Para lançar uma nova versão, atualize a versão no package.json e execute script.

Se você não quiser usar a versão package.json , poderá desativar a opção aqui.

Gerando navegador específico manifest.json

Atualizar o arquivo source/manifest.json com o fornecedor do navegador prefixado teclas de manifesto

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

Se o fornecedor é chrome isso compila para:

 {
  "name" : "SuperChrome" ,
}

---

Adicione chaves a vários fornecedores, separando -os com | No prefixo

 {
  __chrome|opera__name: "SuperBlink"
}

Se o fornecedor for chrome ou opera , isso compila para:

 {
  "name": "SuperBlink"
}

Veja o pacote ReadMe original do wext-manifest-loader para mais detalhes

Bugs

Por favor, arquive um problema aqui para bugs, documentação ausente ou comportamento inesperado.

Config de linha e datilografscript

• Configuração de Eslint e Prettier compartilhada - @abhijithvijayan/eslint-config
• Configuração do TypeScript compartilhado - @abhijithvijayan/tsconfig

Licença

MIT © Abhijith Vijayan