KeiruaProd

J’ai fait une extension Firefox qui me sert tous les jours.

On va voir comment faire pareil.

Mon extension permet de traduire en mot de l’anglais vers le francais. Simple, basique, et pourtant très utile.

Alors oui, ca existe déjà, et sans doute en mieux. Mais comme dans Full Metal Jacket, on pourrait dire “Il y en a beaucoup comme ça, mais lui, c’est le mien.”

Donc pour faire ça on a besoin:

• de rajouter une entrée dans le menu qui apparait quand on fait un clique droit sur un mot.
• de faire quelque chose quand on clique
• de coder tout ca de manière à ce que ca soit compatible avec le mécanisme des extensions de firefox

L’action sur clic droit consiste à ouvrir un onglet vers WordReference (très bon dictionnaire).

On prend le texte sélectionné, et on l’ajoute à l’URL du dictionnaire anglais-francais (enfr).

Niveau code, ca tient en quelques lignes:

• on référence un nouveau bouton dans le menu contextuel
• on lui ajoute une action au clic (ouvrir un onglet à la bonne adresse).

// inspired from some samples:
// - https://github.com/mdn/webextensions-examples/blob/master/context-menu-copy-link-with-types/background.js
// - https://github.com/mdn/webextensions-examples/blob/master/menu-demo/background.js
browser.contextMenus.create({
    id: "wordreference-it",
    title: "Wordreference it!",
});
browser.contextMenus.onClicked.addListener((info, tab) => {
    if (info.menuItemId === "wordreference-it") {
        text = info.selectionText
        browser.tabs.create({
         "url": "https://www.wordreference.com/enfr/" + text
       });
    }
});

Après, faut packager tout ca pour en faire une extension. On ajoute un fichier “manifest.json”, qui contient les metadonnées: nom du code source, nom de l’icone, permissions nécessaires (menu contextuel et onglets).

{
    "manifest_version": 2,
    "name": "Wordreference it!",
    "description": "Searches Wordreference.com for a translation.",
    "version": "1.0",
    "homepage_url": "https://github.com/keirua/firefox-wordreference-it",
    "background": {
        "scripts": [
            "background.js"
        ]
    },
    "icons": {
      "64": "icons/wr-icon64.png"
    },
    "permissions": [
        "activeTab",
        "contextMenus"
    ]
}

La structure doit ressembler à ca:

 tree
.
├── background.js
├── firefox-wordreference-it.zip
├── icons
│   └── wr-icon64.png
├── manifest.json
└── README.md

1 directory, 5 files

Ensuite, on va l’ajouter dans firefox: Addons & themes -> extension -> Debug addons -> Load Temporary Addons

(oui faut déjà un peu lire l’anglais pour se servir de l’extension)

Et là, tada ! Ca marche, vous pouvez vous en servir. Clic droit sur un mot, boom vous avez la trad.

Pour aller plus loin, on peut la référencer sur le store des addons de mozilla. C’est plus très frais dans ma mémoire, mais faut créer un compte sur addons.mozilla et se laisser guider.

Le code complet de l’extension est sur Github