Mods – Modifications ? Si vous aimez les jeux vidéo, vous savez qu'il n'y a rien de tel que de jouer à un jeu modifié. C'est votre jeu préféré, mais avec plus de puissance, de fonctionnalités et de plaisir. Imaginez maintenant apporter la même excitation à votre expérience de navigation sur le Web. C'est exactement ce que font les extensions de navigateur : elles sont comme des mods pour votre navigateur, le suralimentant d'une manière que vous n'auriez jamais cru possible.

Avec une extension Chrome, vous pouvez adapter parfaitement votre navigateur à vos besoins, qu'il s'agisse de bloquer des URL spécifiques, d'ajouter de nouvelles fonctionnalités ou même de lui donner un tout nouveau look. Et le meilleur ? Vous pouvez créer ces extensions vous-même. Dans ce guide, je vais vous expliquer étape par étape le processus de création de votre propre extension Chrome.

Démarrer avec les extensions Web est plus facile que vous ne le pensez ! Si vous connaissez JavaScript, c'est un jeu d'enfant : il suffit d'apprendre une nouvelle API. Après tout, il s’agit toujours de JavaScript à la base.

Cet article est un supplément pour : Le manuel des extensions Chrome : de mémoire lourde à prête pour la production

Table des matières

• Extensions Web 101
• Décomposer le manifeste :
• Créer un téléchargeur d'images simple
• La fonction de téléchargement :
• Nous sommes prêts à tester notre extension
• Chargement de l'extension
• Conclusion

Extensions Web 101

Les extensions Web sont comme des mods, mais pour les navigateurs. Vous pouvez entièrement personnaliser le comportement du navigateur (pensez à AdBlock) ou son apparence, comme les thèmes Mozilla.

Pour commencer, créez un nouveau dossier !

Tout ce dont vous avez besoin est un manifest.json. C'est la fonction principale mais pour les extensions Web. C'est le premier fichier recherché par le navigateur !

{
    "manifest_version": 3,
    "name": "img-downl",
    "version": "1.0",
    "description": "image ac?",
    "content_scripts": [
        {
            "matches": [""],
            "js": ["content.js"]
        }
    ],
    "permissions": [
        "activeTab"
    ]
}

Le manifeste contient toutes les métadonnées de votre extension. C'est ainsi que les navigateurs comprennent votre extension et ce qu'elle peut faire.

Décomposer le manifeste :

• "version_manifeste": 3, Cela indique au navigateur la version de l'API que vous utiliserez. La version 2 étant la précédente, la version 3 (V3) est la dernière API. Il est plus sécurisé et plus performant, et la plupart des navigateurs, y compris Chrome, sont passés à la version 3 uniquement.

Une différence clé est le passage des scripts d'arrière-plan persistants aux techniciens de service. Les scripts d'arrière-plan en V2 s'exécutaient pendant toute la durée de vie d'une extension (pendant que l'utilisateur navigue), d'où l'aspect « persistant ». En V3, ils ne fonctionnent que lorsque cela est nécessaire !

• Scripts de contenu : Les scripts de contenu sont injectés dans la page Web elle-même. Dans notre petite extension, content.js sera injecté dans toute URL correspondant à "matches": [""]. Ainsi, lorsque vous accédez à une URL ou ouvrez un nouvel onglet, content.js sera injecté dans la page et exécuté.

Les scripts de contenu, contrairement aux scripts d'arrière-plan, ont accès au DOM.

C'est l'anatomie de base d'un simple plugin. Au fur et à mesure que vous créez d’autres projets d’extension, vous en apprendrez davantage sur les autorisations et les fonctionnalités supplémentaires. Pour une introduction, cette simple ventilation suffit.

Construire un téléchargeur d'images simple

Prêt?

Cette extension est inspirée d'un cours de vision par ordinateur que j'ai suivi il y a quelque temps. Nous devions mettre en œuvre un outil permettant de télécharger des images à partir de la recherche Google.

Remarque : je ne suggère pas d'exécuter cette extension à tout moment, sauf si vous souhaitez télécharger des images à chaque fois que vous naviguez.

Dans le même dossier que votre manifest.json, créez content.js et collez ce qui suit :

async function processAllImages() {
    const images = document.querySelectorAll('img');
    let count = 0;
    for (const img of images) {
        const url = img.src;
        const filename = `image${count  }.png`; // Generate a filename for each image
        try {
            await downloadImage(url, filename);
            console.log(`Downloaded ${filename}`);
        } catch (error) {
            console.error(`Error downloading image from ${url}:`, error);
        }
    }
}
// Run the function to process and download images
processAllImages();

N'oubliez pas qu'un script de contenu est injecté dans une page Web. Par exemple, lorsque vous accédez à example.com, processAllImages s'exécutera.

Tout ce qu'il fait, c'est récupérer tous les éléments de l'image et les transmettre à une fonction de téléchargement :

const images = document.querySelectorAll('img');

La fonction de téléchargement :

async function downloadImage(url, filename) {
    return new Promise((resolve, reject) => {
        fetch(url)
            .then(response => {
                if (!response.ok) throw new Error('Network response was not ok.');
                return response.blob();
            })
            .then(blob => {
                const a = document.createElement('a');
                a.href = URL.createObjectURL(blob);
                a.download = filename;
                a.style.display = 'none';
                document.body.appendChild(a);
                a.click();
                URL.revokeObjectURL(a.href); // Clean up the object URL
                document.body.removeChild(a);
                resolve();
            })
            .catch(error => reject(error));
    });
}

Remarque : cela ne fonctionnera que pour les images statiques. Les images dynamiques et chargées paresseusement peuvent être corrompues : c'est quelque chose que vous pourrez gérer dans les itérations futures.

Nous sommes prêts à tester notre extension

J'utilise Brave, qui est basé sur Chrome, mais le processus est similaire sur tous les navigateurs.

Pour tester, vous devez activer le mode développeur dans le navigateur de votre choix.

Chargement de l'extension

Cette extension, inchangée, devrait également fonctionner dans Mozilla puisque nous ne nous appuyons pas sur l'espace de noms Chrome.

Courageux:

              Tapez brave://extensions/ dans la barre d'adresse.        

              Activer le mode développeur.      

              Chargez l'extension en sélectionnant le dossier.
             

   Chrome et Edge : suivez les mêmes étapes que Brave.

         (chrome://extensions/ ou edge://extensions/)

Conclusion

Mods : les modifications sont amusantes ! Cette extension est peut-être simple, mais elle montre les principes fondamentaux pour vous aider à démarrer. Le MDN de Mozilla dispose d'une ressource parfaite pour approfondir vos connaissances sur les extensions Web (à la fois les extensions Web générales et spécifiques au navigateur).

N'oubliez pas : désactivez l'extension ou désinstallez-la lorsque vous avez terminé pour éviter les téléchargements indésirables.

Ou mieux encore…

Un défi : trouvez un moyen de recevoir des entrées (indice : clic, icône et script d'arrière-plan) et exécutez la fonction d'images de processus uniquement lorsque l'utilisateur clique sur un bouton.