En tant que développeur, j’ai régulièrement besoin d’informations sur les outils et les Frameworks que j’utilise. La plupart des informations techniques sont proposées en anglais mais certaines entreprises comme Microsoft (MSDN) traduisent les informations en français et d’autres langues. Etant en France, je reçois fréquemment la version française en premier. Malheureusement les traductions sont souvent approximatives donc je préfère la version originale.

Au lieu de changer la langue sur le site ou de réécrire l’adresse à la main à chaque fois, j’ai décidé de créer une extension pour mon navigateur favori : Opera. Opera est basé sur Chromium donc l’extension créée sur Opera fonctionne également sur Chrome et Vivaldi.

Comment ça marche ?

L’extension injecte un fichier JavaScript sur tous les sites. Le script vérifie si la localisation ressemble à quelque chose du style “msdn. microsoft. com/fr-fr/”. S’il y a un équivalent en anglais, la localisation est changée pour “msdn. microsoft. com/en-us/”.

Tout d’abord, il vous faut créer un fichier manifest. Le fichier contient le nom et la description de l’extension ainsi que des informations optionnelles telles que les autorisations requises, la liste des actions dans la barre d’outils, etc… Créons le fichier manifest. json :

{
  "manifest_version": 2,
  "name": "Show me English!",
  "description": "Redirect to English version of websites when available",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": [
        "http://*/*",
        "https://*/*"
      ],
      "js": [
        "redirect.js"
      ]
    }
  ]
}

Nous déclarons le fichier JavaScript pour l’injecter dans le champ “content_scripts”. Le champ “matches” permet de définir la liste des domaines dans lesquels les scripts doivent être injectés (protocole http ou https) donc nous utilisons des wildcards.

Voilà le fichier “redirect. js” :

(function () {	
    function areEqualsIgnoreCase(a, b) {
        return a.toLowerCase() === b.toLowerCase()
    }
    // 1.  Get the current url
    // 2. Replace the language part of the "msdn" url by en-us
    // 3. Navigate to the new url if different from the original url
    var href = window.location.href;
    var newHref = href.replace(/(.*.msdn.microsoft.com\/)([a-z]{2}-[a-z]{2})(.*)/i, "$1en-us$3");
    if (!areEqualsIgnoreCase(href, newHref)) {
        window.location = newHref;
        return;
    }
})();

Maintenant, il ne reste plus qu’à installer l’extension dans le navigateur. Pour la tester, nous pouvons activer le mode développeur. Naviguez sur “chrome ://extensions/” ou “opera ://extensions/”, cliquez sur “Load unpacked extension… ” et sélectionnez le répertoire qui contient les fichiers de l’extension :

L’étape finale consiste à créer un pack extension en utilisant le bouton “Pack extension… ” et à le télécharger dans le store.

Voilà ! C’est très facile de créer une extension qui injecte un script ou un style dans une page afin de changer le comportement par défaut. Vous pouvez même vous amusez à créer des extensions plus complexes en vous aidant de la documentation officielle.