KeiruaProd

I help my clients acquire new users and make more money with their web businesses. I have ten years of experience with SaaS projects. If that’s something you need help with, we should get in touch!
< Back to article list

Extension firefox

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:

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:

// 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