🎉 J’ai créé ma première extension Google Chrome en moins de 10 minutes (et sans connaissances) ! 🚀

Si tu as déjà copié/collé un bout de code dans la console de ton navigateur à chaque fois que tu en avais besoin… eh bien, moi aussi 😅 !
J’avais un besoin très spécifique : un script d’export en CSV de tableaux sur Pinterest (avec le nom, l’image et l’URL), je collais ce script dans la console de chacun de mes sous-tableau Pinterest, et autant dire que c’était loin d’être optimal…

Mais aujourd’hui, c’est du passé ! 🎊 J’ai transformé ce simple bout de code en extension Chrome 🛠️ et devine quoi ? Ça m’a pris moins de 10 minutes ! 😍

✨ Pourquoi créer une extension ?

• Plus besoin d’ouvrir la console (ouf 😮‍💨)
• Un clic et hop ! Le script s’exécute 🚀
• Ça me fait sentir comme une vraie dev’ (même si je ne suis pas une experte 😜)

📌 Comment j’ai fait ?

1️⃣ J’ai mis mon script dans un fichier background.js (pour les petit curieux voici le script même si ce n’est pas important ici)

chrome.action.onClicked.addListener((tab) => {
  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    function: exportPinterestPins
  });
});

function exportPinterestPins() {
  let pins = document.querySelectorAll('div[role="listitem"] a[href*="/pin/"]');
  let csvContent = "data:text/csv;charset=utf-8,Nom,URL,Image\n";

  pins.forEach(pin => {
    let title = pin.innerText.trim().replace(/,/g, " ") || "Sans titre";
    let url = pin.href;
    let imgElement = pin.closest('div[role="listitem"]').querySelector('img');
    let imgUrl = imgElement ? imgElement.src : "Pas d'image";

    csvContent += `"${title}","${url}","${imgUrl}"\n`;
  });

  let encodedUri = encodeURI(csvContent);
  let link = document.createElement("a");
  link.setAttribute("href", encodedUri);
  link.setAttribute("download", "pinterest_recipes.csv");
  document.body.appendChild(link);
  link.click();
}

2️⃣ J’ai ajouté un fichier manifest.json pour dire à Chrome quoi faire

{
  "manifest_version": 3,
  "name": "Pinterest Scraper",
  "version": "1.0",
  "description": "Exporte les pins Pinterest en CSV",
  "icons": {
    "48": "icon.png"
  },
  "permissions": ["activeTab", "scripting"],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_title": "Exporter les pins"
  }
}

3️⃣ J’ai chargé mon extension via chrome://extensions/ en mode développeur

NB: il faut aussi une image PNG nommé « icon.png » de préférence en 48×48 pixel

Et BOOM 💥 ! J’ai un bouton magique qui récupère automatiquement mes pins Pinterest et les exporte en CSV 📂 !

Si toi aussi tu galères avec des scripts dans la console, fais-toi une extension ! C’est plus simple que ça en a l’air, et tu vas adorer le résultat 😁

Alors, prêt(e) à créer la tienne ? 🤩