À SitePoint, nous utilisons beaucoup Trello. Bien sûr, il a ses bizarreries et pourrait utiliser une amélioration ou deux dans divers domaines, mais pour la plupart, il a révolutionné l'expérience collaborative non seulement du personnel, mais aussi des auteurs et de leurs éditeurs.
Je me suis récemment retrouvé à exporter des titres de carte à partir d'une liste spécifique pour un non-membre. Par défaut, Trello ne prend en charge que les exportations de cartes complètes vers JSON et c'est quelque chose qui plante mon onglet sur une carte de plus de 100 membres avec des centaines de cartes. Il y a une petite armée d'extensions de Trello dans le magasin, et pourtant curieusement, aucune qui exporte de quelque manière que ce soit.
Faisons une extension chromée qui peut le faire pour nous! Si vous êtes pressé et que vous voulez juste voir le résultat final, voyez le dépôt GitHub pour la version finale du code de ce tutoriel.
J'ai pensé que la meilleure approche serait une extension car une application distincte faisant que ces exportations pourrait être trop. De plus, Trello a une API Nifty que nous pouvons utiliser pour obtenir tout ce dont nous avons besoin. J'ai également pensé que ce serait une belle transition dans le développement de l'extension, quelque chose que je n'avais pas fait depuis un certain temps.
Je vais réutiliser mon fidèle Repo Chromeskel - une extension squelette que j'ai construite il y a longtemps pour faciliter le développement de l'extension de Chrome. Pour référence, si vous souhaitez voir d'autres didacticiels Chrome Extension que j'ai écrits dans le passé, voir ici et ici.
Nous commençons par cloner le repo dans n'importe quel dossier.
git clone https://github.com/Swader/ChromeSkel_a.git
Pour voir si cela fonctionne, chargez-le en chrome. Entrez dans l'onglet Extensions et cliquez sur «Chargez l'extension déballée». Si l'option n'est pas là, assurez-vous de cocher la case «Mode développeur» dans le coin supérieur droit.
Une fois chargé, il doit apparaître dans votre liste d'extensions.
Bien que nous puissions simplement récolter les données à l'écran avec une extension et une analyse chromées, Trello s'est révélé peu fiable et a tendance à s'écraser sur des planches très peuplées. C'est pourquoi nous n'utiliserons que l'intégration de l'extension Chrome avec le domaine Trello.com pour créer de nouvelles options de menu contextuel sur les listes (une option «Cards d'exportation»), et nous effectuerons la logique entière dans la page d'arrière-plan, récupérer l'on Données via l'API.
Pour générer une clé d'application pour Trello, veuillez visiter https://trello.com/1/appkey/generate tout en vous connecté. Cela vous fournira une clé et un secret que vous pouvez utiliser avec votre compte. Dans le reste de ce tutoriel, veuillez considérer {{key}} pour être cette clé et remplacer le contenu en conséquence.
Une fois que vous avez votre clé, dans le sous-dossier des scripts, créez un fichier key.js:
git clone https://github.com/Swader/ChromeSkel_a.git
Pendant que vous y êtes, vous pouvez supprimer les fragments et les dossiers de fantaisie. Nous n'en aurons pas besoin.
L'idée du flux de travail de l'extension est la suivante:
Pour une extension pour ouvrir automatiquement un nouvel onglet avec un certain contenu, nous devons marquer ce contenu comme une «ressource accessible sur le Web».
À cette fin, créez les paramètres du dossier, qui contiendra notre page de paramètres et mettra à jour le manifeste de l'extension pour ressembler à ceci:
<span>// key.js
</span><span>var APP_KEY = '{{KEY}}';</span>La plupart de ces éléments devraient être familiers. Nous définissons la version, donnons des métadonnées, définissons les icônes et déclarons une page d'événement, chargez des scripts de contenu préalable (nous avons besoin de jQuery pour la bibliothèque client Trello JS) et enfin définir le "web_accessble_resources" afin que nous puissions utiliser la page Paramètres Nous construire. Nous limitons également les effets de l'extension à https://trello.com/b/*, ce qui signifie uniquement les URL de la carte.
Pour créer notre page Paramètres, nous écrivons une page HTML simple. À des fins de démonstration, je vais le garder extrêmement simple dans ce cas. Nous utiliserons Foundation pour le styliser (en ce moment, uniquement pour les boutons, mais nous travaillerons à créer une meilleure page de paramètres dans les futurs articles), alors téléchargez un bundle Foundation Essentials, et désarchive son contenu dans / paramètres, afin que index.html entre dans ce dossier. Vous devriez avoir une structure de dossiers comme celle-ci:
Si vous avez des dossiers supplémentaires qui ne sont pas visibles dans ma capture d'écran, n'hésitez pas à les supprimer. Créez les paramètres de fichier / js / settings.js, laissez-le vide pour l'instant.
ok, passons aux affaires. L'hypothèse est donc que l'utilisateur se termine sur cette page en passant à des «options» dans l'onglet Extensions, ou en essayant d'utiliser l'extension lors de la non-authentification. Créons-nous une page HTML assez basique avec deux divs - une pour quand l'utilisateur est authentifié avec un bouton «connecter», et un pour quand il n'est toujours pas authentifié et doit cliquer sur un bouton Autoriser. Remplacez le contenu de l'index.html par ceci:
git clone https://github.com/Swader/ChromeSkel_a.git
Nous avons nos deux divs, le bouton Connexion et déconnexion, et nous tirons le JS dont nous aurons besoin. Dans ce cas, nous utilisons JQuery par défaut de la Fondation, mais peu importe que vous choisissiez d'utiliser votre propre téléchargement ailleurs dans le projet, au cas où vous en auriez récupéré un plus à jour comme je l'ai fait (plus sur cela plus tard).
Ajoutons maintenant une logique. Ouvrez Settings.js et donnez-lui ce contenu:
<span>// key.js
</span><span>var APP_KEY = '{{KEY}}';</span>En lisant les documents, nous pouvons découvrir qu'un Trello_token existera dans LocalStorage lorsqu'une application client est authentifiée. Cela signifie que nous pouvons l'utiliser comme indicateur sur le moment de montrer chacun de nos div. Dans la fonction init, nous saisissons les divs, ajoutons des gestionnaires de clic aux boutons (pas encore de logique là-bas) et enfin, nous masquons le div approprié, selon le Trello_token.
Lorsqu'un utilisateur est authentifié, par exemple, il obtient un écran comme celui-ci:
Remplissons le client Trello JS maintenant.
La documentation Trello n'est pas vraiment écrite avec des extensions de Chrome à l'esprit et recommande d'attacher la clé à l'URL tout en récupérant la bibliothèque client JS à partir de leur domaine, comme ainsi:
<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>Nous ne pouvons pas vraiment faire cela, car nous avons affaire à l'environnement fermé d'une extension, et vu que cela serait beaucoup plus logique de l'avoir disponible localement pour des raisons de performance. Par conséquent, nous visitons l'URL ci-dessus mais sans la clé param:
<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> Enregistrez le contenu de ce fichier dans lib / trello_client.js, puis assurez-vous que notre page de paramètres le charge, en l'ajoutant à la section Scripts près de la balise de fin Cela s'assurera que l'objet Trello soit disponible dans notre JavaScript, nous permettant d'utiliser ses méthodes. Passons d'abord à la connexion. Modifiez le gestionnaire de clics du bouton de déconnexion pour être le suivant: C'est tout ce qu'il y a à désautoriser avec Trello. Nous appelons la méthode et rechargez la page sur laquelle nous sommes sur (l'écran des paramètres, c'est-à-dire). Maintenant, gérons la connexion, ce qui est un peu plus complexe. En suivant la logique des documents en ligne, nous voyons que l'objet Trello a une méthode Setkey, que nous utilisons bien pour la définir. Ensuite, nous appelons la méthode d'autorisation. Selon la documentation, l'utilisation d'une fenêtre contextuelle de type au lieu de rediriger obligera l'utilisateur à coller manuellement une clé secrète dans l'application lorsqu'elle est reçue, ce que nous recherchons. Si nous utilisons la redirection, cependant, la page sera redirigea vers l'authentification et reviendra une fois terminée. Le champ interactif, lorsqu'il est défini sur False, annule à la fois la fenêtre contextuelle et la redirection et à la place uniquement vérifie si la valeur localestorage.trello_token existe. Selon les documents, nous devons d'abord appeler l'autorisation régulière avec une redirection, puis, une fois retourné sur la page des paramètres, nous devons l'appeler à nouveau, mais avec un ensemble interactif sur False, ce qui lui fera saisir le jeton la redirection précédente fourni. Tout est un peu alambiqué, mais ça marche. Il y a cependant un autre problème. Si nous appelons l'autorisation non interactive immédiatement après l'ouverture de la page des paramètres, nous provoquerons une erreur sur la page car la redirection après l'autorisation ne s'est pas encore produite. Une alternative ajoute un autre bouton «Confirmer» ou quelque chose comme ça à notre page Paramètres qui apparaît après la redirection de Trello vers notre page Paramètres, permettant à l'utilisateur de lancer manuellement l'autorisation non interactive. Cela ressemble un peu à un cauchemar UX, cependant. En fin de compte, j'ai opté pour une troisième solution. Enregistrez le code suivant dans lib / hashsearch.js. Comme saisi d'une réponse Stackoverflow, cette petite utilité nous aide à saisir la valeur d'un hachage spécifique de l'URL. Lorsque vous autorisez avec Trello via le mode Redirection, il redirigera la page d'où il vient mais avec un jeton dans l'URL. Ce jeton sera le jeton AUTH dont le client Trello JS a besoin. Il va donc penser que si nous pouvons détecter la présence de ce jeton dans l'URL, nous pouvons conclure que nous avons affaire à une redirection de Trello et pouvons ainsi déclencher automatiquement et en toute sécurité le protocole d'autorisation non interactive. après avoir ajouté HashSearch à la page des paramètres comme ça… … Le fichier Settings.js devrait finalement ressembler à ceci: Vous pouvez maintenant essayer l'extension. Chargez l'onglet Extensions, cliquez sur le lien Options et testez l'authentification et la connexion. Tout devrait bien fonctionner. Dans cette partie, nous avons construit les bases de notre extension, implémentant l'authentification via un écran de paramètres de base personnalisé et en utilisant la bibliothèque client JavaScript de Trello. Dans la partie suivante, nous allons construire toute la logique derrière l'extension et envelopper les choses. Pour commencer à construire une extension Trello Chrome, vous devez avoir une compréhension de base de JavaScript et de l'environnement de développement d'extension de Chrome. Vous devrez également créer un compte Trello et générer une clé API et un jeton. Cela permettra à votre extension d'interagir avec l'API de Trello. Une fois que vous avez ces conditions préalables, vous pouvez commencer à construire votre extension en créant un fichier manifeste et en ajoutant les scripts et les fichiers HTML nécessaires. Le fichier manifeste est un composant crucial d'une extension chromée. Il s'agit d'un fichier JSON qui fournit des informations importantes sur votre extension telles que son nom, sa version, ses autorisations et les scripts qu'il utilise. Chrome utilise ces informations pour charger et exécuter correctement votre extension. Pour utiliser l'API de Trello dans votre extension Chrome, vous devez générer une API Key et jeton de la plate-forme de développeur de Trello. Ces informations d'identification permettent à votre extension de faire des demandes autorisées à l'API de Trello. Vous pouvez ensuite utiliser JavaScript pour passer des appels d'API à partir de votre extension, ce qui lui permet d'interagir avec les données Trello. Oui, vous pouvez ajouter personnalisé. Fonctionnalité à votre extension Trello Chrome. Cela peut être fait en ajoutant des scripts supplémentaires à votre extension et en utilisant l'API de Trello pour interagir avec les données Trello. Par exemple, vous pouvez ajouter une fonctionnalité qui permet aux utilisateurs de créer de nouvelles cartes Trello directement à partir de votre extension. Chrome fournit une gamme d'outils pour le débogage extensions. Vous pouvez utiliser l'option «Inspecter les vues» dans la page de gestion des extensions pour ouvrir une fenêtre Tools Developer pour votre extension. Cela vous permet de déboguer vos scripts, d'afficher la sortie de la console et d'inspecter le dom des pages de votre extension. Une fois que vous avez construit votre Trello Chrome Extension, vous pouvez le publier dans la boutique en ligne Chrome. Vous devrez créer un compte développeur, payer des frais d'inscription unique et suivre les directives du magasin pour la publication des extensions. Lors de la construction d'une extension Trello Chrome, il est important de suivre les meilleures pratiques pour la sécurité, les performances et l'expérience utilisateur. Cela comprend l'utilisation de HTTPS pour toutes les communications réseau, la minimisation de l'utilisation des scripts d'arrière-plan et la fourniture d'une interface utilisateur claire et intuitive. Oui, vous pouvez utiliser d'autres API dans votre extension Trello Chrome. Cela vous permet d'intégrer des fonctionnalités supplémentaires dans votre extension. Cependant, vous devrez vous assurer que vous suivez les conditions d'utilisation de toutes les API que vous utilisez et gérez les données utilisateur de manière responsable. Vous pouvez mettre à jour Votre extension Trello Chrome en apportant des modifications dans les fichiers de votre extension, puis en téléchargeant la version mise à jour de la boutique en ligne Chrome. Chrome mettra automatiquement à jour les extensions installées vers la dernière version. Oui, vous pouvez monétiser votre extension Trello Chrome. Le Chrome Web Store permet aux développeurs de facturer leurs extensions, soit comme achat unique, soit comme abonnement. Vous pouvez également monétiser votre extension par le biais d'achats ou de publicité intégrés. <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><span><span><span><script</span> src<span>="https://api.trello.com/1/client.js?key=substitutewithyourapplicationkey"</span>></span><span><span></script</span>></span></span>
git clone https://github.com/Swader/ChromeSkel_a.git
<span>// key.js
</span><span>var APP_KEY = '{{KEY}}';</span><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><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> Conclusion
Questions fréquemment posées (FAQ) sur la construction d'une extension Trello Chrome avec authentification API
Comment puis-je commencer par la création d'une extension Trello Chrome?
Quel est le but du fichier manifeste dans une extension chromée?
Comment puis-je utiliser l'API de Trello dans mon extension Chrome?
Puis-je ajouter des fonctionnalités personnalisées à mon extension Trello Chrome?
Comment puis-je déboguer mon extension Trello Chrome?
Comment puis-je publier mon extension Trello Chrome?
Quelles sont les meilleures pratiques pour construire une extension Trello Chrome?
Puis-je utiliser d'autres API dans mon extension Trello Chrome?
Comment puis-je mettre à jour mon extension Trello Chrome?
Puis-je monétiser mon extension Trello Chrome?
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!
paramètres des variables d'environnement Java
Comment supprimer des pages vierges dans Word
Comment ouvrir le fichier HTML WeChat
Comment utiliser Spyder
À quoi fait référence l'écriture en python ?
Solution de délai d'expiration des requêtes du serveur
Puis-je récupérer une courte vidéo Douyin supprimée ?
Quel logiciel est ouvert ?
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
