Créer une extension Chrome qui fait des appels API : C’est plus simple que tu ne le penses !

Salut les dev’ en herbe ! Alors comme ça, tu veux créer une extension Chrome qui fait des appels API ? Pas de panique, je vais te montrer que c’est plus facile que de faire cuire des pâtes (bon, peut-être pas, mais presque).

La structure de base : ton nouveau meilleur ami

Avant tout, il faut que tu comprennes la structure de base d’une extension Chrome. C’est un peu comme construire une maison : tu as besoin d’un plan avant de commencer à poser des briques.

Voici à quoi ça ressemble :

extension-chrome/
│
├── manifest.json
├── background.js
├── popup/
│   ├── popup.html
│   ├── popup.js
│   └── popup.css
├── content-script.js
└── icons/
    ├── icon16.png
    ├── icon48.png
    └── icon128.png

Ne t’inquiète pas, je vais t’expliquer tout ça comme si tu avais 5 ans (ou comme si tu étais moi après 3 cafés) :

1. manifest.json : C’est la carte d’identité de ton extension. Sans lui, Chrome ne saura pas quoi faire de ton code.
2. background.js : Pense à lui comme à un ninja. Il travaille dans l’ombre, même quand tu ne regardes pas.
3. Le dossier popup/ : C’est la partie visible de l’iceberg. Tout ce qui concerne l’interface utilisateur se passe ici.
4. content-script.js : C’est ton espion personnel. Il peut s’infiltrer dans les pages web et faire son petit business.
5. Le dossier icons/ : Parce que même les extensions ont besoin d’un joli visage !

Le manifest.json : la star du show

Maintenant, parlons un peu plus de ce fameux manifest.json. C’est lui qui va dire à Chrome : « Hey, regarde ce que mon extension peut faire ! »

Voici à quoi il pourrait ressembler :

{
  "manifest_version": 3,
  "name": "Mon Extension API de Ouf",
  "version": "1.0",
  "description": "Une extension qui fait des appels API comme une pro",
  "permissions": ["storage", "activeTab"],
  "host_permissions": ["<all_urls>"],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "popup/popup.html",
    "default_icon": {
      "16": "icons/icon16.png",
      "48": "icons/icon48.png",
      "128": "icons/icon128.png"
    }
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content-script.js"]
    }
  ],
  "icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  }
}

Ne t’inquiète pas si ça ressemble à du charabia pour toi. L’essentiel à retenir, c’est que ce fichier donne à ton extension les super-pouvoirs dont elle a besoin pour faire des appels API.

Faire des appels API : le moment que tu attendais !

Maintenant, passons aux choses sérieuses. Comment faire ces fameux appels API ? C’est là que background.js entre en scène. Voici un petit exemple qui devrait t’aider à démarrer :

// Dans background.js
chrome.runtime.onInstalled.addListener(() => {
  console.log('Extension installée, prête à conquérir le monde !');
});

// Ta fonction magique pour faire des appels API
async function faireAppelAPIDeOuf() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log('Tada ! Voici les données :', data);
    // Fais ce que tu veux avec tes données ici
  } catch (error) {
    console.error('Oups, quelque chose s\'est mal passé :', error);
  }
}

// Appelle ta fonction quand l'utilisateur clique sur l'icône de l'extension
chrome.action.onClicked.addListener((tab) => {
  faireAppelAPIDeOuf();
});

Et voilà ! Tu as maintenant les bases pour créer une extension Chrome qui fait des appels API. C’est comme faire du vélo : une fois que tu as compris le principe, tu ne l’oublies plus jamais (sauf peut-être après une soirée bien arrosée, mais ça c’est une autre histoire).

N’hésite pas si tu as des questions ! Je suis là pour t’aider à devenir le maître des extensions Chrome. Allez, à toi de jouer maintenant !