{"id":77029,"date":"2024-05-14T15:43:30","date_gmt":"2024-05-14T14:43:30","guid":{"rendered":"https:\/\/kinsta.com\/fr\/?p=77029&preview=true&preview_id=77029"},"modified":"2024-05-24T14:41:09","modified_gmt":"2024-05-24T13:41:09","slug":"construire-extension-chrome","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/construire-extension-chrome\/","title":{"rendered":"Comment cr\u00e9er une extension Chrome pour g\u00e9rer les plugins de votre site avec l’API Kinsta et React"},"content":{"rendered":"

En tant qu’utilisateur de Google Chrome<\/a>, vous avez probablement utilis\u00e9 des extensions dans ce navigateur. Vous \u00eates-vous d\u00e9j\u00e0 demand\u00e9 comment elles \u00e9taient con\u00e7ues ou si vous pouviez en cr\u00e9er une ?<\/p>\n

Cet article vous guide \u00e0 travers le processus de cr\u00e9ation d’une extension Chrome, en particulier une extension qui utilise React et l’API Kinsta pour g\u00e9rer les extensins sur les sites WordPress h\u00e9berg\u00e9s avec Kinsta.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Qu’est-ce qu’une extension Chrome ?<\/h2>\n

Une extension Chrome est un programme install\u00e9 dans le navigateur Chrome et qui am\u00e9liore ses fonctionnalit\u00e9s. Les extensions peuvent aller de simples boutons dans la barre d’outils \u00e0 des fonctionnalit\u00e9s enti\u00e8rement int\u00e9gr\u00e9es qui interagissent profond\u00e9ment avec votre exp\u00e9rience de navigation.<\/p>\n

Comment cr\u00e9er une extension Chrome<\/h2>\n

La cr\u00e9ation d’une extension Chrome est similaire au d\u00e9veloppement d’une application web<\/a>, mais elle n\u00e9cessite un fichier au format JSON appel\u00e9 manifest.json<\/strong>. Ce fichier constitue l’\u00e9pine dorsale de l’extension, dont il d\u00e9termine les r\u00e9glages, les autorisations et les fonctionnalit\u00e9s que vous souhaitez inclure.<\/p>\n

Pour commencer, cr\u00e9ez un dossier qui contiendra tous les fichiers de votre extension. Ensuite, cr\u00e9ez un fichier manifest.json<\/strong> dans ce dossier.<\/p>\n

Un fichier manifest.json<\/strong> de base pour une extension Chrome comprend des propri\u00e9t\u00e9s cl\u00e9s qui d\u00e9finissent les r\u00e9glages de base de l’extension. Vous trouverez ci-dessous un exemple de fichier manifest.json<\/strong> comprenant les champs n\u00e9cessaires \u00e0 son fonctionnement :<\/p>\n

{\n  \"manifest_version\": 3,\n  \"name\": \"My Chrome extension\",\n  \"version\": \"1.0\",\n  \"description\": \"Here is a description for my Chrome extension.\"\n}<\/code><\/pre>\n
Vous pouvez le charger et le tester en tant qu’extension d\u00e9compress\u00e9e dans Chrome. Rendez-vous sur chrome:\/\/extensions<\/code> dans votre navigateur et basculez en mode d\u00e9veloppeur<\/strong>, puis cliquez sur le bouton Charger l’extension non empaquet\u00e9e<\/strong>. Cela ouvrira un navigateur de fichiers et vous pourrez s\u00e9lectionner le r\u00e9pertoire que vous avez cr\u00e9\u00e9 pour votre extension.<\/p>\n
\"Chargez
Chargez une extension Chrome en cliquant sur Charger l’extension non empaquet\u00e9e en mode d\u00e9veloppeur.<\/figcaption><\/figure>\n
Lorsque vous cliquez sur l’ic\u00f4ne de l’extension, rien ne se passe car vous n’avez pas cr\u00e9\u00e9 d’interface utilisateur.<\/p>\n
Cr\u00e9er une interface utilisateur (popup) pour votre extension Chrome<\/h3>\n
Comme pour toute application web, l’interface utilisateur (UI) de votre extension utilise le HTML<\/a> pour structurer le contenu, le CSS<\/a> pour le styliser et le JavaScript<\/a> pour ajouter de l’interactivit\u00e9.<\/p>\n
Cr\u00e9ons une interface utilisateur de base \u00e0 l’aide de tous ces fichiers. Commencez par cr\u00e9er un fichier HTML (popup.html<\/strong>). Ce fichier d\u00e9finit la structure des \u00e9l\u00e9ments de votre interface utilisateur, tels que le texte, les titres, les images et les boutons. Ajoutez le code suivant :<\/p>\n
<!DOCTYPE html>\n<html lang=\"en\">\n    <head>\n        <meta charset=\"UTF-8\" \/>\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n        <title>Hello World<\/title>\n        <link rel=\"stylesheet\" href=\"popup.css\" \/>\n    <\/head>\n    <body>\n        <h1>Hello World!<\/h1>\n        <p>My first Chrome Extension<\/p>\n        <button> id=\"sayHello\">Say Hello<\/button>\n        <script> src=\"popup.js\"><\/script>\n    <\/body>\n<\/html><\/code><\/pre>\n
Le code ci-dessus cr\u00e9e un titre, un paragraphe et un bouton. Les fichiers CSS et JavaScript sont \u00e9galement li\u00e9s. Ajoutez maintenant quelques styles dans le fichier popup.css :<\/strong><\/p>\n
* {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n}\n\nbody {\n    font-family: Arial, sans-serif;\n    background-color: aliceblue;\n    padding: 20px;\n}<\/code><\/pre>\n
Ensuite, dans le fichier popup.js<\/strong>, ajoutez un r\u00e9cepteur d’\u00e9v\u00e8nements au bouton de sorte que lorsqu’il est cliqu\u00e9, une alerte s’affiche :<\/p>\n
const sayHelloBtn = document.getElementById('sayHello');\nsayHelloBtn.addEventListener('click', async () => {\n    let tab = await chrome.tabs.query({ active: true });\n    chrome.scripting.executeScript({\n        target: { tabId: tab[0].id },\n        function: () => alert('Hello from the extension!'),\n    });\n});<\/code><\/pre>\n
Ce code JavaScript r\u00e9cup\u00e8re l’onglet actif actuel et utilise l’API Chrome Scripting<\/a> pour ex\u00e9cuter un script qui affiche une alerte avec un message d’accueil lorsque le bouton Say Hello<\/strong> est cliqu\u00e9. Cela introduit une interactivit\u00e9 de base dans votre extension Chrome.<\/p>\n
Gr\u00e2ce \u00e0 ces \u00e9tapes, vous avez mis en place une interface utilisateur popup simple pour votre extension Chrome, qui comprend un texte, un style et une fonctionnalit\u00e9 de base.<\/p>\n
Enfin, vous devez activer le fichier popup dans le fichier manifest.json<\/strong> en ajoutant quelques permissions :<\/p>\n
{\n    . . . ,\n    \"action\": {\n        \"default_popup\": \"popup.html\"\n    },\n    \"permissions\": [\n        \"scripting\",\n        \"tabs\"\n    ],\n    \"host_permissions\": [\n        \"http:\/\/*\/*\",\n        \"https:\/\/*\/*\"\n    ]\n}<\/code><\/pre>\n
Dans la configuration ci-dessus, la cl\u00e9 default_popup<\/code> sp\u00e9cifie que popup.html<\/strong> sera l’interface utilisateur par d\u00e9faut lorsque l’utilisateur interagira avec l’extension. Le tableau permissions<\/code> comprend scripting<\/code> et tabs<\/code>, qui sont essentiels pour que l’extension puisse interagir avec les onglets et utiliser les fonctions de script du navigateur.<\/p>\n
Le tableau host_permissions<\/code> indique les sites avec lesquels votre extension peut interagir. Les mod\u00e8les http:\/\/*\/*<\/code> et https:\/\/*\/*<\/code> indiquent que votre extension peut interagir avec tous les sites web accessibles via les protocoles HTTP et HTTPS.<\/p>\n
Avec ces param\u00e8tres dans votre fichier manifest.json<\/strong>, votre extension Chrome est correctement configur\u00e9e pour afficher une fen\u00eatre contextuelle et ex\u00e9cuter des scripts.<\/p>\n
Recharger votre extension Chrome<\/h3>\n
Une fois ces changements effectu\u00e9s dans votre dossier local, vous devez mettre \u00e0 jour le dossier d\u00e9compress\u00e9 charg\u00e9 dans Chrome. Pour cela, ouvrez la page des extensions de Chrome, trouvez votre extension et cliquez sur l’ic\u00f4ne de rechargement.<\/p>\n
\"Cliquez
Cliquez sur l’ic\u00f4ne d’actualisation pour recharger l’extension.<\/figcaption><\/figure>\n
Vous pouvez ensuite cliquer sur l’ic\u00f4ne de l’extension et une fen\u00eatre contextuelle apparait. Lorsque vous cliquez sur le bouton Say Hello<\/strong>, une alerte apparait.<\/p>\n
Vous avez maintenant des connaissances de base sur la mani\u00e8re de cr\u00e9er une extension Chrome. Il y a d’autres possibilit\u00e9s. Vous pouvez manipuler l’interface utilisateur de votre site, effectuer des requ\u00eates API, r\u00e9cup\u00e9rer des donn\u00e9es \u00e0 partir d’URL pour effectuer des op\u00e9rations sp\u00e9cifiques, et bien plus encore.<\/p>\n
Comment cr\u00e9er une extension Chrome avec React<\/h2>\n
Comme nous l’avons mentionn\u00e9 pr\u00e9c\u00e9demment, la cr\u00e9ation d’une extension Chrome est similaire \u00e0 la cr\u00e9ation d’une application web. Vous pouvez utiliser des frameworks web populaires comme React<\/a>.<\/p>\n
Pour React, le fichier manifest.json<\/strong> est cr\u00e9\u00e9 dans le dossier public<\/strong>. Ce dossier est utilis\u00e9 pour les ressources statiques que vous ne voulez pas voir trait\u00e9s par Webpack<\/a> (ou des bundlers similaires que React peut utiliser sous le capot dans des outils comme Create React App<\/a>).<\/p>\n
Lorsque vous construisez votre application React, le processus de construction copie tout le contenu du dossier public<\/strong> dans le dossier dist<\/strong>. Voici comment cr\u00e9er une extension Chrome avec React :<\/p>\n
    \n
  1. Cr\u00e9ez une nouvelle application React. Vous pouvez utiliser l’environnement de d\u00e9veloppement local Vite en ex\u00e9cutant la commande suivante dans votre terminal :<\/li>\n<\/ol>\n
    npm create vite@latest<\/code><\/pre>\n
    Ensuite, donnez un nom \u00e0 votre projet et s\u00e9lectionnez React comme framework. Une fois cela fait, naviguez dans le dossier du projet et installez les d\u00e9pendances :<\/p>\n
    cd <project-name>\nnpm install<\/code><\/pre>\n
      \n
    1. Dans le dossier public<\/strong> de votre projet React, cr\u00e9ez un fichier manifest.json<\/strong>. Ajoutez les configurations suivantes :<\/li>\n<\/ol>\n
      {\n    \"manifest_version\": 3,\n    \"name\": \"React Chrome extension\",\n    \"description\": \"Chrome extension built with React\",\n    \"version\": \"0.1.0\",\n    \"action\": {\n        \"default_popup\": \"index.html\"\n    },\n    \"permissions\": [\n        \"tabs\"\n    ],\n    \"host_permissions\": [\n        \"http:\/\/*\/*\",\n        \"https:\/\/*\/*\"\n    ]\n}<\/code><\/pre>\n
      La configuration d’une extension Chrome comprend un objet action<\/code> qui d\u00e9finit index.html<\/strong> comme fen\u00eatre contextuelle par d\u00e9faut lorsque vous cliquez sur l’ic\u00f4ne de l’extension. Il s’agit du fichier HTML statique g\u00e9n\u00e9r\u00e9 lorsque vous construisez votre application React.<\/p>\n
        \n
      1. D\u00e9veloppez l’application React. N’h\u00e9sitez pas \u00e0 faire des requ\u00eates d’API, \u00e0 les styliser comme vous le souhaitez, \u00e0 utiliser des hooks React, etc.<\/li>\n<\/ol>\n
          \n
        1. Lorsque vous avez termin\u00e9 la construction de l’interface utilisateur de l’extension, ex\u00e9cutez la commande de construction dans React (npm run build<\/code>). Toutes vos ressources, y compris votre fichier manifest.json<\/strong>, l’index.html<\/strong> g\u00e9n\u00e9r\u00e9 par React, et d’autres, sont d\u00e9plac\u00e9s dans le dossier dist<\/strong> ou build<\/strong>.<\/li>\n
        2. Enfin, chargez votre extension dans Chrome. Naviguez jusqu’\u00e0 chrome:\/\/extensions\/<\/code> et rechargez votre extension.<\/li>\n<\/ol>\n
          Cr\u00e9ation d’une extension Chrome pour g\u00e9rer les plugins de votre site avec l’API Kinsta<\/h2>\n
          Voici \u00e0 quoi ressemblera l’extension Chrome que vous allez cr\u00e9er :<\/p>\n
          \"Extension
          Extension Chrome construite avec React et interagissant avec l’API Kinsta.<\/figcaption><\/figure>\n
          Lorsque vous cliquez sur l’extension, celle-ci affiche une liste de sites dont les extensions sont obsol\u00e8tes sur votre compte MyKinsta<\/a>. Vous pouvez voir la liste des extensions et cliquer sur le bouton Voir dans MyKinsta<\/strong> pour naviguer vers la page Themes & Extensions<\/a> du site, o\u00f9 vous pouvez mettre \u00e0 jour chaque extension.<\/p>\n
          Voyons maintenant comment cr\u00e9er l’extension Chrome.<\/p>\n
          Comprendre l’API Kinsta<\/h3>\n
          L’API Kinsta<\/a> est un outil puissant qui vous permet d’interagir de mani\u00e8re programmatique avec les services Kinsta comme les sites WordPress h\u00e9berg\u00e9s. Elle peut vous aider \u00e0 automatiser diverses t\u00e2ches li\u00e9es \u00e0 la gestion de WordPress, y compris la cr\u00e9ation de sites<\/a>, la r\u00e9cup\u00e9ration d’informations sur les sites<\/a>, l’obtention de l’\u00e9tat d’un site<\/a>, la consultation<\/a> et la restauration de sauvegardes<\/a>, et plus encore.<\/p>\n
          Pour utiliser l’API de Kinsta, vous devez avoir un compte avec au moins un site, une application<\/a> ou une base de donn\u00e9es<\/a> WordPress dans MyKinsta. Vous devez \u00e9galement g\u00e9n\u00e9rer une cl\u00e9 API pour vous authentifier et acc\u00e9der \u00e0 votre compte.<\/p>\n
          Pour g\u00e9n\u00e9rer une cl\u00e9 API :<\/p>\n
            \n
          1. Allez sur votre tableau de bord MyKinsta<\/a>.<\/li>\n
          2. Naviguez jusqu’\u00e0 la page des cl\u00e9s API (Votre nom<\/strong> > R\u00e9glages de l’entreprise <\/strong>> Cl\u00e9s API<\/strong>).<\/li>\n
          3. Cliquez sur Cr\u00e9er une cl\u00e9 API<\/strong>.<\/li>\n
          4. Choisissez une date d’expiration ou d\u00e9finissez une date de d\u00e9but personnalis\u00e9e et un nombre d’heures pour l’expiration de la cl\u00e9.<\/li>\n
          5. Donnez un nom unique \u00e0 la cl\u00e9.<\/li>\n
          6. Cliquez sur G\u00e9n\u00e9rer<\/strong>.<\/li>\n<\/ol>\n
            Apr\u00e8s avoir cr\u00e9\u00e9 une cl\u00e9 API, copiez-la et conservez-la en lieu s\u00fbr (il est recommand\u00e9 d’utiliser un gestionnaire de mots de passe<\/a>). Vous pouvez g\u00e9n\u00e9rer plusieurs cl\u00e9s API, qui seront r\u00e9pertori\u00e9es sur la page Cl\u00e9s API<\/strong>. Si vous devez r\u00e9voquer une cl\u00e9 API, cliquez sur le bouton R\u00e9voquer<\/strong>.<\/p>\n
            G\u00e9rer les plugins de votre site avec l’API Kinsta et React<\/h2>\n
            Commen\u00e7ons par d\u00e9velopper une interface utilisateur dans React, qui sera ensuite transform\u00e9e en une extension Chrome. Ce guide suppose une connaissance de base de React et de l’interaction avec l’API.<\/p>\n
            Mise en place de l’environnement<\/h3>\n
            Tout d’abord, dans le fichier App.jsx<\/strong>, d\u00e9finissez une constante pour l’URL de l’API Kinsta afin d’\u00e9viter toute redondance dans votre code :<\/p>\n
            const KinstaAPIUrl = 'https:\/\/api.kinsta.com\/v2';<\/code><\/pre>\n
            Pour des raisons de s\u00e9curit\u00e9, stockez les donn\u00e9es sensibles telles que votre cl\u00e9 API et l’identifiant de la soci\u00e9t\u00e9 Kinsta dans un fichier .env.local<\/strong> pour les garder en s\u00e9curit\u00e9 et hors de votre code source :<\/p>\n
            VITE_KINSTA_COMPANY_ID=YOUR_COMPANY_ID\nVITE_KINSTA_API_KEY=YOUR_API_KEY<\/code><\/pre>\n
            R\u00e9cup\u00e9rer des donn\u00e9es avec l’API Kinsta<\/h3>\n
            Dans le fichier App.jsx<\/strong>, vous devez faire plusieurs demandes \u00e0 l’API de Kinsta pour r\u00e9cup\u00e9rer des informations sur les sites et les extensions.<\/p>\n
              \n
            1. R\u00e9cup\u00e9rer les sites de l’entreprise :<\/strong> Commencez par r\u00e9cup\u00e9rer la liste des sites associ\u00e9s \u00e0 votre compte d’entreprise Kinsta. Utilisez l’identifiant de l’entreprise dans une requ\u00eate GET, qui renvoie un tableau de d\u00e9tails sur les sites.\n
              const getListOfCompanySites = async () => {\n      const query = new URLSearchParams({\n        company: import.meta.env.VITE_KINSTA_COMPANY_ID,\n      }).toString();\n      const resp = await fetch(`${KinstaAPIUrl}\/sites?${query}`, {\n        method: 'GET',\n        headers: {\n          Authorization: `Bearer ${import.meta.env.VITE_KINSTA_API_KEY}`,\n        },\n      });\n      const data = await resp.json();\n      const companySites = data.company.sites;\n      return companySites;\n    }<\/code><\/pre>\n<\/li>\n
            2. R\u00e9cup\u00e9rer les donn\u00e9es d’environnement pour chaque site :<\/strong> Pour chaque site, r\u00e9cup\u00e9rez les environnements, qui comprennent l’identifiant de l’environnement n\u00e9cessaire pour les requ\u00eates ult\u00e9rieures. Pour cela, il convient de mapper chaque site et d’effectuer un appel API au point de terminaison \/sites\/${siteId}\/environments<\/code>.\n
               const companySites = await getListOfCompanySites();\n    \/\/ Get all environments for each site\n\n    const sitesEnvironmentData = companySites.map(async (site) => {\n      const siteId = site.id;\n      const resp = await fetch(`${KinstaAPIUrl}\/sites\/${siteId}\/environments`, {\n        method: 'GET',\n        headers: {\n          Authorization: `Bearer ${import.meta.env.VITE_KINSTA_API_KEY}`,\n        },\n      });\n      const data = await resp.json();\n      const environments = data.site.environments;\n      return {\n        id: siteId,\n        name: site.display_name,\n        environments: environments,\n      };\n    });<\/code><\/pre>\n<\/li>\n
            3. R\u00e9cup\u00e9rer les extensions pour chaque environnement de site :<\/strong> Enfin, utilisez l’identifiant de l’environnement pour r\u00e9cup\u00e9rer les extensions pour chaque site. Cette \u00e9tape implique une fonction de mappage et un appel API au point de terminaison \/sites\/environments\/${environmentId}\/plugins<\/code> pour chaque environnement.\n
              \/\/ Wait for all the promises to resolve\n    const sitesData = await Promise.all(sitesEnvironmentData);\n\n    \/\/ Get all plugins for each environment\n    const sitesWithPlugin = sitesData.map(async (site) => {\n      const environmentId = site.environments[0].id;\n      const resp = await fetch(\n        `${KinstaAPIUrl}\/sites\/environments\/${environmentId}\/plugins`,\n        {\n          method: 'GET',\n          headers: {\n            Authorization: `Bearer ${import.meta.env.VITE_KINSTA_API_KEY}`,\n          },\n        }\n      );\n      const data = await resp.json();\n      const plugins = data.environment.container_info;\n      return {\n        env_id: environmentId,\n        name: site.name,\n        site_id: site.id,\n        plugins: plugins,\n      };\n    });<\/code><\/pre>\n
              Vous pouvez maintenant rassembler toutes ces requ\u00eates dans une fonction qui est utilis\u00e9e pour renvoyer le tableau final des sites avec des d\u00e9tails de base sur chaque site et ses extensions :<\/p>\n
              const getSitesWithPluginData = async () => {\n  const getListOfCompanySites = async () => {\n    const query = new URLSearchParams({\n      company: import.meta.env.VITE_KINSTA_COMPANY_ID,\n    }).toString();\n    const resp = await fetch(`${KinstaAPIUrl}\/sites?${query}`, {\n      method: 'GET',\n      headers: {\n        Authorization: `Bearer ${import.meta.env.VITE_KINSTA_API_KEY}`,\n      },\n    });\n    const data = await resp.json();\n    const companySites = data.company.sites;\n    return companySites;\n  }\n\n  const companySites = await getListOfCompanySites();\n\n  \/\/ Get all environments for each site\n  const sitesEnvironmentData = companySites.map(async (site) => {\n    const siteId = site.id;\n    const resp = await fetch(`${KinstaAPIUrl}\/sites\/${siteId}\/environments`, {\n      method: 'GET',\n      headers: {\n        Authorization: `Bearer ${import.meta.env.VITE_KINSTA_API_KEY}`,\n      },\n    });\n    const data = await resp.json();\n    const environments = data.site.environments;\n    return {\n      id: siteId,\n      name: site.display_name,\n      environments: environments,\n    };\n  });\n\n  \/\/ Wait for all the promises to resolve\n  const sitesData = await Promise.all(sitesEnvironmentData);\n\n  \/\/ Get all plugins for each environment\n  const sitesWithPlugin = sitesData.map(async (site) => {\n    const environmentId = site.environments[0].id;\n    const resp = await fetch(\n      `${KinstaAPIUrl}\/sites\/environments\/${environmentId}\/plugins`,\n      {\n        method: 'GET',\n        headers: {\n          Authorization: `Bearer ${import.meta.env.VITE_KINSTA_API_KEY}`,\n        },\n      }\n    );\n    const data = await resp.json();\n    const plugins = data.environment.container_info;\n    return {\n      env_id: environmentId,\n      name: site.name,\n      site_id: site.id,\n      plugins: plugins,\n    };\n  });\n\n  \/\/ Wait for all the promises to resolve\n  const sitesWithPluginData = await Promise.all(sitesWithPlugin);\n  return sitesWithPluginData;\n}<\/code><\/pre>\n<\/li>\n<\/ol>\n
              Afficher les donn\u00e9es du site<\/h3>\n
              Cr\u00e9ez un \u00e9tat avec le hook useState<\/code> pour stocker les sites dont les extensions sont obsol\u00e8tes. Le hook useEffect<\/code> appellera \u00e9galement la m\u00e9thode getSitesWithPluginData()<\/code> et extraira les d\u00e9tails du site lorsque le composant sera mont\u00e9.<\/p>\n
              Dans le hook useEffect<\/code>, cr\u00e9ez une fonction qui passera en boucle sur chaque site pour filtrer les sites dont les extensions sont obsol\u00e8tes et les stocker dans l’\u00e9tat :<\/p>\n
              const [sitesWithOutdatedPlugin, setSitesWithOutdatedPlugin] = useState([]);\nconst [isLoading, setIsLoading] = useState(true);\n\nuseEffect(() => {\n  const checkSitesWithPluginUpdate = async () => {\n    const sitesWithPluginData = await getSitesWithPluginData();\n    const sitesWithOutdatedPlugin = sitesWithPluginData.map((site) => {\n      const plugins = site.plugins.wp_plugins.data;\n      const outdatedPlugins = plugins.filter((plugin) => plugin.update === \"available\");\n      if (outdatedPlugins.length > 0) {\n        const kinstaDashboardPluginPageURL = `https:\/\/my.kinsta.com\/sites\/plugins\/${site.site_id}\/${site.env_id}?idCompany=${import.meta.env.VITE_KINSTA_COMPANY_ID}`;\n        return {\n          name: site.name,\n          plugins: outdatedPlugins,\n          url: kinstaDashboardPluginPageURL,\n        };\n      }\n    });\n\n    setSitesWithOutdatedPlugin(sitesWithOutdatedPlugin);\n\n  checkSitesWithPluginUpdate();\n  setIsLoading(false);\n}, []);<\/code><\/pre>\n
              Dans le code ci-dessus, vous remarquez que l’\u00e9tat de chargement est \u00e9galement cr\u00e9\u00e9 et d\u00e9fini sur true<\/code> par d\u00e9faut. Il sera utilis\u00e9 pour contr\u00f4ler l’affichage des donn\u00e9es. Lorsque toutes les donn\u00e9es sont charg\u00e9es, nous le fixons \u00e0 false<\/code>.<\/p>\n
              Vous trouverez ci-dessous un balisage permettant de rendre les donn\u00e9es du site et les extensions dans votre interface utilisateur.<\/p>\n
              import { useEffect, useState } from \"react\"\nimport KinstaLogo from '.\/assets\/kinsta-logo.png'\nimport PluginPage from '.\/components\/PluginsPage'\n\nfunction App() {\n  \/\/ load the data from the API\n  return (\n    <div className=\"container\">\n        <div>\n          <div> className=\"title-section\">\n            <img src={KinstaLogo} className=\"logo\" alt=\"\" \/>\n          <\/div>\n          <p> className=\"info-box\">\n            Get quick information about your site plugins that need update.\n          <\/p>\n          {isLoading ? (\n            <p>Loading...<\/p>\n          ) : (\n            <>\n              <div className=\"content\">\n                <p>The following sites have plugins that need to be updated.<\/p>\n                {sitesWithOutdatedPlugin.map((site, index) => {\n                  return (\n                    <PluginPage key={index} {...site} \/>\n                  );\n                })}\n              <\/div>\n            <\/>\n          )}\n        <\/div>\n    <\/div>\n  )\n}\nexport default App<\/code><\/pre>\n
              Le code comprend un en-t\u00eate avec un logo et un paragraphe d’information. Le contenu de l’interface utilisateur est rendu de mani\u00e8re conditionnelle en fonction de l’\u00e9tat de isLoading<\/code>. Si les donn\u00e9es sont encore en cours de chargement, un message de chargement est affich\u00e9. Une fois les donn\u00e9es charg\u00e9es, l’interface pr\u00e9sente les donn\u00e9es relatives aux sites et aux \u00e9ventuelles extensions n\u00e9cessitant des mises \u00e0 jour.<\/p>\n
              Vous remarquerez \u00e9galement un composant : PluginPage<\/code> (PluginPage.jsx<\/strong>). Ce composant est con\u00e7u pour afficher les sites individuels et les d\u00e9tails de leurs extensions. Il comprend une fonctionnalit\u00e9 permettant de basculer la visibilit\u00e9 des d\u00e9tails de l’extension.<\/p>\n
              import { useState } from \"react\"\nimport { FaRegEye } from \"react-icons\/fa\";\nimport { FaRegEyeSlash } from \"react-icons\/fa\";\n\nconst PluginUse = (site) => {\n    const [viewPlugin, setViewPlugin] = useState(false);\n\n    return (\n        <>\n            <div className=\"site-card\">\n                <div className=\"site-card-details\">\n                    <p>{site.name}<\/p>\n                    <div className=\"both-btns\">\n                        <a> href={site.url} target=\"_blank\" rel=\"noreferrer\" className=\"btn\">\n                            View in MyKinsta\n                        <\/a>\n                        <button onClick={() => setViewPlugin(!viewPlugin)} className=\"btn\" title=\"View Plugins\">\n                            {viewPlugin ? <FaRegEyeSlash \/> : <FaRegEye \/>}\n                        <\/button>\n                    <\/div>\n                <\/div>\n                {viewPlugin && (\n                    <div className=\"plugin-list\">\n                        {site.plugins.map((plugin, index) => {\n                            return (\n                                <div key={index} className=\"plugin-card\">\n                                    <p>{plugin.name}<\/p>\n                                    <div className=\"plugin-version-info\">\n                                        <p>Current Version: {plugin.version}<\/p>\n                                        <p>Latest Version: {plugin.update_version}<\/p>\n                                    <\/div>\n                                <\/div>\n                            );\n                        })}\n                    <\/div>\n                )}\n            <\/div>\n        <\/>\n    )\n}\nexport default PluginUse<\/code><\/pre>\n