{"id":77671,"date":"2024-05-14T15:43:50","date_gmt":"2024-05-14T14:43:50","guid":{"rendered":"https:\/\/kinsta.com\/it\/?p=77671&preview=true&preview_id=77671"},"modified":"2024-05-16T14:59:06","modified_gmt":"2024-05-16T13:59:06","slug":"creare-estensione-chrome","status":"publish","type":"post","link":"https:\/\/kinsta.com\/it\/blog\/creare-estensione-chrome\/","title":{"rendered":"Come creare un’estensione Chrome per gestire i plugin di un sito con l’API di Kinsta e React"},"content":{"rendered":"

Come utenti di Google Chrome<\/a>, probabilmente avrete utilizzato alcune estensioni del browser. Vi siete mai chiesti come sono costruite o come crearne una?<\/p>\n

Questo articolo vi guida attraverso il processo di creazione di un’estensione per Chrome, in particolare una che utilizza React e l’API di Kinsta per gestire i plugin sui siti WordPress ospitati con Kinsta.<\/p>\n

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

Cos’\u00e8 un’estensione di Chrome?<\/h2>\n

Un’estensione di Chrome \u00e8 un programma che viene installato nel browser Chrome e ne migliora le funzionalit\u00e0. Le estensioni possono variare da semplici pulsanti a icona nella barra degli strumenti a funzioni completamente integrate che interagiscono profondamente con la propria esperienza di navigazione.<\/p>\n

Come creare un’estensione di Chrome<\/h2>\n

Creare un’estensione di Chrome \u00e8 come sviluppare un’applicazione web<\/a>, ma richiede un file in formato JSON chiamato manifest.json<\/strong>. Questo file costituisce la struttura portante dell’estensione, dettando le impostazioni, i permessi e le funzionalit\u00e0 che si desidera includere.<\/p>\n

Per iniziare, creiamo una cartella che conterr\u00e0 tutti i file dell’estensione. Successivamente, creiamo un file manifest.json<\/strong> nella cartella.<\/p>\n

Un file manifest.json<\/strong> di base per un’estensione di Chrome include propriet\u00e0 chiave che definiscono le impostazioni di base dell’estensione. Di seguito \u00e8 riportato un esempio di file manifest.json<\/strong> che include i campi necessari per il suo funzionamento:<\/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
Possiamo caricarlo e testarlo come estensione scompattata in Chrome. Andiamo su chrome:\/\/extensions<\/code> nel browser e attiviamo la modalit\u00e0 sviluppatore<\/strong>, quindi clicchiamo sul pulsante Load Unpacked<\/strong>. Si aprir\u00e0 un browser di file e potremo selezionare la directory creata per la nostra estensione.<\/p>\n
\"Caricare
Caricare un’estensione di Chrome cliccando su Load unpacked in modalit\u00e0 sviluppatore.<\/figcaption><\/figure>\n
Cliccando sull’icona dell’estensione, non succeder\u00e0 nulla perch\u00e9 non abbiamo ancora creato un’interfaccia utente.<\/p>\n
Creare un’interfaccia utente (popup) per l’estensione Chrome<\/h3>\n
Come per ogni applicazione web, l’interfaccia utente (UI) dell’estensione utilizza l’HTML<\/a> per strutturare il contenuto, il CSS<\/a> per lo stile e il JavaScript<\/a> per aggiungere interattivit\u00e0.<\/p>\n
Creiamo un’interfaccia utente di base utilizzando tutti questi file. Iniziamo creando un file HTML (popup.html<\/strong>). Questo file definisce la struttura degli elementi dell’interfaccia utente, come testo, titoli, immagini e pulsanti. Aggiungiamo il seguente codice:<\/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
Il codice qui sopra crea un titolo, un paragrafo e un pulsante. Anche i file CSS e JavaScript sono collegati. Ora aggiungiamo alcuni stili nel file 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
Poi, nel file popup.js<\/strong>, aggiungiamo un ascoltatore di eventi al pulsante in modo che quando viene cliccato, venga visualizzato un avviso:<\/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
Questo codice JavaScript recupera la scheda attiva corrente e utilizza la Chrome Scripting API<\/a> per eseguire uno script che visualizza un avviso con un messaggio di saluto quando viene cliccato il pulsante Say Hello<\/strong>. In questo modo si introduce un’interattivit\u00e0 di base nell’estensione di Chrome.<\/p>\n
Grazie a questi passaggi, abbiamo creato una semplice interfaccia utente popup per la nostra estensione Chrome che include testo, stile e funzionalit\u00e0 di base.<\/p>\n
Infine, dobbiamo abilitare il file popup nel file manifest.json<\/strong> aggiungendo alcuni permessi:<\/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
Nella configurazione qui sopra, la chiave default_popup<\/code> specifica che popup.html<\/strong> sar\u00e0 l’interfaccia utente predefinita quando l’utente interagisce con l’estensione. L’array permissions<\/code> include i permessi scripting<\/code> e tabs<\/code>, che sono fondamentali affinch\u00e9 l’estensione possa interagire con le schede e utilizzare le funzioni di scripting del browser.<\/p>\n
L’array host_permissions<\/code> specifica con quali siti l’estensione pu\u00f2 interagire. I modelli http:\/\/*\/*<\/code> e https:\/\/*\/*<\/code> indicano che l’estensione pu\u00f2 interagire con tutti i siti web accessibili tramite i protocolli HTTP e HTTPS.<\/p>\n
Con queste impostazioni nel file manifest.json<\/strong>, l’estensione Chrome \u00e8 correttamente configurata per visualizzare un popup ed eseguire script.<\/p>\n
Aggiornare l’estensione di Chrome<\/h3>\n
Dopo aver apportato queste modifiche nella cartella locale, dobbiamo aggiornare la cartella scompattata caricata su Chrome. Per farlo, apriamo la pagina delle estensioni di Chrome, individuiamo l’estensione e clicchiamo sull’icona refresh<\/em>.<\/p>\n
\"Fare
L’icona di refresh per aggiornare l’estensione.<\/figcaption><\/figure>\n
A questo punto, possiamo cliccare sull’icona dell’estensione e apparir\u00e0 un popup. Cliccando sul pulsante Say Hello<\/strong>, apparir\u00e0 un avviso.<\/p>\n
Ora abbiamo una conoscenza di base su come iniziare a creare un’estensione per Chrome. Ma possiamo fare molto di pi\u00f9. Possiamo manipolare l’interfaccia utente del sito, fare richieste API, recuperare dati da URL per eseguire operazioni specifiche e altro ancora.<\/p>\n
Come creare un’estensione per Chrome con React<\/h2>\n
Come abbiamo detto in precedenza, la creazione di un’estensione di Chrome \u00e8 simile alla creazione di un’applicazione web. Possiamo utilizzare framework web popolari come React<\/a>.<\/p>\n
Per React, il file manifest.json<\/strong> viene creato nella cartella public<\/strong>. Questa cartella viene utilizzata per le risorse statiche che non si desidera vengano elaborate da Webpack<\/a> (o da altri bundler simili che React potrebbe utilizzare in strumenti come Create React App<\/a>).<\/p>\n
Quando costruiamo la nostra applicazione React, il processo di build copia tutti i contenuti della cartella public<\/strong> nella cartella dist<\/strong>. Ecco come creare un’estensione di Chrome con React:<\/p>\n
    \n
  1. Creiamo una nuova applicazione React. Possiamo utilizzare l’ambiente di sviluppo locale Vite eseguendo questo comando nel terminale:<\/li>\n<\/ol>\n
    npm create vite@latest<\/code><\/pre>\n
    Quindi, diamo un nome al progetto e selezioniamo React come framework. Una volta fatto questo, navighiamo nella cartella del progetto e installiamo le dipendenze:<\/p>\n
    cd <project-name>\nnpm install<\/code><\/pre>\n
      \n
    1. Nella cartella public<\/strong> del progetto React, creiamo un file manifest.json<\/strong>. Aggiungiamo le seguenti configurazioni:<\/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 configurazione di un’estensione Chrome include un oggetto action<\/code> che imposta index.html<\/strong> come popup predefinito quando si clicca sull’icona dell’estensione. Questo \u00e8 il file HTML statico generato quando costruiamo un’applicazione React.<\/p>\n
        \n
      1. \u00c8 il momento di sviluppare l’applicazione React. Qui possiamo sctenare la nostra fantasia e fare richieste API, stilizzarle come vogliamo, usare React Hooks e altro ancora.<\/li>\n<\/ol>\n
          \n
        1. Una volta finito di costruire l’interfaccia utente dell’estensione, eseguiamo il comando di build in React (npm run build<\/code>). Tutte le risorse, compresi il file manifest.json<\/strong>, l’index.html<\/strong> generato da React e altri, vengono spostate nella cartella dist<\/strong> o build<\/strong>.<\/li>\n
        2. Infine, carichiamo l’estensione in Chrome. Andiamo su chrome:\/\/extensions\/<\/code> ed eseguiamo il refresh dell’estensione.<\/li>\n<\/ol>\n
          Creare un’estensione Chrome per gestire i plugin di un sito con l’API di Kinsta<\/h2>\n
          Ecco come apparir\u00e0 l’estensione Chrome che creeremo:<\/p>\n
          \"Estensione
          Estensione Chrome costruita con React che interagisce con l’API di Kinsta.<\/figcaption><\/figure>\n
          Facendo clic, l’estensione mostra un elenco di siti con plugin obsoleti sul nostro account MyKinsta<\/a>. Possiamo vedere l’elenco dei plugin e cliccare sul pulsante Visualizza in MyKinsta<\/strong> per accedere alla pagina Temi e plugin<\/a> del sito, dove potremo aggiornare ogni plugin.<\/p>\n
          Vediamo come creare l’estensione per Chrome.<\/p>\n
          L’API di Kinsta<\/h3>\n
          L’API di Kinsta<\/a> \u00e8 un potente strumento che permette di interagire in modo programmatico con i servizi di Kinsta come i siti WordPress ospitati. Pu\u00f2 aiutare ad automatizzare diverse attivit\u00e0 legate alla gestione di WordPress, tra cui la creazione di un sito<\/a>, il recupero di informazioni sul sito<\/a>, lo stato del sito<\/a>, la consultazione<\/a> e il ripristino dei backup<\/a> e altro ancora.<\/p>\n
          Per utilizzare l’API di Kinsta, \u00e8 necessario avere un account con almeno un sito WordPress, un’applicazione<\/a> o un database<\/a> in MyKinsta. Inoltre, dovremo generare una chiave API per autenticarci e accedere al nostro account.<\/p>\n
          Per generare una chiave API:<\/p>\n
            \n
          1. Andiamo alla dashboard di MyKinsta<\/a>.<\/li>\n
          2. Andiamo alla pagina delle chiavi API (Nome<\/strong> > Impostazioni dell’azienda <\/strong>> Chiavi API<\/strong>).<\/li>\n
          3. Clicchiamo su Crea chiave API<\/strong>.<\/li>\n
          4. Scegliamo una scadenza o impostiamo una data di inizio personalizzata e un numero di ore di scadenza della chiave.<\/li>\n
          5. Assegniamo alla chiave un nome univoco.<\/li>\n
          6. Clicchiamo su Genera<\/strong>.<\/li>\n<\/ol>\n
            Dopo aver creato una chiave API, copiamola e conserviamola in un luogo sicuro (utilizzando ad esempio un gestore di password<\/a>). Possiamo generare pi\u00f9 chiavi API, che saranno elencate nella pagina delle chiavi API<\/strong>. Per revocare una chiave API, basta cliccare sul pulsante Revoca<\/strong>.<\/p>\n
            Gestire i plugin del sito con Kinsta API e React<\/h2>\n
            Iniziamo a sviluppare un’interfaccia utente in React, che verr\u00e0 poi trasformata in un’estensione per Chrome. Questa guida presuppone una familiarit\u00e0 di base con React e l’interazione con le API.<\/p>\n
            Impostazione dell’ambiente<\/h3>\n
            Innanzitutto, nel file App.jsx<\/strong>, definiamo una costante per l’URL dell’API di Kinsta per evitare ridondanze nel codice:<\/p>\n
            const KinstaAPIUrl = 'https:\/\/api.kinsta.com\/v2';<\/code><\/pre>\n
            Per sicurezza, memorizziamo i dati sensibili come la chiave API e l’ID dell’azienda Kinsta in un file .env.local<\/strong> per tenerli al sicuro e fuori dal codice sorgente:<\/p>\n
            VITE_KINSTA_COMPANY_ID=YOUR_COMPANY_ID\nVITE_KINSTA_API_KEY=YOUR_API_KEY<\/code><\/pre>\n
            Recuperare i dati con l’API di Kinsta<\/h3>\n
            Nel file App.jsx<\/strong>, dobbiamo effettuare diverse richieste all’API di Kinsta per recuperare informazioni sui siti e sui loro plugin.<\/p>\n
              \n
            1. Recuperare i siti dell’azienda:<\/strong> iniziamo recuperando l’elenco dei siti associati al nostro account azienda su Kinsta. Utilizziamo l’ID dell’azienda in una richiesta GET, che restituisce un array di dettagli del sito.\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. Recuperare i dati dell’ambiente per ogni sito:<\/strong> per ogni sito, recuperiamo gli ambienti, che includono l’ID dell’ambiente necessario per ulteriori richieste. Questo comporta la mappatura di ogni sito e una chiamata API all’endpoint \/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. Recuperare i plugin per ogni ambiente del sito:<\/strong> infine, utilizziamo l’ID dell’ambiente per recuperare i plugin per ogni sito. Questo passaggio prevede una funzione di mappatura e una chiamata API all’endpoint \/sites\/environments\/${environmentId}\/plugins<\/code> per ogni ambiente.\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
              Ora possiamo riunire tutte queste richieste in una funzione che viene utilizzata per restituire l’array finale di siti con i dettagli di base di ogni sito e dei suoi plugin:<\/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
              Visualizzare i dati dei siti<\/h3>\n
              Creiamo uno stato con l’hook useState<\/code> per memorizzare i siti con i plugin obsoleti. L’hook useEffect<\/code> chiamer\u00e0 anche il metodo getSitesWithPluginData()<\/code> per estrarre i dettagli del sito quando il componente viene montato.<\/p>\n
              Nell’hook useEffect<\/code>, creiamo una funzione che esegua un ciclo su ogni sito per filtrare i siti con plugin obsoleti e poi memorizzarli nello stato:<\/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
              Nel codice qui sopra, si nota che anche lo stato di caricamento \u00e8 stato creato e impostato su true<\/code> per impostazione predefinita. Questo verr\u00e0 utilizzato per controllare la visualizzazione dei dati. Quando tutti i dati sono stati caricati, lo impostiamo su false<\/code>.<\/p>\n
              Di seguito \u00e8 riportato un markup per rendere i dati del sito e i plugin all’interno dell’interfaccia utente.<\/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
              Il codice include un’intestazione con un logo e un paragrafo informativo. Il contenuto dell’interfaccia utente viene renderizzato in modo condizionale in base allo stato di isLoading<\/code>. Se i dati sono ancora in fase di caricamento, viene visualizzato un messaggio di caricamento. Una volta che i dati sono stati caricati, vengono presentati i dati relativi ai siti e agli eventuali plugin che necessitano di aggiornamenti.<\/p>\n
              Notiamo anche un componente PluginPage<\/code> (PluginPage.jsx<\/strong>). Questo componente \u00e8 stato progettato per visualizzare i singoli siti e i dettagli dei loro plugin. Include una funzionalit\u00e0 per attivare la visibilit\u00e0 dei dettagli dei plugin.<\/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