Extension Navigateur

Extension Navigateur

Branche : browser-extension Code : dossier extension/

Extension Chrome/Edge (Manifest V3) qui reprend la logique de l'app web : conversion d'images, de données, d'audio et de vidéo, 100% locale.

Fonctionnalités

• Popup (icône de la barre d'outils) : même interface que l'app web — quatre modes (Convertisseur / Compresseur / Inspecteur / Comparateur) via un onglet en haut, onglets par type (y compris Sous-titres, absents en Inspecteur/Comparateur qui déduisent la catégorie du fichier déposé), formats, glisser-déposer, progression, carte résultat, thème clair/sombre automatique, historique local des 5 derniers fichiers.
• Menu contextuel : clic droit sur une image dans une page → "Convertir cette image avec Anyform" → l'image s'ouvre dans un nouvel onglet avec le popup pré-rempli, il ne reste qu'à choisir le format de sortie.

Formats supportés

Mêmes formats que l'app web (voir Home) — images, données, audio, vidéo et sous-titres, via le moteur ffmpeg.wasm vendorisé localement dans extension/vendor/.

Le mode Compresseur suit les mêmes limites que sur le web : images PNG/JPG/WebP/HEIC (GIF/BMP exclus, Canvas ne sait pas les ré-encoder dans le navigateur), audio (bitrate réduit, sauf FLAC via -compression_level et WAV via la fréquence d'échantillonnage) et vidéos MP4/WebM/MOV/MKV/AVI/FLV/OGV, trois niveaux Léger/Moyen/Fort — voir App Web pour le détail technique (identique, juste porté dans extension/compress.js).

L'Inspecteur et le Comparateur suivent exactement la même logique que sur le web — voir App Web (Inspecteur) et App Web (Comparateur) — portés dans extension/inspect.js et extension/compare.js.

Pas de notification native (contrairement au web/à l'app de bureau) : le popup se ferme dès qu'on clique ailleurs, donc document.hidden ne devient jamais vrai pendant qu'une conversion audio/vidéo tourne encore — la condition qui déclenche la notification ne peut jamais se produire ici.

Installation développeur

Non encore publiée sur le Chrome Web Store. En attendant :

1. Ouvrir chrome://extensions (ou edge://extensions)
2. Activer le "Mode développeur"
3. "Charger l'extension non empaquetée" → sélectionner le dossier extension/ du dépôt (branche browser-extension)

Permissions

Permission	Usage
contextMenus	Entrée de menu clic droit sur une image
storage	Transmettre l'image sélectionnée du menu contextuel vers le popup
downloads	Proposer le téléchargement du fichier converti
host_permissions: <all_urls>	Récupérer (fetch) l'image cliquée depuis n'importe quel site

Détails techniques — CSP Manifest V3

Deux pièges rencontrés et corrigés pendant le développement, documentés ici pour éviter de les réintroduire :

1. Les Workers n'héritent pas de wasm-unsafe-eval. Le CSP par défaut de MV3 (script-src 'self' 'wasm-unsafe-eval') ne se propage pas automatiquement aux Web Workers créés depuis une page de l'extension — nécessaire pour que WebAssembly.instantiate() fonctionne dans le Worker de ffmpeg.wasm. Sans déclaration explicite, l'audio et la vidéo échouent silencieusement. Fix : manifest.json déclare content_security_policy.extension_pages avec wasm-unsafe-eval.

2. blob: est bloqué comme source de script sous MV3. ffmpeg-engine.js utilisait toBlobURL() (fonctionne très bien sur le web, où le CSP est libre) — bloqué dans l'extension. Fix : chrome.runtime.getURL() pour charger les fichiers vendorisés directement, sans passer par un blob.

Structure du code

• manifest.json — déclaration MV3, CSP explicite
• background.js — service worker (menu contextuel, récupération de l'image cliquée)
• popup.html / popup.js / popup.css — interface de conversion
• convert.js / data.js — conversion image/données (identique à l'app web)
• compress.js — compression d'images/audio/vidéos, même format en sortie (identique à l'app web)
• subtitles.js — conversion de sous-titres SRT/VTT/ASS (texte pur)
• history.js — historique local des 5 derniers fichiers (IndexedDB)
• inspect.js — lecture des propriétés d'un fichier, sans le modifier
• compare.js — diff entre deux fichiers (image, texte ligne à ligne, ou empreinte)
• ffmpeg-engine.js / audio.js / video.js — conversion audio/vidéo
• vendor/ — librairies vendorisées

Versioning

Le patch de manifest.json est incrémenté automatiquement à chaque push sur browser-extension (workflow bump-version.yml).