DEV Community

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

Posted on

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

Discussion (0)