Passer à une icône dans la barre d’URL + UI améliorée + liens API/icônes

README.md

@@ -1,5 +1,54 @@
 # URL_shortener_Userscript
 
+Le projet fournit maintenant une **WebExtension Firefox** qui affiche un **petit icône dans la barre d’URL** (page action) sur les pages `http(s)`.
+
+## Fonctionnalités
+
+- Petit icône directement dans la barre d’URL Firefox.
+- Clic sur l’icône → popup de raccourcissement.
+- Pré-remplissage automatique avec l’URL de l’onglet actif.
+- Services : **Bitly**, **TinyURL**, **Rebrandly**, **is.gd**, **v.gd**.
+- Copie rapide du lien + affichage de l’URL finale.
+- Page paramètres pour tokens API + historique local.
+- Section de liens API et ressources d’icônes pour développeurs.
+
+## Structure
+
+- `firefox-extension/manifest.json`
+- `firefox-extension/background.js`
+- `firefox-extension/popup/*`
+- `firefox-extension/options/*`
+- `firefox-extension/icons/*`
+
+## Installation dans Firefox
+
+1. Ouvre `about:debugging#/runtime/this-firefox`.
+2. Clique **Charger un module complémentaire temporaire**.
+3. Sélectionne `firefox-extension/manifest.json`.
+4. Ouvre n’importe quel site web (`http`/`https`), puis utilise le petit icône dans la barre d’URL.
+
+## Liens pour récupérer les API
+
+- Bitly : https://dev.bitly.com/
+- TinyURL : https://tinyurl.com/app/dev
+- Rebrandly : https://developers.rebrandly.com/docs
+- is.gd API : https://is.gd/apishorteningreference.php
+- v.gd API : https://v.gd/apishorteningreference.php
+
+## Sites d’icônes pour développeurs
+
+- Google Material Icons : https://fonts.google.com/icons
+- Heroicons : https://heroicons.com/
+- Font Awesome : https://fontawesome.com/icons
+- Tabler Icons : https://tabler.io/icons
+
+Tu peux remplacer les icônes par défaut dans `firefox-extension/icons/`, puis ajuster les chemins dans `manifest.json`.
+
+## Notes
+
+- Bitly, TinyURL et Rebrandly nécessitent un token.
+- `is.gd` et `v.gd` fonctionnent sans token.
+- En mode temporaire (`about:debugging`), l’extension doit être rechargée après redémarrage de Firefox.
 Ce dépôt fournit maintenant une **vraie extension Firefox (WebExtension)** pour avoir un bouton dans l’interface du navigateur, utilisable sur toutes les pages web.
 
 ## ✅ Ce que fait l’extension

firefox-extension/background.js

@@ -0,0 +1,31 @@
+function isSupportedUrl(url) {
+  return typeof url === 'string' && /^https?:\/\//i.test(url);
+}
+
+async function updatePageAction(tabId) {
+  try {
+    const tab = await browser.tabs.get(tabId);
+    if (tab && isSupportedUrl(tab.url)) {
+      await browser.pageAction.show(tabId);
+    }
+  } catch {
+    // ignore tabs that cannot be queried/shown
+  }
+}
+
+browser.tabs.onActivated.addListener(async ({ tabId }) => {
+  await updatePageAction(tabId);
+});
+
+browser.tabs.onUpdated.addListener(async (tabId, changeInfo, tab) => {
+  if (changeInfo.status === 'complete' || changeInfo.url) {
+    if (isSupportedUrl(tab.url)) {
+      await browser.pageAction.show(tabId);
+    }
+  }
+});
+
+browser.runtime.onInstalled.addListener(async () => {
+  const tabs = await browser.tabs.query({});
+  await Promise.all(tabs.map((tab) => updatePageAction(tab.id)));
+});

firefox-extension/manifest.json

@@ -1,4 +1,12 @@
 {
+  "manifest_version": 2,
+  "name": "Firefox URL Shortener Hub",
+  "version": "1.2.0",
+  "description": "Raccourcir l'URL de l'onglet actif depuis une icône dans la barre d'URL Firefox.",
+  "permissions": [
+    "storage",
+    "tabs",
+    "clipboardWrite",
   "manifest_version": 3,
   "name": "Firefox URL Shortener Hub",
   "version": "1.0.0",
@@ -17,13 +25,30 @@
     "https://v.gd/*",
     "<all_urls>"
   ],
-  "action": {
+  "background": {
+    "scripts": ["background.js"]
+  },
+  "page_action": {
     "default_title": "URL Shortener",
-    "default_popup": "popup/popup.html"
+    "default_popup": "popup/popup.html",
+    "default_icon": {
+      "16": "icons/icon-16.svg",
+      "32": "icons/icon-32.svg"
+    },
+    "show_matches": [
+      "http://*/*",
+      "https://*/*"
+    ]
   },
   "options_ui": {
     "page": "options/options.html",
-    "open_in_tab": true
+    "open_in_tab": true,
+    "browser_style": true
+  },
+  "icons": {
+    "16": "icons/icon-16.svg",
+    "32": "icons/icon-32.svg",
+    "48": "icons/icon-48.svg"
   },
   "browser_specific_settings": {
     "gecko": {

firefox-extension/options/options.css

@@ -1,16 +1,24 @@
 body {
   font-family: Inter, system-ui, Arial, sans-serif;
-  background: #f7f7fb;
+  background: radial-gradient(circle at top, #f0f4ff, #f7f8fc 45%);
   margin: 0;
+  color: #1f2a44;
 }
 .container {
-  max-width: 760px;
+  max-width: 920px;
   margin: 24px auto;
+  padding: 0 12px 24px;
+  display: grid;
+  gap: 12px;
+}
+.panel {
   background: #fff;
-  border: 1px solid #dde0ee;
-  border-radius: 12px;
-  padding: 20px;
+  border: 1px solid #dde3f2;
+  border-radius: 14px;
+  padding: 18px;
+  box-shadow: 0 8px 20px rgba(20, 36, 80, 0.06);
 }
+h1, h2 { margin: 0 0 8px; }
 label {
   display: block;
   margin: 12px 0 4px;
@@ -19,29 +27,27 @@ label {
 input {
   width: 100%;
   box-sizing: border-box;
-  padding: 9px;
-  border: 1px solid #ccd0df;
-  border-radius: 8px;
+  padding: 10px;
+  border: 1px solid #ccd4e8;
+  border-radius: 10px;
+}
+input:focus {
+  outline: 2px solid #bfd3ff;
+  border-color: #739cf6;
 }
 button {
-  background: #0060df;
+  background: linear-gradient(90deg, #0059d6, #0072ff);
   color: #fff;
   border: none;
-  border-radius: 8px;
-  padding: 9px 16px;
+  border-radius: 10px;
+  padding: 10px 18px;
   cursor: pointer;
 }
-.actions {
-  margin-top: 14px;
-}
-#historyList {
-  margin: 0;
-  padding-left: 18px;
-}
-#historyList li {
-  margin: 6px 0;
-}
-#message {
-  margin-top: 12px;
-  color: #2f6f00;
-}
+.actions { margin-top: 14px; }
+#historyList { margin: 0; padding-left: 18px; }
+#historyList li { margin: 6px 0; word-break: break-all; }
+#message { margin-top: 10px; color: #0b6b12; font-weight: 600; }
+a { color: #1a4ca8; text-decoration: none; }
+a:hover { text-decoration: underline; }
+.help { display: inline-block; margin-top: 4px; font-size: 12px; }
+code { background: #eef2fb; padding: 2px 6px; border-radius: 6px; }

firefox-extension/options/options.html

@@ -8,29 +8,46 @@
 </head>
 <body>
   <main class="container">
-    <h1>Paramètres API</h1>
-    <p>Configure les tokens pour les services qui en ont besoin.</p>
-
-    <label for="bitlyToken">Bitly token</label>
-    <input id="bitlyToken" type="text" />
-
-    <label for="tinyUrlToken">TinyURL token</label>
-    <input id="tinyUrlToken" type="text" />
-
-    <label for="rebrandlyToken">Rebrandly token</label>
-    <input id="rebrandlyToken" type="text" />
-
-    <label for="rebrandlyDomain">Domaine Rebrandly (optionnel)</label>
-    <input id="rebrandlyDomain" type="text" placeholder="rebrand.ly" />
-
-    <div class="actions">
-      <button id="saveBtn">Enregistrer</button>
-    </div>
-
-    <h2>Historique récent</h2>
-    <ul id="historyList"></ul>
-
-    <p id="message"></p>
+    <section class="panel">
+      <h1>Paramètres API</h1>
+      <p>Configure tes tokens API pour les services premium.</p>
+
+      <label for="bitlyToken">Bitly token</label>
+      <input id="bitlyToken" type="text" />
+      <a class="help" href="https://dev.bitly.com/" target="_blank" rel="noreferrer">Obtenir une clé Bitly</a>
+
+      <label for="tinyUrlToken">TinyURL token</label>
+      <input id="tinyUrlToken" type="text" />
+      <a class="help" href="https://tinyurl.com/app/dev" target="_blank" rel="noreferrer">Obtenir une clé TinyURL</a>
+
+      <label for="rebrandlyToken">Rebrandly token</label>
+      <input id="rebrandlyToken" type="text" />
+      <a class="help" href="https://developers.rebrandly.com/docs" target="_blank" rel="noreferrer">Obtenir une clé Rebrandly</a>
+
+      <label for="rebrandlyDomain">Domaine Rebrandly (optionnel)</label>
+      <input id="rebrandlyDomain" type="text" placeholder="rebrand.ly" />
+
+      <div class="actions">
+        <button id="saveBtn">Enregistrer</button>
+      </div>
+      <p id="message"></p>
+    </section>
+
+    <section class="panel">
+      <h2>Historique récent</h2>
+      <ul id="historyList"></ul>
+    </section>
+
+    <section class="panel">
+      <h2>Icônes développeur recommandées</h2>
+      <ul>
+        <li><a href="https://fonts.google.com/icons" target="_blank" rel="noreferrer">Google Material Icons</a></li>
+        <li><a href="https://heroicons.com/" target="_blank" rel="noreferrer">Heroicons</a></li>
+        <li><a href="https://fontawesome.com/icons" target="_blank" rel="noreferrer">Font Awesome</a></li>
+        <li><a href="https://tabler.io/icons" target="_blank" rel="noreferrer">Tabler Icons</a></li>
+      </ul>
+      <p>Place tes icônes dans <code>firefox-extension/icons/</code> et mets à jour <code>manifest.json</code>.</p>
+    </section>
   </main>
 
   <script type="module" src="options.js"></script>

firefox-extension/options/options.js

@@ -60,7 +60,8 @@ async function renderHistory() {
 
   history.slice(0, 20).forEach((item) => {
     const li = document.createElement('li');
-    li.innerHTML = `<strong>${escapeHtml(item.service || 'Service')}</strong> — <a href="${escapeHtml(item.shortUrl || '#')}" target="_blank" rel="noreferrer">${escapeHtml(item.shortUrl || '')}</a>`;
+    const date = item.createdAt ? new Date(item.createdAt).toLocaleString('fr-FR') : '';
+    li.innerHTML = `<strong>${escapeHtml(item.service || 'Service')}</strong> — <a href="${escapeHtml(item.shortUrl || '#')}" target="_blank" rel="noreferrer">${escapeHtml(item.shortUrl || '')}</a>${date ? ` <em>(${escapeHtml(date)})</em>` : ''}`;
     historyList.appendChild(li);
   });
 }
@@ -73,3 +74,11 @@ function escapeHtml(value) {
     .replace(/"/g, '&quot;')
     .replace(/'/g, '&#039;');
 }
+
+
+document.querySelectorAll('a[target="_blank"]').forEach((link) => {
+  link.addEventListener('click', async (event) => {
+    event.preventDefault();
+    await browser.tabs.create({ url: link.href });
+  });
+});