Construisez une extension Chrome pour rationaliser votre workflow

Cet article détaille la construction d'une extension chromée pour améliorer les fonctionnalités WordPress, se concentrant spécifiquement sur la rationalisation du flux de travail éditorial. L'expérience de l'auteur à SitePoint, aux prises initialement avec un processus de soumission désorganisée, a conduit au développement d'une solution: une extension chromée personnalisée. Ce tutoriel démontre le processus, mettant en évidence les concepts clés et présentant un exemple pratique.

Prise des clés:

• Le développement de l'extension chromée est plus simple que prévu, impliquant principalement un fichier manifeste et des scripts de contenu.
• Les extensions améliorent considérablement la fonctionnalité WordPress, ajoutant des fonctionnalités telles que la conversion Markdown ou les cueilleurs de date personnalisés.
• Des tests robustes, à l'aide d'outils tels que Nightwatch pour des tests automatisés de bout en bout, garantissent des fonctionnalités cohérentes sur les mises à jour.
• Les extensions utilisent les menus contextuels et les messages passant entre les scripts d'arrière-plan et de contenu pour une interaction améliorée par l'utilisateur.
• Extension Sp-Tools de SitePoint, discutée en tant qu'étude de cas, intègre des fonctionnalités telles que la capitalisation du titre, l'analyse des titres et la gestion des liens.

Architecture d'extension chromée:

La fondation de toute extension Chrome est le fichier manifeste (format JSON), fournissant des informations cruciales sur l'extension (version, ressources, autorisations). Les scripts de contenu, exécutant dans les pages Web, ajoutent des fonctionnalités. L'auteur l'illustre en créant une extension simple qui affiche une salutation sur SitePoint. Le processus consiste à créer un fichier manifeste.json et un fichier main.js.

scripts d'arrière-plan et passage de messages:

Pour améliorer l'expérience utilisateur, le tutoriel présente des scripts d'arrière-plan, qui répondent aux événements du navigateur (comme les clics du menu contextuel) et accédent aux API Chrome, mais pas à la page actuelle. Le passage du message facilite la communication avec les scripts de contenu. L'exemple est amélioré avec un menu contextuel, démontrant le passage du message entre les scripts d'arrière-plan et de contenu.

Amélioration de la fonctionnalité WordPress:

Le tutoriel se concentre ensuite sur l'extension des fonctionnalités WordPress. Un convertisseur Markdown est ajouté à l'éditeur WordPress à l'aide de Showdown.js et jQuery. Cela implique la création d'un bouton dans la barre d'outils de l'éditeur pour convertir Markdown en HTML. Un sélecteur de date est intégré dans le widget de publication WordPress, remplaçant les sélecteurs de date / heure par défaut.

Test de l'extension:

L'importance des tests est soulignée, en particulier dans le contexte des mises à jour WordPress potentiellement brisant l'extension. Nightwatch.js et Chromedriver sont utilisés pour des tests de bout en bout automatisés. Une suite d'échantillons de test est fournie, démontrant comment tester la fonctionnalité de conversion de Markdown.

Extension Sp-Tools de SitePoint:

L'auteur met en évidence les fonctionnalités de l'extension Sp-Tools de SitePoint, y compris la capitalisation du titre, l'analyse des titres, la gestion des liens et un "Molly-Guard" pour diverses vérifications éditoriales.

Conclusion:

Ce tutoriel fournit un guide complet pour construire et tester les extensions chromées pour l'amélioration de WordPress. L'expérience de l'auteur avec Sp-Tools souligne les avantages pratiques et l'importance des tests robustes. Les exemples de code fournis et les explications rendent le processus accessible même aux développeurs ayant une expérience limitée.

Questions fréquemment posées (FAQ):

L'article se termine par une section complète de la FAQ couvrant divers aspects du développement de l'extension chromée, y compris les conditions préalables, en utilisant des menus contextuels, des menus, une communication inter-composants, une publication, une mise à jour, un débogage, des autorisations, des bibliothèques externes, des fonctionnalités spécifiques au site Web et plus.

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!