Lorsque j'ai commencé en tant qu'éditeur JavaScript chez SitePoint, notre processus de soumission était en quelque sorte un gâchis – des articles provenant de toutes les directions dans une variété de formats. Nous avons donc décidé de standardiser les choses et nous sommes installés sur la soumission via GitHub dans Markdown.

C'était un pas en avant, mais nous devions encore convertir le Markdown en HTML pour notre back-end WordPress. Les pouvoirs en place à SitePoint HQ à l'époque avaient opposé leur veto à l'installation de tout plugin WordPress, ce qui nous a fait réfléchir si nous pouvions accomplir cette tâche avec une extension de navigateur. Heureusement, nous le pourrions!

Dans le billet suivant, je vais vous montrer comment vous pouvez créer votre propre extension Chrome pour ajouter des fonctionnalités supplémentaires à WordPress. Je vais également vous présenter SP-Tools l'extension que nous utilisons chez SitePoint pour vous faciliter la vie en tant qu'éditeur.

L'anatomie d'une extension Chrome

Malgré tout ce que vous pourriez pensez, la création d'une extension Chrome n'est pas difficile. Commençons par examiner les différents composants.

Des parties de la section suivante sont empruntées à un autre didacticiel que j'ai écrit sur la construction d'une extension Chrome à l'aide de Vue.js .

Le le noyau de toute extension Chrome est un fichier manifeste . Il s'agit d'un format JSON et fournit des informations importantes sur une extension, telles que sa version, ses ressources ou les autorisations dont il a besoin.

Un fichier manifeste ne fera pas grand-chose à lui seul, nous pouvons donc utiliser un script de contenu pour ajouter des fonctionnalités. Les scripts de contenu sont des fichiers qui «s'exécutent dans le contexte de pages Web». Autrement dit, vous spécifiez l'URL dans votre fichier manifeste, puis lorsque votre navigateur visite une page dont l'adresse correspond à l'URL que vous avez spécifiée, le script de contenu est injecté dans la page et exécuté.

Pour illustrer ces concepts, commençons en écrivant une extension Chrome pour faire quelque chose sur le site principal de SitePoint.

Créez un nouveau dossier appelé my-extension et deux fichiers, manifest.json et main. js :

 mkdir my-extension
cd my-extension
touchez manifest.json main.js

Ouvrez manifest.json et ajoutez le code suivant:

 {
  "nom": "Mon poste",
  "version": "0.0.1",
  "manifest_version": 2,
  "content_scripts": [
    {
      "matches": [ "*://*.sitepoint.com/*" ],
      "js": [ "main.js" ]
    }
  ]
}

Les noms version et manifest_version sont tous des champs obligatoires. Les champs nom et version peuvent être ce que vous voulez; la version du manifeste doit être définie sur 2 (à partir de Chrome 18).

La clé content_scripts nous permet d'enregistrer un script de contenu ( main.js ), qui sera exécuté chaque fois que nous visiterons SitePoint. Remarquez comment nous pouvons utiliser les modèles de correspondance pour spécifier des parties de l'URL, telles que le protocole.

Ajoutons maintenant le code suivant à main.js pour faire dire bonjour au navigateur chaque fois que nous visitons SitePoint:

 alert ('Hello there!');

Enfin, installons l'extension. Ouvrez Chrome et entrez chrome: // extensions / dans la barre d'adresse. Vous devriez voir une page affichant les extensions que vous avez installées.

Comme nous voulons installer notre extension à partir d'un fichier (et non du Chrome Web Store), nous devons activer le mode développeur en utilisant la bascule dans dans le coin supérieur droit de la page. Cela devrait ajouter une barre de menu supplémentaire avec l'option Charger déballé . Cliquez sur ce bouton et sélectionnez le dossier my-extension que vous avez créé précédemment. Cliquez sur Ouvrir et l'extension sera installée.

Maintenant, lorsque vous visitez SitePoint, cela se produira:

Félicitations! Vous venez de créer une extension Chrome.

Scripts d'arrière-plan et transmission de messages

Donc, cette boîte de dialogue est plutôt ennuyeuse, n'est-ce pas? Pour terminer cette section, ajoutons une entrée de menu contextuel pour la déclencher manuellement, au lieu de la faire apparaître à chaque chargement de page.

Cela nous présente un autre composant important des extensions Chrome – scripts d'arrière-plan . Ces scripts peuvent réagir aux événements du navigateur (comme un utilisateur qui clique sur une entrée du menu contextuel) et ils ont un accès complet aux API de Chrome. Cependant, ils n'ont pas accès à la page en cours et dépendent de la transmission des messages pour communiquer avec les scripts de contenu.

Mettez à jour le manifeste comme suit:

 {
  "nom": "Mon poste",
  "version": "0.0.1",
  "manifest_version": 2,
  "autorisations": [ "contextMenus" ],
  "content_scripts": [
    {
      "matches": [ "*://*.sitepoint.com/*" ],
      "js": [ "main.js" ]
    }
  ],
  "Contexte": {
    "scripts": ["background.js"],
    "persistant": faux
  }
}

Notez que nous demandons l'autorisation contextMenus car nous voulons ajouter quelque chose au menu contextuel et que nous avons enregistré un script d'arrière-plan non persistant. Rendre le script d'arrière-plan non persistant permet de le décharger lorsqu'il n'est pas nécessaire.

Ensuite, créez un fichier background.js et ajoutez:

 chrome.runtime.onInstalled.addListener (() = > {
  chrome.contextMenus.create ({
    id: 'saluer',
    titre: «Dis bonjour»,
    contextes: ['page'],
    documentUrlPatterns: ['*://*.sitepoint.com/*'],
  });
});

chrome.contextMenus.onClicked.addListener ((info, onglet) => {
  if (info.menuItemId === 'saluer') {
    chrome.tabs.sendMessage (tab.id, {text: 'greet'}, (res) => {
      console.log (res);
    });
  }
});

Nous enregistrons l'entrée du menu contextuel lorsque l'extension est installée, puis ajoutons un écouteur d'événements pour envoyer un message à notre script de contenu chaque fois que l'utilisateur clique sur l'entrée.

Modifiez main.js comme ceci:

 chrome.runtime.onMessage.addListener ((msg, sender, sendResponse) => {
  if (msg.text === 'saluer') {
    alerte («salut»);
    sendResponse ('J'ai salué l'utilisateur');
  }
});

Ici, nous écoutons un message de notre script d'arrière-plan. S'il contient un texte de «salutation», nous lançons ensuite l'alerte et renvoyons un message informant le script d'arrière-plan que nous avons fait ce qui a été demandé.

Pour l'essayer, retournez à la page des extensions (à chrome: // extensions / ), puis cliquez sur l'icône de rechargement et rechargez n'importe quelle page SitePoint. Lorsque vous faites un clic droit, vous devriez maintenant voir une entrée de menu contextuel.

Amélioration des fonctionnalités de WordPress avec une extension Chrome

Maintenant que nous nous sommes familiarisés avec la base les composants d'une extension Chrome, voyons comment nous pouvons ajouter des fonctionnalités à WordPress.

Pour suivre cette section, vous aurez besoin d'une installation fonctionnelle de WordPress . J'ai installé le mien localement. Il fonctionne sur un serveur Apache à http: // localhost / wp .

Le code de cette extension peut être trouvé sur GitHub .

Ajout d'un convertisseur de réduction

] Commençons par ajouter un convertisseur Markdown à l'éditeur WordPress. Fidèle à l'expérience sur SitePoint, je vais utiliser l'éditeur "classique" (obtenu en installant le Désactiver le plugin Gutenberg ) et la vue Texte .

Pour commencer, créez la structure de dossiers suivante pour notre nouvelle extension:

 wp-enhancement
├── lib
│ ├── jquery.min.js
│ └── showdown.min.js
├── manifest.json
└── scripts
    └── main.js

Sur la ligne de commande:

 mkdir wp-enhancement
cd wp-enhancement
scripts lib mkdir
touchez lib / showdown.min.js lib / jquery.min.js
touch scripts / main.js
touchez manifest.json

Comme vous pouvez le voir, nous utiliserons le convertisseur de démarque Showdown et jQuery (parce que je suis paresseux).

La première chose à faire est de récupérer la dernière version réduite de ces derniers. bibliothèques ( Showdown et jQuery ) et ajoutez le contenu aux fichiers appropriés.

Ajoutez ensuite le code suivant à manifest.json :

: 

 {
  "manifest_version": 2,
  "nom": "WP Enhance",
  "description": "Une extension Chrome pour améliorer les fonctionnalités de WordPress",
  "version": "0.0.1",
  "content_scripts": [
    {
      "matches": [ "http://localhost/wp/wp-admin/post-new.php" ],
      "js": [
        "lib/jquery.min.js",
        "lib/showdown.min.js",
        "scripts/main.js"
      ]
    }
  ]
}
 Il n'y a rien de spectaculaire ici. L'extension est définie pour s'exécuter lorsque nous visitons  http: //localhost/wp/wp-admin/post-new.php et nous incluons les deux bibliothèques que nous venons de télécharger.
 Enfin, dans  scripts / main ajouter ce qui suit:
 'use strict';

const $ editorToolbar = $ ('# ed_toolbar');
const $ mainTextArea = $ ('# contenu');

function getShowdownConverter () {
  convertisseur constant = nouveau showdown.Converter ();

  // Définissez toutes les options ici, par exemple pour ajouter le support de table
  converter.setOption ('tables', true);

  convertisseur de retour;
}

fonction addMDButton () {
  const mdConverter = getShowdownConverter ();
  const $ convertButton = $ ('', {
    tapez: 'bouton',
    valeur: «MD»,
    classe: 'ed_button button button-small',
    title: 'Convertir MD en HTML',
    Cliquez sur() {
      const md = $ mainTextArea.val ();
      const html = mdConverter.makeHtml (md);
      $ mainTextArea.val (html);
    },
  });
  $ editorToolbar.append ($ convertButton);
}

addMDButton ();
 Ici, nous créons un nouveau bouton et l'ajoutons à la barre d'outils de l'éditeur WordPress. Lorsque vous cliquez dessus, nous appelons la méthode  makeHtml  de Showdown, à laquelle nous transmettons le contenu de la zone de contenu. Cela nous renvoie du HTML, que nous réinsérons ensuite dans l'éditeur.
 Chargez l'extension et visitez la nouvelle page de publication. Vous devriez voir quelque chose comme ceci:
 
 Je suis sûr que vous serez d'accord, c'est un résultat assez impressionnant en seulement quelques lignes de code.
 Ajout d'une date Sélecteur du widget de publication
 Ensuite, nous allons améliorer le widget de publication avec un sélecteur de date. Cela remplacera la série de listes déroulantes et de zones de saisie que vous voyez normalement lorsque vous cliquez sur le lien  Modifier  à côté du message "Publier immédiatement" dans le widget WordPress ' Publier . [19659003] La première chose que nous devons faire est de télécharger un sélecteur de date. Pour cette démo, j'utiliserai  celui-ci . Vous pouvez télécharger les fichiers nécessaires depuis  ici . Décompressez ce fichier et placez  build / jquery.datetimepicker.full.min.js  dans notre dossier  lib . Créez ensuite un nouveau dossier  css  dans l'extension et placez-y  build / jquery.datetimepicker.min.css .
 Notre extension devrait maintenant ressembler à ceci:
 wp -améliorer
├── css
│ └── jquery.datetimepicker.min.css
├── lib
│ ├── jquery.datetimepicker.full.min.js
│ ├── jquery.min.js
│ └── showdown.min.js
├── manifest.json
└── scripts
    └── main.js
 Incluez maintenant ces fichiers dans le manifeste:
 {
  "manifest_version": 2,
  "nom": "WP Enhance",
  "description": "Une extension Chrome pour améliorer les fonctionnalités de WordPress",
  "version": "0.0.1",
  "content_scripts": [
    {
      "matches": [ "http://localhost/wp/wp-admin/post-new.php" ],
      "js": [
        "lib/jquery.min.js",
        "lib/showdown.min.js",
        "lib/jquery.datetimepicker.full.min.js",
        "scripts/main.js"
      ],
      "css": [ "css/jquery.datetimepicker.min.css" ]
    }
  ]
}
 Enfin, nous devons modifier notre script de contenu ( main.js ) pour qu'il ressemble à ceci:
 const $ editorToolbar = $ ('# ed_toolbar');
const $ mainTextArea = $ ('# contenu');
const $ timeStampDiv = $ ('# timestampdiv');
const $ wpSchedulePostDropdown = $ ('. timestamp-wrap');
laissez $ datepicker;

const $ dd = $ ('# jj');
const $ mm = $ ('# mm');
const $ yyyy = $ ('# aa');
const $ hh = $ ('# hh');
const $ mn = $ ('# mn');

fonction getShowdownConverter () {...}

fonction addMDButton () {...}

function addDatePicker () {
  $ datepicker = $ ('', {
    id: 'bandaid-datepicker',
    tapez: 'texte',
    espace réservé: «Date et heure»,
  });

  $ datepicker.datetimepicker ();
  $ timeStampDiv.prepend ($ datepicker);
}

addMDButton ();

$ wpSchedulePostDropdown.hide ();
addDatePicker ();

$ datepicker.on ('change', fonction updateDateFields () {
  // Chaîne au format aaaa / mm / jj hh: mm
  const dateString = this.value;

  $ aaaa.val (dateString.substr (0, 4));
  $ mm.val (dateString.substr (5, 2));
  $ dd.val (dateString.substr (8, 2));
  $ hh.val (dateString.substr (11, 2));
  $ mn.val (dateString.substr (14, 2));
});
 Ce que nous faisons, c'est obtenir une référence aux éléments d'entrée que WP utilise pour gérer l'heure et la date de la publication planifiée. Nous masquons ensuite ces éléments et initialisons le sélecteur de date. Chaque fois qu'un utilisateur sélectionne une date, le champ masqué est mis à jour et la publication peut être planifiée.
 Rechargez l'extension, puis actualisez la nouvelle page de publication WordPress. Ce que vous avez maintenant devrait ressembler à ceci:
 
 Encore une fois, un résultat impressionnant pour peu de code.
 Test de l'extension
 L'une des choses que j'ai remarquées tôt avec notre extension SP-Tools était que, lorsque WordPress était mis à jour, les choses se cassaient. J'ai donc réfléchi à la manière dont je pouvais tester l'extension et j'ai décidé que certains tests de bout en bout avec  Nightwatch  auraient du sens.
 Dans la section suivante, je vais vous montrer comment nous pouvons tester notre extension de la même manière.
 Tout d'abord, nous devons générer un fichier  package.json . Dans la racine d'extension, exécutez  npm init -y . Ensuite, installons Nightwatch et ChromeDriver en tant que dépendances de développement:
 npm install --save-dev nightwatch chromedriver
 Créez maintenant un répertoire  test  et ajoutez un fichier  nightwatch.config.js ainsi qu'un fichier  wp.js  pour notre code de test: [19659011] test mkdir
 test tactile / nightwatch.config.js test / wp.js
 
 Ajoutez ce qui suit au fichier de configuration:
 module.exports = {
  src_folders: 'test',
  dossier_sortie: 'test',
  page_objects_path: '',
  custom_commands_path: '',
  custom_assertions_path: '',

  pilote Web: {
    start_process: true,
    port: 9515,
    server_path: 'node_modules / .bin / chromedriver',
    log_path: false,
    cli_args: [],
  },

  test_settings: {
    défaut: {
      desireCapabilities: {
        browserName: 'chrome',
        chromeOptions: {
          args: [
            'load-extension=./',
            '--test-type',
          ],
        },
      },
    },
  },
};
 La partie importante est  'load-extension =. /', qui indique à Nightwatch de charger notre extension dans le navigateur de test.
 Et ajoutez ce qui suit à  wp.js  (en remplaçant mes identifiants de connexion par les vôtres):
 module.exports = {
  'Tester les mods WordPress': (navigateur) => {
    navigateur
      // Connectez-vous à WP Dashboard
      .url ('http: //localhost/wp/wp-login.php')
      .setValue ('# user_login', 'jim')
      .setValue ('# user_pass', 'secret')
      .click ('# wp-submit')

      // Aller à la nouvelle page de message
      .url ('http: //localhost/wp/wp-admin/post-new.php')

      // Test MD> Conversion HTML
      .setValue ('# content', '## level 2 header  n ### level 3 header')
      .click ('entrée [value="MD"]')
      .assert.valueContains ('# content', '
 titre de niveau 2 
')
      .assert.valueContains ('# content', '
 titre de niveau 3 
')

      // Ceci est ici pour que vous puissiez jeter un œil au navigateur
      . pause (5000)
      .fin();
  },
};
 Exécutez maintenant les tests en utilisant:
 node_modules / .bin / nightwatch --config test / nightwatch.config.js
 Vous devriez voir une instance du navigateur Chrome ouverte et Nightwatch effectuer les tests que nous avons spécifiés. Le résultat des tests est envoyé au terminal.
 Espérons que la DSL de Nightwatch soit assez explicite. Vous pouvez en lire plus à ce sujet dans leur documentation  . Si vous avez envie d'un défi, essayez d'ajouter des tests pour le sélecteur de date.
 Notez que j'ai codé en dur mes informations d'identification ici. Si vous l'utilisez à des fins autres que de démonstration, ce sera une bonne idée de les déplacer vers un fichier de configuration qui n'est pas validé pour GitHub.
 Et n'oubliez pas que vous pouvez trouver le code de tout ce que j'ai démontré jusqu'à présent sur  GitHub .
 Caractéristiques notables de l'extension Chrome de SitePoint
 Comme je suis sûr que vous l'avez compris, votre kilométrage variera en fonction de l'utilité de trouver une telle extension de navigateur. La plupart des gens auront des besoins (légèrement) différents et pourront installer des plugins WordPress pour résoudre la plupart des problèmes qu'ils rencontrent.
 Néanmoins, dans cette dernière section, j'aimerais souligner certaines des fonctionnalités que nous avons ajoutées à notre  extension SP-Tools  dans l'espoir qu'ils pourraient inspirer ou même être utiles à d'autres.
 Un bouton  Capitaliser et vérifier . Cela convertit le titre du message en  casse de titre .
 Un outil d'analyse de titre, qui vous donne un score de 100 pour votre titre et propose des suggestions d'amélioration.
 A  Capitaliser les sous-titres  bouton, qui vérifie les en-têtes restants dans l'article pour la capitalisation du titre.
 Un bouton  Copier le lien qui copie le permalien actuel de la publication dans le presse-papiers.
 A  Reconstruire le lien  bouton, qui reconstruit le permalien de la poste. Ceci est utile, par exemple, lorsque WordPress crée un permalien basé sur un projet de titre qui change ensuite.
 Un molly-guard extensible  qui effectue un certain nombre de vérifications et désactive / active le bouton de publication en conséquence . Entre autres, il vérifie:
 un permalien de publication sensible
 la présence d'URL relatives dans le volet éditeur
 la présence de liens vides dans le volet éditeur
 la présence de 
 balises dans le volet éditeur
 la présence de [special] balises shortcode dans l'extrait
 Un bouton  Copier les balises qui vous donne une liste de balises séparées par des virgules copiées dans le presse-papiers.
 Un bouton  rel = "sponsorisé" qui bascule l'attribut  rel  de tous les liens dans un message comme étant  parrainé .
 Si vous souhaitez le vérifier, vous pouvez  trouver notre extension sur GitHub . Il y a quelques autres goodies là-dedans, comme les entrées du menu contextuel, du code pour désactiver le défilement infini sur notre site principal et, bien sûr, des tests avec Nightwatch.
 Conclusion
 Dans ce tutoriel, nous avons regardé les différents composants qui composent une extension Chrome. J'ai montré comment nous pouvons créer et tester notre propre extension Chrome pour améliorer les fonctionnalités de base d'une installation WordPress. Je vous ai également présenté SP-Tools, la propre extension Chrome de SitePoint, que nous utilisons pour faciliter un peu les différentes tâches d'édition.
 Si vous trouvez notre extension utile ou l'adaptez pour faire autre chose, j'adorerais avoir de vos nouvelles sur  Twitter .