1
bangelischan
3 min de leitura ·

Pitch: Como fiz uma extensão pro Chrome que detecta e esconde os "bundle deals" do AliExpress sem quebrar a página

Quem compra no AliExpress conhece os "bundle deals": o popup de "compre mais, economize mais" no meio da página do produto, e as páginas de combo que aparecem no lugar da descrição real quando você clica num resultado de busca.

Resolvi automatizar isso numa extensão pro Chrome, o Bundle Buster. Neste post quero mostrar as decisões técnicas, principalmente o problema de esconder um elemento num site que muda de estrutura o tempo todo, sem esconder a coisa errada.

Bundle Buster escondendo o popup de bundle deal

Estrutura da extensão

É uma extensão Manifest V3 bem enxuta:

  • manifest.json: configuração
  • bundle-blocker.js: detecção e remoção dos bundles
  • affiliate-redirect.js: redirecionamento de afiliado (é assim que a extensão se mantém; dá pra desligar no popup)
  • popup.html / popup.js: liga/desliga de cada função e configurações avançadas

A única permissão pedida é storage, pra salvar as configurações. Os content scripts só rodam em aliexpress.com, aliexpress.us e subdomínios (como o pt.aliexpress.com), sem host_permissions extras.

Por que dois content scripts com run_at diferentes?

{ "js": ["affiliate-redirect.js"], "run_at": "document_start" },
{ "js": ["bundle-blocker.js"],     "run_at": "document_idle" }
  • O redirecionamento precisa acontecer antes de a página renderizar, senão o usuário vê a página carregar e depois "pular". Por isso document_start.
  • Já o bloqueador precisa do DOM pronto pra analisar os elementos, então document_idle faz mais sentido.

O problema principal: detectar o popup sem seletor fixo

A primeira ideia óbvia seria pegar a classe CSS do popup e esconder com display: none. O problema: o AliExpress muda classes e estrutura com frequência, e as classes costumam ser geradas/ofuscadas. Um seletor fixo quebraria em poucas semanas.

O caminho que escolhi foi uma heurística conservadora. Um elemento só é escondido se cumprir as duas condições ao mesmo tempo:

  1. Estrutura: ser um overlay/diálogo pequeno, ou seja, posicionado e não do tamanho da página inteira;
  2. Conteúdo: o texto do elemento mencionar bundle deal.

A segunda condição sozinha seria perigosa: o texto "bundle" pode aparecer num container gigante que engloba metade da página. A primeira sozinha esconderia qualquer modal (login, cookies, cupom). Juntas, elas reduzem bastante os falsos positivos.

A filosofia foi: prefiro deixar passar um popup do que sumir com uma parte importante da página. Numa extensão que mexe no DOM de um site de compras, errar pra mais é muito pior do que errar pra menos.

Plano B: seletores definidos pelo usuário

Como nenhuma heurística é perfeita, o popup da extensão tem um campo "Advanced: extra CSS selectors to hide". Se algum popup escapar, o usuário inspeciona o elemento, cola a classe/id ali e salva. A regra é aplicada na hora, sem recarregar a página, porque a configuração fica no chrome.storage e o content script reage à mudança.

Segundo problema: as páginas "BundleDeals2"

Além do popup, existe outro caso: links como

que abrem uma página de combo em vez do produto. A solução aqui é mais simples, porque a URL já carrega a informação necessária:

  1. Detectar o padrão BundleDeals2 na URL;
  2. Extrair o productIds;
  3. Redirecionar pra /item/<id>.html, a página real do produto.

E pra evitar até esse redirecionamento, nas páginas de busca e listagem a extensão reescreve os links que apontam pra BundleDeals2, então o clique já vai direto pro produto.

O que aprendi

  • Não confie em classes CSS de sites grandes. Heurísticas baseadas em estrutura + conteúdo duram muito mais.
  • Em extensões que alteram o DOM, seja conservador. Um falso positivo (esconder algo útil) gera desinstalação; um falso negativo só incomoda um pouco.
  • Dê uma saída manual pro usuário. O campo de seletores extras resolve os casos que a heurística não pega, sem eu precisar lançar uma atualização.
  • Escolha o run_at certo pra cada tarefa. Isso faz diferença real na percepção de "flicker".

Link e feedback

🔗 https://chromewebstore.google.com/detail/bundle-buster-skip-aliexp/eibjfjbonpngbmgnlcnpnanlgcnfgomb

Queria ouvir vocês, principalmente sobre a parte técnica:

  • Como vocês abordariam a detecção de elementos num site com classes ofuscadas?
  • Achou algum popup de bundle que ela não pega? Me manda o link do produto.

Valeu! 🙌

Carregando publicação patrocinada...