Als Nutzer von Google Chrome 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önntest?
In diesem Artikel erfährst 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.
Was ist eine Chrome-Erweiterung?
Eine Chrome-Erweiterung ist ein Programm, das im Chrome-Browser installiert wird und dessen Funktionen erweitert. Erweiterungen können von einfachen Symbolschaltflächen in der Symbolleiste bis hin zu vollständig integrierten Funktionen reichen, die tief in dein Browsing-Erlebnis eingreifen.
Wie man eine Chrome-Erweiterung erstellt
Die Erstellung einer Chrome-Erweiterung ist ähnlich wie die Entwicklung einer Webanwendung, erfordert aber eine JSON-formatierte Datei namens manifest.json. Diese Datei ist das Rückgrat der Erweiterung und legt die Einstellungen, Berechtigungen und Funktionen fest, die du integrieren möchtest.
Als Erstes erstellst du einen Ordner, in dem alle Dateien deiner Erweiterung gespeichert werden. Als Nächstes erstellst du eine manifest.json-Datei in diesem Ordner.
Eine grundlegende manifest.json-Datei für eine Chrome-Erweiterung enthält wichtige Eigenschaften, die die Grundeinstellungen der Erweiterung festlegen. Im Folgenden findest du ein Beispiel für eine manifest.json-Datei, die die notwendigen Felder enthält, damit sie funktioniert:
{
"manifest_version": 3,
"name": "My Chrome extension",
"version": "1.0",
"description": "Here is a description for my Chrome extension."
}Du kannst sie als entpackte Erweiterung in Chrome laden und testen. Navigiere in deinem Browser zu chrome://extensions, schalte den Entwicklermodus ein und klicke dann auf die Schaltfläche Load Unpacked. Daraufhin öffnet sich ein Dateibrowser, in dem du das Verzeichnis auswählen kannst, das du für deine Erweiterung erstellt hast.
Wenn du auf das Erweiterungssymbol klickst, passiert nichts, weil du noch keine Benutzeroberfläche erstellt hast.
Erstelle eine Benutzeroberfläche (Popup) für deine Chrome-Erweiterung
Wie bei jeder Webanwendung verwendet auch die Benutzeroberfläche (UI) deiner Erweiterung HTML, um den Inhalt zu strukturieren, CSS, um ihn zu gestalten, und JavaScript, um Interaktivität hinzuzufügen.
Lass uns eine einfache Benutzeroberfläche mit all diesen Dateien erstellen. Beginne mit der Erstellung einer HTML-Datei (popup.html). Diese Datei legt die Struktur deiner UI-Elemente fest, z. B. Text, Überschriften, Bilder und Schaltflächen. Füge den folgenden Code ein:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hello World</title>
<link rel="stylesheet" href="popup.css" />
</head>
<body>
<h1>Hello World!</h1>
<p>My first Chrome Extension</p>
<button> id="sayHello">Say Hello</button>
<script> src="popup.js"></script>
</body>
</html>Der obige Code erstellt eine Überschrift, einen Absatz und eine Schaltfläche. Die CSS- und JavaScript-Dateien sind ebenfalls verlinkt. Füge nun einige Stile in der Datei popup.css hinzu:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background-color: aliceblue;
padding: 20px;
}Als Nächstes fügst du in der Datei popup.js einen Event-Listener für die Schaltfläche hinzu, damit beim Anklicken der Schaltfläche eine Warnmeldung angezeigt wird:
const sayHelloBtn = document.getElementById('sayHello');
sayHelloBtn.addEventListener('click', async () => {
let tab = await chrome.tabs.query({ active: true });
chrome.scripting.executeScript({
target: { tabId: tab[0].id },
function: () => alert('Hello from the extension!'),
});
});Dieser JavaScript-Code ruft die aktuell aktive Registerkarte ab und verwendet die Chrome Scripting API, um ein Skript auszuführen, das eine Benachrichtigung mit einer Begrüßungsnachricht anzeigt, wenn die Schaltfläche Hallo angeklickt wird. So erhält deine Chrome-Erweiterung eine grundlegende Interaktivität.
Mit diesen Schritten hast du eine einfache Popup-Benutzeroberfläche für deine Chrome-Erweiterung eingerichtet, die grundlegenden Text, Design und Funktionen enthält.
Zum Schluss musst du die Popup-Datei in der manifest.json-Datei aktivieren, indem du einige Berechtigungen hinzufügst:
{
. . . ,
"action": {
"default_popup": "popup.html"
},
"permissions": [
"scripting",
"tabs"
],
"host_permissions": [
"http://*/*",
"https://*/*"
]
}In der obigen Konfiguration legt der Schlüssel default_popup fest, dass popup.html die Standard-Oberfläche ist, wenn der Nutzer mit der Erweiterung interagiert. Das Array permissions enthält scripting und tabs, die wichtig sind, damit die Erweiterung mit den Tabs interagieren und die Skripting-Funktionen des Browsers nutzen kann.
Das Array host_permissions gibt an, mit welchen Seiten deine Erweiterung interagieren kann. Die Muster http://*/* und https://*/* zeigen an, dass deine Erweiterung mit allen Websites interagieren kann, die über HTTP- und HTTPS-Protokolle aufgerufen werden.
Mit diesen Einstellungen in deiner manifest.json-Datei ist deine Chrome-Erweiterung richtig konfiguriert, um ein Popup anzuzeigen und Skripte auszuführen.
Lade deine Chrome-Erweiterung neu
Nachdem diese Änderungen in deinem lokalen Ordner vorgenommen wurden, musst du den entpackten Ordner aktualisieren, der in Chrome geladen wurde. Öffne dazu die Seite mit den Chrome-Erweiterungen, suche deine Erweiterung und klicke auf das Symbol zum Neuladen.
Du kannst dann auf das Erweiterungssymbol klicken, woraufhin ein Popup erscheint. Wenn du auf die Schaltfläche Hallo sagen klickst, erscheint eine Meldung.
Du weißt jetzt, wie du eine Chrome-Erweiterung erstellen kannst. Es gibt noch mehr, was du tun kannst. Du kannst die Benutzeroberfläche deiner Website verändern, API-Anfragen stellen, Daten von URLs abrufen, um bestimmte Aktionen durchzuführen und vieles mehr.
So erstellst du eine Chrome-Erweiterung mit React
Wie wir bereits erwähnt haben, ist die Erstellung einer Chrome-Erweiterung ähnlich wie die Erstellung einer Webanwendung. Du kannst beliebte Web-Frameworks wie React verwenden.
Bei React wird die Datei manifest.json im Ordner public erstellt. Dieser Ordner wird für statische Assets verwendet, die nicht von Webpack (oder ähnlichen Bundlern, die React unter der Haube in Tools wie Create React App verwenden kann) verarbeitet werden sollen.
Wenn du deine React-Anwendung baust, kopiert der Build-Prozess alle Inhalte des öffentlichen Ordners in den dist-Ordner. Hier erfährst du, wie du eine Chrome-Erweiterung mit React erstellst:
- Erstelle eine neue React-Anwendung. Du kannst die lokale Entwicklungsumgebung Vite verwenden, indem du den folgenden Befehl in deinem Terminal ausführst:
npm create vite@latestAls Nächstes gibst du deinem Projekt einen Namen und wählst React als Framework aus. Sobald das erledigt ist, navigierst du in den Projektordner und installierst die Abhängigkeiten:
cd <project-name>
npm install- Erstelle im öffentlichen Ordner deines React-Projekts eine manifest.json-Datei. Füge die folgenden Konfigurationen hinzu:
{
"manifest_version": 3,
"name": "React Chrome extension",
"description": "Chrome extension built with React",
"version": "0.1.0",
"action": {
"default_popup": "index.html"
},
"permissions": [
"tabs"
],
"host_permissions": [
"http://*/*",
"https://*/*"
]
}Die Konfiguration für eine Chrome-Erweiterung enthält ein action Objekt, das index.html als Standard-Popup festlegt, wenn das Erweiterungssymbol angeklickt wird. Dies ist die statische HTML-Datei, die erzeugt wird, wenn du deine React-Anwendung erstellst.
- Entwickle die React-Anwendung. Du kannst API-Anfragen stellen, sie nach Belieben gestalten, React Hooks verwenden und vieles mehr.
- Wenn du mit der Erstellung der Benutzeroberfläche der Erweiterung fertig bist, führe den Build-Befehl in React aus (
npm run build). Alle Assets, einschließlich der manifest.json-Datei, der mit React erstellten index.html und anderen, werden in den dist- oder build-Ordner verschoben. - Zum Schluss lädst du deine Erweiterung in Chrome. Navigiere zu
chrome://extensions/und lade deine Erweiterung erneut.
Erstellen einer Chrome-Erweiterung zur Verwaltung der Plugins deiner Website mit der Kinsta-API
So sieht die Chrome-Erweiterung aus, die du erstellen wirst:
Wenn du darauf klickst, zeigt die Erweiterung eine Liste der Websites mit veralteten Plugins in deinem MyKinsta-Konto an. Du kannst eine Liste der Plugins sehen und auf die Schaltfläche In MyKinsta anzeigen klicken, um zur Seite Themes & Plugins der Seite zu navigieren, wo du jedes Plugin aktualisieren kannst.
Sehen wir uns an, wie du die Chrome-Erweiterung erstellen kannst.
Die Kinsta-API verstehen
Die Kinsta-API 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, das Abrufen von Website-Informationen, den Status einer Website, das Durchsuchen und Wiederherstellen von Backups und vieles mehr.
Um die Kinsta-API zu nutzen, musst du ein Konto mit mindestens einer WordPress-Website, -Anwendung oder -Datenbank in MyKinsta haben. Außerdem musst du einen API-Schlüssel erstellen, um dich zu authentifizieren und auf dein Konto zuzugreifen.
So generierst du einen API-Schlüssel:
- Gehe zu deinem MyKinsta-Dashboard.
- Navigiere zur Seite mit den API-Schlüsseln (Dein Name > Unternehmenseinstellungen > API-Schlüssel).
- Klicke auf API-Schlüssel generieren.
- Wähle ein Ablaufdatum oder lege ein benutzerdefiniertes Startdatum und die Anzahl der Stunden fest, nach denen der Schlüssel abläuft.
- Gib dem Schlüssel einen eindeutigen Namen.
- Klicke auf Generieren.
Nachdem du einen API-Schlüssel generiert hast, kopiere ihn und bewahre ihn an einem sicheren Ort auf (es wird empfohlen, einen Passwortmanager zu verwenden). Du kannst mehrere API-Schlüssel erstellen, die dann auf der Seite API-Schlüssel aufgelistet werden. Wenn du einen API-Schlüssel widerrufen musst, klicke auf die Schaltfläche Widerrufen.
Verwalte die Plugins deiner Website mit Kinsta API und React
Wir beginnen mit der Entwicklung einer Benutzeroberfläche in React, die dann in eine Chrome-Erweiterung umgewandelt wird. In dieser Anleitung werden grundlegende Kenntnisse über React und die Interaktion mit der API vorausgesetzt.
Einrichten der Umgebung
Definiere zunächst in der Datei App.jsx eine Konstante für die Kinsta-API-URL, um Redundanz in deinem Code zu vermeiden:
const KinstaAPIUrl = 'https://api.kinsta.com/v2';Aus Sicherheitsgründen solltest du sensible Daten wie deinen API-Schlüssel und die Kinsta-Firmen-ID in einer .env.local-Datei speichern, damit sie sicher sind und nicht in deinen Quellcode gelangen:
VITE_KINSTA_COMPANY_ID=YOUR_COMPANY_ID
VITE_KINSTA_API_KEY=YOUR_API_KEYDaten mit der Kinsta-API abrufen
In der App.jsx-Datei musst du mehrere Anfragen an die Kinsta-API stellen, um Informationen über Websites und ihre Plugins abzurufen.
- Abrufen von Unternehmenswebsites: 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ückgibt.
const getListOfCompanySites = async () => { const query = new URLSearchParams({ company: import.meta.env.VITE_KINSTA_COMPANY_ID, }).toString(); const resp = await fetch(`${KinstaAPIUrl}/sites?${query}`, { method: 'GET', headers: { Authorization: `Bearer ${import.meta.env.VITE_KINSTA_API_KEY}`, }, }); const data = await resp.json(); const companySites = data.company.sites; return companySites; } - Rufe die Umgebungsdaten für jede Website ab: Rufe für jeden Standort die Umgebungen ab, einschließlich der Umgebungs-ID, die für weitere Anfragen benötigt wird. Dazu musst du jede Webiste zuordnen und einen API-Aufruf an den Endpunkt
/sites/${siteId}/environmentstätigen.const companySites = await getListOfCompanySites(); // Get all environments for each site const sitesEnvironmentData = companySites.map(async (site) => { const siteId = site.id; const resp = await fetch(`${KinstaAPIUrl}/sites/${siteId}/environments`, { method: 'GET', headers: { Authorization: `Bearer ${import.meta.env.VITE_KINSTA_API_KEY}`, }, }); const data = await resp.json(); const environments = data.site.environments; return { id: siteId, name: site.display_name, environments: environments, }; }); - Abrufen von Plugins für jede Seiten-Umgebung: Schließlich verwendest du die Umgebungs-ID, um Plugins für jede Website abzurufen. Dieser Schritt umfasst eine Zuordnungsfunktion und einen API-Aufruf an den Endpunkt
/sites/environments/${environmentId}/pluginsfür jede Umgebung.// Wait for all the promises to resolve const sitesData = await Promise.all(sitesEnvironmentData); // Get all plugins for each environment const sitesWithPlugin = sitesData.map(async (site) => { const environmentId = site.environments[0].id; const resp = await fetch( `${KinstaAPIUrl}/sites/environments/${environmentId}/plugins`, { method: 'GET', headers: { Authorization: `Bearer ${import.meta.env.VITE_KINSTA_API_KEY}`, }, } ); const data = await resp.json(); const plugins = data.environment.container_info; return { env_id: environmentId, name: site.name, site_id: site.id, plugins: plugins, }; });Du kannst nun alle diese Anfragen in einer Funktion zusammenfassen, die das endgültige Array der Websites mit grundlegenden Informationen über jede Website und ihre Plugins zurückgibt:
const getSitesWithPluginData = async () => { const getListOfCompanySites = async () => { const query = new URLSearchParams({ company: import.meta.env.VITE_KINSTA_COMPANY_ID, }).toString(); const resp = await fetch(`${KinstaAPIUrl}/sites?${query}`, { method: 'GET', headers: { Authorization: `Bearer ${import.meta.env.VITE_KINSTA_API_KEY}`, }, }); const data = await resp.json(); const companySites = data.company.sites; return companySites; } const companySites = await getListOfCompanySites(); // Get all environments for each site const sitesEnvironmentData = companySites.map(async (site) => { const siteId = site.id; const resp = await fetch(`${KinstaAPIUrl}/sites/${siteId}/environments`, { method: 'GET', headers: { Authorization: `Bearer ${import.meta.env.VITE_KINSTA_API_KEY}`, }, }); const data = await resp.json(); const environments = data.site.environments; return { id: siteId, name: site.display_name, environments: environments, }; }); // Wait for all the promises to resolve const sitesData = await Promise.all(sitesEnvironmentData); // Get all plugins for each environment const sitesWithPlugin = sitesData.map(async (site) => { const environmentId = site.environments[0].id; const resp = await fetch( `${KinstaAPIUrl}/sites/environments/${environmentId}/plugins`, { method: 'GET', headers: { Authorization: `Bearer ${import.meta.env.VITE_KINSTA_API_KEY}`, }, } ); const data = await resp.json(); const plugins = data.environment.container_info; return { env_id: environmentId, name: site.name, site_id: site.id, plugins: plugins, }; }); // Wait for all the promises to resolve const sitesWithPluginData = await Promise.all(sitesWithPlugin); return sitesWithPluginData; }
Anzeige der Website-Daten
Erstelle einen Status mit dem useState Hook, um Websites mit veralteten Plugins zu speichern. Der useEffect Hook ruft auch die getSitesWithPluginData() Methode auf und extrahiert die Websitedaten, wenn die Komponente montiert wird.
Erstelle im useEffect Hook eine Funktion, die in einer Schleife alle Websites mit veralteten Plugins herausfiltert und sie dann im Status speichert:
const [sitesWithOutdatedPlugin, setSitesWithOutdatedPlugin] = useState([]);
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
const checkSitesWithPluginUpdate = async () => {
const sitesWithPluginData = await getSitesWithPluginData();
const sitesWithOutdatedPlugin = sitesWithPluginData.map((site) => {
const plugins = site.plugins.wp_plugins.data;
const outdatedPlugins = plugins.filter((plugin) => plugin.update === "available");
if (outdatedPlugins.length > 0) {
const kinstaDashboardPluginPageURL = `https://my.kinsta.com/sites/plugins/${site.site_id}/${site.env_id}?idCompany=${import.meta.env.VITE_KINSTA_COMPANY_ID}`;
return {
name: site.name,
plugins: outdatedPlugins,
url: kinstaDashboardPluginPageURL,
};
}
});
setSitesWithOutdatedPlugin(sitesWithOutdatedPlugin);
checkSitesWithPluginUpdate();
setIsLoading(false);
}, []);Im obigen Code siehst du, dass auch der Ladezustand erstellt und standardmäßig auf true gesetzt wird. Damit wird gesteuert, wie die Daten angezeigt werden. Wenn alle Daten geladen sind, setzen wir ihn auf false.
Unten findest du ein Markup, mit dem du die Daten der Website und die Plugins in deiner Benutzeroberfläche darstellen kannst.
import { useEffect, useState } from "react"
import KinstaLogo from './assets/kinsta-logo.png'
import PluginPage from './components/PluginsPage'
function App() {
// load the data from the API
return (
<div className="container">
<div>
<div> className="title-section">
<img src={KinstaLogo} className="logo" alt="" />
</div>
<p> className="info-box">
Get quick information about your site plugins that need update.
</p>
{isLoading ? (
<p>Loading...</p>
) : (
<>
<div className="content">
<p>The following sites have plugins that need to be updated.</p>
{sitesWithOutdatedPlugin.map((site, index) => {
return (
<PluginPage key={index} {...site} />
);
})}
</div>
</>
)}
</div>
</div>
)
}
export default AppDer Code enthält eine Kopfzeile mit einem Logo und einem informativen Absatz. Der Inhalt der Benutzeroberfläche wird abhängig vom Zustand von isLoading dargestellt. Wenn die Daten noch nicht geladen sind, wird eine Ladebestätigung angezeigt. Sobald die Daten geladen sind, werden die Daten über die Websites und alle Plugins, die aktualisiert werden müssen, angezeigt.
Du wirst auch eine Komponente bemerken: PluginPage (PluginPage.jsx). Diese Komponente dient dazu, einzelne Websites und ihre Plugin-Details anzuzeigen. Sie enthält eine Funktion, mit der die Sichtbarkeit der Plugin-Details umgeschaltet werden kann.
import { useState } from "react"
import { FaRegEye } from "react-icons/fa";
import { FaRegEyeSlash } from "react-icons/fa";
const PluginUse = (site) => {
const [viewPlugin, setViewPlugin] = useState(false);
return (
<>
<div className="site-card">
<div className="site-card-details">
<p>{site.name}</p>
<div className="both-btns">
<a> href={site.url} target="_blank" rel="noreferrer" className="btn">
View in MyKinsta
</a>
<button onClick={() => setViewPlugin(!viewPlugin)} className="btn" title="View Plugins">
{viewPlugin ? <FaRegEyeSlash /> : <FaRegEye />}
</button>
</div>
</div>
{viewPlugin && (
<div className="plugin-list">
{site.plugins.map((plugin, index) => {
return (
<div key={index} className="plugin-card">
<p>{plugin.name}</p>
<div className="plugin-version-info">
<p>Current Version: {plugin.version}</p>
<p>Latest Version: {plugin.update_version}</p>
</div>
</div>
);
})}
</div>
)}
</div>
</>
)
}
export default PluginUseKonfiguriere die Manifestdatei
Um deine Benutzeroberfläche und Funktionen in eine Chrome-Erweiterung zu verwandeln, musst du die Datei manifest.json konfigurieren.
Erstelle eine manifest.json-Datei im öffentlichen Ordner und füge den unten stehenden Code ein:
{
"manifest_version": 3,
"name": "Kinsta Plugins Manager - Thanks to Kinsta API",
"description": "This extension allows you to manage your WordPress site's plugin from Kinsta's MyKinsta dashboard via Kinsta API.",
"version": "0.1.0",
"icons": {
"48": "kinsta-icon.png"
},
"action": {
"default_popup": "index.html"
},
"permissions": [
"tabs"
],
"host_permissions": [
"https://my.kinsta.com/*"
]
}Stelle sicher, dass du die Icon-Datei zu deinem öffentlichen Ordner hinzufügst.
Jetzt kannst du den Build-Befehl (npm run build) ausführen, damit alle Assets, einschließlich der manifest.json-Datei, der mit React erstellten index.html und anderer Dateien, in den dist- oder build-Ordner verschoben werden.
Als Nächstes navigierst du zu chrome://extensions/ und lädst diese als entpackte Erweiterung in Chrome. Klicke auf die Schaltfläche Load Unpacked und wähle das Verzeichnis aus, das du für deine Erweiterung erstellt hast.
Beschränkung der Erweiterung auf bestimmte Websites
Du hast bemerkt, dass diese Erweiterung jederzeit funktioniert. Wir möchten, dass sie nur funktioniert, wenn ein Nutzer zum MyKinsta-Dashboard navigiert.
Dazu müssen wir die Datei App.jsx anpassen. Erstelle einen Status, um den aktiven Tab zu speichern:
const [activeTab, setActiveTab] = useState(null);Als Nächstes aktualisierst du den useEffect Hook, um die Funktion getCurrentTab zu definieren und aufzurufen:
const getCurrentTab = async () => {
const queryOptions = { active: true, currentWindow: true };
const [tab] = await chrome.tabs.query(queryOptions);
setActiveTab(tab);
}
getCurrentTab();Der obige Code verwendet chrome.tabs.query mit bestimmten Abfrageoptionen, um sicherzustellen, dass nur die aktive Registerkarte im aktuellen Fenster abgerufen wird. Sobald die Registerkarte abgerufen wurde, wird sie als aktive Registerkarte im Status der Erweiterung festgelegt.
Schließlich musst du eine bedingte Rendering-Logik in die Rückgabeanweisung deiner Komponente einbauen. Dadurch wird sichergestellt, dass die Plugin-Verwaltungsoberfläche nur angezeigt wird, wenn sich der Nutzer auf dem MyKinsta-Dashboard befindet:
return (
<div className="container">
{activeTab?.url.includes('my.kinsta.com') ? (
<div >
<div className="title-section">
<img src={KinstaLogo} className="logo" alt="" />
</div>
<p className="info-box">
Get quick information about your site plugins that need update.
</p>
{isLoading ? (
<p>Loading...</p>
) : (
<>
<div className="content">
<p>The following {sitesWithPluginUpdate} sites have plugins that need to be updated.</p>
{sitesWithOutdatedPlugin.map((site, index) => {
return (
<PluginPage key={index} {...site} />
);
})}
</div >
</>
)}
</div >
) : (
<div >
<div className="title-section">
<img src={KinstaLogo} className="logo" alt="" />
</div>
<p className="info-box">
This extension is only available on Kinsta Dashboard.
</p>
</div>
)}
</div>
)Nachdem du die Änderungen vorgenommen hast, erstelle deine Anwendung neu und lade die Chrome-Erweiterung erneut. Dadurch werden die neue Logik und die Einschränkungen übernommen.
Zusammenfassung
In diesem Artikel hast du die Grundlagen für die Erstellung einer Chrome-Erweiterung gelernt und erfahren, wie du sie mit React erstellst. Du hast auch gelernt, wie du eine Erweiterung erstellst, die mit der Kinsta-API interagiert.
Als Kinsta-Nutzer kannst du das enorme Potenzial und die Flexibilität der Kinsta-API nutzen, um individuelle Lösungen für die Verwaltung deiner Websites, Anwendungen und Datenbanken zu entwickeln.
Welchen Endpunkt der Kinsta-API hast du schon oft benutzt und wie hast du ihn genutzt? Teile es uns im Kommentarbereich mit!
Joel ist Frontend-Entwickler und arbeitet bei Kinsta als Technical Editor. Er ist ein leidenschaftlicher Lehrer mit einer Vorliebe für Open Source und hat über 200 technische Artikel geschrieben, die sich hauptsächlich um JavaScript und seine Frameworks drehen.
Schreibe einen Kommentar