Catégories
Astuces et Design

Créez une extension Chrome pour rationaliser votre flux de travail – SitePoint

Lorsque j'ai commencé en tant qu'éditeur JavaScript chez SitePoint, notre processus de soumission était quelque chose d'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 nous sommes installés sur la soumission via GitHub dans Markdown.

C'était un pas en avant, mais nous avions encore besoin de 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 pouvions!

Dans le post 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é ce que vous pourriez penser, la création d'une extension Chrome n'est pas difficile. Commençons par regarder les différents composants.

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

La pièce maîtresse 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 elle 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 par écrire 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
touch manifest.json main.js

S'ouvrir manifest.json et ajoutez le code suivant:

{
  "name": "My Extension",
  "version": "0.0.1",
  "manifest_version": 2,
  "content_scripts": (
    {
      "matches": ( "*://*.sitepoint.com/*" ),
      "js": ( "main.js" )
    }
  )
}

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

le content_scripts clé 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 des modèles de correspondance pour spécifier des parties de l'URL, telles que le protocole.

Ajoutons maintenant le code suivant à main.js pour que le navigateur vous salue 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 mode développeur en utilisant la bascule dans le coin supérieur droit de la page. Cela devrait ajouter une barre de menu supplémentaire avec l'option Charge déballée. Cliquez sur ce bouton et sélectionnez my-extension dossier que vous avez créé précédemment. Cliquez sur Ouvert et l'extension sera installée.

Maintenant, lorsque vous visitez SitePoint, cela se produit:

Extension de base

Toutes nos 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 assez ennuyeuse, non? 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 – les 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 ne fais pas avoir accès à la page actuelle et s'appuyer sur la transmission des messages pour communiquer avec les scripts de contenu.

Mettez à jour le manifeste comme ceci:

{
  "name": "My Extension",
  "version": "0.0.1",
  "manifest_version": 2,
  "permissions": ( "contextMenus" ),
  "content_scripts": (
    {
      "matches": ( "*://*.sitepoint.com/*" ),
      "js": ( "main.js" )
    }
  ),
  "background": {
    "scripts": ("background.js"),
    "persistent": false
  }
}

Notez que nous demandons le contextMenus l'autorisation, 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 background.js déposer et ajouter:

chrome.runtime.onInstalled.addListener(() => {
  chrome.contextMenus.create({
    id: 'greet',
    title: 'Say hi',
    contexts: ('page'),
    documentUrlPatterns: ('*://*.sitepoint.com/*'),
  });
});

chrome.contextMenus.onClicked.addListener((info, tab) => {
  if (info.menuItemId === 'greet') {
    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.

Changement main.js ainsi:

chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
  if (msg.text === 'greet') {
    alert('hi');
    sendResponse('I greeted the user');
  }
});

Ici, nous écoutons un message de notre script d'arrière-plan. S'il a un texte de «salutation», nous tirons 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.

Entrée de menu contextuel pour notre extension

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

Maintenant que nous nous sommes familiarisés avec les composants de base 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 Markdown

Commençons par ajouter un convertisseur Markdown à l'éditeur WordPress. Fidèle à l'expérience sur SitePoint, j'utiliserai l'éditeur «classique» (obtenu en installant le plug-in Désactiver Gutenberg) et le Texte vue.

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

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

Sur la ligne de commande:

mkdir wp-enhance
cd wp-enhance
mkdir lib scripts
touch lib/showdown.min.js lib/jquery.min.js
touch scripts/main.js
touch 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 minifiée de ces bibliothèques (Showdown et jQuery) et d'ajouter le contenu aux fichiers appropriés.

Ensuite, ajoutez le code suivant à manifest.json:

{
  "manifest_version": 2,
  "name": "WP Enhance",
  "description": "A Chrome extension to enhance WordPress' functionality",
  "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 ajoutez ce qui suit:

'use strict';

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

function getShowdownConverter() {
  const converter = new showdown.Converter();

  // Set any options here, for example to add table support
  converter.setOption('tables', true);

  return converter;
}

function addMDButton() {
  const mdConverter = getShowdownConverter();
  const $convertButton = $('', {
    type: 'button',
    value: 'MD',
    class: 'ed_button button button-small',
    title: 'Convert MD to HTML',
    click() {
      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 Showdown makeHtml , que nous passons 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:

The Markdown Converter

Je suis sûr que vous serez d'accord, c'est un résultat assez impressionnant en quelques lignes de code.

Ajout d'un sélecteur de date au 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 Éditer lien à côté du message "Publier immédiatement" dans WordPress " Publier widget.

La première chose que nous devons faire est de télécharger un sélecteur de date. Pour cette démo, je vais utiliser celui-ci. Vous pouvez télécharger les fichiers nécessaires ici. Décompressez ce fichier et placez build/jquery.datetimepicker.full.min.js dans notre lib dossier. Ensuite, créez un nouveau css dossier dans l'extension et placez build/jquery.datetimepicker.min.css dans ça.

Notre extension devrait maintenant ressembler à ceci:

wp-enhance
├── 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,
  "name": "WP Enhance",
  "description": "A Chrome extension to enhance WordPress' functionality",
  "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 ressembler à ceci:

const $editorToolbar = $('#ed_toolbar');
const $mainTextArea = $('#content');
const $timeStampDiv = $('#timestampdiv');
const $wpSchedulePostDropdown = $('.timestamp-wrap');
let $datepicker;

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

function getShowdownConverter() { ... }

function addMDButton() { ... }

function addDatePicker() {
  $datepicker = $('', {
    id: 'bandaid-datepicker',
    type: 'text',
    placeholder: 'Date and time',
  });

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

addMDButton();

$wpSchedulePostDropdown.hide();
addDatePicker();

$datepicker.on('change', function updateDateFields() {
  // String in format yyyy/mm/dd hh:mm
  const dateString = this.value;

  $yyyy.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:

Le widget datepicker

Encore une fois, un résultat impressionnant pour peu de code.

Test de l'extension

L'une des choses que j'ai remarquées très 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 façon de 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 package.json fichier. 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

Maintenant, faites un testrépertoire et ajouter un nightwatch.config.js fichier, ainsi qu’un wp.js fichier pour notre code de test:

mkdir test
touch test/nightwatch.config.js test/wp.js

Ajoutez ce qui suit au fichier de configuration:

module.exports = {
  src_folders: 'test',
  output_folder: 'test',
  page_objects_path: '',
  custom_commands_path: '',
  custom_assertions_path: '',

  webdriver: {
    start_process: true,
    port: 9515,
    server_path: 'node_modules/.bin/chromedriver',
    log_path: false,
    cli_args: (),
  },

  test_settings: {
    default: {
      desiredCapabilities: {
        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 = {
  'Test WordPress Mods': (browser) => {
    browser
      // Login to WP Dashboard
      .url('http://localhost/wp/wp-login.php')
      .setValue('#user_login', 'jim')
      .setValue('#user_pass', 'secret')
      .click('#wp-submit')

      // Go to New Post Page
      .url('http://localhost/wp/wp-admin/post-new.php')

      // Test MD > HTML conversion
      .setValue('#content', '## level 2 headingn### level 3 heading')
      .click('input(value="MD")')
      .assert.valueContains('#content', '

level 2 heading

') .assert.valueContains('#content', '

level 3 heading

') // This is here so that you can take a look at the browser .pause(5000) .end(); }, };

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

Fonctionnalités 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 cette 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, je voudrais souligner certaines des fonctionnalités que nous avons ajoutées à notre extension SP-Tools dans l'espoir qu'elles pourraient inspirer ou même être utiles pour d'autres.

  • UNE Capitaliser et vérifier bouton. Cela convertit le titre du message en casse de titre.
  • Un outil d'analyse des titres, qui vous donne un score sur 100 pour votre titre et propose des suggestions d'amélioration.
  • UNE Capitaliser les sous-positions bouton, qui vérifie les en-têtes restants dans l'article pour la capitalisation du titre.
  • UNE Copier le lien bouton, qui copie le permalien actuel de la publication dans le presse-papiers.
  • UNE Reconstruire le lien bouton, qui reconstruit le permalien de la publication. Cela est utile, par exemple, lorsque WordPress crée un permalien basé sur un projet de titre qui change par la suite.
  • 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 message 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 de l'éditeur

    • la présence de (special) balises shortcode dans l'extrait
  • UNE Copier les balises bouton, qui vous donne une liste de balises séparées par des virgules copiées dans le presse-papiers.
  • UNE rel = "sponsorisé" bouton, qui bascule le rel attribut de tous les liens dans un message comme étant sponsored.

Si vous souhaitez le vérifier, vous pouvez trouver notre extension sur GitHub. Il y a quelques autres goodies là-dedans, comme des entrées de 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 didacticiel, nous avons examiné 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'aimerais avoir de vos nouvelles Twitter.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *