Dans la partie précédente, nous avons construit les bases de notre extension, implémentant l'authentification via un écran de paramètres personnalisé alimenté par la fondation et utilisant la bibliothèque client JavaScript de Trello. Dans cette partie, nous terminerons notre extension en ajoutant la logique d'exportation et l'interface utilisateur.
Lorsque nous nous authentifions avec Trello sur l'écran des paramètres, le jeton Trello est enregistré dans le stockage local. Cependant, la page Paramètres est sa propre page et, en fait, son propre environnement - Ergo, ni la page d'arrière-plan de l'extension ni les scripts de contenu de l'extension ne l'ont accès. C'est là que nous devons utiliser le passage du message.
L'API Chrome.Extension.SendMessage est utilisée pour envoyer des messages vers et depuis les pages d'arrière-plan. Dans notre cas, nous l'utiliserons pour envoyer le jeton de la page Paramètres à notre page d'arrière-plan. Étant donné que notre aventure des paramètres est terminée dès que cela est terminé, nous pourrions tout aussi bien fermer l'onglet, pour améliorer la convivialité.
Mettez à jour la première partie de la fonction init dans Settings.js à ceci:
<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>En utilisant cette logique, nous disons à la bibliothèque Trello d'envoyer un message à l'extension à la fin de l'authentification, et dès qu'il reçoit un message de retour disant que le message a été reçu (c'est la partie de la fonction (données)), nous fermons le Onglet actuel.
Maintenant, traitons la page d'arrière-plan. Tout d'abord, modifiez le contenu de l'arrière-plan.html à ceci:
<span><span><!doctype html></span> </span><span><span><span><script</span> type<span>="text/javascript"</span> src<span>="scripts/key.js"</span>></span><span><span></script</span>></span> </span><span><span><span><script</span> type<span>="text/javascript"</span> src<span>="scripts/background.js"</span>></span><span><span></script</span>></span> </span><span><span><span><script</span> type<span>="text/javascript"</span> src<span>="lib/jquery-2.1.1.min.js"</span>></span><span><span></script</span>></span> </span><span><span><span><script</span> type<span>="text/javascript"</span> src<span>="lib/trello_client.js"</span>></span><span><span></script</span>></span></span>
Nous chargeons la clé de l'application, le script d'arrière-plan que nous utiliserons pour notre logique et le client Trello comme auparavant. De toute évidence, nous avons aussi besoin de jquery - c'est la dépendance de Trello.
Ensuite, modifiez les scripts / background.js vers:
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>Il s'agit de la pièce qui reçoit le message de la page Paramètres. Il attrape le jeton hors de la demande et l'économise dans LocalStorage pour une utilisation future. Nous utilisons la formation d'objets avec la commande comme clé principale car nous avons l'intention d'envoyer d'autres commandes dans la page d'arrière-plan plus tard.
Au-dessus de la commande SaveToken, un autre bloc:
<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>Si nous n'avons pas émis de commande spécifique et que notre utilisateur n'est pas encore authentifié avec Trello, ouvrez la page Paramètres dans un nouvel onglet. Cela garantit que la page des paramètres est ouverte immédiatement après l'installation initiale de l'extension, dès qu'une carte Trello est visitée dans le navigateur.
L'interface utilisateur de Trello est très, très hostile à la personnalisation. Les listes n'ont pas d'ID dans leurs éléments, soit en tant qu'attributs de données, soit en liens de quelque nature que ce soit, tandis que les cartes le font. Les menus contextuels qui sont engendrés lorsque vous cliquez sur le bouton des options de liste dans le coin supérieur droit sont tous reconstruits à partir de zéro chaque fois qu'ils sont appelés (trop?) Et tous à partir d'une boîte classée comme le «pop-over», qui est Également convoqué si vous cliquez sur à peu près tous les autres menu de l'interface utilisateur. Pire encore, une fois que vous avez appelé le menu popover d'une liste, le menu lui-même n'a pas d'identifiant de la liste sur laquelle il a été appelé, vous n'avez donc aucune idée de son contexte, ce qui rend très difficile d'obtenir facilement l'identifiant d'une liste afin de s'interroger correctement au API Trello à ce sujet et récupérer les cartes pour l'exportation. C'est pourquoi ce qui suit peut sembler énormément de piratage de poisson, mais c'est parce que, eh bien, c'est.
Pour ajouter une option de menu au menu contextuel, nous devons modifier le script de contenu Main.js. Transformez-le en ceci:
<span><span><!doctype html></span> </span><span><span><span><script</span> type<span>="text/javascript"</span> src<span>="scripts/key.js"</span>></span><span><span></script</span>></span> </span><span><span><span><script</span> type<span>="text/javascript"</span> src<span>="scripts/background.js"</span>></span><span><span></script</span>></span> </span><span><span><span><script</span> type<span>="text/javascript"</span> src<span>="lib/jquery-2.1.1.min.js"</span>></span><span><span></script</span>></span> </span><span><span><span><script</span> type<span>="text/javascript"</span> src<span>="lib/trello_client.js"</span>></span><span><span></script</span>></span></span>
En commençant par var popover = $ (". Pop-over");, nous définissons une variable pour maintenir l'objet Popover, juste pour que nous n'ayons pas à continuer de le redéfinir. Ensuite, lorsque le bouton de menu d'une liste est cliqué (.List-header-menu-icon), nous invoquons un intervalle qui regarde constamment si le popover est visible ou non. Une fois qu'il devient visible, la vérification des arrêts et une option de menu sont ajoutées au bas de toutes les options, spécifiquement conçues pour ressembler au reste, donc il s'intègre. Enfin, un gestionnaire d'événements de clic est lié à cette option, afin que nous puissions Appelez «Exporter» lorsque l'option est cliquée. Mais .. comment savons-nous ce que nous avons besoin pour exporter? Et dans quel format exportons-nous?
Comme je l'ai déjà dit, l'interface utilisateur de Trello est notoirement des développeurs peu amicaux. Il n'offre pas d'identifices de liste avec les éléments DOM, donc les trouver est loin d'être simple. Pourquoi avons-nous besoin d'ID de liste? Pour interroger l'API Trello et récupérer les cartes, afin que nous puissions les exporter - nous avons déjà dit que nous n'allions pas analyser l'interface utilisateur en raison de son instabilité sur de grandes planches, mais que nous allions compter sur l'API.
Heureusement, si nous inspectons les cartes dans des listes individuelles, nous pouvons voir que ceux-ci ont réellement un attribut HREF et qu'il contient l'ID de la carte. En connaissant l'ID de la carte, nous pouvons interroger Trello pour ses informations et saisir l'ID de sa liste de parents. Mais .. Si le menu Popover n'est pas joint à une liste, comment pouvons-nous découvrir sur quelle liste nous avons cliqué? Nous ne pouvons pas simplement saisir la première carte que nous rencontrons, ce serait trop aléatoire.
Nous pouvons utiliser l'événement tiré par jQuery lorsque le bouton de menu est cliqué. C'est important! Nous utilisons le clic d'origine sur le bouton de menu, au lieu de la cliquez sur l'option «Exporter» car bien que le bouton d'origine soit lié à la liste que nous intéressons à l'exportation, le menu réel qui est engendré n'est pas et en tant que tel, nous rend presque impossible de savoir à quelle liste nous avons affaire. À la place du commentaire de la liste d'exportation dans le code ci-dessus, ajoutez ceci:
<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>Ensuite, créez la fonction:
<span><span><!doctype html></span> </span><span><span><span><script</span> type<span>="text/javascript"</span> src<span>="scripts/key.js"</span>></span><span><span></script</span>></span> </span><span><span><span><script</span> type<span>="text/javascript"</span> src<span>="scripts/background.js"</span>></span><span><span></script</span>></span> </span><span><span><span><script</span> type<span>="text/javascript"</span> src<span>="lib/jquery-2.1.1.min.js"</span>></span><span><span></script</span>></span> </span><span><span><span><script</span> type<span>="text/javascript"</span> src<span>="lib/trello_client.js"</span>></span><span><span></script</span>></span></span>
Enfin, créez la fonction FindFirstCardid:
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>Nous récupérons le grand-parent de la cible de l'événement (la liste), et trouvons le premier titre de carte. Le titre contient le HREF sous cette forme:
Si aucun titre n'a été trouvé, nous alerter l'utilisateur que la liste ne peut pas être exportée. Sinon, nous extractons et renvoyons l'ID de la carte.
Maintenant que notre fonction d'exportlist a l'ID de carte, nous pouvons l'utiliser pour découvrir l'ID de liste. Si nous regardons les documents API, nous pouvons utiliser la carte URL / {{id}} pour obtenir ce dont nous avons besoin. Pour minimiser la quantité de données que nous demandons à Trello de retourner, nous pouvons également limiter la requête à la propriété IDLIST avec le param de champs. Ajoutons une nouvelle commande dans background.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>Nous devons également définir la fonction trelloinnit. C'est celui que nous pouvons appeler à chaque fois avant qu'une commande qui interagit avec Trello soit appelée, donc le jeton et la clé sont correctement définis et nous sommes à 100% certains de nos demandes sont authentifiées.
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>Nous récupérons maintenant avec succès l'ID de liste.
Avec quelques autres lignes de code, de retour dans main.js, nous avons maintenant une fonction d'exportlist ressemblant à ceci:
<span>exportList(event);</span>
Dans «Humanais», c'est:
De retour dans la page d'arrière-plan, nous pouvons maintenant construire la commande getListcards, selon les documents API:
<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>Si vous rechargez et testez l'extension maintenant, vous devriez non seulement voir l'option d'exportation apparaître sur vos listes, mais aussi les données que nous recherchons exportées dans la console après avoir cliqué sur l'option.
Pour l'instant, nous allons adopter une approche simplifiée pour l'exportation, car ce tutoriel fonctionne un peu tel quel. Nous offrirons à l'utilisateur une sélection de TXT ou JSON, avec une forme et une forme prédéfinies par nous. La sortie du texte sera, pour l'instant, ressemble à ceci:
<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>Alors que JSON sera contenu tel que reçu de Trello, c'est-à-dire ceci:
Les données JSON produiront évidemment beaucoup plus d'informations, mais il est également beaucoup plus facile de modifier - coller simplement dans n'importe quel IDE ou un outil comme JSON Editor Online ou JSON à CSV et vous êtes prêt à partir.
Pour exporter, nous aurons besoin d'une fenêtre modale dans laquelle coller les données. Une option attrayante ici est le cadre de la fondation, car nous l'utilisons déjà pour notre page Paramètres et qu'il a son propre composant contextuel modal, mais ni le CSS de Foundation ni Trello ne sont correctement en espionnage, et y compris le CSS de la Fondation dans les conflits de causes de Trello. Nous avons également jQUERY pré-inclus, mais encore une fois, pour obtenir un dialogue opérationnel, nous aurions besoin d'inclure l'interface utilisateur jQuery et même cela ne serait pas suffisant - les extensions de chrome ne prennent pas en charge les images de chargement dans CSS via l'URL relative ( ) Syntaxe, c'est ce que JQuery Ui utilise - nous devons réécrire CSS de JQuery UI pour utiliser des URL d'extension locales ou pour utiliser des images codées Base64, toutes deux peu attrayantes approche.
Au lieu de cela, nous allons fabriquer notre propre popup et utiliser certains des styles existants de Trello, ignorant tous les conflits en cours de route. Je vais mettre le code final ici, puis l'expliquer. Veuillez créer Lib / Trellohelper / JS / Exportpopup.js et donnez-lui le contenu suivant:
<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>J'ai choisi d'avoir la logique contextuelle en dehors du script principal afin que nous puissions facilement l'améliorer plus tard. J'ai également opté pour une approche «orientée vers l'objet», juste parce que je l'aime. Nous définissons un nouveau TrelloExportPopup «Class», avec trois méthodes - init, show and cache. Init sera appelé dès que les scripts de contenu se chargeront. C'est la méthode chargée de construire la fenêtre contextuelle, d'attacher les bons auditeurs d'événements et d'ajouter le tout dans le HTML de la planche Trello. L'ajout de la classe .button sur les boutons de l'en-tête de la fenêtre contextuelle s'assure que nous avons un look cohérent avec l'interface utilisateur de Trello actuelle. Le look que je vais ici est une sorte d'interface «ongled» - cliquez sur le texte et l'exportation de texte affiche, cliquez sur JSON et JSON est affiché.
La méthode Masquer masquera la fenêtre contextuelle, mais seulement si elle existe quelque part sur la page sous une forme visible. La méthode Show active automatiquement la première vue (JSON) et remplit les zones d'exportation avec les données requises. La zone JSON est un simple vidage stringify - une sortie des données JSON sous forme de chaîne, tandis que la zone de texte, pour l'instant, publie simplement le titre et la description de la carte chacune sur une ligne séparée, avec deux lignes vides entre les cartes - hautement «Copy-P-casson ami».
Tout ce que nous devons faire maintenant, c'est le style un peu. Voici le contenu de Lib / Trellohelper / CSS / Exportpopup.css:
<span><span><!doctype html></span> </span><span><span><span><script</span> type<span>="text/javascript"</span> src<span>="scripts/key.js"</span>></span><span><span></script</span>></span> </span><span><span><span><script</span> type<span>="text/javascript"</span> src<span>="scripts/background.js"</span>></span><span><span></script</span>></span> </span><span><span><span><script</span> type<span>="text/javascript"</span> src<span>="lib/jquery-2.1.1.min.js"</span>></span><span><span></script</span>></span> </span><span><span><span><script</span> type<span>="text/javascript"</span> src<span>="lib/trello_client.js"</span>></span><span><span></script</span>></span></span>
Cela garantit que la popup est centrée et ressemble à des popups Trello indigènes. Il s'assure également que la TextArea qui nous montrera le contenu des exportations remplit le reste de l'espace de la fenêtre contextuelle. Incluons maintenant ces fichiers dans nos scripts de contenu:
<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>Enfin, faisons pimenter Main.js avec la nouvelle logique popup. La version finale de Main.js ressemble à ceci:
<span><span><!doctype html></span> </span><span><span><span><script</span> type<span>="text/javascript"</span> src<span>="scripts/key.js"</span>></span><span><span></script</span>></span> </span><span><span><span><script</span> type<span>="text/javascript"</span> src<span>="scripts/background.js"</span>></span><span><span></script</span>></span> </span><span><span><span><script</span> type<span>="text/javascript"</span> src<span>="lib/jquery-2.1.1.min.js"</span>></span><span><span></script</span>></span> </span><span><span><span><script</span> type<span>="text/javascript"</span> src<span>="lib/trello_client.js"</span>></span><span><span></script</span>></span></span>
Nous «instancions» d'abord le TrelloExportPopup, afin que nous puissions utiliser ses méthodes dans notre code. Ensuite, avant de lier l'écouteur d'événements de clic au menu, nous initialisons notre fenêtre contextuelle avec tep.init (), il est donc bon et prêt dans notre Dom avant qu'il ne soit nécessaire. Une fois le lien d'exportation cliqué, nous appelons notre fonction d'exportlist comme auparavant.
Dans la fonction d'exportlist, nous masquons d'abord la fenêtre contextuelle avec tep.hide () au cas où on serait ouvert pendant que nous naviguons sur le menu d'une autre liste, puis, une fois que nous aurons les cartes de notre page d'arrière-plan, nous affichons La fenêtre contextuelle d'exportation avec tep.show (données). C'est ça!
Recharger l'extension maintenant, actualisez la page Trello, et vous devriez avoir une option d'exportation fonctionnelle!
J'ai laissé quelques bugs et mises en garde à dessein. S'il y a suffisamment d'intérêt, nous allons faire face à ceux dans un prochain article, ajustant et optimiser l'extension pour la sécurité de l'échec. Voici quelques améliorations qui sont encore possibles:
Pour accélérer les choses pour les utilisations futures, nous pouvons utiliser LocalStorage pour nous rappeler à quelle liste appartient à une liste. Notez que cela pourrait se casser si vous déplacez une liste de la carte à la carte, alors implémentez attentivement cette fonctionnalité - assurez-vous d'ajouter un autre auditeur pour les mouvements de la liste, afin que vous puissiez invalider les données mises en cache!
Si vous cliquez maniaque sur l'icône du menu pendant que le menu est toujours ouvert, vous continuerez à ajouter de nouvelles options «d'exportation» en bas du menu. Uneafafe doit être implémentée qui vérifie si l'option est déjà là.
sur d'énormes planches avec des centaines de planches et de membres, l'interface utilisateur de Trello devient malsmique lente. Cela provoque un raté de l'événement Prêt Document, et la partie initiale de notre script s'exécute avant qu'il y ait des éléments d'interface utilisateur sur lesquels lier les auditeurs. En tant que tel, le menu n'a parfois pas l'option d'exportation et ne l'obtient pas avant de vous rafraîchir.
Changer les planches tue l'interface utilisateur actuelle et le reconstruit pour le nouveau conseil d'administration. Le problème est cependant que les éléments avec les auditeurs d'événements sont également tués - donc notre menu n'appelle plus l'option d'exportation. Semblable au problème ci-dessus, une réinitialisation doit être déclenchée à bord du changement pour que tout fonctionne.
Il y a une chance astronomiquement petite qu'un popover ne rende pas après un menu cliquer - peut-être que Trello a changé quelque chose dans leur interface utilisateur, peut-être qu'ils ont modifié la classe, ou peut-être qu'ils ont juste un bug de l'interface utilisateur - auquel cas le cas La vérification des boucles pour sa visibilité deviendrait infinie, prenant d'énormes quantités de ressources CPU jusqu'à ce que le processus de l'onglet soit tué. Une sauvegarde contre cela serait bien.
Dans cette courte série, nous avons construit une simple extension chromée pour Trello qui nous permet d'exporter les cartes à partir d'une liste donnée en tant que liste JSON ou TXT. Utilisez cet exemple pour y construire et créez vos propres extensions de Trello - les choses que vous pouvez accomplir ne sont limitées que par votre imagination (et les fonctionnalités fournies par l'API de Trello :)). L'authentification a déjà été résolue pour vous et les modèles logiques sont en place - commencez à coder!
Le code que nous avons écrit dans cette série de tutoriels est disponible sur GitHub.
Souhaitez-vous voir une continuation de ce tutoriel? Plus de fonctionnalités implémentées? Fais-moi savoir! Commentaires appréciés!
Exporter des listes de Trello vers Excel est un processus simple. Tout d'abord, vous devez installer l'extension Chrome appelée «Export for Trello». Une fois installé, vous pouvez accéder à votre carte Trello et cliquer sur l'icône d'extension. Vous verrez une option pour exporter vos listes Trello. Choisissez le format Excel et vos listes Trello seront téléchargées sous forme de fichier Excel. Ce fichier contiendra tous les détails de vos listes Trello, y compris les noms de cartes, les descriptions, les étiquettes et plus encore. Pdf. Semblable à l'exportation vers Excel, vous devez installer l'extension chromée «Exporter pour Trello». Une fois installé, accédez à votre carte Trello, cliquez sur l'icône d'extension et choisissez le format PDF pour l'exportation. Vos listes Trello seront téléchargées en tant que fichier PDF.
Oui, les listes de Trello peuvent être exportées au format CSV. Le processus est similaire à l'exportation vers Excel ou PDF. Vous devez installer l'extension chromée «Exporter pour Trello», accéder à votre carte Trello, cliquez sur l'icône d'extension et choisissez le format CSV pour l'exportation. Vos listes de Trello seront téléchargées en tant que fichier CSV.
Oui, les listes de Trello peuvent être exportées en tant qu'image. Cela peut être fait en utilisant l'extension chromée «Exporter pour Trello». Après avoir installé l'extension, accédez à votre carte Trello, cliquez sur l'icône d'extension et choisissez le format d'image pour l'exportation. Vos listes de Trello seront téléchargées en tant que fichier image.
Oui, lorsque vous exportez des listes de Trello à l'aide de l'extension chromée «Exporter pour Trello», toutes les choses Les détails de vos listes Trello, y compris les étiquettes, sont exportés. Cela signifie que vous pouvez garder une trace de vos étiquettes même après avoir exporté vos listes Trello.
Oui, lorsque vous exportez des listes de Trello à l'aide de l'extension chromée «Export for Trello», tous les détails de vos listes de Trello, y compris les descriptions de cartes, sont exportées. Cela signifie que vous pouvez garder une trace des descriptions de votre carte même après avoir exporté vos listes de Trello.
Oui, lorsque vous exportez des listes de Trello à l'aide de la "Exportation pour Trello »Chrome Extension, tous les détails de vos listes de Trello, y compris les dates dus, sont exportées. Cela signifie que vous pouvez garder une trace de vos dates d'échéance même après avoir exporté vos listes de Trello.
Malheureusement, l'extension chromée "Exporter pour Trello" ne prend pas en charge ne prend en charge Exportation des pièces jointes. Cependant, tous les autres détails de vos listes Trello, y compris les noms de cartes, les descriptions, les étiquettes et les dates dus, peuvent être exportés.
Malheureusement, «l'exportation pour Trello »Chrome Extension ne prend pas en charge les commentaires d'exportation. Cependant, tous les autres détails de vos listes de Trello, y compris les noms de cartes, les descriptions, les étiquettes et les dates dus, peuvent être exportés.
L'exportation Pour Trello ”Chrome Extension vous permet d'exporter des listes de Trello à partir d'une planche à la fois. Si vous souhaitez exporter des listes à partir de plusieurs planches, vous devez naviguer vers chaque carte et exporter les listes séparément.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
La différence entre ancrer et viser
Découvrez les dix principales crypto-monnaies dans lesquelles il vaut la peine d'investir
Introduction aux logiciels de modélisation paramétrique
Comment résoudre l'erreur d'analyse syntaxique
Que faire si notepad.exe ne répond pas
Que signifie formater un téléphone mobile ?
Comment ouvrir le fichier dmp
Comment utiliser la fonction de tri
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
