DEV Community

Cover image for Criando uma extensão para o Chrome
Emerson Vieira
Emerson Vieira

Posted on

1

Criando uma extensão para o Chrome

Hoje vou mostrar como criar um simples extensão para o chrome. Uma extensão bem boba, que muda(levando para um lado mais cômico) o nome de uma série por outra :p

Estrutura de pastas do projeto

Alt Text

Arquivos

content.js

document.body.innerHTML = document.body.innerHTML.replace(new RegExp("(how i met your mother|How I Met Your Mother|HIMYM|himym)", "g"), "Friends is Better");
Enter fullscreen mode Exit fullscreen mode

Em content.js é feito uma regex que basicamente vai substituir as palavras passadas por: Friends is Better
Ou seja, no navegador, ao aparecer uma das palavras passadas, automaticamente será substituída por Friends is Better :)

manifest.json

{
    "manifest_version": 2,
    "version": "0.0.1",
    "content_scripts": [{
        "matches": [
            "*://*/*"
        ],
        "js": [
            "content.js"
        ],
        "run_at": "document_end"
    }],
    "name": "Friends is Better",
    "description": "Extensão que muda o nome daquela cópia barata de friends",
    "author": "Emerson Vieira",
    "browser_action": {
        "default_title": "Friends is Better",
        "default_icon": "icon.png"
    }
}
Enter fullscreen mode Exit fullscreen mode

Carregando a extensão no Chrome

Na barra de navegador, coloque: chrome://extensions/
Na tela que abrir, clique em: Carregar sem compactação
Na pasta do projeto, selecione a pasta: extension
E pronto, sua extensão será carrega e já estará pronta para uso

Alt Text

Alt Text

Até a próxima :)

link do projeto: https://github.com/mensonones/friendsbetter

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more