Créer une extension pour Firefox

Créer une extension Firefox pour copier facilement l'adresse et le titre de l'onglet en cours dans le presse-papiers.

 Publié le 27 déc 2024 ·  3 min de lecture

Introduction

Cela faisait un moment que je cherchais une extension Firefox capable de copier à la fois le titre et l’adresse de l’onglet actif, afin de faciliter le partage dans un courriel ou un autre document. En effet, lorsqu’on partage des liens de tickets (Jira, GLPI, etc.), le numéro seul est souvent insuffisant et nécessite de consulter le lien pour obtenir plus d’informations.

Je me suis donc inspiré de la fonctionnalité de copie enrichie proposée par Microsoft Edge (https://support.microsoft.com/fr-fr/microsoft-edge/improved-copy-and-paste-of-urls-in-microsoft-edge-d3bd3956-603a-0033-1fbc-9588a30645b4).

Cette extension reproduit un fonctionnement similaire : elle copie le titre et l’adresse de l’onglet actif, puis adapte automatiquement le format lors du collage, en fonction du contexte cible (HTML ou texte brut).

Le code et les fichiers de configuration

Contenu de metadata.json

Principalement pour décrire l’extension sur le site de Mozilla.

{
  "version": { "license": "MIT" },
  "categories": { "firefox": ["tabs"] },
  "contributions_url": "https://donate.mozilla.org",
  "requires_payment": false,
  "homepage": {
    "en-US": "https://www.elblur.fr/",
    "fr": "https://www.elblur.fr/"
  }
}

Contenu de manifest.json

Principalement pour décrire l’extension et les permissions requises.

{
  "manifest_version": 2,
  "name": "CurrentTabToClipboard",
  "version": "1.0.4",
  "description": "Copy the title and the URL of the current to the clipboard",
  "permissions": [
    "activeTab",
    "scripting",
    "clipboardWrite"
  ],
  "background": {
    "scripts": [
      "CurrentTabToClipboard.js"
    ]
  },
  "icons": {
    "48": "CurrentTabToClipboard.svg",
    "96": "CurrentTabToClipboard.svg"
  },
  "page_action": {
    "show_matches": [
      "<all_urls>"
    ],
    "browser_style": true,
    "default_icon": "CurrentTabToClipboard.svg",
    "default_title": "Copy tab title and URL",
    "pinned": true
  },
  "browser_specific_settings": {
    "gecko": {
      "id": "CurrentTabToClipboard@elblur.fr"
    }
  }
}

Contenu de CurrentTabToClipboard.js

Le code de l’extension, le coeur du réacteur.

// Manage the click on the page icon (action page)
chrome.pageAction.onClicked.addListener((tab) => {
  if (!tab) {
    console.error('ERROR: No tab found');
    return;
  }

  htmlContent = `<a href="${tab.url}">${tab.title}</a>`;
  textContent = `${tab.title}\n${tab.url}`;

  try {
    clipboardItem = new ClipboardItem({
      'text/html': new Blob([htmlContent], { type: 'text/html' }),
      'text/plain': new Blob([textContent], { type: 'text/plain' })
    });

    navigator.clipboard.write([clipboardItem]);
    console.log('SUCCESS: Copied to clipboard');
  } catch (err) {
    console.error('ERROR: Failed to copy to clipboard', err);
  }

});

// Activate the icon on every tab
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
  if (changeInfo.status === "complete" && tab.url) {
    chrome.pageAction.show(tabId);
  }
});

Compiler, exécuter/tester, signer et publier l’extension

# Compiler
web-ext lint

# Packager
web-ext build 

# Exécuter et tester
web-ext run 

# Signer et soumettre 
web-ext sign --api-key "user:xxxxx" --amo-metadata="metadata.json" --api-secret "xxx" --channel listed

Le résultat

Depuis la barre d’adresse

Après avoir cliqué sur l’icône en forme de presse-papiers, le code va ajouter dans le presse-papiers le titre et l’adresse de l’onglet courant.

Current tab to cilpboard

Formats de sortie

Lorsque le contenu du presse-papiers sera collé, il s’adaptera au format de sortie : HTML (Microsoft Word, Microsoft Outlook - web ou non-, etc.) ou texte brut (Notepad, Visual Studio Code, etc.).

Texte brut

<title>\n<url>

Résultat au format texte brut :
Créer une extension pour Firefox : copier l’adresse et le titre de l’onglet en cours dans le presse-papiers | elblur.fr
https://www.elblur.fr/internet/creer-une-extension-pour-firefox.html

Format HTML

<a href="url">title</a>

Résultat au format HTML :
Créer une extension pour Firefox : copier l’adresse et le titre de l’onglet en cours dans le presse-papiers | elblur.fr

Conclusion

Cette extension Firefox est une solution simple mais efficace pour copier rapidement le titre et l’adresse de l’onglet actif, tout en s’adaptant automatiquement au format requis (HTML ou texte brut). Que ce soit pour partager des liens dans un courriel, documenter des tickets ou tout autre usage, elle apporte un gain de temps appréciable au quotidien.

Si vous débutez dans le développement d’extensions, ce projet constitue une excellente introduction aux concepts de base des WebExtensions. De plus, il peut servir de point de départ pour développer des fonctionnalités plus complexes selon vos besoins.

N’hésitez pas à partager vos retours, à contribuer à l’amélioration de l’extension, ou à explorer d’autres idées pour simplifier vos tâches sur le web !

L’extension est disponible dans la section add-ons du site de Mozilla Firefox : https://addons.mozilla.org/fr/firefox/addon/currenttabtoclipboard/ et le code source de l’extension est disponible sur GitHub : https://github.com/cbo92/firefox-clipboard

Sources

  1. https://developer.mozilla.org/fr/docs/Mozilla/Add-ons/WebExtensions
  2. https://code.visualstudio.com/api/extension-guides/web-extensions
  3. https://github.com/cbo92/firefox-clipboard

Articles similaires

Partage et commentaires

Partager cet article sur :  Mastodon  X (Twitter)  Facebook  LinkedIn  Reddit

Vous pouvez commenter cet article grâce à ce fil de discussion sur Mastodon (avec Mastodon ou un autre compte ActivityPub/​Fediverse).