{"id":75001,"date":"2024-05-14T16:42:54","date_gmt":"2024-05-14T14:42:54","guid":{"rendered":"https:\/\/kinsta.com\/es\/?p=75001&preview=true&preview_id=75001"},"modified":"2024-05-24T15:51:56","modified_gmt":"2024-05-24T13:51:56","slug":"crear-extension-chrome","status":"publish","type":"post","link":"https:\/\/kinsta.com\/es\/blog\/crear-extension-chrome\/","title":{"rendered":"C\u00f3mo crear una extensi\u00f3n de Chrome para gestionar los plugins de tu sitio web con la API de Kinsta y React"},"content":{"rendered":"

Como usuario de Google Chrome<\/a>, probablemente hayas utilizado algunas extensiones en ese navegador. \u00bfTe has preguntado alguna vez c\u00f3mo se construyen o si t\u00fa podr\u00edas construir una?<\/p>\n

Este art\u00edculo te gu\u00eda a trav\u00e9s del proceso de creaci\u00f3n de una extensi\u00f3n de Chrome, concretamente una que utiliza React y la API de Kinsta para gestionar plugins en sitios de WordPress alojados con Kinsta.<\/p>\n

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

\u00bfQu\u00e9 es una extensi\u00f3n de Chrome?<\/h2>\n

Una extensi\u00f3n de Chrome es un programa que se instala en el navegador Chrome y mejora su funcionalidad. Las extensiones pueden ir desde simples botones con iconos en la barra de herramientas hasta funciones totalmente integradas que interact\u00faan profundamente con tu experiencia de navegaci\u00f3n.<\/p>\n

C\u00f3mo crear una extensi\u00f3n de Chrome<\/h2>\n

Crear una extensi\u00f3n de Chrome es similar a desarrollar una aplicaci\u00f3n web<\/a>, pero requiere un archivo con formato JSON llamado manifest.json<\/strong>. Este archivo act\u00faa como la columna vertebral de la extensi\u00f3n, dictando su configuraci\u00f3n, permisos y funcionalidades que desees incluir.<\/p>\n

Para empezar, crea una carpeta que contenga todos los archivos de tu extensi\u00f3n. A continuaci\u00f3n, crea un archivo manifest.json<\/strong> en la carpeta.<\/p>\n

Un archivo manifest.json<\/strong> b\u00e1sico para una extensi\u00f3n de Chrome incluye propiedades clave que definen la configuraci\u00f3n b\u00e1sica de la extensi\u00f3n. A continuaci\u00f3n se muestra un ejemplo de archivo manifest.json<\/strong> que incluye los campos necesarios para que funcione:<\/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
Puedes cargarlo y probarlo como una extensi\u00f3n desempaquetada en Chrome. Ve a chrome:\/\/extensions<\/code> en tu navegador y activa el modo Desarrollador<\/strong>, luego haz clic en el bot\u00f3n Load Unpacked (Cargar Descomprimida)<\/strong>. Se abrir\u00e1 un explorador de archivos y podr\u00e1s seleccionar el directorio que creaste para tu extensi\u00f3n.<\/p>\n
\"Carga
Carga una extensi\u00f3n de Chrome haciendo clic en Load unpacked (Cargar descomprimida) en modo desarrollador.<\/figcaption><\/figure>\n
Cuando hagas clic en el icono de la extensi\u00f3n, no ocurrir\u00e1 nada porque no has creado una interfaz de usuario.<\/p>\n
Crear una interfaz de usuario (popup) para tu extensi\u00f3n de Chrome<\/h3>\n
Como en cualquier aplicaci\u00f3n web, la interfaz de usuario (IU) de tu extensi\u00f3n utiliza HTML<\/a> para estructurar el contenido, CSS<\/a> para darle estilo y JavaScript<\/a> para a\u00f1adir interactividad.<\/p>\n
Vamos a crear una IU b\u00e1sica utilizando todos estos archivos. Empieza creando un archivo HTML (popup.html<\/strong>). Este archivo define la estructura de los elementos de tu IU, como el texto, los encabezados, las im\u00e1genes y los botones. A\u00f1ade el siguiente c\u00f3digo:<\/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
El c\u00f3digo anterior crea un encabezado, un p\u00e1rrafo y un bot\u00f3n. Los archivos CSS y JavaScript tambi\u00e9n est\u00e1n enlazados. Ahora, a\u00f1ade algunos estilos en el archivo 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
A continuaci\u00f3n, en el archivo popup.js<\/strong>, a\u00f1ade un escuchador de eventos al bot\u00f3n para que, cuando se haga clic en \u00e9l, se muestre una alerta:<\/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
Este c\u00f3digo JavaScript recupera la pesta\u00f1a activa actual y utiliza el Chrome Scripting API<\/a> para ejecutar un script que muestre una alerta con un mensaje de saludo cuando se haga clic en el bot\u00f3n Say Hello<\/strong>. Esto introduce interactividad b\u00e1sica a tu extensi\u00f3n de Chrome.<\/p>\n
Con estos pasos, has configurado una sencilla interfaz de usuario emergente para tu extensi\u00f3n de Chrome que incluye texto, estilo y funcionalidad b\u00e1sicos.<\/p>\n
Por \u00faltimo, tienes que habilitar el archivo emergente en el archivo manifest.json<\/strong> a\u00f1adiendo algunos permisos:<\/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
En la configuraci\u00f3n anterior, la clave default_popup<\/code> especifica que popup.html<\/strong> ser\u00e1 la IU por defecto cuando el usuario interact\u00fae con la extensi\u00f3n. El array permissions<\/code> incluye scripting<\/code> y tabs<\/code>, que son cruciales para que la extensi\u00f3n interact\u00fae con las pesta\u00f1as y utilice las funciones de scripting del navegador.<\/p>\n
El array host_permissions<\/code> especifica con qu\u00e9 sitios puede interactuar tu extensi\u00f3n. Los patrones http:\/\/*\/*<\/code> y https:\/\/*\/*<\/code> indican que tu extensi\u00f3n puede interactuar con todos los sitios web a los que se accede a trav\u00e9s de los protocolos HTTP y HTTPS.<\/p>\n
Con estos ajustes en tu archivo manifest.json<\/strong>, tu extensi\u00f3n de Chrome est\u00e1 correctamente configurada para mostrar una ventana emergente y ejecutar scripts.<\/p>\n
Recarga tu extensi\u00f3n de Chrome<\/h3>\n
Con estos cambios efectuados en tu carpeta local, necesitas actualizar la carpeta descomprimida cargada en Chrome. Para ello, abre la p\u00e1gina de extensiones de Chrome, busca tu extensi\u00f3n y haz clic en el icono de recargar.<\/p>\n
\"Haz
Haz clic en el icono de actualizaci\u00f3n para recargar la extensi\u00f3n.<\/figcaption><\/figure>\n
A continuaci\u00f3n, haz clic en el icono de la extensi\u00f3n y aparecer\u00e1 una ventana emergente. Cuando hagas clic en el bot\u00f3n Say Hello<\/strong>, aparecer\u00e1 una alerta.<\/p>\n
Ahora tienes conocimientos b\u00e1sicos sobre c\u00f3mo empezar a crear una extensi\u00f3n de Chrome. Hay m\u00e1s cosas que se pueden hacer. Puedes manipular la interfaz de usuario de tu sitio web, hacer solicitudes a la API, recuperar datos de URL para realizar operaciones espec\u00edficas, y mucho m\u00e1s.<\/p>\n
C\u00f3mo crear una extensi\u00f3n de Chrome con React<\/h2>\n
Como hemos mencionado antes, crear una extensi\u00f3n de Chrome es similar a crear una aplicaci\u00f3n web. Puedes utilizar frameworks populares como React<\/a>.<\/p>\n
Para React, el archivo manifest.json<\/strong> se crea en la carpeta public<\/strong>. Esta carpeta se utiliza para los activos est\u00e1ticos que no quieres que sean procesados por Webpack<\/a> (o paquetes similares que React puede utilizar en herramientas como Create React App<\/a>).<\/p>\n
Cuando construyes tu aplicaci\u00f3n React, el proceso de construcci\u00f3n copia todo el contenido de la carpeta public<\/strong> en la carpeta dist<\/strong>. A continuaci\u00f3n te explicamos c\u00f3mo crear una extensi\u00f3n de Chrome con React:<\/p>\n
    \n
  1. Crea una nueva aplicaci\u00f3n React. Puedes utilizar el entorno de desarrollo local Vite ejecutando el siguiente comando en tu terminal:<\/li>\n<\/ol>\n
    npm create vite@latest<\/code><\/pre>\n
    A continuaci\u00f3n, da un nombre a tu proyecto y selecciona React como framework. Una vez hecho esto, navega hasta la carpeta del proyecto e instala las dependencias:<\/p>\n
    cd <project-name>\nnpm install<\/code><\/pre>\n
      \n
    1. En la carpeta public<\/strong>\u00a0de tu proyecto React, crea un archivo manifest.json<\/strong>. A\u00f1ade las siguientes configuraciones:<\/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 configuraci\u00f3n para una extensi\u00f3n de Chrome incluye un objeto action<\/code> que establece index.html<\/strong> como la ventana emergente predeterminada cuando se hace clic en el icono de la extensi\u00f3n. Este es el archivo HTML est\u00e1tico que se genera cuando construyes tu aplicaci\u00f3n React.<\/p>\n
        \n
      1. Desarrolla la aplicaci\u00f3n React. Si\u00e9ntete libre de hacer peticiones a la API, darles el estilo que desees, utilizar React Hooks, etc.<\/li>\n<\/ol>\n
          \n
        1. Cuando hayas terminado de construir la interfaz de usuario de la extensi\u00f3n, ejecuta el comando build en React (npm run build<\/code>). Todos tus activos, incluyendo tu archivo manifest.json<\/strong>, el index.html<\/strong> generado por React y otros, se mueven a la carpeta dist<\/strong> o build<\/strong>.<\/li>\n
        2. Por \u00faltimo, carga tu extensi\u00f3n en Chrome. Navega a chrome:\/\/extensions\/<\/code> y vuelve a cargar tu extensi\u00f3n.<\/li>\n<\/ol>\n
          Crear una extensi\u00f3n de Chrome para gestionar los plugins de tu sitio con la API de Kinsta<\/h2>\n
          Este es el aspecto que tendr\u00e1 la extensi\u00f3n de Chrome que vas a crear:<\/p>\n
          \"Extensi\u00f3n
          Extensi\u00f3n de Chrome construida con React interactuando con la API de Kinsta.<\/figcaption><\/figure>\n
          Al hacer clic, la extensi\u00f3n muestra una lista de sitios con plugins desactualizados en tu cuenta MyKinsta<\/a>. Puedes ver una lista de los plugins y hacer clic en el bot\u00f3n Ver en My Kinsta<\/strong> para navegar a la p\u00e1gina Temas y Plugins<\/a> del sitio, donde puedes actualizar cada plugin.<\/p>\n
          Exploremos c\u00f3mo crear la extensi\u00f3n de Chrome.<\/p>\n
          Comprender la API de Kinsta<\/h3>\n
          La API de Kinsta<\/a> es una potente herramienta que te permite interactuar mediante programaci\u00f3n con los servicios de Kinsta, como los sitios de WordPress alojados. Puede ayudar a automatizar varias tareas relacionadas con la gesti\u00f3n de WordPress, incluyendo la creaci\u00f3n de sitios<\/a>, la recuperaci\u00f3n de informaci\u00f3n del sitio<\/a>, la obtenci\u00f3n del estado de un sitio<\/a>, la b\u00fasqueda<\/a> y restauraci\u00f3n de copias de seguridad<\/a>, y mucho m\u00e1s.<\/p>\n
          Para utilizar la API de Kinsta, debes tener una cuenta con al menos un sitio de WordPress, una aplicaci\u00f3n<\/a> o una base de datos<\/a> en MyKinsta. Tambi\u00e9n debes generar una clave API para autenticarte y acceder a tu cuenta.<\/p>\n
          Para generar una clave API:<\/p>\n
            \n
          1. Ve a tu panel de MyKinsta<\/a>.<\/li>\n
          2. Ve a la p\u00e1gina Claves API (Tu nombre<\/strong> > Configuraci\u00f3n de la empresa <\/strong>> Claves API<\/strong>).<\/li>\n
          3. Haz clic en Crear Clave API<\/strong>.<\/li>\n
          4. Elige una fecha de caducidad o establece una fecha de inicio personalizada y un n\u00famero de horas para que caduque la clave.<\/li>\n
          5. Dale a la clave un nombre \u00fanico.<\/li>\n
          6. Haz clic en Generar<\/strong>.<\/li>\n<\/ol>\n
            Despu\u00e9s de crear una clave API, c\u00f3piala y gu\u00e1rdala en un lugar seguro (se recomienda utilizar un gestor de contrase\u00f1as<\/a>). Puedes generar varias claves API, que aparecer\u00e1n en la p\u00e1gina Claves API<\/strong>. Si necesitas revocar una clave API, haz clic en el bot\u00f3n Revocar<\/strong>.<\/p>\n
            Gestionar los plugins de tu sitio con la API de Kinsta y React<\/h2>\n
            Empecemos desarrollando una interfaz de usuario en React, que luego se transformar\u00e1 en una extensi\u00f3n de Chrome. Esta gu\u00eda asume una familiaridad b\u00e1sica con React y la interacci\u00f3n con la API.<\/p>\n
            Configurar el entorno<\/h3>\n
            En primer lugar, en el archivo App.jsx<\/strong>, define una constante para la URL de la API de Kinsta para evitar redundancias en tu c\u00f3digo:<\/p>\n
            const KinstaAPIUrl = 'https:\/\/api.kinsta.com\/v2';<\/code><\/pre>\n
            Por seguridad, almacena los datos sensibles como tu clave API y el ID de la empresa Kinsta en un archivo .env.local<\/strong> para mantenerlos seguros y fuera de tu c\u00f3digo fuente:<\/p>\n
            VITE_KINSTA_COMPANY_ID=YOUR_COMPANY_ID\nVITE_KINSTA_API_KEY=YOUR_API_KEY<\/code><\/pre>\n
            Obtener datos con la API de Kinsta<\/h3>\n
            En el archivo App.jsx<\/strong>, tienes que hacer varias peticiones a la API de Kinsta para recuperar informaci\u00f3n sobre los sitios y sus plugins.<\/p>\n
              \n
            1. Recuperar los sitios de la empresa:<\/strong> Empieza por obtener una lista de los sitios asociados a tu cuenta de empresa Kinsta. Utiliza el ID de la empresa en una solicitud GET, que devuelve un array con los detalles de los sitios.\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. Obt\u00e9n los datos del entorno de cada sitio:<\/strong> Para cada sitio, recupera los entornos, que incluyen el ID de entorno necesario para posteriores solicitudes. Esto implica mapear cada sitio y hacer una llamada a la API del 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. Recupera los plugins para cada entorno de sitio:<\/strong> Por \u00faltimo, utiliza el ID del entorno para obtener los plugins de cada sitio. Este paso implica una funci\u00f3n de mapeo y una llamada a la API del endpoint \/sites\/environments\/${environmentId}\/plugins<\/code> para cada entorno.\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
              Ahora puedes reunir todas estas peticiones en una funci\u00f3n que se utiliza para devolver el array final de sitios con detalles b\u00e1sicos sobre cada sitio y sus plugins:<\/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
              Visualizar los datos de los sitios<\/h3>\n
              Crea un estado con el hook useState<\/code> para almacenar sitios con plugin(s) obsoletos. El hook useEffect<\/code> tambi\u00e9n llamar\u00e1 al m\u00e9todo getSitesWithPluginData()<\/code> y extraer\u00e1 los detalles del sitio cuando se monte el componente.<\/p>\n
              En el hook useEffect<\/code>, crea una funci\u00f3n que haga un bucle a trav\u00e9s de cada sitio para filtrar los sitios con plugins obsoletos y luego almacenarlos en el estado:<\/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
              En el c\u00f3digo anterior, observa que el estado de carga tambi\u00e9n se crea y se establece en true<\/code> por defecto. Se utilizar\u00e1 para controlar c\u00f3mo se muestran los datos. Cuando se hayan cargado todos los datos, lo establecemos en false<\/code>.<\/p>\n
              A continuaci\u00f3n se muestra un marcado para mostrar los datos del sitio y los plugins dentro de tu interfaz de usuario.<\/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
              El c\u00f3digo incluye una cabecera con un logotipo y un p\u00e1rrafo informativo. El contenido de la interfaz de usuario se muestra condicionalmente en funci\u00f3n del estado de isLoading<\/code>. Si los datos a\u00fan se est\u00e1n cargando, muestra un mensaje de carga. Una vez cargados los datos, presenta los datos sobre los sitios y los plugins que requieren actualizaciones.<\/p>\n
              Tambi\u00e9n ver\u00e1s un componente: PluginPage<\/code> (PluginPage.jsx<\/strong>). Este componente est\u00e1 dise\u00f1ado para mostrar sitios individuales y los detalles de sus plugins. Incluye una funci\u00f3n para cambiar la visibilidad de los detalles de los plugins.<\/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