Journal support des "Text fragments" dans Firefox

Posté par  . Licence CC By‑SA.
Étiquettes :
25
24
oct.
2024

Présentation

Le lien hypertexte (<a href="...">) c'est un peu l'essence du web.
Mais ça a une limite, on ne peut faire un lien que vers le document entier, pas un contenu en particulier.

Il existe depuis longtemps le fragment - URL#text-id mais il suppose que l'auteur du document ait mis des identifiants sur les sections ; à part sur Wikipedia (outil mediawiki), je ne le vois pas souvent.

Avec cette nouvelle fonctionnalité "text fragment" - #:~:text=..., on peut créer des liens vers un morceau de texte arbitraire. Bon je trouve la syntaxe un peu complexe et j'aurai préféré pouvoir faire un lien vers un "css-selector", beaucoup plus prédictible et dont la syntaxe est connue.

Mais ne boudons pas notre plaisir.

Fun fact, pour les producteurs de contenu qui ne veulent pas que vous zappiez les pubs, Google/Chrome supporte une directive qui désactive la fonctionnalité.

Le document de référence.

En pratique

Comme créer le lien à la main est un vrai calvaire, il existe des extensions FF pour les créer. L'idée : sélectionner le texte, clic-droit, copier le lien fragment texte.

Comme je ne suis jamais trop chaud pour installer n'importe quelle extension qui va avoir accès à toute ma navigation, j'ai demandé à un LLM de m'en écrire une.

// manifest.json
{
  "manifest_version": 2,
  "name": "Text Fragment Copier",
  "version": "1.0",
  "permissions": [
    "contextMenus",
    "clipboardWrite",
    "activeTab"
  ],
  "background": {
    "scripts": ["background.js"]
  },
  "icons": {
    "48": "icon.png"
  }
}
// background.js
browser.contextMenus.create({
  id: "text-fragment",
  title: "Text Fragment",
  contexts: ["selection"]
});

browser.contextMenus.onClicked.addListener((info) => {
  if (info.menuItemId === "text-fragment") {
    const selectedText = info.selectionText;
    const pageUrl = info.pageUrl;
    const textToCopy = `${pageUrl}#:~:text=${selectedText}`;

    navigator.clipboard.writeText(textToCopy).then(() => {
      console.log("Text copied to clipboard");
    }).catch(err => {
      console.error("Could not copy text: ", err);
    });
  }
});

Pour la charger, aller sur la page about:debugging#/runtime/this-firefox puis choisir "Load Temporary Add-on…" en haut à droite, puis selectionner le fichier manifest.

  • # Plus populaire que ça quand même

    Posté par  (Mastodon) . Évalué à 7 (+4/-0).

    à part sur Wikipedia (outil mediawiki), je ne le vois pas souvent

    On le voit dès qu'il y a un menu, comme par exemple dans les journaux et les dépêches qui ont un sommaire.

    Dans les blogs aussi c'est souvent le cas, surtout si ils utilisent un outil de génération (dynamique ou statique) qui affiche un sommaire. De même les moteurs de forum s'en servent énormément pour pouvoir accéder à un commentaire.

    En théorie, la théorie et la pratique c'est pareil. En pratique c'est pas vrai.

  • # l'idée est bonne

    Posté par  . Évalué à 4 (+2/-0).

    Mais d'accord avec toi la syntaxe est bof.
    Merci pour le script, je découvre ainsi une fonctionnalité de FF que je ne connaissais pas.
    J'essaierai ce soir.

    "Si tous les cons volaient, il ferait nuit" F. Dard

    • [^] # Re: l'idée est bonne

      Posté par  . Évalué à 2 (+0/-0).

      oui, ça peut servir pour utiliser une version patchée d'une extension existante : DL le .xpi, dezip quelquepart, modifie le code et load dans la page debug.

  • # fix

    Posté par  . Évalué à 2 (+0/-0). Dernière modification le 24 octobre 2024 à 14:33.

    supprimé

    • [^] # Re: fix

      Posté par  . Évalué à 1 (+0/-1). Dernière modification le 24 octobre 2024 à 14:45.

      j'étais pas sur de devoir modifier mon code, mais si, il faut url -ncoder le texte. J'ai aussi ajouter le fait de supprimer le fragment existant si il y a déjà un.

      ça se passe ici

  • # There was an error

    Posté par  . Évalué à 1 (+0/-0). 

    There was an error during the temporary add-on installation.
Error details

File /home/arnauld/Bureau does not contain a valid manifest

    arnauld

  • # Chromium

    Posté par  . Évalué à 2 (+0/-0).

    Je voulais faire fonctionner mon extension sur Chromimum et, sans surprise il râle sur la dépréciation du manifest v2 (f*ing ggl). Ensuite, mon code devrait être adapté (browser dans FF s'appelle chrome dans chromium). Mais surtout, le fonctionnalité est déjà là, dans le menu contextuel : "Copy link to highlight" (en anglais, je sais pas le mettre en français).

  • # à défaut d'une nouvelle extension

    Posté par  . Évalué à 3 (+1/-0).

    On peut aussi utiliser les « user scripts » avec greasemonkey/violentmonkey, qui ne nécessite pas de « temporary add-on » :

    // ==UserScript==
// @name        Text Fragment Copier
// @namespace   Violentmonkey Scripts
// @match       https://*/*
// @version     1.0
// @author      somebody
// @description Generate text fragment URL pointing to selected text and copy to clipboard (see https://developer.mozilla.org/en-US/docs/Web/URI/Fragment/Text_fragments)
// @grant       GM_registerMenuCommand
// @grant       GM_setClipboard
// ==/UserScript==

GM_registerMenuCommand(
  "Text fragment",
  () => {
    const selectedText = document.getSelection().toString();
    const pageUrl = window.location.href;
    const textToCopy = `${pageUrl}#:~:text=${selectedText}`;

    GM_setClipboard(textToCopy);
  }
);

Envoyer un commentaire

Suivre le flux des commentaires

Note : les commentaires appartiennent à celles et ceux qui les ont postés. Nous n’en sommes pas responsables.