cnumr · vvatelot · Apr 7, 2026 · Apr 7, 2026
diff --git a/bin/build-extension.mjs b/bin/build-extension.mjs
@@ -29,10 +29,6 @@ async function buildForBrowser(browser) {
 		`${dirname}/../src/images`,
 		`${dirname}/../dist/${browser}/images`,
 	);
-	fs.copySync(
-		`${dirname}/../src/background`,
-		`${dirname}/../dist/${browser}/background`,
-	);
 	fs.copySync(
 		`${dirname}/../src/common.js`,
 		`${dirname}/../dist/${browser}/common.js`,

diff --git a/doc/PRIVACY-POLICY-FR.md b/doc/PRIVACY-POLICY-FR.md
@@ -38,17 +38,15 @@ Le fichier manifeste de l’Extension peut contenir les déclarations suivantes,
 ```json
 {
   "permissions": ["activeTab", "storage"],
-  "host_permissions": ["<all_urls>"]
+  "host_permissions": ["https://bff.ecoindex.fr/*"]
 }
 ```
 
-- **`activeTab`** — Accorde un accès **temporaire** à l’onglet actif lorsque vous utilisez l’Extension (par exemple à l’ouverture de la popup). Elle sert à lire **l’URL de la page affichée** afin d’interroger le backend Ecoindex pour le résultat correspondant. Elle **ne** permet pas de lire en continu tous les onglets en arrière-plan.
+- **`activeTab`** — Accorde un accès **temporaire** à l’onglet actif lorsque vous ouvrez la popup de l’Extension. Elle sert à lire **l’URL de la page affichée** afin d’interroger le backend Ecoindex pour le résultat correspondant. Elle **ne** permet pas de lire en continu tous les onglets en arrière-plan.
 
-- **`storage`** — Sert à conserver **localement sur votre appareil** des données d’Extension : préférences et état d’interface de courte durée (par exemple le badge de la barre d’outils lié à l’onglet courant). Ce stockage n’est pas utilisé pour constituer un historique de navigation exploité par des tiers.
+- **`storage`** — Sert à conserver **localement sur votre appareil** les préférences de l’Extension. Ce stockage n’est pas utilisé pour constituer un historique de navigation exploité par des tiers.
 
-- **`host_permissions` : `<all_urls>`** — Indique que l’Extension peut **s’exécuter dans le contexte des pages web sur les sites que vous visitez**. Ce schéma est en particulier nécessaire lorsque l’Extension injecte des **scripts de contenu** sur toutes les pages (par exemple pour partager du code avec la popup) ou lorsque le navigateur associe ce type d’injection à des autorisations d’hôtes larges. **Il ne s’agit pas d’un dispositif de suivi comportemental** : l’objectif reste d’obtenir l’URL de la page pour la requête Ecoindex décrite ci-dessus. Lorsque les politiques des magasins d’extensions le permettent, l’**accès réseau** au backend est limité à l’API officielle Ecoindex (`https://bff.ecoindex.fr/`) plutôt qu’à des sites arbitraires.
-
-Certaines versions peuvent aussi demander la permission **`tabs`** pour que la partie « arrière-plan » réagisse aux changements d’onglet ou de chargement de page, toujours dans le même objectif (par exemple mettre à jour le badge pour l’onglet actif).
+- **`host_permissions` : `https://bff.ecoindex.fr/*`** — Autorise uniquement les appels réseau vers l’API officielle Ecoindex BFF. Aucun accès hôte large de type `<all_urls>` n’est demandé.
 
 ---
 

diff --git a/doc/PRIVACY-POLICY.md b/doc/PRIVACY-POLICY.md
@@ -38,17 +38,15 @@ The extension manifest may include the following declarations and use them only
 ```json
 {
   "permissions": ["activeTab", "storage"],
-  "host_permissions": ["<all_urls>"]
+  "host_permissions": ["https://bff.ecoindex.fr/*"]
 }
 ```
 
-- **`activeTab`** — Grants **temporary** access to the active tab when you interact with the extension (for example when you open the toolbar popup). The extension uses this to read the **URL of the page you are viewing** so it can request the corresponding Ecoindex result from the backend. It does **not** give ongoing read access to all tabs in the background.
+- **`activeTab`** — Grants **temporary** access to the active tab when you open the extension popup. The extension uses this to read the **URL of the page you are viewing** so it can request the corresponding Ecoindex result from the backend. It does **not** give ongoing read access to all tabs in the background.
 
-- **`storage`** — Used to keep **local data on your device**: extension preferences and short-lived UI state (for example toolbar badge information tied to the current tab). This storage is not used to build a browsing history for third parties.
+- **`storage`** — Used to keep **local data on your device**: extension preferences. This storage is not used to build a browsing history for third parties.
 
-- **`host_permissions`: `<all_urls>`** — Declares that the extension may **run in the context of web pages on any site** you visit. This pattern is required when the extension uses **content scripts** injected on all pages (for example to share helpers with the popup) or when the browser ties injection to broad host permissions. **This is not used for behavioural tracking**: the goal remains to obtain the current page URL for the Ecoindex query described above. Where store policies allow, **network** access to the backend is kept to the official Ecoindex API host (`https://bff.ecoindex.fr/`) rather than arbitrary sites.
-
-Some builds may also request **`tabs`** so the background logic can react when you switch tabs or load a page, still in line with the same purpose (updating the badge for the active tab).
+- **`host_permissions`: `https://bff.ecoindex.fr/*`** — Allows network requests only to the official Ecoindex BFF API. No broad host access such as `<all_urls>` is requested.
 
 ---
 

diff --git a/src/background/background.html b/src/background/background.html
diff --git a/src/background/background.js b/src/background/background.js
diff --git a/src/manifest-chrome.json b/src/manifest-chrome.json
@@ -12,14 +12,9 @@
     "default_title": "Ecoindex",
     "default_popup": "popup/popup.html"
   },
-  "background": {
-    "service_worker": "background/background.js",
-    "type": "module"
-  },
   "permissions": [
     "activeTab",
-    "storage",
-    "tabs"
+    "storage"
   ],
   "host_permissions": [
     "https://bff.ecoindex.fr/*"

diff --git a/src/manifest-firefox.json b/src/manifest-firefox.json
@@ -12,14 +12,10 @@
     "default_title": "Ecoindex",
     "default_popup": "popup/popup.html"
   },
-  "background": {
-    "page": "background/background.html"
-  },
   "permissions": [
     "activeTab",
     "https://bff.ecoindex.fr/*",
-    "storage",
-    "tabs"
+    "storage"
   ],
   "options_ui": {
     "page": "options/options.html",

diff --git a/src/options/options.html b/src/options/options.html
@@ -28,12 +28,12 @@ <h2 id="perms-heading" class="h3">Données et permissions</h2>
 		<p>L’Extension peut déclarer dans son manifeste :</p>
 		<pre class="options-code" id="options-perms-snippet" aria-label="Exemple de permissions manifeste">{
   "permissions": ["activeTab", "storage"],
-  "host_permissions": ["&lt;all_urls&gt;"]
+  "host_permissions": ["https://bff.ecoindex.fr/*"]
 }</pre>
 		<ul class="options-perms-list">
-			<li><strong>activeTab</strong> — Accès <strong>temporaire</strong> à l’onglet actif quand vous ouvrez la popup (ou utilisez l’Extension), pour lire l’URL de la page et interroger le service Ecoindex. Pas de lecture continue de tous les onglets.</li>
-			<li><strong>storage</strong> — Stockage <strong>local</strong> des préférences et d’un état d’affichage de courte durée (par ex. badge), sur votre appareil.</li>
-			<li><strong>host_permissions &lt;all_urls&gt;</strong> — Autorise l’Extension à s’exécuter sur les pages que vous visitez (notamment si des scripts de contenu sont injectés partout). Ce n’est <strong>pas</strong> utilisé pour du pistage publicitaire ; l’URL sert à demander le score Ecoindex. L’accès réseau vers le backend peut être limité à <code>https://bff.ecoindex.fr/</code> selon la version du manifeste.</li>
+			<li><strong>activeTab</strong> — Accès <strong>temporaire</strong> à l’onglet actif lorsque vous ouvrez la popup pour récupérer l’URL affichée et demander le score Ecoindex correspondant.</li>
+			<li><strong>storage</strong> — Stockage <strong>local</strong> des préférences de l’extension sur votre appareil.</li>
+			<li><strong>host_permissions https://bff.ecoindex.fr/*</strong> — Autorise uniquement les appels réseau vers l’API officielle Ecoindex BFF. Aucun accès hôte large de type <code>&lt;all_urls&gt;</code> n’est demandé.</li>
 		</ul>
 		<p class="options-meta">Détail : voir la politique de confidentialité du projet (<code>doc/PRIVACY-POLICY-FR.md</code> ou <code>doc/PRIVACY-POLICY.md</code>).</p>
 	</section>

diff --git a/src/popup/popup.css b/src/popup/popup.css
@@ -739,6 +739,8 @@ code {
   background: #f5f5f5;
   font-family: monospace;
   font-size: 12px;
+  white-space: pre-wrap;
+  word-break: break-all;
 }
 
 .shadow {
@@ -768,4 +770,11 @@ code {
 
 summary {
   cursor: pointer;
+}
+
+#badge-preview-img {
+  display: block;
+  margin: 0.5rem 0;
+  max-width: 100%;
+  height: auto;
 }
diff --git a/src/popup/popup.html b/src/popup/popup.html
@@ -63,7 +63,9 @@ <h1 id="title">Ecoindex</h1>
                         <svg aria-hidden="true">
                             <use xlink:href="#icon-refresh">
                                 <symbol id="icon-refresh" viewBox="0 0 25 25">
-                                    <path d="m17.856 5.476 2.56-2.56v7.657h-7.66l3.524-3.523c-1.181-1.191-2.8-1.946-4.614-1.947-2.854.003-5.28 1.829-6.177 4.375h-.02c-.124.352-.22.718-.283 1.094h-2.202c.537-4.318 4.21-7.656 8.677-7.656h.011c2.417 0 4.602.977 6.184 2.559zm-14.94 14.94 2.562-2.559c1.58 1.582 3.766 2.56 6.183 2.56h.011c4.467 0 8.14-3.339 8.677-7.657h-2.201c-.064.377-.16.742-.284 1.094h-.02c-.896 2.547-3.322 4.372-6.176 4.375-1.815-.001-3.433-.755-4.614-1.947l3.524-3.522h-7.661v7.657z" transform="translate(.833 .833)"></path>
+                                    <path
+                                        d="m17.856 5.476 2.56-2.56v7.657h-7.66l3.524-3.523c-1.181-1.191-2.8-1.946-4.614-1.947-2.854.003-5.28 1.829-6.177 4.375h-.02c-.124.352-.22.718-.283 1.094h-2.202c.537-4.318 4.21-7.656 8.677-7.656h.011c2.417 0 4.602.977 6.184 2.559zm-14.94 14.94 2.562-2.559c1.58 1.582 3.766 2.56 6.183 2.56h.011c4.467 0 8.14-3.339 8.677-7.657h-2.201c-.064.377-.16.742-.284 1.094h-.02c-.896 2.547-3.322 4.372-6.176 4.375-1.815-.001-3.433-.755-4.614-1.947l3.524-3.522h-7.661v7.657z"
+                                        transform="translate(.833 .833)"></path>
                                 </symbol>
                             </use>
                         </svg>
@@ -98,9 +100,25 @@ <h2 class="space">Derniers résultats</h2>
             </details>
         </div>
     </div>
+    <details id="badge-integration" class="space">
+        <hr>
+        <summary>Intégrer le badge Ecoindex <a id="badge-preview-link" target="_blank" rel="noopener noreferrer">
+                <img id="badge-preview-img" alt="Ecoindex Badge" />
+            </a></summary>
+        <p>Vous pouvez intégrer un badge Ecoindex pour la page analysée avec le snippet suivant :</p>
+        <label for="badge-theme">Thème du badge :</label>
+        <select id="badge-theme" class="space">
+            <option value="light" selected>light</option>
+            <option value="dark">dark</option>
+        </select>
+        <code id="badge-snippet"></code>
+        <p class="space --s-3">En savoir plus : <a href="https://www.jsdelivr.com/package/gh/cnumr/ecoindex_badge"
+                target="_blank" rel="noopener noreferrer">cnumr/ecoindex_badge sur jsDelivr</a></p>
+    </details>
     <footer class="space text-align:center">
         <hr>
-        <div class="space --s-3">Plus d'infos sur <a href="https://www.ecoindex.fr" target="_blank">www.ecoindex.fr</a></div>
+        <div class="space --s-3">Plus d'infos sur <a href="https://www.ecoindex.fr" target="_blank">www.ecoindex.fr</a>
+        </div>
     </footer>
     <script type="module" src="../common.js"></script>
     <script type="module" src="./popup.js"></script>

diff --git a/src/popup/popup.js b/src/popup/popup.js
@@ -5,14 +5,19 @@ import {
 	FETCH_SCREENSHOT_URL,
 	FETCH_TASK_URL,
 	getBrowserPolyfill,
-	setBadgeLocalStorage,
 } from "../common.js";
 
 let tabUrl;
 /** @type {{ showScreenshot: boolean }} */
 let options = { showScreenshot: true };
 const domTitle = document.getElementById("title");
 const currentBrowser = getBrowserPolyfill();
+const badgeIntegrationElement = document.getElementById("badge-integration");
+const badgeSnippetElement = document.getElementById("badge-snippet");
+const badgeThemeElement = document.getElementById("badge-theme");
+const badgePreviewLinkElement = document.getElementById("badge-preview-link");
+const badgePreviewImgElement = document.getElementById("badge-preview-img");
+let shouldRefreshBadgePreview = false;
 
 async function loadOptions() {
 	const stored = await currentBrowser.storage.local.get({
@@ -168,10 +173,6 @@ function setOtherResults(ecoindexData, tag) {
 	section.style.display = "block";
 }
 
-async function updateLocalStorage(value) {
-	await setBadgeLocalStorage(tabUrl, value.color, value.grade);
-}
-
 /**
  * Display the result of the analysis using data from the API
  * @param any ecoindexData results from the BFF API
@@ -197,10 +198,12 @@ function displayResult(ecoindexData) {
 		resultLink.setAttribute("href", FETCH_RESULT_ECOINDEX_URL(latestResult.id));
 
 		document.getElementById("result").style.display = "block";
+		badgeIntegrationElement.style.display = "block";
+		updateBadgeSnippet(tabUrl, getBadgeTheme(), shouldRefreshBadgePreview);
+		shouldRefreshBadgePreview = false;
 		if (options.showScreenshot) {
 			displayImage(latestResult.id);
 		}
-		updateLocalStorage(latestResult);
 	}
 
 	if (
@@ -230,6 +233,29 @@ function updatePopup(ecoindexData) {
 	displayResult(ecoindexData);
 }
 
+/**
+ * Build and display a reusable Ecoindex badge snippet for the current URL.
+ * @param {string} url
+ * @param {"light" | "dark"} theme
+ * @param {boolean} refreshPreview
+ */
+function updateBadgeSnippet(url, theme = "light", refreshPreview = false) {
+	const redirectUrl = `https://bff.ecoindex.fr/redirect/?url=${url}`;
+	const badgeUrl = `https://bff.ecoindex.fr/badge/?theme=${theme}&url=${url}`;
+	const previewUrl = refreshPreview
+		? `${badgeUrl}&refresh=true&_ts=${Date.now()}`
+		: badgeUrl;
+	badgeSnippetElement.textContent = `<a href="${redirectUrl}" target="_blank">
+    <img src="${badgeUrl}" alt="Ecoindex Badge" />
+</a>`;
+	badgePreviewLinkElement.setAttribute("href", redirectUrl);
+	badgePreviewImgElement.setAttribute("src", previewUrl);
+}
+
+function getBadgeTheme() {
+	return badgeThemeElement.value === "dark" ? "dark" : "light";
+}
+
 /**
  * Get data from the API and update the popup
  * @param string url
@@ -304,6 +330,7 @@ function resetDisplay() {
 	document.getElementById("older-results").style.display = "none";
 	document.getElementById("host-results").style.display = "none";
 	document.getElementById("error").style.display = "none";
+	badgeIntegrationElement.style.display = "none";
 }
 
 /**
@@ -312,14 +339,19 @@ function resetDisplay() {
 async function runAnalysis() {
 	resetDisplay();
 	document.getElementById("loader").style.display = "block";
+	shouldRefreshBadgePreview = true;
 
 	fetch(FETCH_TASK_URL, {
 		method: "POST",
 		headers: {
 			"Content-Type": "application/json",
 		},
 		body: JSON.stringify({
-			url: tabUrl,
+			web_page: {
+				width: 1920,
+				height: 1080,
+				url: tabUrl,
+			},
 		}),
 	})
 		.then((r) => r.json())
@@ -341,6 +373,9 @@ loadOptions()
 			.querySelector("#no-analysis button")
 			.addEventListener("click", runAnalysis);
 		document.getElementById("retest").addEventListener("click", runAnalysis);
+		badgeThemeElement.addEventListener("change", () => {
+			updateBadgeSnippet(tabUrl, getBadgeTheme());
+		});
 
 		currentBrowser.tabs.query(
 			{
@@ -349,6 +384,7 @@ loadOptions()
 			},
 			(tabs) => {
 				tabUrl = tabs[0].url;
+				updateBadgeSnippet(tabUrl, getBadgeTheme());
 
 				getAndUpdateEcoindexData(tabUrl);
 			},