{"id":70046,"date":"2024-05-14T15:42:23","date_gmt":"2024-05-14T14:42:23","guid":{"rendered":"https:\/\/kinsta.com\/de\/?p=70046&preview=true&preview_id=70046"},"modified":"2024-05-24T14:46:10","modified_gmt":"2024-05-24T13:46:10","slug":"chrome-erweiterung-erstellen","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/chrome-erweiterung-erstellen\/","title":{"rendered":"Wie du mit der Kinsta API und React eine Chrome-Erweiterung zur Verwaltung der Plugins deiner Website erstellst"},"content":{"rendered":"

Als Nutzer von Google Chrome<\/a> hast du wahrscheinlich schon einige Erweiterungen in diesem Browser verwendet. Hast du dich jemals gefragt, wie sie aufgebaut sind oder ob du selbst eine bauen k\u00f6nntest?<\/p>\n

In diesem Artikel erf\u00e4hrst du, wie du eine Chrome-Erweiterung erstellst, und zwar eine, die React und die Kinsta-API nutzt, um Plugins auf WordPress-Websites zu verwalten, die bei Kinsta gehostet werden.<\/p>\n

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

Was ist eine Chrome-Erweiterung?<\/h2>\n

Eine Chrome-Erweiterung ist ein Programm, das im Chrome-Browser installiert wird und dessen Funktionen erweitert. Erweiterungen k\u00f6nnen von einfachen Symbolschaltfl\u00e4chen in der Symbolleiste bis hin zu vollst\u00e4ndig integrierten Funktionen reichen, die tief in dein Browsing-Erlebnis eingreifen.<\/p>\n

Wie man eine Chrome-Erweiterung erstellt<\/h2>\n

Die Erstellung einer Chrome-Erweiterung ist \u00e4hnlich wie die Entwicklung einer Webanwendung<\/a>, erfordert aber eine JSON-formatierte Datei namens manifest.json<\/strong>. Diese Datei ist das R\u00fcckgrat der Erweiterung und legt die Einstellungen, Berechtigungen und Funktionen fest, die du integrieren m\u00f6chtest.<\/p>\n

Als Erstes erstellst du einen Ordner, in dem alle Dateien deiner Erweiterung gespeichert werden. Als N\u00e4chstes erstellst du eine manifest.json-Datei<\/strong> in diesem Ordner.<\/p>\n

Eine grundlegende manifest.json-Datei<\/strong> f\u00fcr eine Chrome-Erweiterung enth\u00e4lt wichtige Eigenschaften, die die Grundeinstellungen der Erweiterung festlegen. Im Folgenden findest du ein Beispiel f\u00fcr eine manifest.json-Datei<\/strong>, die die notwendigen Felder enth\u00e4lt, damit sie funktioniert:<\/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
Du kannst sie als entpackte Erweiterung in Chrome laden und testen. Navigiere in deinem Browser zu chrome:\/\/extensions<\/code>, schalte den Entwicklermodus<\/strong> ein und klicke dann auf die Schaltfl\u00e4che Load Unpacked<\/strong>. Daraufhin \u00f6ffnet sich ein Dateibrowser, in dem du das Verzeichnis ausw\u00e4hlen kannst, das du f\u00fcr deine Erweiterung erstellt hast.<\/p>\n
\"Lade
Lade eine Chrome-Erweiterung, indem du im Entwicklermodus auf Load unpacked klickst<\/figcaption><\/figure>\n
Wenn du auf das Erweiterungssymbol klickst, passiert nichts, weil du noch keine Benutzeroberfl\u00e4che erstellt hast.<\/p>\n
Erstelle eine Benutzeroberfl\u00e4che (Popup) f\u00fcr deine Chrome-Erweiterung<\/h3>\n
Wie bei jeder Webanwendung verwendet auch die Benutzeroberfl\u00e4che (UI) deiner Erweiterung HTML<\/a>, um den Inhalt zu strukturieren, CSS<\/a>, um ihn zu gestalten, und JavaScript<\/a>, um Interaktivit\u00e4t hinzuzuf\u00fcgen.<\/p>\n
Lass uns eine einfache Benutzeroberfl\u00e4che mit all diesen Dateien erstellen. Beginne mit der Erstellung einer HTML-Datei (popup.html<\/strong>). Diese Datei legt die Struktur deiner UI-Elemente fest, z. B. Text, \u00dcberschriften, Bilder und Schaltfl\u00e4chen. F\u00fcge den folgenden Code ein:<\/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
Der obige Code erstellt eine \u00dcberschrift, einen Absatz und eine Schaltfl\u00e4che. Die CSS- und JavaScript-Dateien sind ebenfalls verlinkt. F\u00fcge nun einige Stile in der Datei popup.css<\/strong> hinzu:<\/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
Als N\u00e4chstes f\u00fcgst du in der Datei popup.js<\/strong> einen Event-Listener f\u00fcr die Schaltfl\u00e4che hinzu, damit beim Anklicken der Schaltfl\u00e4che eine Warnmeldung angezeigt wird:<\/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
Dieser JavaScript-Code ruft die aktuell aktive Registerkarte ab und verwendet die Chrome Scripting API<\/a>, um ein Skript auszuf\u00fchren, das eine Benachrichtigung mit einer Begr\u00fc\u00dfungsnachricht anzeigt, wenn die Schaltfl\u00e4che Hallo<\/strong>\u00a0angeklickt wird. So erh\u00e4lt deine Chrome-Erweiterung eine grundlegende Interaktivit\u00e4t.<\/p>\n
Mit diesen Schritten hast du eine einfache Popup-Benutzeroberfl\u00e4che f\u00fcr deine Chrome-Erweiterung eingerichtet, die grundlegenden Text, Design und Funktionen enth\u00e4lt.<\/p>\n
Zum Schluss musst du die Popup-Datei in der manifest.json-Datei<\/strong> aktivieren, indem du einige Berechtigungen hinzuf\u00fcgst:<\/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
In der obigen Konfiguration legt der Schl\u00fcssel default_popup<\/code> fest, dass popup.html<\/strong> die Standard-Oberfl\u00e4che ist, wenn der Nutzer mit der Erweiterung interagiert. Das Array permissions<\/code> enth\u00e4lt scripting<\/code> und tabs<\/code>, die wichtig sind, damit die Erweiterung mit den Tabs interagieren und die Skripting-Funktionen des Browsers nutzen kann.<\/p>\n
Das Array host_permissions<\/code> gibt an, mit welchen Seiten deine Erweiterung interagieren kann. Die Muster http:\/\/*\/*<\/code> und https:\/\/*\/*<\/code> zeigen an, dass deine Erweiterung mit allen Websites interagieren kann, die \u00fcber HTTP- und HTTPS-Protokolle aufgerufen werden.<\/p>\n
Mit diesen Einstellungen in deiner manifest.json-Datei<\/strong> ist deine Chrome-Erweiterung richtig konfiguriert, um ein Popup anzuzeigen und Skripte auszuf\u00fchren.<\/p>\n
Lade deine Chrome-Erweiterung neu<\/h3>\n
Nachdem diese \u00c4nderungen in deinem lokalen Ordner vorgenommen wurden, musst du den entpackten Ordner aktualisieren, der in Chrome geladen wurde. \u00d6ffne dazu die Seite mit den Chrome-Erweiterungen, suche deine Erweiterung und klicke auf das Symbol zum Neuladen.<\/p>\n
\"Klicke
Klicke auf das Aktualisierungssymbol, um die Erweiterung neu zu laden<\/figcaption><\/figure>\n
Du kannst dann auf das Erweiterungssymbol klicken, woraufhin ein Popup erscheint. Wenn du auf die Schaltfl\u00e4che Hallo sagen<\/strong> klickst, erscheint eine Meldung.<\/p>\n
Du wei\u00dft jetzt, wie du eine Chrome-Erweiterung erstellen kannst. Es gibt noch mehr, was du tun kannst. Du kannst die Benutzeroberfl\u00e4che deiner Website ver\u00e4ndern, API-Anfragen stellen, Daten von URLs abrufen, um bestimmte Aktionen durchzuf\u00fchren und vieles mehr.<\/p>\n
So erstellst du eine Chrome-Erweiterung mit React<\/h2>\n
Wie wir bereits erw\u00e4hnt haben, ist die Erstellung einer Chrome-Erweiterung \u00e4hnlich wie die Erstellung einer Webanwendung. Du kannst beliebte Web-Frameworks wie React<\/a> verwenden.<\/p>\n
Bei React wird die Datei manifest.json<\/strong> im Ordner public<\/strong> erstellt. Dieser Ordner wird f\u00fcr statische Assets verwendet, die nicht von Webpack<\/a> (oder \u00e4hnlichen Bundlern, die React unter der Haube in Tools wie Create React App<\/a> verwenden kann) verarbeitet werden sollen.<\/p>\n
Wenn du deine React-Anwendung baust, kopiert der Build-Prozess alle Inhalte des \u00f6ffentlichen<\/strong> Ordners in den dist-Ordner<\/strong>. Hier erf\u00e4hrst du, wie du eine Chrome-Erweiterung mit React erstellst:<\/p>\n
    \n
  1. Erstelle eine neue React-Anwendung. Du kannst die lokale Entwicklungsumgebung Vite verwenden, indem du den folgenden Befehl in deinem Terminal ausf\u00fchrst:<\/li>\n<\/ol>\n
    npm create vite@latest<\/code><\/pre>\n
    Als N\u00e4chstes gibst du deinem Projekt einen Namen und w\u00e4hlst React als Framework aus. Sobald das erledigt ist, navigierst du in den Projektordner und installierst die Abh\u00e4ngigkeiten:<\/p>\n
    cd <project-name>\nnpm install<\/code><\/pre>\n
      \n
    1. Erstelle im \u00f6ffentlichen<\/strong> Ordner deines React-Projekts eine manifest.json-Datei<\/strong>. F\u00fcge die folgenden Konfigurationen hinzu:<\/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
      Die Konfiguration f\u00fcr eine Chrome-Erweiterung enth\u00e4lt ein action<\/code> Objekt, das index.html<\/strong> als Standard-Popup festlegt, wenn das Erweiterungssymbol angeklickt wird. Dies ist die statische HTML-Datei, die erzeugt wird, wenn du deine React-Anwendung erstellst.<\/p>\n
        \n
      1. Entwickle die React-Anwendung. Du kannst API-Anfragen stellen, sie nach Belieben gestalten, React Hooks verwenden und vieles mehr.<\/li>\n<\/ol>\n
          \n
        1. Wenn du mit der Erstellung der Benutzeroberfl\u00e4che der Erweiterung fertig bist, f\u00fchre den Build-Befehl in React aus (npm run build<\/code>). Alle Assets, einschlie\u00dflich der manifest.json-Datei<\/strong>, der mit React erstellten index.html<\/strong> und anderen, werden in den dist-<\/strong> oder build-Ordner<\/strong> verschoben.<\/li>\n
        2. Zum Schluss l\u00e4dst du deine Erweiterung in Chrome. Navigiere zu chrome:\/\/extensions\/<\/code> und lade deine Erweiterung erneut.<\/li>\n<\/ol>\n
          Erstellen einer Chrome-Erweiterung zur Verwaltung der Plugins deiner Website mit der Kinsta-API<\/h2>\n
          So sieht die Chrome-Erweiterung aus, die du erstellen wirst:<\/p>\n
          \"Eine
          Eine mit React erstellte Chrome-Erweiterung, die mit der Kinsta-API interagiert<\/figcaption><\/figure>\n
          Wenn du darauf klickst, zeigt die Erweiterung eine Liste der Websites mit veralteten Plugins in deinem MyKinsta-Konto<\/a> an. Du kannst eine Liste der Plugins sehen und auf die Schaltfl\u00e4che In MyKinsta anzeigen<\/strong> klicken, um zur Seite Themes & Plugins<\/a> der Seite zu navigieren, wo du jedes Plugin aktualisieren kannst.<\/p>\n
          Sehen wir uns an, wie du die Chrome-Erweiterung erstellen kannst.<\/p>\n
          Die Kinsta-API verstehen<\/h3>\n
          Die Kinsta-API<\/a> ist ein leistungsstarkes Werkzeug, mit dem du programmatisch mit Kinsta-Diensten wie gehosteten WordPress-Seiten interagieren kannst. Sie kann dir helfen, verschiedene Aufgaben im Zusammenhang mit der WordPress-Verwaltung zu automatisieren, z. B. die Erstellung von Websites<\/a>, das Abrufen von Website-Informationen<\/a>, den Status einer Website<\/a>, das Durchsuchen<\/a> und Wiederherstellen von Backups<\/a> und vieles mehr.<\/p>\n
          Um die Kinsta-API zu nutzen, musst du ein Konto mit mindestens einer WordPress-Website, -Anwendung<\/a> oder -Datenbank<\/a> in MyKinsta haben. Au\u00dferdem musst du einen API-Schl\u00fcssel erstellen, um dich zu authentifizieren und auf dein Konto zuzugreifen.<\/p>\n
          So generierst du einen API-Schl\u00fcssel:<\/p>\n
            \n
          1. Gehe zu deinem MyKinsta-Dashboard<\/a>.<\/li>\n
          2. Navigiere zur Seite mit den API-Schl\u00fcsseln (Dein Name<\/strong> > Unternehmenseinstellungen <\/strong>> API-Schl\u00fcssel<\/strong>).<\/li>\n
          3. Klicke auf API-Schl\u00fcssel generieren<\/strong>.<\/li>\n
          4. W\u00e4hle ein Ablaufdatum oder lege ein benutzerdefiniertes Startdatum und die Anzahl der Stunden fest, nach denen der Schl\u00fcssel abl\u00e4uft.<\/li>\n
          5. Gib dem Schl\u00fcssel einen eindeutigen Namen.<\/li>\n
          6. Klicke auf Generieren<\/strong>.<\/li>\n<\/ol>\n
            Nachdem du einen API-Schl\u00fcssel generiert hast, kopiere ihn und bewahre ihn an einem sicheren Ort auf (es wird empfohlen, einen Passwortmanager<\/a> zu verwenden). Du kannst mehrere API-Schl\u00fcssel erstellen, die dann auf der Seite API-Schl\u00fcssel<\/strong> aufgelistet werden. Wenn du einen API-Schl\u00fcssel widerrufen musst, klicke auf die Schaltfl\u00e4che Widerrufen<\/strong>.<\/p>\n
            Verwalte die Plugins deiner Website mit Kinsta API und React<\/h2>\n
            Wir beginnen mit der Entwicklung einer Benutzeroberfl\u00e4che in React, die dann in eine Chrome-Erweiterung umgewandelt wird. In dieser Anleitung werden grundlegende Kenntnisse \u00fcber React und die Interaktion mit der API vorausgesetzt.<\/p>\n
            Einrichten der Umgebung<\/h3>\n
            Definiere zun\u00e4chst in der Datei App.jsx<\/strong> eine Konstante f\u00fcr die Kinsta-API-URL, um Redundanz in deinem Code zu vermeiden:<\/p>\n
            const KinstaAPIUrl = 'https:\/\/api.kinsta.com\/v2';<\/code><\/pre>\n
            Aus Sicherheitsgr\u00fcnden solltest du sensible Daten wie deinen API-Schl\u00fcssel und die Kinsta-Firmen-ID in einer .env.local-Datei<\/strong> speichern, damit sie sicher sind und nicht in deinen Quellcode gelangen:<\/p>\n
            VITE_KINSTA_COMPANY_ID=YOUR_COMPANY_ID\nVITE_KINSTA_API_KEY=YOUR_API_KEY<\/code><\/pre>\n
            Daten mit der Kinsta-API abrufen<\/h3>\n
            In der App.jsx-Datei<\/strong> musst du mehrere Anfragen an die Kinsta-API stellen, um Informationen \u00fcber Websites und ihre Plugins abzurufen.<\/p>\n
              \n
            1. Abrufen von Unternehmenswebsites:<\/strong> Beginne damit, eine Liste der Websites abzurufen, die mit deinem Kinsta-Unternehmenskonto verbunden sind. Verwende die Unternehmens-ID in einer GET-Anfrage, die ein Array mit Standortdetails zur\u00fcckgibt.\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. Rufe die Umgebungsdaten f\u00fcr jede Website ab:<\/strong> Rufe f\u00fcr jeden Standort die Umgebungen ab, einschlie\u00dflich der Umgebungs-ID, die f\u00fcr weitere Anfragen ben\u00f6tigt wird. Dazu musst du jede Webiste zuordnen und einen API-Aufruf an den Endpunkt \/sites\/${siteId}\/environments<\/code> t\u00e4tigen.\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. Abrufen von Plugins f\u00fcr jede Seiten-Umgebung:<\/strong> Schlie\u00dflich verwendest du die Umgebungs-ID, um Plugins f\u00fcr jede Website abzurufen. Dieser Schritt umfasst eine Zuordnungsfunktion und einen API-Aufruf an den Endpunkt \/sites\/environments\/${environmentId}\/plugins<\/code> f\u00fcr jede Umgebung.\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
              Du kannst nun alle diese Anfragen in einer Funktion zusammenfassen, die das endg\u00fcltige Array der Websites mit grundlegenden Informationen \u00fcber jede Website und ihre Plugins zur\u00fcckgibt:<\/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
              Anzeige der Website-Daten<\/h3>\n
              Erstelle einen Status mit dem useState<\/code> Hook, um Websites mit veralteten Plugins zu speichern. Der useEffect<\/code> Hook ruft auch die getSitesWithPluginData()<\/code> Methode auf und extrahiert die Websitedaten, wenn die Komponente montiert wird.<\/p>\n
              Erstelle im useEffect<\/code> Hook eine Funktion, die in einer Schleife alle Websites mit veralteten Plugins herausfiltert und sie dann im Status speichert:<\/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
              Im obigen Code siehst du, dass auch der Ladezustand erstellt und standardm\u00e4\u00dfig auf true<\/code> gesetzt wird. Damit wird gesteuert, wie die Daten angezeigt werden. Wenn alle Daten geladen sind, setzen wir ihn auf false<\/code>.<\/p>\n
              Unten findest du ein Markup, mit dem du die Daten der Website und die Plugins in deiner Benutzeroberfl\u00e4che darstellen kannst.<\/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
              Der Code enth\u00e4lt eine Kopfzeile mit einem Logo und einem informativen Absatz. Der Inhalt der Benutzeroberfl\u00e4che wird abh\u00e4ngig vom Zustand von isLoading<\/code> dargestellt. Wenn die Daten noch nicht geladen sind, wird eine Ladebest\u00e4tigung angezeigt. Sobald die Daten geladen sind, werden die Daten \u00fcber die Websites und alle Plugins, die aktualisiert werden m\u00fcssen, angezeigt.<\/p>\n
              Du wirst auch eine Komponente bemerken: PluginPage<\/code> (PluginPage.jsx<\/strong>). Diese Komponente dient dazu, einzelne Websites und ihre Plugin-Details anzuzeigen. Sie enth\u00e4lt eine Funktion, mit der die Sichtbarkeit der Plugin-Details umgeschaltet werden kann.<\/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