FocoTotal-Extention é uma extensão para o Google Chrome que melhora a sua experiência ao assistir vídeos, adicionando um "modo cinema" que escurece o restante da página e um modo de tela cheia customizado para focar totalmente no conteúdo do vídeo.
A maneira mais fácil de usar a extensão é baixando a versão mais recente diretamente da nossa página de Releases.
- Acesse a página de Releases do FocoTotal-Extention.
- Encontre a versão mais recente (geralmente no topo, marcada como "Latest").
- Em Assets, clique no arquivo
.zip(ex:FocoTotal-Extention-vX.X.X.zip) para baixar. - Descompacte o arquivo
.zipem uma pasta permanente no seu computador. - Abra o Google Chrome e navegue até
chrome://extensions. - Ative o "Modo do desenvolvedor" no canto superior direito da página.
- Clique no botão "Carregar sem compactação".
- Selecione a pasta que você descompactou no passo 4.
- Pronto! A extensão FocoTotal estará instalada e pronta para uso.
| Tecnologia | Descrição |
|---|---|
| Manifest V3 | A especificação mais recente para extensões do Chrome, garantindo segurança e performance. |
| React & TypeScript | Utilizados para construir a interface do usuário (UI) e a lógica dos componentes de forma robusta e tipada. |
| Vite | Ferramenta de build moderna que oferece um ambiente de desenvolvimento extremamente rápido com HMR. |
| Tailwind CSS | Framework CSS utility-first para uma estilização rápida e consistente. |
| Shadcn/UI | Coleção de componentes de UI reutilizáveis para agilizar o desenvolvimento da interface. |
- Injeção de Conteúdo (Content Scripts): O núcleo da funcionalidade reside em
content.jsecontent.css. Esses arquivos são injetados diretamente nas páginas web para identificar players de vídeo, adicionar o botão "Tela Cheia" e aplicar os estilos necessários. - Manipulação de DOM com React Portals: O componente
ModalVideo.tsxutilizacreatePortalpara renderizar a UI do modal diretamente no<body>da página, evitando conflitos dez-indexe estilo. A lógica principal move o container do vídeo do seu local original para dentro do modal e o devolve quando fechado, criando um "modo cinema" sem recarregar o player. - Placeholder Dinâmico: Para evitar que a página "pule" quando o vídeo é movido para o modal, um
divcom as dimensões exatas do vídeo é deixado em seu lugar, garantindo uma transição suave.
Siga os passos abaixo para configurar o ambiente de desenvolvimento.
- Node.js (versão 20 ou superior).
- NPM ou Yarn (ou outro gerenciador de pacotes).
Clone o repositório e instale as dependências do projeto:
git clone https://github.com/Jeffersoncharlles/FocoTotal-Extention.git
cd FocoTotal-Extention
npm installPara compilar o projeto em modo de desenvolvimento e observar as alterações em tempo real, execute:
# Este comando irá gerar a pasta /dist e mantê-la atualizada
npm run devPara gerar a versão final e otimizada da extensão na pasta /dist, execute:
npm run build- Após executar
npm run build(ounpm run dev), a pasta/distserá criada. - Abra o Google Chrome e navegue para
chrome://extensions. - Ative o "Modo do desenvolvedor" no canto superior direito.
- Clique em "Carregar sem compactação".
- Selecione a pasta
distgerada no seu projeto. - A extensão FocoTotal aparecerá na sua lista e estará pronta para uso.
Este é um projeto de código aberto e sua contribuição é muito bem-vinda! Se você tem uma ideia para uma nova funcionalidade, encontrou um bug ou quer dar suporte a um novo site, sinta-se à vontade para:
- Abrir uma Issue para discutir sua ideia ou relatar um problema.
- Enviar um Pull Request com suas melhorias.
- Jefferson Charlles
: FocoTotal-Extention