{"id":68294,"date":"2024-05-14T11:44:33","date_gmt":"2024-05-14T14:44:33","guid":{"rendered":"https:\/\/kinsta.com\/pt\/?p=68294&preview=true&preview_id=68294"},"modified":"2024-05-29T09:46:28","modified_gmt":"2024-05-29T12:46:28","slug":"criar-extensao-chrome","status":"publish","type":"post","link":"https:\/\/kinsta.com\/pt\/blog\/criar-extensao-chrome\/","title":{"rendered":"Como Criar uma Extens\u00e3o do Chrome para Gerenciar os Plugins do seu Site com a API da Kinsta e o React"},"content":{"rendered":"

Como usu\u00e1rio do Google Chrome<\/a>, voc\u00ea provavelmente j\u00e1 usou algumas extens\u00f5es nesse navegador. Voc\u00ea j\u00e1 se perguntou como elas s\u00e3o criadas, ou se voc\u00ea poderia criar uma?<\/p>\n

Este artigo orienta voc\u00ea no processo de cria\u00e7\u00e3o de uma extens\u00e3o do Chrome, especificamente uma que usa o React e a API da Kinsta para gerenciar plugins em sites WordPress hospedados na Kinsta.<\/p>\n

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

O que \u00e9 uma extens\u00e3o do Chrome?<\/h2>\n

Uma extens\u00e3o do Chrome \u00e9 um programa instalado no navegador Chrome que aprimora sua funcionalidade. As extens\u00f5es podem variar de simples bot\u00f5es de \u00edcones na barra de ferramentas a recursos totalmente integrados que interagem profundamente com sua experi\u00eancia de navega\u00e7\u00e3o.<\/p>\n

Como criar uma extens\u00e3o do Chrome<\/h2>\n

A cria\u00e7\u00e3o de uma extens\u00e3o do Chrome \u00e9 semelhante ao desenvolvimento de um aplicativo web<\/a>, mas requer um arquivo formatado em JSON chamado manifest.json<\/strong>. Esse arquivo funciona como a espinha dorsal da extens\u00e3o, determinando suas configura\u00e7\u00f5es, as permiss\u00f5es e as funcionalidades que voc\u00ea deseja incluir.<\/p>\n

Para come\u00e7ar, crie uma pasta que conter\u00e1 todos os arquivos da extens\u00e3o. Em seguida, crie um arquivo manifest.json<\/strong> na pasta.<\/p>\n

Um arquivo manifest.json<\/strong> b\u00e1sico para uma extens\u00e3o do Chrome inclui as principais propriedades que definem as configura\u00e7\u00f5es b\u00e1sicas da extens\u00e3o. Abaixo est\u00e1 um exemplo de um arquivo manifest.json<\/strong> que inclui os campos necess\u00e1rios para funcionar:<\/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
Voc\u00ea pode carregar e testar isso como uma extens\u00e3o descompactada do Chrome. Navegue at\u00e9 chrome:\/\/extensions<\/code> em seu navegador, alterne para o Developer mode <\/strong>e clique no bot\u00e3o Load Unpacked<\/strong> (Carregar descompactado). Isso abrir\u00e1 um navegador de arquivos, e voc\u00ea poder\u00e1 selecionar o diret\u00f3rio que criou para a sua extens\u00e3o.<\/p>\n
\"Carregue
Carregue uma extens\u00e3o do Chrome clicando em Load unpacked no modo de desenvolvedor.<\/figcaption><\/figure>\n
Quando voc\u00ea clicar no \u00edcone da extens\u00e3o, nada acontecer\u00e1, porque voc\u00ea n\u00e3o criou uma interface de usu\u00e1rio.<\/p>\n
Crie uma interface de usu\u00e1rio (pop-up) para sua extens\u00e3o do Chrome<\/h3>\n
Como em todo aplicativo web, a interface do usu\u00e1rio (IU) da sua extens\u00e3o usa HTML<\/a> para estruturar o conte\u00fado, CSS<\/a> para estiliz\u00e1-lo e JavaScript<\/a> para adicionar interatividade.<\/p>\n
Vamos criar uma IU b\u00e1sica usando todos esses arquivos. Comece criando um arquivo HTML (popup.html<\/strong>). Esse arquivo define a estrutura dos elementos da sua interface do usu\u00e1rio, como texto, cabe\u00e7alhos, imagens e bot\u00f5es. Adicione o seguinte 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
O c\u00f3digo acima cria um t\u00edtulo, um par\u00e1grafo e um bot\u00e3o. Os arquivos CSS e JavaScript tamb\u00e9m est\u00e3o vinculados. Agora, adicione alguns estilos no arquivo 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
Em seguida, no arquivo popup.js<\/strong>, adicione um ouvinte de eventos ao bot\u00e3o para que, quando ele for clicado, seja exibido um 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
Esse c\u00f3digo JavaScript recupera a aba ativa atual e usa a API de scripts do Chrome<\/a> para executar um script que exibe um alerta com uma mensagem de sauda\u00e7\u00e3o quando o bot\u00e3o Say Hello<\/strong> \u00e9 clicado. Isso introduz uma interatividade b\u00e1sica em sua extens\u00e3o do Chrome.<\/p>\n
Com essas etapas, voc\u00ea configurou uma interface de usu\u00e1rio pop-up simples para sua extens\u00e3o do Chrome que inclui texto, estilo e funcionalidade b\u00e1sicos.<\/p>\n
Por fim, voc\u00ea precisa ativar o arquivo pop-up no arquivo manifest.json<\/strong> adicionando algumas permiss\u00f5es:<\/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
Na configura\u00e7\u00e3o acima, a chave default_popup<\/code> especifica que popup.html<\/strong> ser\u00e1 a interface do usu\u00e1rio (UI) padr\u00e3o quando o usu\u00e1rio interagir com a extens\u00e3o. O array permissions<\/code> inclui scripting<\/code> e tabs<\/code>, essenciais para que a extens\u00e3o interaja com as abas e use os recursos de script do navegador.<\/p>\n
O array host_permissions<\/code> especifica com quais sites sua extens\u00e3o pode interagir. Os padr\u00f5es http:\/\/*\/*<\/code> e https:\/\/*\/*<\/code> indicam que a sua extens\u00e3o pode interagir com todos os sites acessados pelos protocolos HTTP e HTTPS.<\/p>\n
Com essas configura\u00e7\u00f5es em seu arquivo manifest.json<\/strong>, sua extens\u00e3o do Chrome est\u00e1 configurada corretamente para exibir um pop-up e executar scripts.<\/p>\n
Recarregue sua extens\u00e3o do Chrome<\/h3>\n
Com essas altera\u00e7\u00f5es efetuadas em sua pasta local, voc\u00ea precisa atualizar a pasta descompactada carregada no Chrome. Para fazer isso, abra a p\u00e1gina de extens\u00f5es do Chrome, localize sua extens\u00e3o e clique no \u00edcone de recarregar.<\/p>\n
\"Clique
Clique no \u00edcone de atualiza\u00e7\u00e3o para recarregar a extens\u00e3o.<\/figcaption><\/figure>\n
Em seguida, voc\u00ea pode clicar no \u00edcone da extens\u00e3o, e uma janela pop-up ser\u00e1 exibida. Quando voc\u00ea clicar no bot\u00e3o Say Hello<\/strong>, um alerta ser\u00e1 exibido.<\/p>\n
Agora voc\u00ea tem um conhecimento b\u00e1sico de como come\u00e7ar a criar uma extens\u00e3o do Chrome. E d\u00e1 pra fazer muito mais. Voc\u00ea pode manipular a interface do usu\u00e1rio do seu site, fazer solicita\u00e7\u00f5es de API, recuperar dados de URLs para executar opera\u00e7\u00f5es espec\u00edficas, e muito mais.<\/p>\n
Como criar uma extens\u00e3o do Chrome com o React<\/h2>\n
Como mencionamos anteriormente, a cria\u00e7\u00e3o de uma extens\u00e3o do Chrome \u00e9 semelhante \u00e0 cria\u00e7\u00e3o de um aplicativo web. Voc\u00ea pode usar frameworks web populares como o React<\/a>.<\/p>\n
Para o React, o arquivo manifest.json<\/strong> \u00e9 criado na pasta public<\/strong>. Essa pasta \u00e9 usada para ativos est\u00e1ticos que voc\u00ea n\u00e3o deseja que sejam processados pelo Webpack<\/a> (ou pacotes semelhantes que o React pode usar internamente em ferramentas como Create React App<\/a>).<\/p>\n
Quando voc\u00ea cria seu aplicativo React, o processo de build copia todo o conte\u00fado da pasta public<\/strong>\u00a0para a pasta dist<\/strong>. Eis como voc\u00ea pode criar uma extens\u00e3o do Chrome com o React:<\/p>\n
    \n
  1. Crie um novo aplicativo React. Voc\u00ea pode usar o ambiente de desenvolvimento local Vite executando o seguinte comando em seu terminal:<\/li>\n<\/ol>\n
    npm create vite@latest<\/code><\/pre>\n
    Em seguida, d\u00ea um nome ao seu projeto e selecione React como framework. Feito isso, navegue at\u00e9 a pasta do projeto e instale as depend\u00eancias:<\/p>\n
    cd <project-name>\nnpm install<\/code><\/pre>\n
      \n
    1. Na pasta public<\/strong>\u00a0do seu projeto React, crie um arquivo manifest.json<\/strong>. Adicione as seguintes configura\u00e7\u00f5es:<\/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
      A configura\u00e7\u00e3o de uma extens\u00e3o do Chrome inclui um objeto action<\/code> que define index.html<\/strong> como o pop-up padr\u00e3o quando voc\u00ea clica no \u00edcone da extens\u00e3o. Esse \u00e9 o arquivo HTML est\u00e1tico gerado quando voc\u00ea cria seu aplicativo React.<\/p>\n
        \n
      1. Desenvolva o aplicativo React. Sinta-se \u00e0 vontade para fazer solicita\u00e7\u00f5es de API, estiliz\u00e1-las como desejar, usar hooks do React, e mais.<\/li>\n<\/ol>\n
          \n
        1. Quando voc\u00ea terminar de criar a interface do usu\u00e1rio da extens\u00e3o, execute o comando de build no React (npm run build<\/code>). Todos os seus ativos, inclusive o arquivo manifest.json<\/strong>, o index.html<\/strong> gerado pelo React, e outros, s\u00e3o movidos para a pasta dist<\/strong> ou build<\/strong>.<\/li>\n
        2. Por fim, carregue sua extens\u00e3o no Chrome. Navegue at\u00e9 chrome:\/\/extensions\/<\/code> e recarregue sua extens\u00e3o.<\/li>\n<\/ol>\n
          Criando uma extens\u00e3o do Chrome para gerenciar os plugins do seu site com a API da Kinsta<\/h2>\n
          Esta \u00e9 a apar\u00eancia da extens\u00e3o do Chrome que voc\u00ea criar\u00e1:<\/p>\n
          \"Extens\u00e3o
          Extens\u00e3o do Chrome criada com React interagindo com a API da Kinsta.<\/figcaption><\/figure>\n
          Quando clicada, a extens\u00e3o exibe uma lista de sites com plugins desatualizados em sua conta MyKinsta<\/a>. Voc\u00ea pode ver uma lista dos plugins e clicar no bot\u00e3o View in MyKinsta<\/strong> para navegar at\u00e9 a p\u00e1gina Themes & Plugins<\/a> do site, onde poder\u00e1 atualizar cada plugin.<\/p>\n
          Vamos explorar como voc\u00ea pode criar a extens\u00e3o do Chrome.<\/p>\n
          Entendendo a API da Kinsta<\/h3>\n
          A API da Kinsta<\/a> \u00e9 uma ferramenta poderosa que permite que voc\u00ea interaja de forma program\u00e1tica com os servi\u00e7os da Kinsta, como sites WordPress hospedados. Pode ajud\u00e1-lo a automatizar v\u00e1rias tarefas relacionadas ao gerenciamento de WordPress, incluindo cria\u00e7\u00e3o de sites<\/a>, recupera\u00e7\u00e3o de informa\u00e7\u00f5es do site<\/a>, obter o status de um site<\/a>, navega\u00e7\u00e3o<\/a> e restaura\u00e7\u00e3o de backups<\/a>, e muito mais.<\/p>\n
          Para usar a API da Kinsta, voc\u00ea deve ter uma conta com pelo menos um site, aplicativo<\/a> ou banco de dados<\/a> WordPress no MyKinsta. Voc\u00ea tamb\u00e9m deve gerar uma chave de API para autenticar e acessar sua conta.<\/p>\n
          Para gerar uma chave de API:<\/p>\n
            \n
          1. V\u00e1 para o painel MyKinsta<\/a>.<\/li>\n
          2. Navegue at\u00e9 a p\u00e1gina Chaves API (Seu nome<\/strong> > Configura\u00e7\u00f5es da empresa <\/strong>> Chaves API<\/strong>).<\/li>\n
          3. Clique em Criar chave de API<\/strong>.<\/li>\n
          4. Escolha uma expira\u00e7\u00e3o ou defina uma data de in\u00edcio personalizada e o n\u00famero de horas para a chave expirar.<\/li>\n
          5. D\u00ea \u00e0 chave um nome exclusivo.<\/li>\n
          6. Clique em Gerar<\/strong>.<\/li>\n<\/ol>\n
            Depois de criar uma chave de API, copie-a e armazene-a em um local seguro (recomenda-se usar um gerenciador de senhas<\/a>). Voc\u00ea pode gerar v\u00e1rias chaves API, que ser\u00e3o listadas na p\u00e1gina Chaves API<\/strong>. Se voc\u00ea precisar revogar uma chave de API, clique no bot\u00e3o Revogar<\/strong>.<\/p>\n
            Gerencie os plugins do seu site com a API da Kinsta e o React<\/h2>\n
            Vamos come\u00e7ar desenvolvendo uma interface de usu\u00e1rio em React, que ser\u00e1 transformada em uma extens\u00e3o do Chrome. Este guia pressup\u00f5e familiaridade b\u00e1sica com o React e a intera\u00e7\u00e3o com a API.<\/p>\n
            Configurando o ambiente<\/h3>\n
            Primeiramente, no arquivo App.jsx<\/strong>, defina uma constante para a URL da API da Kinsta para evitar redund\u00e2ncia em seu c\u00f3digo:<\/p>\n
            const KinstaAPIUrl = 'https:\/\/api.kinsta.com\/v2';<\/code><\/pre>\n
            Por seguran\u00e7a, armazene dados confidenciais, como a chave de API e o ID da empresa na Kinsta, em um arquivo .env.local<\/strong> para mant\u00ea-los seguros e fora do seu c\u00f3digo-fonte:<\/p>\n
            VITE_KINSTA_COMPANY_ID=YOUR_COMPANY_ID\nVITE_KINSTA_API_KEY=YOUR_API_KEY<\/code><\/pre>\n
            Obtenha dados com a API da Kinsta<\/h3>\n
            No arquivo App.jsx<\/strong>, voc\u00ea precisa fazer v\u00e1rias solicita\u00e7\u00f5es \u00e0 API da Kinsta para recuperar informa\u00e7\u00f5es sobre sites e seus plugins.<\/p>\n
              \n
            1. Recupere sites da empresa:<\/strong> Comece obtendo uma lista de sites associados \u00e0 conta da sua empresa na Kinsta. Use o ID da empresa em uma solicita\u00e7\u00e3o GET, que retorna um array de detalhes do site.\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. Obtenha os dados de ambiente para cada site:<\/strong> Para cada site, recupere os ambientes, que incluem o ID do ambiente necess\u00e1rio para outras solicita\u00e7\u00f5es. Isso envolve o mapeamento de cada site e a realiza\u00e7\u00e3o de uma chamada de API para o 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. Recupere os plugins para cada ambiente de site:<\/strong> Por fim, use o ID do ambiente para buscar plugins para cada site. Essa etapa envolve uma fun\u00e7\u00e3o de mapeamento e uma chamada de API para o endpoint \/sites\/environments\/${environmentId}\/plugins<\/code> de cada 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
              Agora voc\u00ea pode reunir todas essas solicita\u00e7\u00f5es em uma fun\u00e7\u00e3o usada para retornar o array final de sites com detalhes b\u00e1sicos sobre cada site e seus 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
              Exibindo dados do site<\/h3>\n
              Crie um estado com o hook useState<\/code> para armazenar sites com plugins desatualizados. O hook useEffect<\/code> tamb\u00e9m chamar\u00e1 o m\u00e9todo getSitesWithPluginData()<\/code> e extrair\u00e1 os detalhes do site quando o componente for montado.<\/p>\n
              No hook useEffect<\/code>, crie uma fun\u00e7\u00e3o que far\u00e1 um loop em cada site para filtrar os sites com plugins desatualizados e, em seguida, armazen\u00e1-los no 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
              No c\u00f3digo acima, voc\u00ea percebe que o estado de carregamento tamb\u00e9m \u00e9 criado e definido como true<\/code> por padr\u00e3o. Este ser\u00e1 usado para controlar como os dados s\u00e3o exibidos. Quando todos os dados s\u00e3o carregados, definimos como false<\/code>.<\/p>\n
              Abaixo voc\u00ea encontra uma marca\u00e7\u00e3o para renderizar os dados do site e os plugins na interface do usu\u00e1rio.<\/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
              O c\u00f3digo inclui um cabe\u00e7alho com uma logo e um par\u00e1grafo informativo. O conte\u00fado da interface do usu\u00e1rio \u00e9 renderizado condicionalmente com base no estado de isLoading<\/code>. Se os dados ainda estiverem sendo carregados, ser\u00e1 exibida uma mensagem de carregamento. Depois que os dados s\u00e3o carregados, ele apresenta os dados sobre os sites e todos os plugins que exigem atualiza\u00e7\u00f5es.<\/p>\n
              Voc\u00ea tamb\u00e9m notar\u00e1 um componente: PluginPage<\/code> (PluginPage.jsx<\/strong>). Esse componente foi projetado para exibir sites individuais e os detalhes dos seus plugins. Inclui uma funcionalidade para alternar a visibilidade dos detalhes do 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