Criar uma extensão simples da Web

No recente evento “all hands” da Mozilla no Havaí, eu me propus a criar minha primeira extensão da Web; eu queria que a extensão fosse útil, mas simples, algo com um caso de uso real. No final, criei uma extensão da Web muito simples que monitora continuamente o document.title para substituir palavras obscenas por asteriscos, uma medida de segurança para evitar constrangimento ao compartilhar sua tela ou ter pessoas olhando por cima do seu ombro. Deixe-me mostrar ao senhor como é simples criar uma extensão básica da Web!

Estrutura da extensão

A extensão deve estar contida em um único diretório – é assim que recomendo que a extensão simples seja estruturada:

+ foulmouth-filter // (name of your plugin here)
    + icons
        - 48.png
    - filter.js
    - manifest.json

Todos os nomes de arquivos e subdiretórios podem ser nomeados como o senhor quiser, com exceção de manifest.json; esse é um nome de arquivo padrão que deve estar na raiz da extensão. Quanto mais complexa for a extensão, mais arquivos e estrutura provavelmente serão necessários.

manifest.json

O manifest.json contém todas as propriedades da extensão, inclusive imagens, título, descrição, permissões solicitadas, quais scripts devem ser executados em quais nomes de host e muito mais. A seguir, o manifesto muito simples que usei para minha extensão:

{
  "manifest_version": 2,
  "name": "Foulmouth Filter",
  "version": "0.1",
  "icons": {
    "48": "icons/48.png"
  },
  "description": "Filters out filthy words from document titles",
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["filter.js"]
    }
  ]
}

O content_scripts é importante, pois lista os arquivos JavaScript a serem incluídos em quais nomes de host. Para essa simples extensão da Web, quero que ela seja carregada em todos os nomes de host, e a parte principal da extensão ficará em filter.js.

filter.js

O filter.js contém toda a lógica da extensão da Web. O código a seguir pesquisa o arquivo document.title em busca de palavras ruins e as substitui por asteriscos:

// Google's bad word filter:
// https://gist.githubusercontent.com/jamiew/1112488/raw/7ca9b1669e1c24b27c66174762cb04e14cf05aa7/google_twunter_lol
let badWords = "w3schools|david|walsh|jquery.....".split('|') // loool

// Runs cleanup on the document title
let cleanup = word => {
    document.title = document.title.split(' ').map(word => {
        return badWords.indexOf(word.toLowerCase()) != -1 ? '*'.repeat(word.length) : word
    }).join(' ')
}

// Set up a mutation observer to listen for title changes
// Will fire if framework AJAX stuff switches page title
let createObserver = function() {
    let observer = new MutationObserver((mutations) => {
        // Disconnect the MO so there isn't an infinite title update loop
        // Run title cleanup again
        // Create a new MO to listen for more changes
        console.log('Mutations!', mutations)
        observer.disconnect()
        observer = null
        cleanup()
        createObserver()
    })

    observer.observe(
        document.querySelector('title'),
        { subtree: true, characterData: true, childList: true }
    )
}
createObserver()

// Kick off initial page load check
cleanup()

Observação: Os senhores perceberão que tentei usar o API MutationObserver para ouvir com eficiência as alterações no document.title mas o uso de um MutationObserver fez com que o navegador travasse, portanto, precisarei pesquisar mais sobre como evitar isso — setInterval é, infelizmente, o caminho de menor resistência. Estou confiante de que meu uso do MutationObserver é o problema, e não um problema do navegador.

Instalando a extensão da Web para teste

Para instalar e testar a extensão da Web no Chrome:

1. Abrir Chrome > Preferences
2. Clique no botão Extensions aba
3. Clique em Load Unpacked Extension , navegue até seu diretório de extensão e clique em Select

Para instalar e testar a extensão da Web no Firefox:

1. Navegue até about:debugging
2. Selecione o Add-ons guia
3. Clique em Load Temporary Add-on, navegue até seu diretório de extensão e selecione qualquer arquivo dentro do diretório de extensão

A extensão será carregada em cada navegador e em cada nova guia do document.title de cada nova guia será verificada quanto a palavrões. Cada navegador tem regras diferentes para o tempo em que a extensão descompactada ficará ativa, portanto, se o senhor encerrar uma sessão, talvez seja necessário ativar a extensão local novamente. O senhor pode saber mais sobre como publicar sua extensão da Web aqui.

Ideias para aprimoramento

Aqui estão algumas adições que tornariam essa extensão ainda mais incrível:

• Capacidade de adicionar palavras personalizadas, não apenas palavras ruins do Google (para usuários, não para o desenvolvedor que está criando a extensão)
• Capacidade de ativar e desativar a extensão rapidamente, de modo que o senhor só filtre palavras quando estiver no horário de trabalho, por exemplo
• Publique-a nos diretórios de complementos do Chrome e do Firefox!

Recursos

O melhor recurso para aprender tudo o que há para saber sobre extensões da Web é a MDN. A extensão da Web que criamos aqui é muito simples e não toca em nenhuma permissão ou APIs de extensão interna avançada, portanto, certifique-se de ler esta página para obter uma visão geral completa, do início ao fim, para criar extensões da Web completas e avançadas.

Aí está: as extensões da Web não são tão complicadas ou intimidadoras como costumavam ser. Essa extensão levou cerca de 30 minutos para ser criada, portanto, se o senhor tiver alguns minutos livres, experimente a criação de extensões da Web. O senhor ficará surpreso com o fato de os complementos para vários navegadores terem se tornado tão fáceis de criar!