Extension Chrome en un clic : modifiez votre arrière-plan avec style (ou chaos)

Si vous avez toujours voulu pimenter votre navigateur d'un simple clic (car qui a le temps d'en faire plusieurs, n'est-ce pas ?), alors une extension Chrome en un clic est ce qu'il vous faut. vous avez besoin. Ces extensions sont conçues pour faire quelque chose utile (ou hilarant et inutile) d'un simple clic sur un bouton. Dans cet article, nous allons vous montrer comment créer votre propre extension One-Click en un clin d'œil. Préparez-vous à changer le monde… ou simplement la couleur d'arrière-plan d'une page Web. Nous ne sommes pas là pour juger.

Qu'est-ce qu'une extension Chrome en un clic ?

Considérez une extension Chrome en un clic comme le bouton magique de votre navigateur. Vous cliquez dessus et voilà ! quelque chose se passe. Qu’il s’agisse de changer la couleur d’arrière-plan, de vous donner une citation inspirante ou de déclencher une animation de chat dansant (nous ne vous arrêterons pas), le monde vous appartient. Pour ce didacticiel, nous commencerons par quelque chose de simple : transformer l’arrière-plan d’une page Web en une nuance apaisante de bleu clair en un seul clic. Facile? Vous pariez.

Étape 1 : Créez votre dossier d'extension (alias le dossier « Tout ira bien »)

Tout d'abord, vous devez créer un dossier pour stocker vos fichiers d'extension. Appelez cela une extension en un clic ou quelque chose de plus dramatique comme rendre le monde bleu. Dans ce dossier, vous aurez besoin de quelques fichiers essentiels :

• manifest.json (le cerveau de votre extension)
• background.js (c'est l'assistant derrière le rideau)
• popup.html (ce que l'utilisateur voit lorsqu'il clique sur l'icône d'extension)
• popup.js (le script magique qui fait les choses)

Structure des dossiers :

one-click-extension/
│
├── manifest.json
├── background.js
├── popup.html
└── popup.js

Étape 2 : Créer le fichier manifeste (AKA le cerveau de l'extension)

Votre manifest.json est le cerveau de votre extension. Il indique à Chrome ce que fait votre extension et comment la faire fonctionner. Sans cela, votre extension est comme une voiture sans moteur : agréable à regarder mais complètement inutile.

Voici un exemple de manifeste qui indiquera à Chrome de charger notre extension :

{
  "manifest_version": 3,
  "name": "One Click Background Changer",
  "version": "1.0",
  "description": "A super cool extension that changes your background color to light blue with one click.",
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icons/16x16.png",
      "48": "icons/48x48.png",
      "128": "icons/128x128.png"
    }
  },
  "permissions": ["activeTab"],
  "background": {
    "service_worker": "background.js"
  },
  "icons": {
    "16": "icons/16x16.png",
    "48": "icons/48x48.png",
    "128": "icons/128x128.png"
  }
}

Étape 3 : Créez l'interface utilisateur contextuelle (alias le bouton « Hé, cliquez sur moi ! »)

La fenêtre contextuelle est ce que les utilisateurs voient lorsqu'ils cliquent sur l'icône de votre extension. Dans notre cas, nous voulons un bouton qui, lorsqu'on clique dessus, change la couleur d'arrière-plan de la page. Assez simple, non ? C'est comme une baguette magique, mais sans risque d'être maudit.

Voici le popup.html :

one-click-extension/
│
├── manifest.json
├── background.js
├── popup.html
└── popup.js

Étape 5 : Script d'arrière-plan (alias le fichier « Ne me touchez pas, je travaille »)

Votre fichier background.js s'exécute en arrière-plan. C'est le travailleur silencieux qui fait tout le gros du travail, comme s'assurer que votre extension fonctionne lorsque vous ne regardez pas. Dans ce cas, nous n’avons pas besoin de grand-chose, mais vous pouvez ajouter des fonctionnalités plus complexes ici si vous en avez envie.

Pour l'instant, ajoutez simplement cette configuration de base :

{
  "manifest_version": 3,
  "name": "One Click Background Changer",
  "version": "1.0",
  "description": "A super cool extension that changes your background color to light blue with one click.",
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icons/16x16.png",
      "48": "icons/48x48.png",
      "128": "icons/128x128.png"
    }
  },
  "permissions": ["activeTab"],
  "background": {
    "service_worker": "background.js"
  },
  "icons": {
    "16": "icons/16x16.png",
    "48": "icons/48x48.png",
    "128": "icons/128x128.png"
  }
}

Étape 6 : ajouter des icônes (facultatif, mais fortement recommandé)

Les icônes sont comme la garde-robe de votre extension : elles lui donnent une belle apparence dans la barre d'outils. Vous pouvez ajouter des icônes de différentes tailles (par exemple, 16x16.png, 48x48.png, 128x128.png). Ceux-ci seront utilisés par Chrome chaque fois qu'il aura besoin d'afficher votre extension.

Créez simplement un dossier d'icônes et ajoutez les icônes que vous souhaitez utiliser.

Étape 7 : chargez votre extension dans Chrome (AKA le « moment de vérité »)

Il est temps de tester votre chef-d’œuvre. Voici comment charger votre extension dans Chrome :

1. Ouvrez Chrome et accédez à chrome://extensions/.
2. Activez le « Mode développeur » (c'est comme activer les codes de triche à vie).
3. Cliquez sur "Charger décompressé" et sélectionnez le dossier d'extension en un clic.
4. L'icône de votre extension devrait maintenant apparaître dans la barre d'outils. Regardez-le. Admirez-le. Cliquez dessus.

Étape 8 : Testez-le (AKA le moment « Ouais, ça marche ! »)

Cliquez sur l'icône de votre extension. Une fenêtre contextuelle devrait apparaître avec un bouton indiquant « Modifier l'arrière-plan ». Lorsque vous cliquez dessus, la couleur d'arrière-plan de la page Web actuelle doit devenir bleu clair, comme un océan calme par une journée parfaite.

Conclusion (AKA la section « Vous l'avez fait »)

Félicitations ! Vous avez créé votre propre extension Chrome en un clic. Cet outil simple peut être étendu à tout ce que vous voulez, qu'il s'agisse de changer la couleur de la page, d'ajouter des citations de motivation ou de faire jouer la page du smooth jazz. Les possibilités sont infinies.

Maintenant que vous avez cela à votre actif, vous êtes prêt à rendre Internet un peu plus amusant. Allez-y et créez quelque chose d’incroyable, ou à tout le moins, quelque chose qui fera croire à vos amis que vous êtes une sorte de sorcier. ✨

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!