PrintPruna (2026)

Extensió per a Chrome i Firefox que permet marcar blocs HTML de la pàgina actual per netejar-la abans d'imprimir-la a PDF. Sense servidor, sense dades que surtin del navegador: tot passa dins la mateixa pestanya.

Disponible a la Chrome Web Store.

Què fa?

En fer clic a la icona de l'extensió s'obre un petit menú amb cinc opcions:

• Selecciona: marca el bloc que vulguis conservar; la resta de la pàgina s'amaga. El bloc seleccionat es reajusta (~90% d'ample, centrat) perquè no perdi llegibilitat si depenia d'un layout flex/grid amb els germans ara amagats.
• Elimina: marca un bloc concret i el fa desaparèixer, mantenint la resta de la pàgina intacta. Es pot fer servir diverses vegades seguides per eliminar més d'un bloc.
• Redimensiona: arrossega qualsevol de les quatre vores d'un bloc per canviar-ne l'amplada o l'alçada. La vora esquerra/superior segueix visualment el cursor (en lloc de créixer sempre cap a l'altre costat), i el mode es manté actiu perquè es puguin ajustar diversos blocs seguits sense reobrir el menú.
• Elimina Publicitat: escaneja tota la pàgina en un sol pas i amaga automàticament els blocs que semblin anuncis o banners (per id/classe amb paraules com ad, ads, sponsor, banner-ad, o per iframes/scripts d'ad-networks conegudes com Google Ads, Taboola o Outbrain), sense necessitat de seleccionar-los manualment.
• Imprimeix: obre el diàleg d'impressió del navegador directament (window.print()), sense passar pel teclat. Útil en pàgines que bloquegen Ctrl+P/Cmd+P amb JavaScript, i abans d'obrir-lo desactiva els CSS de print propis de la pàgina perquè el resultat s'assembli al que s'ha estat editant a pantalla.

Cada mode té un cursor propi per identificar-lo d'un cop d'ull: creueta per "Selecciona", not-allowed per "Elimina", i fletxes de redimensionar per "Redimensiona" (que canvien a ↕/↔ en apropar-se a una vora concreta, i a una mà durant l'arrossegament). Els elements es ressalten en passar-hi el ratolí (blau per "Selecciona", vermell per "Elimina", taronja discontinu per la vora activa a "Redimensiona"). Fes clic (o arrossega, en el cas de "Redimensiona") sobre l'element desitjat per aplicar l'acció, o prem Esc en qualsevol moment per sortir del mode de marcatge —o cancel·lar un arrossegament en curs— sense fer cap canvi. Per tornar a l'estat original de la pàgina, n'hi ha prou amb recarregar-la (F5).

Redimensionar sense amagar contingut

Molts blocs de pàgines reals (carrusels, taules d'acords, widgets amb scroll horitzontal) tenen overflow:hidden o flex-wrap:nowrap pensats per a una mida fixa. Si només es canviés width/height, el contingut seguiria retallat encara que el bloc creixés. Per això, en començar a arrossegar una vora, PrintPruna també:

• Força overflow: visible a l'element, als seus descendents i als seus ancestres (fins a <body>) que estiguessin clipant contingut.
• Força flex-wrap: wrap als contenidors flex en una sola fila (típics de carrusels amb botó de "següent"), perquè els elements es reorganitzin dins l'espai nou en lloc de sobreposar-se a la resta de la pàgina.

Tot això es desfà si es cancel·la l'arrossegament amb Esc; si es completa, els canvis es mantenen igual que la resta de mutacions de l'extensió.

Ignorant els CSS de print de la pàgina

Moltes pàgines defineixen el seu propi full d'estils de print (o blocs @media print dins d'un full normal) que canvien com es veu el contingut en imprimir-lo, i sovint aquest disseny no coincideix amb el que s'ha estat editant a pantalla amb "Selecciona"/"Elimina"/"Redimensiona". Per evitar aquesta discrepància, en prémer "Imprimeix" (o Ctrl+P/Cmd+P) PrintPruna:

• Desactiva temporalment qualsevol full d'estils o <link>/<style> amb media="print".
• Neutralitza els blocs @media print { ... } dins de fulls d'estils que no siguin ells mateixos print-only.
• Restaura tot això automàticament quan es tanca el diàleg d'impressió (event afterprint), tant si s'ha imprès com si s'ha cancel·lat.

Aquest mateix mecanisme també amaga els contorns i cursors propis de PrintPruna (els ressaltats blau/vermell/taronja) si la impressió es dispara sense haver sortit encara del mode de marcatge, gràcies a un @media print propi de l'extensió que sempre queda exclòs d'aquesta neutralització.

Com que el filtre s'aplica de forma general, en algunes pàgines que facin servir el seu @media print per corregir problemes de renderitzat propis del motor d'impressió (per exemple, tècniques CSS com mask-image que Chromium no dibuixa bé en generar el PDF) el resultat imprès pot perdre alguna d'aquestes correccions puntuals. És un compromís assumit conscientment: es prioritza que la impressió sigui fidel al que s'ha editat a pantalla per sobre d'ajustos de compatibilitat específics de cada web.

Bypass del bloqueig de Ctrl+P

Algunes pàgines bloquegen la drecera d'impressió amb JavaScript per evitar que l'usuari imprimeixi o desi el contingut en PDF. Quan s'activa qualsevol opció del menú, PrintPruna instal·la un listener de keydown a nivell de window en fase de captura, que s'avança als listeners que la pàgina hagi enganxat a document. Com que la fase de captura recorre window → document → ..., el listener de l'extensió s'executa sempre primer i atura la propagació sense cridar preventDefault(), deixant que el navegador faci la seva acció per defecte.

És una mitigació "best effort": si la pàgina enganxa el seu listener directament a window abans que s'injecti l'extensió, aquest mètode no el pot superar. Per a aquests casos hi ha l'opció "Imprimeix" del menú, que crida window.print() des de l'"isolated world" de l'extensió i no es veu afectada encara que la pàgina hagi sobreescrit window.print.

Elimina Publicitat: escaneig heurístic

Aquest mode no és interactiu: en un sol clic recorre tot el DOM i amaga (display: none !important, igual que "Elimina") els elements que semblen anuncis, segons dos criteris:

• Nom de classe/id: paraules típiques de publicitat (ad, ads, sponsor, banner-ad, adsbygoogle...), tant delimitades per límits de paraula com per guions baixos (per detectar patrons com pub-cc-globalTop_ad, típics de slots generats dinàmicament).
• Origen de xarxa: iframe/script carregats des de dominis d'ad-networks conegudes (Google Ads, Taboola, Outbrain, Criteo, PubMatic...).

El repte va ser evitar falsos positius: moltes pàgines fan servir noms com ads-curtain-anchor o js-ads-main-container per al contenidor que embolcalla tot el contingut real de la pàgina (és només l'ancoratge visual d'un possible overlay publicitari, no l'anunci en si). Per això cada coincidència de nom es valida amb una salvaguarda de mida: només es considera anunci si té menys de 60 elements descendents i menys de 500 caràcters de text, ja que un bloc publicitari real és sempre petit i autònom.

Un cop amagat un anunci, PrintPruna també puja per la cadena de contenidors pare amagant-los mentre no quedi cap altre fill visible ni text propi, perquè desaparegui també l'espai buit (padding, min-height, gaps de flex/grid) que deixava el wrapper de l'anunci.

Arquitectura

Manifest V3 compartit entre Chrome i Firefox, amb només dos permisos (activeTab, scripting):

manifest.json     Manifest V3, compartit entre Chrome i Firefox
src/popup.html    Menú de la icona amb les opcions "Selecciona", "Elimina", "Redimensiona", "Elimina Publicitat" i "Imprimeix"
src/popup.js      Injecta el content script (si cal) i envia el mode triat
src/content.js    Lògica de hover, selecció/eliminació/redimensionament de blocs i escaneig heurístic de publicitat
src/content.css   Estils del ressaltat en hover, els cursors per mode i l'overlay d'arrossegament

Instal·lació en mode desenvolupador

Chrome / Edge / Brave: obre chrome://extensions, activa "Mode desenvolupador" i clica "Carrega l'extensió sense empaquetar", seleccionant la carpeta del projecte.

Firefox: obre about:debugging#/runtime/this-firefox i clica "Carrega el complement temporal", seleccionant el fitxer manifest.json. La càrrega és temporal i es perd en tancar el navegador; per una instal·lació permanent caldria signar l'extensió via addons.mozilla.org.

Stack tecnològic

• Manifest V3
• Chrome Extensions API (activeTab, scripting)
• JavaScript vanilla, sense dependències

Codi font: github.com/albertsarle/print-pruna