So erstellen Sie eine Trello -Chrome -Erweiterung - Exportlisten

Im vorherigen Teil haben wir die Grundlagen unserer Erweiterung erstellt und die Authentifizierung über einen benutzerdefinierten Einstellungsbildschirm von Foundation betrieben und die JavaScript-Clientbibliothek von Trello verwendet. In diesem Teil werden wir unsere Erweiterung beenden, indem wir die Exportlogik und die Benutzeroberfläche hinzufügen.

Key Takeaways

• Verwenden Sie die `chrome.extension.sendMessage` -API für eine sichere Token -Übertragung zwischen der Einstellungsseite und der Hintergrundseite der Chromerweiterung.
• Öffnen Sie automatisch die Einstellungsseite der Erweiterung bei der ersten Installation oder wenn eine Trello -Karte ohne Authentifizierung besucht wird.
• Integrieren Sie eine benutzerdefinierte Menüoption in die Benutzeroberfläche von Trello, um den Listenexport zu aktivieren. Verwenden Sie JQuery, um dynamische DOM -Änderungen zu verarbeiten.
• Abrufen einer Trello -Listen -ID über eine Problemumgehung mit der Inspektion von Kartenelementen innerhalb der Liste, die aufgrund von Trello -UI -Einschränkungen erforderlich sind.
• Implementieren Sie die Nachrichtenübergabe im Hintergrundskript, um Listenkarten von Trellos API abzurufen, sobald die Listen -ID erfasst wurde.
• Bieten Sie Exportoptionen sowohl in TXT- als auch in JSON-Formaten an, indem Sie ein maßgeschneidertes Modal-Popup verwenden, um Exportdaten anzuzeigen, um CSS-Konflikte mit den nativen Stilen von Trello zu umgehen.

Messaging

Wenn wir uns mit Trello auf dem Einstellungsbildschirm authentifizieren, wird das Trello -Token im lokalen Speicher gespeichert. Die Einstellungsseite ist jedoch eine eigene Seite und effektiv ihre eigene Umgebung - Ergo haben weder die Hintergrundseite der Erweiterung noch die Inhaltskripte der Erweiterung zugreifen. Hier müssen wir eine Nachrichtenübergabe verwenden.

Die API von chrome.extesion.sendMessage wird verwendet, um Nachrichten an und von Hintergrundseiten zu senden. In unserem Fall werden wir es verwenden, um das Token von der Einstellungsseite an unsere Hintergrundseite zu senden. Da unser Einstellungsabenteuer abgeschlossen ist, sobald dies abgeschlossen ist, können wir die Registerkarte automatisch schließen, um die Benutzerfreundlichkeit zu verbessern.

Aktualisieren Sie den ersten Teil der Init -Funktion in Einstellungen.js:

<span>// Check if page load is a redirect back from the auth procedure
</span>    <span>if (HashSearch.keyExists('token')) {
</span>        <span>Trello.authorize(
</span>            <span>{
</span>                <span>name: "Trello Helper Extension",
</span>                <span>expiration: "never",
</span>                <span>interactive: false,
</span>                <span>scope: {read: true, write: false},
</span>                <span>success: function () {
</span>                    chrome<span>.extension.sendMessage({
</span>                        <span>command: 'saveToken',
</span>                        <span>token: localStorage.getItem('trello_token')
</span>                    <span>}, function(data) {
</span>                        chrome<span>.tabs.getCurrent(function (tab) {
</span>                            chrome<span>.tabs.remove(tab.id)
</span>                        <span>});
</span>                    <span>});
</span>                <span>},
</span>                <span>error: function () {
</span>                    <span>alert("Failed to authorize with Trello.")
</span>                <span>}
</span>            <span>});
</span>    <span>}</span>

Mit dieser Logik sagen wir die Trello -Bibliothek, dass sie eine Nachricht an die Erweiterung senden soll, wenn die Authentifizierung abgeschlossen ist, und sobald sie eine Rückgabenachricht erhält, in der die Nachricht empfangen wurde (das ist der Teil (Daten)), schließen wir die Aktuelle Registerkarte

Lassen Sie uns nun mit der Hintergrundseite umgehen. Ändern Sie zunächst den Inhalt des Hintergrunds.html auf diese:

<span><span>
</span><span><span><span><script> type<span >="text/javascript"</script></span> src<span>="scripts/key.js"</span>></span><span><span></span>></span>
</span><span><span><span><script> type<span >="text/javascript"</script></span> src<span>="scripts/background.js"</span>></span><span><span></span>></span>
</span><span><span><span><script> type<span >="text/javascript"</script></span> src<span>="lib/jquery-2.1.1.min.js"</span>></span><span><span></span>></span>
</span><span><span><span><script> type<span >="text/javascript"</script></span> src<span>="lib/trello_client.js"</span>></span><span><span></span>></span></span></span>

Wir laden den App -Schlüssel, das Hintergrundskript, das wir für unsere Logik verwenden, und den Trello -Client wie zuvor. Offensichtlich brauchen wir auch JQuery - es ist Trellos Abhängigkeit.

Ändern Sie dann Skripte/Hintergrund.js in:

chrome<span>.extension.onMessage.addListener(
</span>    <span>function (request<span>, sender, sendResponse</span>) {
</span>        chrome<span>.pageAction.show(sender.tab.id);
</span>
        <span>// Now we have a token saved locally, as fetched from the settings page after authorization.
</span>        <span>if (request.command == 'saveToken') {
</span>            <span>localStorage.setItem('trello_token', request.token);
</span>            <span>sendResponse();
</span>            <span>return true;
</span>        <span>}
</span>
    <span>});</span>

Dies ist der Teil, der die Nachricht von der Seite "Einstellungen" empfängt. Es greift das Token aus der Anfrage heraus und spart es für zukünftige Verwendung in LocalStorage. Wir verwenden die Objektbildung mit dem Befehl als Hauptschlüssel, da wir später andere Befehle in die Hintergrundseite senden möchten.

automatische Einstellung

Über dem Befehl Savetoken, lass uns einen anderen Block:

<span>// Check if page load is a redirect back from the auth procedure
</span>    <span>if (HashSearch.keyExists('token')) {
</span>        <span>Trello.authorize(
</span>            <span>{
</span>                <span>name: "Trello Helper Extension",
</span>                <span>expiration: "never",
</span>                <span>interactive: false,
</span>                <span>scope: {read: true, write: false},
</span>                <span>success: function () {
</span>                    chrome<span>.extension.sendMessage({
</span>                        <span>command: 'saveToken',
</span>                        <span>token: localStorage.getItem('trello_token')
</span>                    <span>}, function(data) {
</span>                        chrome<span>.tabs.getCurrent(function (tab) {
</span>                            chrome<span>.tabs.remove(tab.id)
</span>                        <span>});
</span>                    <span>});
</span>                <span>},
</span>                <span>error: function () {
</span>                    <span>alert("Failed to authorize with Trello.")
</span>                <span>}
</span>            <span>});
</span>    <span>}</span>

Wenn wir keinen bestimmten Befehl ausgeben und unser Benutzer noch nicht mit Trello authentifiziert ist, öffnen Sie die Einstellungsseite in einer neuen Registerkarte. Dies stellt sicher, dass die Einstellungsseite unmittelbar nach der ersten Installation der Erweiterung geöffnet wird, sobald eine Trello -Karte im Browser besucht wird.

Hinzufügen einer Menüoption

Trellos Benutzeroberfläche ist sehr, sehr unfreundlich für die Anpassung. Die Listen haben keine IDs in ihren Elementen, entweder als Datenattribute oder Links jeglicher Art, während Karten dies tun. Die Kontextmenüs, die beim Klicken auf die Schaltfläche Listenoptionen in der oberen rechten Ecke hervorgebracht werden. Aufgerufen, wenn Sie in der Benutzeroberfläche auf so ziemlich auf jedes andere Menü klicken. Was noch schlimmer ist, sobald Sie das Popover -Menü einer Liste anrufen, enthält das Menü selbst keine Kennung der Liste, die sie aufgerufen wurde. Trello API darüber und holen Sie die Karten für den Export. Aus diesem Grund scheint das, was folgt

Um dem Kontextmenü eine Menüoption hinzuzufügen, müssen wir das Inhaltskript von Main.js bearbeiten. Drehen Sie es in dies:

<span><span>
</span><span><span><span><script> type<span >="text/javascript"</script></span> src<span>="scripts/key.js"</span>></span><span><span></span>></span>
</span><span><span><span><script> type<span >="text/javascript"</script></span> src<span>="scripts/background.js"</span>></span><span><span></span>></span>
</span><span><span><span><script> type<span >="text/javascript"</script></span> src<span>="lib/jquery-2.1.1.min.js"</span>></span><span><span></span>></span>
</span><span><span><span><script> type<span >="text/javascript"</script></span> src<span>="lib/trello_client.js"</span>></span><span><span></span>></span></span></span>

Beginnend mit var popover = $ (". Pop-over"), wir setzen eine Variable, um das Popover-Objekt zu halten, damit wir es nicht weiter abrufen müssen. Wenn dann die Menüschaltfläche in einer Liste geklickt wird (.List-Header-Menu-ICON), beschwören wir ein Intervall, das ständig darauf ansieht, ob der Popover sichtbar ist oder nicht. Sobald es sichtbar wird, stoppt die Überprüfung und eine Menüoption wird am Ende aller Optionen beigefügt, speziell so gestaltet, dass er wie der Rest aussieht. Schließlich ist ein Klick -Ereignishandler an diese Option gebunden, damit wir können, damit wir können Rufen Sie "Exportieren" an, wenn die Option geklickt wird. Aber .. Woher wissen wir, was wir exportieren müssen? Und in welchem ​​Format exportieren wir?

Finden Sie die List -ID

Wie ich bereits sagte, ist Trellos Benutzeroberfläche notorisch Entwickler, die unfreundlich sind. Es bietet keine Listen -IDs mit den DOM -Elementen, daher ist das Finden weniger als einfach. Warum brauchen wir Listen -IDs? Um die Trello -API abzufragen und die Karten abzurufen, können wir sie exportieren - wir sagten bereits, wir würden die Benutzeroberfläche aufgrund ihrer Instabilität auf großen Boards nicht analysieren, aber wir werden uns auf die API verlassen.

Zum Glück können wir, wenn wir die Karten in einzelnen Listen inspizieren, sehen, dass diese tatsächlich ein HREF -Attribut haben und dass es die Karten -ID enthält. Indem wir die Karten -ID kennen, können wir Trello für seine Informationen abfragen und die ID der übergeordneten Liste erfassen. Aber ... wenn das Popover -Menü nicht an eine Liste beigefügt ist, wie finden wir dann heraus, auf welche Liste wir geklickt haben? Wir können nicht einfach die erste Karte schnappen, auf die wir stoßen, das wäre zu zufällig.

Wir können das von JQuery abgefeuerte Ereignis verwenden, wenn die Menüschaltfläche klickt. Das ist wichtig! Wir verwenden das Original -Klicken auf die Menüschaltfläche anstelle des Klickens auf die Option "Exportieren", da die ursprüngliche Schaltfläche an die Liste gebunden ist, an der wir den Exportieren haben, das tatsächliche Menü, das spricht wird, ist nicht und als solche. macht es uns fast unmöglich, herauszufinden, mit welcher Liste wir uns befassen. Fügen Sie anstelle des Kommentars der // Exportliste im obigen Code Folgendes hinzu:

<span>// Check if page load is a redirect back from the auth procedure
</span>    <span>if (HashSearch.keyExists('token')) {
</span>        <span>Trello.authorize(
</span>            <span>{
</span>                <span>name: "Trello Helper Extension",
</span>                <span>expiration: "never",
</span>                <span>interactive: false,
</span>                <span>scope: {read: true, write: false},
</span>                <span>success: function () {
</span>                    chrome<span>.extension.sendMessage({
</span>                        <span>command: 'saveToken',
</span>                        <span>token: localStorage.getItem('trello_token')
</span>                    <span>}, function(data) {
</span>                        chrome<span>.tabs.getCurrent(function (tab) {
</span>                            chrome<span>.tabs.remove(tab.id)
</span>                        <span>});
</span>                    <span>});
</span>                <span>},
</span>                <span>error: function () {
</span>                    <span>alert("Failed to authorize with Trello.")
</span>                <span>}
</span>            <span>});
</span>    <span>}</span>

Erstellen Sie dann die Funktion:

<span><span>
</span><span><span><span><script> type<span >="text/javascript"</script></span> src<span>="scripts/key.js"</span>></span><span><span></span>></span>
</span><span><span><span><script> type<span >="text/javascript"</script></span> src<span>="scripts/background.js"</span>></span><span><span></span>></span>
</span><span><span><span><script> type<span >="text/javascript"</script></span> src<span>="lib/jquery-2.1.1.min.js"</span>></span><span><span></span>></span>
</span><span><span><span><script> type<span >="text/javascript"</script></span> src<span>="lib/trello_client.js"</span>></span><span><span></span>></span></span></span>

Erstellen Sie schließlich die FindFirstCardid -Funktion:

chrome<span>.extension.onMessage.addListener(
</span>    <span>function (request<span>, sender, sendResponse</span>) {
</span>        chrome<span>.pageAction.show(sender.tab.id);
</span>
        <span>// Now we have a token saved locally, as fetched from the settings page after authorization.
</span>        <span>if (request.command == 'saveToken') {
</span>            <span>localStorage.setItem('trello_token', request.token);
</span>            <span>sendResponse();
</span>            <span>return true;
</span>        <span>}
</span>
    <span>});</span>

Wir holen den Großelternteil des Ereignisziels (die Liste) und finden den ersten Kartentitel darin. Der Titel enthält die HREF in dieser Form:

Wenn kein Titel gefunden wurde, alarmieren wir den Benutzer darüber, dass die Liste nicht exportiert werden kann. Andernfalls extrahieren wir und geben die ID der Karte zurück.

Jetzt, da unsere Exportlist -Funktion die Karten -ID hat, können wir sie verwenden, um die Listen -ID herauszufinden. Wenn wir uns die API -Dokumente ansehen, können wir die URL -Karte/{{id}} verwenden, um das zu erhalten, was wir brauchen. Um die Datenmenge zu minimieren, die wir Trello zurückgeben, können wir die Abfrage auch auf die IDLILT -Eigenschaft mit dem Fields -Param beschränken. Fügen wir einen neuen Befehl in den Hintergrund hinzu.js.

<span>if (!request.command && !localStorage.getItem('trello_token')) {
</span>            chrome<span>.tabs.create({url: chrome.extension.getURL('settings/index.html')});
</span>            <span>sendResponse();
</span>            <span>return true;
</span>        <span>}</span>

Wir müssen auch die Trelloinit -Funktion definieren. Dies ist eine, die wir jedes Mal anrufen können, bevor ein Befehl mit Trello aufgerufen wird, sodass das Token und der Schlüssel korrekt eingestellt sind und wir zu 100% sicher sind, dass unsere Anfragen authentifiziert sind.

chrome<span>.extension.sendMessage({}, function (response) {
</span>    <span>var readyStateCheckInterval = setInterval(function () {
</span>        <span>if (document.readyState === "complete") {
</span>            <span>clearInterval(readyStateCheckInterval);
</span>
            <span>var popover = $(".pop-over");
</span>            <span>$('.list-header-menu-icon').click(function(event) {
</span>                <span>var popover_summoned_interval = setInterval(function () {
</span>                    <span>if ($(popover).is(':visible')) {
</span>                        <span>clearInterval(popover_summoned_interval);
</span>                        <span>$(".pop-over .content").append('<hr>
<ul> <li><a href="#">Export This List</a></li> </ul>');
</span>                        <span>$(".js-export-list").click(function(e){
</span>                            <span>// EXPORT LIST
</span>                        <span>});
</span>                    <span>}
</span>                <span>}, 50);
</span>            <span>});
</span>        <span>}
</span>    <span>}, 10);
</span><span>});</span>

Wir holen jetzt erfolgreich die List -ID.

Abrufen der Listenkarten

Mit ein paar weiteren Codezeilen, zurück in main.js, haben wir jetzt eine Exportlist -Funktion wie folgt:

<span>exportList(event);</span>

In „Humanese“ ist dies:

• Holen Sie sich die ID der ersten Karte
• Wenn die ID nicht gefunden wird, ist die Liste offensichtlich leer
• Wenn die ID gefunden wird, rufen Sie die Hintergrundseite an und geben Sie sie mit
Wenn die Listen -ID in Ordnung ist, rufen Sie einen weiteren Anruf auf die Hintergrundseite, um die Karten der Liste zu erhalten, und geben Sie das Ergebnis in der Konsole aus.
• .

Zurück auf der Hintergrundseite können wir jetzt den Befehl getListcards erstellen, gemäß den API -Dokumenten:

<span>function exportList(event) {
</span>
    <span>var first_card_id = findFirstCardId(event);
</span>    <span>if (!first_card_id) {
</span>        <span>alert('No cards found in the list.');
</span>        <span>return false;
</span>    <span>}
</span><span>}</span>

Wenn Sie jetzt die Erweiterung neu laden und testen, sollten Sie nicht nur in der Lage sein, die Exportoption in Ihren Listen anzuzeigen, sondern auch die Daten, nach denen wir in der Konsole exportiert werden, nachdem Sie auf die Option klicken.

Exportformate

Im Moment werden wir einen vereinfachten Exportansatz verfolgen, da dieses Tutorial ein bisschen so lange läuft. Wir bieten dem Benutzer eine Auswahl von TXT oder JSON mit einer Form und Form, die von uns vordefiniert ist. Die Textausgabe wird vorerst so aussehen:

<span>/**
</span><span> * Uses the menu button on a card to find the first card in that list and get its ID
</span><span> * Returns false if not found, or the ID if there is a card
</span><span> * <span>@param event
</span></span><span> * <span>@returns bool | string
</span></span><span> */
</span><span>function findFirstCardId(event) {
</span>    <span>var titles = $(event.currentTarget).parent().parent().find('a.list-card-title:first');
</span>    <span>if (titles[0] === undefined) {
</span>        <span>console.error('List has no cards!');
</span>        <span>return false;
</span>    <span>} else {
</span>        <span>return $(titles[0]).attr('href').split('/')[2];
</span>    <span>}
</span><span>}</span>

Während JSON von Trello empfangen wird, d. H. Dies:

Die JSON -Daten werden offensichtlich viel mehr Informationen liefern, aber es ist auch viel einfacher zu bearbeiten - fügen Sie sie einfach in eine IDE oder ein Tool wie JSON -Editor Online oder JSON an CSV ein, und Sie können loslegen.

Um zu exportieren, benötigen wir ein modales Fenster, in dem die Daten eingefügt werden können. Eine ansprechende Option hier ist das Foundation -Framework, da wir sie bereits für unsere Einstellungsseite verwenden und über eine eigene modale Popup -Komponente verfügen, aber weder die CSS von Foundation noch Trellos CSS sind ordnungsgemäß genannt und einschließlich der CSS von Foundation in Trellos Ursachenkonflikte. Wir haben auch JQuery vorgeklagt, aber auch hier, um einen Dialog zum Laufen zu erhalten, müssten wir die JQuery-UI einbeziehen, und selbst das wäre nicht genug-Chromverlängerungen unterstützen nicht das Laden von Bildern in CSS über relative URL ( . Ansätze.

Stattdessen werden wir unser eigenes Popup erstellen und einige der vorhandenen Stile von Trello verwenden, um alle Konflikte auf dem Weg zu ignorieren. Ich werde den endgültigen Code hier einsetzen und ihn dann erklären. Bitte erstellen Sie lib/trellohelper/js/exportpopup.js und geben Sie ihm den folgenden Inhalt:

<span>// Check if page load is a redirect back from the auth procedure
</span>    <span>if (HashSearch.keyExists('token')) {
</span>        <span>Trello.authorize(
</span>            <span>{
</span>                <span>name: "Trello Helper Extension",
</span>                <span>expiration: "never",
</span>                <span>interactive: false,
</span>                <span>scope: {read: true, write: false},
</span>                <span>success: function () {
</span>                    chrome<span>.extension.sendMessage({
</span>                        <span>command: 'saveToken',
</span>                        <span>token: localStorage.getItem('trello_token')
</span>                    <span>}, function(data) {
</span>                        chrome<span>.tabs.getCurrent(function (tab) {
</span>                            chrome<span>.tabs.remove(tab.id)
</span>                        <span>});
</span>                    <span>});
</span>                <span>},
</span>                <span>error: function () {
</span>                    <span>alert("Failed to authorize with Trello.")
</span>                <span>}
</span>            <span>});
</span>    <span>}</span>

Ich habe mich für die Popup -Logik außerhalb des Hauptskripts entschieden, damit wir sie später leicht verbessern können. Ich habe mich auch für einen „objektorientierten“ Ansatz entschieden, nur weil es mir gefällt. Wir definieren eine neue Trelloexportpopup -Klasse mit drei Methoden - Init, Show und Fell. Init wird aufgerufen, sobald die Inhaltskripte geladen werden. Es ist die Methode, die für den Aufbau des Popups, das Anbringen der richtigen Ereignishörer und das Aufnehmen des Ganzen in das HTML des Trello -Boards zuständig ist. Das Hinzufügen der .button -Klasse zu den Tasten im Header des Popups stellt sicher, dass wir einen Look erhalten, der mit der aktuellen Trello -Benutzeroberfläche übereinstimmt. Der Look, den ich hier entscheide, ist eine Art "Registerkarte" -Rinschnittstelle - klicken Sie auf Text und der Text Export zeigt, klicken Sie auf JSON und JSON werden angezeigt.

Die Versteckmethode wird das Popup ausblenden, jedoch nur, wenn sie irgendwo in einer sichtbaren Form irgendwo auf der Seite existiert. Die Messmethode aktiviert automatisch die erste Registerkarte (JSON) und fülle die Exportbereiche mit den erforderlichen Daten. Der JSON -Bereich ist ein einfacher Stringify -Dump - eine Ausgabe der JSON -Daten in Zeichenfolgenform, während der Textbereich vorerst lediglich den Titel und die Beschreibung der Karte auf einer separaten Zeile mit zwei leeren Zeilen zwischen Karten ausgibt - hoch - hoch "Kopienfreundlich".

Alles, was wir jetzt tun müssen, ist es ein wenig zu stylen. Hier ist der Inhalt von lib/trellohelper/css/exportpopup.css:

<span><span>
</span><span><span><span><script> type<span >="text/javascript"</script></span> src<span>="scripts/key.js"</span>></span><span><span></span>></span>
</span><span><span><span><script> type<span >="text/javascript"</script></span> src<span>="scripts/background.js"</span>></span><span><span></span>></span>
</span><span><span><span><script> type<span >="text/javascript"</script></span> src<span>="lib/jquery-2.1.1.min.js"</span>></span><span><span></span>></span>
</span><span><span><span><script> type<span >="text/javascript"</script></span> src<span>="lib/trello_client.js"</span>></span><span><span></span>></span></span></span>

Dies stellt sicher, dass das Popup zentriert ist und wie ein native Trello -Popups aussieht. Es stellt auch sicher, dass der Textbereich, der uns zeigt, dass der Exportinhalt den Rest des Popup -Raums füllt. Nehmen wir nun diese Dateien in unsere Inhaltskripte ein:

<span>// Check if page load is a redirect back from the auth procedure
</span>    <span>if (HashSearch.keyExists('token')) {
</span>        <span>Trello.authorize(
</span>            <span>{
</span>                <span>name: "Trello Helper Extension",
</span>                <span>expiration: "never",
</span>                <span>interactive: false,
</span>                <span>scope: {read: true, write: false},
</span>                <span>success: function () {
</span>                    chrome<span>.extension.sendMessage({
</span>                        <span>command: 'saveToken',
</span>                        <span>token: localStorage.getItem('trello_token')
</span>                    <span>}, function(data) {
</span>                        chrome<span>.tabs.getCurrent(function (tab) {
</span>                            chrome<span>.tabs.remove(tab.id)
</span>                        <span>});
</span>                    <span>});
</span>                <span>},
</span>                <span>error: function () {
</span>                    <span>alert("Failed to authorize with Trello.")
</span>                <span>}
</span>            <span>});
</span>    <span>}</span>

Lassen Sie uns schließlich Main.js mit der neuen Popup -Logik aufpeppen. Die endgültige Version von main.js sieht folgendermaßen aus:

<span><span>
</span><span><span><span><script> type<span >="text/javascript"</script></span> src<span>="scripts/key.js"</span>></span><span><span></span>></span>
</span><span><span><span><script> type<span >="text/javascript"</script></span> src<span>="scripts/background.js"</span>></span><span><span></span>></span>
</span><span><span><span><script> type<span >="text/javascript"</script></span> src<span>="lib/jquery-2.1.1.min.js"</span>></span><span><span></span>></span>
</span><span><span><span><script> type<span >="text/javascript"</script></span> src<span>="lib/trello_client.js"</span>></span><span><span></span>></span></span></span>

Wir „instanziieren“ das TrelloExportPopup zuerst, sodass wir seine Methoden in unserem Code verwenden können. Bevor wir den Click -Event -Listener an das Menü binden, initialisieren wir unser Popup mit tep.init (), damit er in unserem DOM gut und bereit ist, bevor es benötigt wird. Nachdem der Exportlink geklickt wurde, rufen wir unsere Exportlist -Funktion wie zuvor auf.

In der Exportlist -Funktion verbergen wir zuerst das Popup mit tep.hide (), falls einer offen ist, während wir das Menü einer anderen Liste durchsuchen, und dann zeigen wir die Karten von unserer Hintergrundseite Das Exportpopup mit Tep.Show (Daten). Das ist es!

laden Sie die Erweiterung jetzt neu, aktualisieren Sie die Trello -Seite und Sie sollten eine funktionierende Exportoption haben!

Fehler und Verbesserungen

Ich habe ein paar Fehler und Vorbehalte absichtlich hinterlassen. Wenn es genügend Interesse gibt, werden wir uns mit denen in einem zukünftigen Beitrag befassen, um die Erweiterung für die Fail-Safety zu optimieren und zu optimieren. Hier sind einige Verbesserungen, die noch möglich sind:

Caching

Um die Dinge für zukünftige Verwendungen zu beschleunigen, können wir Lokalstorage verwenden, um sich daran zu erinnern, zu welchem ​​Board eine Liste gehört. Beachten Sie, dass dies möglicherweise brechen kann, wenn Sie eine Liste von Board in Board verschieben. Implementieren Sie diese Funktion sorgfältig. Stellen Sie sicher, dass Sie einen weiteren Hörer für Listenbewegungen hinzufügen, damit Sie die zwischengespeicherten Daten ungültig machen können!

doppelte Exportoption spawns

Wenn Sie auf das Menüsymbol männlich klicken, während das Menü noch geöffnet ist, fügen Sie unten im Menü immer wieder neue Optionen "Exportieren" hinzu. Ein fehlender Sicherheitssicherheit muss implementiert werden, welche Überprüfungen, wenn die Option bereits vorhanden ist.

Init Probleme

In riesigen Vorständen mit Hunderten von Boards und Mitgliedern wird die Benutzeroberfläche von Trello miserabel langsam. Dies führt zu einer Fehlzündung des Dokument -Ereignisses, und der Init -Teil unseres Skripts wird ausgeführt, bevor es UI -Elemente gibt, auf denen die Zuhörer binden. Daher hat das Menü manchmal die Exportoption und erhält sie erst, wenn Sie aktualisiert werden.

Wechseln von Boards

Wechselbretter tötet die aktuelle Benutzeroberfläche und baut sie für das neue Vorstand um. Das Problem ist jedoch, dass die Elemente mit den Ereignishörern ebenfalls getötet werden - sodass unser Menü die Exportoption nicht mehr beschwört. Ähnlich wie beim obigen Problem muss eine Reinitialisierung an Bordveränderung ausgelöst werden, damit alles funktioniert.

inifinite Loop

Es besteht eine astronomisch kleine Chance, dass ein Popover nach einem Menüklick nicht rendert - vielleicht hat Trello etwas in seiner Benutzeroberfläche geändert, vielleicht haben sie die Klasse geändert oder sie haben nur einen UI -Fehler - in welchem ​​Fall der Fall der Fall Die Überprüfung der Schleife auf seine Sichtbarkeit würde unendlich werden und enorme Mengen an CPU -Ressourcen in Anspruch nehmen, bis der Registerkartenprozess getötet wurde. Ein Schutz gegen das wäre schön.

Schlussfolgerung

In dieser kurzen Serie haben wir eine einfache Chrome -Erweiterung für Trello erstellt, mit der wir die Karten aus einer bestimmten Liste als JSON- oder TXT -Liste exportieren können. Verwenden Sie dieses Beispiel, um darauf aufzubauen und Ihre eigenen Trello -Erweiterungen zu erstellen. Die Authentifizierung wurde bereits für Sie gelöst, und die Logikvorlagen sind vorhanden - beginnen Sie mit dem Codieren!

Der Code, den wir in dieser Tutorial -Serie geschrieben haben, ist auf GitHub verfügbar.

Möchten Sie eine Fortsetzung dieses Tutorials sehen? Weitere Funktionen implementiert? Lass es mich wissen! Feedback geschätzt!

häufig gestellte Fragen (FAQs) zum Exportieren von Trello -Listen

Wie kann ich Trello -Listen so exportieren, um zu excel? Zunächst müssen Sie die Chrome -Erweiterung mit dem Namen „Export für Trello“ installieren. Nach der Installation können Sie zu Ihrer Trello -Karte navigieren und auf das Erweiterungssymbol klicken. Sie sehen eine Option, um Ihre Trello -Listen zu exportieren. Wählen Sie das Excel -Format und Ihre Trello -Listen werden als Excel -Datei heruntergeladen. Diese Datei enthält alle Details Ihrer Trello -Listen, einschließlich Kartennamen, Beschreibungen, Beschriftungen und mehr. PDF. Ähnlich wie beim Export nach Excel müssen Sie die Chrome -Erweiterung „Export für Trello“ installieren. Navigieren Sie nach der Installation zu Ihrer Trello -Karte, klicken Sie auf das Erweiterungssymbol und wählen Sie das PDF -Format zum Exportieren. Ihre Trello -Listen werden als PDF -Datei heruntergeladen. Der Prozess ähnelt dem Exportieren nach Excel oder PDF. Sie müssen die Chrome -Erweiterung „Export für Trello“ installieren, zu Ihrer Trello -Karte navigieren, auf das Erweiterungssymbol klicken und das CSV -Format zum Exportieren auswählen. Ihre Trello -Listen werden als CSV -Datei heruntergeladen.

Kann ich Trello -Listen in ein Bild exportieren? Dies kann mit der Chromverlängerung „Export für Trello“ erfolgen. Navigieren Sie nach der Installation der Erweiterung zu Ihrer Trello -Karte, klicken Sie auf das Erweiterungssymbol und wählen Sie das Bildformat zum Exportieren. Ihre Trello -Listen werden als Bilddatei heruntergeladen.

Kann ich Trello -Listen mit Beschriftungen exportieren? Details zu Ihren Trello -Listen einschließlich Etiketten werden exportiert. Dies bedeutet, dass Sie Ihre Etiketten auch nach dem Exportieren Ihrer Trello -Listen verfolgen können.

Kann ich Trello -Listen mit Kartenbeschreibungen exportieren? Dies bedeutet, dass Sie Ihre Kartenbeschreibungen auch nach dem Exportieren Ihrer Trello -Listen verfolgen können. Trello ”Chrome -Erweiterung, alle Details Ihrer Trello -Listen einschließlich Fälligkeitstermine werden exportiert. Dies bedeutet, dass Sie Ihre Fälligkeitsdaten auch nach dem Exportieren Ihrer Trello -Listen verfolgen können. Anhänge exportieren. Alle anderen Details Ihrer Trello -Listen, einschließlich Kartennamen, Beschreibungen, Beschriftungen und Fälligkeitstermine, können jedoch exportiert werden.

Kann ich Trello -Listen mit Kommentaren exportieren? Die Chrome -Erweiterung von Trello unterstützt keine Exportents ". Alle anderen Details Ihrer Trello -Listen, einschließlich Kartennamen, Beschreibungen, Beschriftungen und Fälligkeitstermine, können jedoch exportiert werden. Mit der Chrome -Erweiterung von Trello können Sie die Trello -Listen gleichzeitig aus einem Board exportieren. Wenn Sie Listen aus mehreren Boards exportieren möchten, müssen Sie zu jeder Karte navigieren und die Listen separat exportieren.

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