URL: https://linuxfr.org/users/steph1978/journaux/support-des-text-fragments-dans-firefox
Title: support des "Text fragments" dans Firefox
Authors: steph1978
Date: 2024年10月24日T11:32:47+02:00
License: CC By-SA
Tags: web et navigateur_web
Score: 25
# Présentation
Le lien hypertexte (`<a href="/index.cgi/contrast/httpS://linuxfr.org/users/steph1978/journaux/...">`) 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](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#:%7E:text=Sections%20of%20a%20page%20with%20document%20fragments) ; à 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](https://developer.mozilla.org/en-US/docs/Web/URI/Fragment/Text_fragments#:~:text=using%20particular,don't%20control).
# En pratique
Comme créer le lien à la main est un vrai calvaire, il existe des [extensions FF](https://addons.mozilla.org/en-US/firefox/search/?q=text%20fragment) 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.
```json
// manifest.json
{
 "manifest_version": 2,
 "name": "Text Fragment Copier",
 "version": "1.0",
 "permissions": [
 "contextMenus",
 "clipboardWrite",
 "activeTab"
 ],
 "background": {
 "scripts": ["background.js"]
 },
 "icons": {
 "48": "icon.png"
 }
}
```
```javascript
// 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](about:debugging#/runtime/this-firefox) puis choisir "Load Temporary Add-on..." en haut à droite, puis selectionner le fichier manifest.
</div><div class="naked_ctrl">
<form action="/index.cgi/contrast" method="get" name="gate">
<p><a href="http://altstyle.alfasado.net">AltStyle</a> によって変換されたページ <a href="httpS://linuxfr.org/users/steph1978/journaux/support-des-text-fragments-dans-firefox.md">(-&gt;オリジナル)</a>
/ <label>アドレス: <input type="text" name="naked_post_url" value="httpS://linuxfr.org/users/steph1978/journaux/support-des-text-fragments-dans-firefox.md" size="22" /></label> <label>モード: <select name="naked_post_mode">
<option value="default">デフォルト</option>
<option value="speech">音声ブラウザ</option>
<option value="ruby">ルビ付き</option>
<option value="contrast" selected="selected">配色反転</option>
<option value="larger-text">文字拡大</option>
<option value="mobile">モバイル</option>
</select>
<input type="submit" value="表示" />
</p>
</form>
</div>