recherche
Maisoninterface Webjs tutorielComment construire une extension Trello Chrome - Authentification API

Comment construire une extension Trello Chrome - Authentification API

À 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.

Les plats clés

  • Utilisez le référentiel Chromeskel pour relancer le développement de votre extension Trello Chrome, en simplifiant le processus avec un squelette préfabriqué.
  • Obtenez une clé API Trello et un secret pour l'authentification en visitant le site Web de Trello, crucial pour permettre à votre extension d'interagir avec les comptes Trello en toute sécurité.
  • Implémentez une page Paramètres dans votre extension pour gérer l'authentification de l'utilisateur, en utilisant une structure HTML de base et JavaScript pour basculer la visibilité en fonction de l'état d'authentification de l'utilisateur.
  • Utilisez la bibliothèque client Trello JavaScript et un script personnalisé (HashSearch.js) pour gérer efficacement les jetons d'autorisation, assurant une authentification utilisateur sécurisée et efficace.
  • rationaliser la fonctionnalité de l'extension à des URL de la carte Trello spécifiques à l'aide du fichier manifeste, en améliorant les performances en limitant la portée des opérations de l'extension aux pages pertinentes.

Construire une extension chromée

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.

bootstrap

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.

Comment construire une extension Trello Chrome - Authentification API

Authentification

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.

clé et secret

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.

flux de travail et manifeste

L'idée du flux de travail de l'extension est la suivante:

  • Étant donné qu'un utilisateur ouvre une carte Trello
  • Vérifiez si ledit utilisateur a autorisé l'extension à utiliser son compte Trello
  • Si oui, procédez
  • Si non, ouvrez une page Paramètres avec un bouton d'autorisation qui leur permet de terminer la procédure
  • Une fois autorisé, fermez automatiquement la page des paramètres et gardez l'extension autorisée

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.

Paramètres et autorisation

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:

Comment construire une extension Trello Chrome - Authentification API

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:

Comment construire une extension Trello Chrome - Authentification API

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

<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>

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:

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

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.

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

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.

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

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…

<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>

… Le fichier Settings.js devrait finalement ressembler à ceci:

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

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.

Conclusion

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.

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?

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.

Quel est le but du fichier manifeste dans une extension chromée?

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.

Comment puis-je utiliser l'API de Trello dans mon extension Chrome?

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.

Puis-je ajouter des fonctionnalités personnalisées à mon extension Trello Chrome?

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.

Comment puis-je déboguer mon extension Trello Chrome?

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.

Comment puis-je publier mon extension Trello Chrome?

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.

Quelles sont les meilleures pratiques pour construire une extension Trello Chrome?

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.

Puis-je utiliser d'autres API dans mon extension Trello Chrome?

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.

Comment puis-je mettre à jour mon extension Trello Chrome?

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.

Puis-je monétiser mon extension Trello Chrome?

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.

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!

Déclaration
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Rôle de JavaScript: rendre le Web interactif et dynamiqueRôle de JavaScript: rendre le Web interactif et dynamiqueApr 24, 2025 am 12:12 AM

JavaScript est au cœur des sites Web modernes car il améliore l'interactivité et la dynamicité des pages Web. 1) Il permet de modifier le contenu sans rafraîchir la page, 2) manipuler les pages Web via Domapi, 3) prendre en charge les effets interactifs complexes tels que l'animation et le glisser-déposer, 4) Optimiser les performances et les meilleures pratiques pour améliorer l'expérience utilisateur.

C et JavaScript: la connexion expliquéeC et JavaScript: la connexion expliquéeApr 23, 2025 am 12:07 AM

C et JavaScript réalisent l'interopérabilité via WebAssembly. 1) Le code C est compilé dans le module WebAssembly et introduit dans un environnement JavaScript pour améliorer la puissance de calcul. 2) Dans le développement de jeux, C gère les moteurs de physique et le rendu graphique, et JavaScript est responsable de la logique du jeu et de l'interface utilisateur.

Des sites Web aux applications: les diverses applications de JavaScriptDes sites Web aux applications: les diverses applications de JavaScriptApr 22, 2025 am 12:02 AM

JavaScript est largement utilisé dans les sites Web, les applications mobiles, les applications de bureau et la programmation côté serveur. 1) Dans le développement de sites Web, JavaScript exploite DOM avec HTML et CSS pour réaliser des effets dynamiques et prend en charge des cadres tels que JQuery et React. 2) Grâce à la réactnative et ionique, JavaScript est utilisé pour développer des applications mobiles multiplateformes. 3) Le cadre électronique permet à JavaScript de créer des applications de bureau. 4) Node.js permet à JavaScript d'exécuter le côté du serveur et prend en charge les demandes simultanées élevées.

Python vs JavaScript: cas d'utilisation et applications comparéesPython vs JavaScript: cas d'utilisation et applications comparéesApr 21, 2025 am 12:01 AM

Python est plus adapté à la science et à l'automatisation des données, tandis que JavaScript est plus adapté au développement frontal et complet. 1. Python fonctionne bien dans la science des données et l'apprentissage automatique, en utilisant des bibliothèques telles que Numpy et Pandas pour le traitement et la modélisation des données. 2. Python est concis et efficace dans l'automatisation et les scripts. 3. JavaScript est indispensable dans le développement frontal et est utilisé pour créer des pages Web dynamiques et des applications à une seule page. 4. JavaScript joue un rôle dans le développement back-end via Node.js et prend en charge le développement complet de la pile.

Le rôle de C / C dans les interprètes et compilateurs JavaScriptLe rôle de C / C dans les interprètes et compilateurs JavaScriptApr 20, 2025 am 12:01 AM

C et C jouent un rôle essentiel dans le moteur JavaScript, principalement utilisé pour implémenter des interprètes et des compilateurs JIT. 1) C est utilisé pour analyser le code source JavaScript et générer une arborescence de syntaxe abstraite. 2) C est responsable de la génération et de l'exécution de bytecode. 3) C met en œuvre le compilateur JIT, optimise et compile le code de point chaud à l'exécution et améliore considérablement l'efficacité d'exécution de JavaScript.

JavaScript en action: Exemples et projets du monde réelJavaScript en action: Exemples et projets du monde réelApr 19, 2025 am 12:13 AM

L'application de JavaScript dans le monde réel comprend un développement frontal et back-end. 1) Afficher les applications frontales en créant une application de liste TODO, impliquant les opérations DOM et le traitement des événements. 2) Construisez RestulAPI via Node.js et Express pour démontrer les applications back-end.

Javascript et le web: fonctionnalité de base et cas d'utilisationJavascript et le web: fonctionnalité de base et cas d'utilisationApr 18, 2025 am 12:19 AM

Les principales utilisations de JavaScript dans le développement Web incluent l'interaction client, la vérification du formulaire et la communication asynchrone. 1) Mise à jour du contenu dynamique et interaction utilisateur via les opérations DOM; 2) La vérification du client est effectuée avant que l'utilisateur ne soumette les données pour améliorer l'expérience utilisateur; 3) La communication de rafraîchissement avec le serveur est réalisée via la technologie AJAX.

Comprendre le moteur JavaScript: détails de l'implémentationComprendre le moteur JavaScript: détails de l'implémentationApr 17, 2025 am 12:05 AM

Comprendre le fonctionnement du moteur JavaScript en interne est important pour les développeurs car il aide à écrire du code plus efficace et à comprendre les goulots d'étranglement des performances et les stratégies d'optimisation. 1) Le flux de travail du moteur comprend trois étapes: analyse, compilation et exécution; 2) Pendant le processus d'exécution, le moteur effectuera une optimisation dynamique, comme le cache en ligne et les classes cachées; 3) Les meilleures pratiques comprennent l'évitement des variables globales, l'optimisation des boucles, l'utilisation de const et de locations et d'éviter une utilisation excessive des fermetures.

See all articles

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Outils chauds

VSCode Windows 64 bits Télécharger

VSCode Windows 64 bits Télécharger

Un éditeur IDE gratuit et puissant lancé par Microsoft

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Puissant environnement de développement intégré PHP

MantisBT

MantisBT

Mantis est un outil Web de suivi des défauts facile à déployer, conçu pour faciliter le suivi des défauts des produits. Cela nécessite PHP, MySQL et un serveur Web. Découvrez nos services de démonstration et d'hébergement.

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

mPDF

mPDF

mPDF est une bibliothèque PHP qui peut générer des fichiers PDF à partir de HTML encodé en UTF-8. L'auteur original, Ian Back, a écrit mPDF pour générer des fichiers PDF « à la volée » depuis son site Web et gérer différentes langues. Il est plus lent et produit des fichiers plus volumineux lors de l'utilisation de polices Unicode que les scripts originaux comme HTML2FPDF, mais prend en charge les styles CSS, etc. et présente de nombreuses améliorations. Prend en charge presque toutes les langues, y compris RTL (arabe et hébreu) ​​et CJK (chinois, japonais et coréen). Prend en charge les éléments imbriqués au niveau du bloc (tels que P, DIV),