So erstellen Sie eine Trello -Chrome -Erweiterung - API -Authentifizierung

Bei SitePoint verwenden wir Trello ausgiebig. Sicher, es hat seine Macken und könnte in verschiedenen Bereichen ein oder zwei Verbesserungen verwenden, aber größtenteils hat es die kollaborative Erfahrung nicht nur der Mitarbeiter, sondern auch der Autoren und ihrer Redakteure revolutioniert.

Ich habe kürzlich festgestellt, dass ich Kartentitel aus einer bestimmten Liste für ein Nichtmitglied aus exportieren musste. Standardmäßig unterstützt Trello die Exporte für die Vollmeldung nach JSON nur und das ist etwas, das meine Registerkarte auf einem Vorstand von über 100 Mitgliedern mit Hunderten von Karten abstürzt. Es gibt eine kleine Armee von Trello -Erweiterungen im Laden, und doch merkwürdigerweise keine, die in irgendeiner Weise exportiert.

Erstellen wir eine Chromverlängerung, die dies für uns tun kann! Wenn Sie in Eile sind und nur das Endergebnis sehen möchten, finden Sie im GitHub -Repo für die endgültige Version des Code dieses Tutorials.

Key Takeaways

• Verwenden Sie das Chromeskel-Repository, um die Entwicklung Ihrer Trello-Chromverlängerung zu springen und den Prozess mit einem vorgefertigten Skelett zu vereinfachen.
• Erhalten Sie einen Trello -API -Schlüssel und ein Geheimnis für die Authentifizierung, indem Sie die Trello -Website besuchen, um Ihre Erweiterung sicher zu ermöglichen, mit Trello -Konten sicher zu interagieren.
• Implementieren Sie eine Einstellungsseite in Ihrer Erweiterung, um die Benutzerauthentifizierung mithilfe einer grundlegenden HTML -Struktur und JavaScript zu verarbeiten, um die Sichtbarkeit basierend auf dem Authentifizierungsstatus des Benutzers umzuschalten.
• Verwenden Sie die Trello JavaScript -Client -Bibliothek und ein benutzerdefiniertes Skript (HashSearch.js), um die Autorisierungs -Token effektiv zu verwalten, um eine sichere und effiziente Benutzerauthentifizierung zu gewährleisten.
• stürzen Sie die Funktionalität der Erweiterung auf bestimmte Trello -Board -URLs mithilfe der Manifestdatei und verbessern Sie die Leistung, indem Sie den Umfang der Vorgänge der Erweiterung auf relevante Seiten einschränken.

Erstellen einer Chromverlängerung

Ich dachte, der beste Ansatz wäre eine Erweiterung, da eine separate Anwendung, die nur diese Exporte durchführt, zu viel sein könnte. Außerdem hat Trello eine raffinierte API, mit der wir alles bekommen können, was wir brauchen. Ich dachte auch, es wäre ein schöner Übergang zurück in die Erweiterungsentwicklung, was ich eine Weile nicht mehr getan hatte.

Bootstrapping

Ich werde mein vertrauenswürdiges Chromeskel -Repo wiederverwenden - eine Skeleton -Erweiterung, die ich vor langer Zeit gebaut habe, um die Entwicklung der Chrome -Erweiterung zu erleichtern. Als Referenz, wenn Sie einige andere Chrome -Erweiterungs -Tutorials sehen möchten, die ich in der Vergangenheit geschrieben habe, finden Sie hier und hier.

Wir beginnen damit, das Repo in einen beliebigen Ordner zu klonen.

git clone https://github.com/Swader/ChromeSkel_a.git

Um zu sehen, ob es funktioniert, laden Sie es in Chrom. Gehen Sie in die Registerkarte Erweiterungen und klicken Sie auf "Entpackte Erweiterung laden". Wenn die Option nicht vorhanden ist, überprüfen Sie das Kontrollkästchen "Entwicklermodus" in der oberen rechten Ecke.

Einmal geladen, sollte es in Ihrer Erweiterungsliste angezeigt werden.

Authentifizierung

Während wir die Daten einfach mit einer Chromverlängerung auf dem Bildschirm ernten und das analysieren konnten, hat sich Trello manchmal als unzuverlässig erwiesen und neigt dazu, auf stark besiedelten Brettern zu stürzen. Aus diesem Grund verwenden wir nur die Integration der Chrome -Erweiterung in die Trello.com -Domain, um neue Kontextmenüoptionen auf Listen (eine Option „Exportkarten“) zu erstellen. Daten durch die API.

Schlüssel und Geheimnis

Um einen Anwendungsschlüssel für Trello zu generieren, besuchen Sie bitte https://trello.com/1/appkey/generate, während Sie angemeldet sind. Dadurch können Sie einen Schlüssel und ein Geheimnis bieten, das Sie mit Ihrem Konto verwenden können. Beachten Sie im Rest dieses Tutorials bitte {{{key}} als dieser Schlüssel und ersetzen Sie den Inhalt entsprechend.

Sobald Sie Ihren Schlüssel im Subduller des Skripts haben, erstellen Sie eine Dateischlüssel.js:

git clone https://github.com/Swader/ChromeSkel_a.git

Während Sie dabei sind, können Sie die Fragmente und Fantasien-Settings-Ordner löschen. Wir werden sie nicht brauchen.

Workflow und Manifest

Die Idee des Workflows der Erweiterung lautet wie folgt:

• Bei einem Benutzer öffnet ein Trello -Board
Überprüfen Sie, ob der Benutzer die Erweiterung autorisiert hat, um sein Trello -Konto zu verwenden
Wenn ja, fahren Sie
• fort
Wenn nein, öffnen Sie eine Einstellungsseite mit einer Autorisierungsschaltfläche, mit der sie die Prozedur
• vervollständigen können
Schließen Sie die Einstellungsseite automatisch und halten Sie die Erweiterung autorisiert

autorisiert

Um eine Erweiterung automatisch eine neue Registerkarte mit einigen Inhalten zu öffnen, müssen wir diesen Inhalt als „Web -Zugriffsressource“ markieren.

<span>// key.js
</span><span>var APP_KEY = '{{KEY}}';</span>

Erstellen Sie für diesen Zweck die Ordnereinstellungen, die unsere Einstellungsseite enthalten, und aktualisieren Sie das Manifest der Erweiterung, um so auszusehen:

Das meiste sollte bekannt sein. Wir setzen die Version, geben einige Metadaten, definieren Symbole und deklarieren eine Ereignisseite bauen. Wir begrenzen auch die Auswirkungen der Erweiterung auf https://trello.com/b/*, was bedeutet, dass nur Board -URLs.

Einstellungen und Autorisierung

Um unsere Einstellungsseite zu erstellen, schreiben wir eine einfache HTML -Seite. Zu Demonstrationszwecken werde ich es in diesem Fall extrem einfach halten. Wir werden die Foundation verwenden, um es zu stylen (im Moment nur für die Schaltflächen, aber wir werden daran arbeiten, in zukünftigen Beiträgen eine bessere Einstellungsseite zu erstellen). Laden Sie also ein Foundation Essentials -Bundle herunter und unarchivieren ihre Inhalte in /Einstellungen, damit das so Index.html fällt in diesen Ordner. Sie sollten eine Ordnerstruktur wie diese haben:

Wenn Sie einige zusätzliche Ordner haben, die in meinem Screenshot nicht sichtbar sind, können Sie sie gerne löschen. Erstellen Sie die Dateieinstellungen/JS/Settings.js, lassen Sie sie vorerst leer.

Ok, lass uns zum Geschäft gehen. Die Annahme ist also, dass der Benutzer auf dieser Seite landet, indem er entweder auf die Registerkarte Erweiterungen zu „Optionen“ geht oder versucht, die Erweiterung zu verwenden, wenn sie nicht authentifiziert werden. Erstellen wir eine ziemlich grundlegende HTML -Seite mit zwei Divs - eine, wenn der Benutzer mit einer Schaltfläche "Anmeldung" und eines für den Zeitpunkt, an dem er noch nicht authentifiziert ist und auf eine Autorize -Taste klicken muss, authentifiziert wird. Ersetzen Sie den Inhalt von index.html durch:

git clone https://github.com/Swader/ChromeSkel_a.git

Wir haben unsere beiden Divs, die Anmeldung und Anmeldetaste, und wir ziehen die JS an, die wir benötigen. In diesem Fall verwenden wir die Standardeinstellung der Foundation JQuery, aber es spielt wirklich keine Rolle, ob Sie sich für Ihren eigenen heruntergeladenen Laden an anderer Stelle im Projekt verwenden, falls Sie einen aktuelleren Zeitpunkt abgerufen haben wie ich (mehr auf das später).

Lassen Sie uns nun eine Logik hinzufügen. Öffnen Sie die Einstellungen.js und geben Sie ihm diesen Inhalt:

<span>// key.js
</span><span>var APP_KEY = '{{KEY}}';</span>

Durch das Lesen der Dokumente können wir herausfinden, dass in LocalStorage ein Trello_Token existiert, wenn eine Client -App authentifiziert ist. Dies bedeutet, dass wir es als Indikator verwenden können, wann jede unserer Divs angezeigt werden soll. In der Init -Funktion schnappen wir uns die Divs, fügen Sie den Schaltflächenklick -Handler (noch keine Logik) und schließlich die entsprechende Div aus, gemäß dem Trello_Token.

Wenn ein Benutzer authentifiziert ist, erhalten er beispielsweise einen Bildschirm wie diesen:

Lassen Sie uns jetzt den Trello JS -Kunden abrufen.
Die Trello -Dokumentation ist nicht wirklich mit Chromerweiterungen geschrieben und empfiehlt, den Schlüssel an die URL anzuhängen, während die JS -Client -Bibliothek aus ihrer Domäne abgerufen wird, wie SO:

<span>{
</span>    <span>"name": "Trello Helper",
</span>    <span>"version": "0.1",
</span>    <span>"manifest_version" : 2,
</span>    <span>"description": "Trello Helper adds some much needed functionality to Trello. The current version focuses on exporting card information from lists.",
</span>    <span>"background" : {
</span>        <span>"page" : "background.html",
</span>        <span>"persistent": false
</span>    <span>},
</span>    <span>"page_action" :
</span>    <span>{
</span>        <span>"default_icon": {
</span>            <span>"19": "icons/19.png",
</span>            <span>"38": "icons/38.png"
</span>        <span>}
</span>    <span>},
</span>    <span>"content_scripts": [
</span>        <span>{
</span>            <span>"matches": ["https://trello.com/b/*"],
</span>            <span>"js": [
</span>                <span>"lib/jquery-2.1.1.min.js",
</span>                <span>"scripts/main.js"
</span>            <span>],
</span>            <span>"run_at": "document_idle"
</span>        <span>}
</span>    <span>],
</span>    <span>"permissions": [
</span>        <span>"tabs"
</span>    <span>],
</span>    <span>"icons": {
</span>        <span>"16": "icons/16.png",
</span>        <span>"48": "icons/48.png",
</span>        <span>"128": "icons/128.png"
</span>    <span>},
</span>    <span>"web_accessible_resources": [
</span>        <span>"settings/index.html"
</span>    <span>],
</span>    <span>"options_page": "settings/index.html"
</span><span>}</span>

wir können das nicht wirklich tun, da wir uns mit der geschlossenen Umgebung einer Erweiterung zu beschäftigen und so viel sinnvoller zu machen, sie aus Leistungsgründen lokal zur Verfügung zu stellen. Daher besuchen wir die obige URL, jedoch ohne den Schlüsselparamer:

<span><span><!doctype html></span>
</span><span><span><span><html</span> class<span>="no-js"</span> lang<span>="en"</span>></span>
</span><span><span><span><head</span>></span>
</span>    <span><span><span><meta</span> charset<span>="utf-8"</span>/></span>
</span>    <span><span><span><meta</span> name<span>="viewport"</span> content<span>="width=device-width, initial-scale=1.0"</span>/></span>
</span>    <span><span><span><title</span>></span>Trello Helper Settings<span><span></title</span>></span>
</span>    <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="css/foundation.css"</span>/></span>
</span>    <span><span><span><script</span> src<span>="js/vendor/modernizr.js"</span>></span><span><span></script</span>></span>
</span><span><span><span></head</span>></span>
</span><span><span><span><body</span>></span>
</span>
<span><span><span><div</span> class<span>="row"</span>></span>
</span>    <span><span><span><div</span> class<span>="large-12 columns"</span>></span>
</span>        <span><span><span><h1</span>></span>Trello Helper Settings<span><span></h1</span>></span>
</span>    <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span>
</span>
<span><span><span><div</span> class<span>="row"</span>></span>
</span>    <span><span><span><div</span> class<span>="large-12 columns"</span>></span>
</span>        <span><span><span><div</span> class<span>="panel"</span> id<span>="trello_helper_loggedout"</span> <span>style<span>="<span>display: none</span>"</span></span>></span>
</span>            <span><span><span><p</span>></span>To get going, you'll need to authorize the extension to use your Trello account.<span><span></p</span>></span>
</span>
            <span><span><span><p</span>></span>Do it by clicking the big Authorize button below.<span><span></p</span>></span>
</span>
            <span><span><span><a</span> href<span>="#"</span> class<span>="medium success button"</span> id<span>="trello_helper_login"</span>></span>Authorize<span><span></a</span>></span><span><span><br</span>/></span>
</span>        <span><span><span></div</span>></span>
</span>        <span><span><span><div</span> class<span>="panel"</span> id<span>="trello_helper_loggedin"</span> <span>style<span>="<span>display: none</span>"</span></span>></span>
</span>            <span><span><span><p</span>></span>You are already authorized. If something doesn't work, try logging out using the button below, and logging back in.<span><span></p</span>></span>
</span>
            <span><span><span><a</span> href<span>="#"</span> class<span>="medium success button"</span> id<span>="trello_helper_logout"</span>></span>Log out<span><span></a</span>></span><span><span><br</span>/></span>
</span>        <span><span><span></div</span>></span>
</span>
    <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span>
</span>
<span><span><span><script</span> src<span>="../scripts/key.js"</span>></span><span><span></script</span>></span>
</span><span><span><span><script</span> src<span>="js/vendor/jquery.js"</span>></span><span><span></script</span>></span>
</span><span><span><span><script</span> src<span>="js/settings.js"</span>></span><span><span></script</span>></span>
</span><span><span><span></body</span>></span>
</span><span><span><span></html</span>></span></span>

Speichern Sie den Inhalt dieser Datei in lib/trello_client.js und stellen Sie dann sicher, dass unsere Einstellungsseite sie dem Abschnitt Skripte in der Nähe des Ending

-Tags hinzufügen, wie SO:

<span>function init() {
</span>
    <span>// Message and button containers
</span>    <span>var lout = $("#trello_helper_loggedout");
</span>    <span>var lin = $("#trello_helper_loggedin");
</span>
    <span>// Log in button
</span>    <span>$("#trello_helper_login").click(function () {
</span>        
    <span>});
</span>
    <span>// Log out button
</span>    <span>$("#trello_helper_logout").click(function () {
</span>        
    <span>});
</span>
    <span>if (!localStorage.trello_token) {
</span>        <span>$(lout).show();
</span>        <span>$(lin).hide();
</span>    <span>} else {
</span>        <span>$(lout).hide();
</span>        <span>$(lin).show();
</span>    <span>}
</span><span>}
</span><span>$(document).ready(init);</span>

Dies stellt sicher, dass wir das Trello -Objekt in unserem JavaScript verfügbar haben und uns seine Methoden anwenden können. Lassen Sie uns zuerst abmelden. Ändern Sie den Klickhandler der Taste von Abmeldungen, um Folgendes zu sein:

<span><span><span><script</span> src<span>="https://api.trello.com/1/client.js?key=substitutewithyourapplicationkey"</span>></span><span><span></script</span>></span></span>

Das ist alles, was es gibt, mit Trello zu deautorisieren. Wir rufen die Methode auf und laden die Seite neu, auf der wir uns befinden (der Bildschirm Einstellungen, das heißt).

Lassen Sie uns nun die Protokollierung betreten, was ein bisschen komplexer ist.

git clone https://github.com/Swader/ChromeSkel_a.git

Befolgen Sie die Logik der Online -Dokumente, wir sehen, dass das Trello -Objekt über eine SetKey -Methode verfügt, mit der wir sie treffend festlegen. Dann rufen wir die Autorize -Methode in Aktion ein. Gemäß der Dokumentation muss der Benutzer mit einem Typ -Popup anstelle von Weiterleitungen eine geheime Taste manuell in die App einfügen, wenn sie empfangen wird, was wir nicht suchen. Wenn wir jedoch eine Umleitung verwenden, wird die Seite jedoch zur Authentifizierung und nach dem Abschluss von Rücken umgeleitet. Das interaktive Feld negiert, wenn sie auf False gesetzt sind, sowohl das Popup als auch die Umleitung und stattdessen nur prüft, ob der Wert von LocalStorage.trello_Token besteht. Gemäß den Dokumenten müssen wir zuerst die reguläre Autorisierung mit einer Umleitung anrufen und dann, sobald sie zur Einstellungsseite zurückgekehrt sind bereitgestellt. Es ist alles ein bisschen verworren, aber es funktioniert.

Es gibt jedoch ein anderes Problem. Wenn wir die nicht interaktive Autorisierung unmittelbar nach dem Öffnen der Einstellungsseite anrufen, verursachen wir einen Fehler auf der Seite, da die Umleitung nach der Autorisierung noch nicht aufgetreten ist. Eine Alternative besteht darin, unsere Einstellungsseite eine weitere Schaltfläche „Bestätigen“ oder ähnliches hinzuzufügen, die nach der Umleitung von Trello zurück zu unserer Einstellungsseite angezeigt wird, damit der Benutzer die nicht interaktive Autorisierung manuell initiieren lässt. Dies scheint jedoch ein bisschen wie ein UX -Albtraum zu sein. Am Ende habe ich mich für eine dritte Lösung entschieden.

Speichern Sie den folgenden Code in lib/hashsearch.js.

<span>// key.js
</span><span>var APP_KEY = '{{KEY}}';</span>

, wie aus einer Stackoverflow -Antwort abgenommen, hilft uns dieses kleine Dienstprogramm, den Wert eines bestimmten Hashs aus der URL zu holen.

Wenn Sie mit Trello im Umleitungsmodus autorisieren, wird es wieder auf die Seite umgeleitet, von der es stammt, aber mit einem Token in der URL. Dieses Token wird das Auth -Token sein, den der Trello JS -Client benötigt. Es liegt daher auf der Hand, dass wir zu dem Schluss kommen können, dass wir mit einer Weiterleitung von Trello zu tun haben, wenn wir das Vorhandensein dieses Tokens in der URL erkennen können und somit automatisch und sicher das nicht interaktive Autorisierungsprotokoll auslösen können.

Nachdem Sie der Seite der Einstellungen wie so Hashsearch hinzugefügt haben, ist

<span>{
</span>    <span>"name": "Trello Helper",
</span>    <span>"version": "0.1",
</span>    <span>"manifest_version" : 2,
</span>    <span>"description": "Trello Helper adds some much needed functionality to Trello. The current version focuses on exporting card information from lists.",
</span>    <span>"background" : {
</span>        <span>"page" : "background.html",
</span>        <span>"persistent": false
</span>    <span>},
</span>    <span>"page_action" :
</span>    <span>{
</span>        <span>"default_icon": {
</span>            <span>"19": "icons/19.png",
</span>            <span>"38": "icons/38.png"
</span>        <span>}
</span>    <span>},
</span>    <span>"content_scripts": [
</span>        <span>{
</span>            <span>"matches": ["https://trello.com/b/*"],
</span>            <span>"js": [
</span>                <span>"lib/jquery-2.1.1.min.js",
</span>                <span>"scripts/main.js"
</span>            <span>],
</span>            <span>"run_at": "document_idle"
</span>        <span>}
</span>    <span>],
</span>    <span>"permissions": [
</span>        <span>"tabs"
</span>    <span>],
</span>    <span>"icons": {
</span>        <span>"16": "icons/16.png",
</span>        <span>"48": "icons/48.png",
</span>        <span>"128": "icons/128.png"
</span>    <span>},
</span>    <span>"web_accessible_resources": [
</span>        <span>"settings/index.html"
</span>    <span>],
</span>    <span>"options_page": "settings/index.html"
</span><span>}</span>

… Die Datei Einstellungen.JS sollte am Ende so aussehen:

<span><span><!doctype html></span>
</span><span><span><span><html</span> class<span>="no-js"</span> lang<span>="en"</span>></span>
</span><span><span><span><head</span>></span>
</span>    <span><span><span><meta</span> charset<span>="utf-8"</span>/></span>
</span>    <span><span><span><meta</span> name<span>="viewport"</span> content<span>="width=device-width, initial-scale=1.0"</span>/></span>
</span>    <span><span><span><title</span>></span>Trello Helper Settings<span><span></title</span>></span>
</span>    <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="css/foundation.css"</span>/></span>
</span>    <span><span><span><script</span> src<span>="js/vendor/modernizr.js"</span>></span><span><span></script</span>></span>
</span><span><span><span></head</span>></span>
</span><span><span><span><body</span>></span>
</span>
<span><span><span><div</span> class<span>="row"</span>></span>
</span>    <span><span><span><div</span> class<span>="large-12 columns"</span>></span>
</span>        <span><span><span><h1</span>></span>Trello Helper Settings<span><span></h1</span>></span>
</span>    <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span>
</span>
<span><span><span><div</span> class<span>="row"</span>></span>
</span>    <span><span><span><div</span> class<span>="large-12 columns"</span>></span>
</span>        <span><span><span><div</span> class<span>="panel"</span> id<span>="trello_helper_loggedout"</span> <span>style<span>="<span>display: none</span>"</span></span>></span>
</span>            <span><span><span><p</span>></span>To get going, you'll need to authorize the extension to use your Trello account.<span><span></p</span>></span>
</span>
            <span><span><span><p</span>></span>Do it by clicking the big Authorize button below.<span><span></p</span>></span>
</span>
            <span><span><span><a</span> href<span>="#"</span> class<span>="medium success button"</span> id<span>="trello_helper_login"</span>></span>Authorize<span><span></a</span>></span><span><span><br</span>/></span>
</span>        <span><span><span></div</span>></span>
</span>        <span><span><span><div</span> class<span>="panel"</span> id<span>="trello_helper_loggedin"</span> <span>style<span>="<span>display: none</span>"</span></span>></span>
</span>            <span><span><span><p</span>></span>You are already authorized. If something doesn't work, try logging out using the button below, and logging back in.<span><span></p</span>></span>
</span>
            <span><span><span><a</span> href<span>="#"</span> class<span>="medium success button"</span> id<span>="trello_helper_logout"</span>></span>Log out<span><span></a</span>></span><span><span><br</span>/></span>
</span>        <span><span><span></div</span>></span>
</span>
    <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span>
</span>
<span><span><span><script</span> src<span>="../scripts/key.js"</span>></span><span><span></script</span>></span>
</span><span><span><span><script</span> src<span>="js/vendor/jquery.js"</span>></span><span><span></script</span>></span>
</span><span><span><span><script</span> src<span>="js/settings.js"</span>></span><span><span></script</span>></span>
</span><span><span><span></body</span>></span>
</span><span><span><span></html</span>></span></span>

Sie können jetzt die Erweiterung ausprobieren. Laden Sie die Registerkarte Erweiterungen, klicken Sie auf die Optionen -Link und testen Sie die Authentifizierung und protokollieren Sie es. Alles sollte gut funktionieren.

Schlussfolgerung

In diesem Teil haben wir die Grundlagen unserer Erweiterung erstellt, die Authentifizierung über einen benutzerdefinierten Einstellungsbildschirm für fundamentvolle Einstellungen implementiert und die JavaScript-Clientbibliothek von Trello verwendet.

Im nächsten Teil werden wir die gesamte Logik hinter der Erweiterung erstellen und Dinge abschließen.

häufig gestellte Fragen (FAQs) zum Erstellen einer Trello -Chromverlängerung mit API -Authentifizierung

Wie kann ich mit dem Erstellen einer Trello -Chrome -Erweiterung beginnen? Sie müssen auch ein Trello -Konto erstellen und einen API -Schlüssel und einen Token generieren. Dadurch kann Ihre Erweiterung mit Trellos API interagieren. Sobald Sie diese Voraussetzungen haben, können Sie Ihre Erweiterung erstellen, indem Sie eine Manifestdatei erstellen und die erforderlichen Skripte und HTML -Dateien hinzufügen. > Die Manifest -Datei ist eine entscheidende Komponente einer Chromverlängerung. Es handelt sich um eine JSON -Datei, die wichtige Informationen zu Ihrer Erweiterung enthält, z. B. den Namen, die Version, die Berechtigungen und die von ihnen verwendeten Skripte. Chrome verwendet diese Informationen, um Ihre Erweiterung ordnungsgemäß zu laden und auszuführen.

Wie kann ich Trellos API in meiner Chromerweiterung verwenden? Schlüssel und Token von der Trellos Entwicklerplattform. Diese Anmeldeinformationen ermöglichen es Ihrer Erweiterung, autorisierte Anfragen an Trellos API zu stellen. Sie können dann JavaScript verwenden, um API -Aufrufe aus Ihrer Erweiterung zu tätigen, sodass sie mit Trello -Daten interagieren können. Funktionalität zu Ihrer Trello -Chromverlängerung. Dies kann durch Hinzufügen zusätzlicher Skripte zu Ihrer Erweiterung und der Verwendung von Trellos API zur Interaktion mit Trello -Daten erfolgen. Sie können beispielsweise eine Funktion hinzufügen, mit der Benutzer neue Trello -Karten direkt aus Ihrer Erweiterung erstellen können. Erweiterungen. Sie können die Option "Ansichten inspizieren" auf der Seite "Erweiterungsverwaltung" verwenden, um ein Entwickler -Tools -Fenster für Ihre Erweiterung zu öffnen. Auf diese Weise können Sie Ihre Skripte debuggen, die Konsolenausgabe anzeigen und das DOM der Seiten Ihrer Erweiterung überprüfen. Erweiterung können Sie es im Chrome Web Store veröffentlichen. Sie müssen ein Entwicklerkonto erstellen, eine einmalige Registrierungsgebühr zahlen und die Richtlinien des Geschäfts für die Veröffentlichung von Erweiterungen befolgen. > Beim Erstellen einer Trello -Chrome -Erweiterung ist es wichtig, Best Practices für Sicherheit, Leistung und Benutzererfahrung zu befolgen. Dies beinhaltet die Verwendung von HTTPS für alle Netzwerkkommunikationen, die Minimierung der Verwendung von Hintergrundskripten sowie die Bereitstellung einer klaren und intuitiven Benutzeroberfläche.

Kann ich andere APIs in meiner Trello -Chromverlängerung verwenden? Auf diese Weise können Sie zusätzliche Funktionen in Ihre Erweiterung integrieren. Sie müssen jedoch sicherstellen, dass Sie die Nutzungsbedingungen für alle APIs befolgen, die Sie verantwortungsbewusst verwenden und umgehen. Ihre Trello -Chrome -Erweiterung, indem Sie Änderungen an den Dateien Ihrer Erweiterung vornehmen und dann die aktualisierte Version in den Chrome -Web Store hochladen. Chrome wird automatisch installierte Erweiterungen auf die neueste Version aktualisieren.

Kann ich meine Trello -Chrome -Erweiterung monetarisieren? Mit dem Chrome-Webladen können Entwickler ihre Erweiterungen entweder als einmaliger Kauf oder als Abonnement berechnen. Sie können Ihre Erweiterung auch durch In-App-Käufe oder Werbung monetarisieren.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine Trello -Chrome -Erweiterung - API -Authentifizierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!