release: v3.0 (v3.0.1 on Firefox)

.gitignore

@@ -0,0 +1 @@
+/local/

background.js

@@ -0,0 +1,19 @@
+"use strict";
+
+if (typeof hasPermissions == 'undefined')
+	self.importScripts("permissions.js");
+
+if (chrome)
+	var browser = chrome;
+if (!browser)
+	throw Error("wtf");
+
+function checkPermissions() {
+	hasPermissions(browser).then((hasPerm) => {
+		if (!hasPerm)
+			browser.tabs.create({url: "/missing_permissions/index.html", active: true});
+	});
+}
+
+checkPermissions();
+browser.permissions.onRemoved.addListener(checkPermissions);

content.js

@@ -0,0 +1,130 @@
+"use strict";
+
+if (chrome)
+	window.browser = chrome;
+if (!browser)
+	throw Error("wtf");
+
+// REMOVE THE BUTTON IF IT ALREADY EXISTS
+{
+	let buttonEl = document.getElementById("fdtransparentbutton");
+	if(buttonEl)
+		buttonEl.parentNode.removeChild(buttonEl);
+}
+
+if([...document.getElementsByClassName("principal")].length > 0) {
+	class FDTransparent {
+		static createButton() {
+			// STYLESHEET
+			var styleText = `
+				img#fdtransparentbutton {
+					position: fixed;
+					bottom: 20px;
+					left: 20px;
+					z-index: 9;
+					width: 48px;
+					height: 48px;
+					
+					border-radius: 50%;
+					filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.22));
+
+					background: #fff;
+
+					transition: background 0.5s;
+				}
+
+				img#fdtransparentbutton.on {
+					background: none;
+				}
+
+				@media screen and (min-width: 1201px) {
+					img#fdtransparentbutton {
+						left: 325px;
+					}
+				}
+
+				.principal.post
+				{
+					box-shadow: none !important;
+				}
+
+				.principal {
+					transition: background-color 0.5s, box-shadow 0.5s;
+					box-shadow: none !important;
+					filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.22));
+				}
+
+				.principal.transparent {
+					background-color: #0000;
+				}
+			`;
+			var styleEl = document.createElement("style");
+			if (styleEl.styleSheet) {
+				styleEl.styleSheet.cssText = styleText;
+			} else {
+				styleEl.appendChild(document.createTextNode(styleText));
+			}
+			document.head.appendChild(styleEl);
+			// CREATE BUTTON
+			FDTransparent.button = document.createElement('img');
+			FDTransparent.button.id = "fdtransparentbutton";
+			FDTransparent.button.src = browser.runtime.getURL('icon96.png');
+			// button click
+			FDTransparent.button.addEventListener("click", () => {
+				FDTransparent.isOn = !FDTransparent.isOn;
+				FDTransparent.setTransparent(FDTransparent.isOn);
+			});
+			// append button
+			document.body.appendChild(FDTransparent.button);
+			// SYNC TRANSPARENCY FROM STORAGE
+			FDTransparent.isTransparent()
+				.then((v) => 
+				{
+					FDTransparent.isOn = v;
+					FDTransparent.setTransparent(FDTransparent.isOn);
+				}
+			);
+		}
+
+		static changeButtonDisplay(value) {
+			if(value)
+				FDTransparent.button.className = "on";
+			else
+				FDTransparent.button.className = "";
+		}
+
+		static isOn = false;
+
+		static isTransparent() {
+			return new Promise((resolve, reject) => {
+				browser.storage.local.get("transparent")
+					.then((v) => {
+						resolve(Boolean(v.transparent));
+					});
+			});
+		}
+
+		static setTransparent(value) {
+			// CHANGE SAVED VALUE
+			browser.storage.local.set({"transparent": value });
+
+			// CHANGE TRANSPARENCY
+			[...document.getElementsByClassName("principal")].forEach((el) => {
+				if (value)
+					el.classList.add("transparent");
+				else
+					el.classList.remove("transparent");
+			});
+			
+			// CHANGE BUTTON
+			FDTransparent.changeButtonDisplay(value);
+		}
+	}
+
+	FDTransparent.createButton();
+
+	console.info('Extension FDTransparent chargée !');
+}
+else {
+	console.info('L\'extension FDTransparent est inutile sur cette page.');
+}

manifest.chrome.json

@@ -0,0 +1,32 @@
+{
+  "manifest_version": 3,
+  "name": "FD transparent",
+  "version": "3.0",
+
+  "description": "Ajoute un bouton pour activer et désactiver la transparence des images sur le Forum Dessiné (https://forum-dessine.fr).",
+
+  "icons": {
+    "48": "icon48.png",
+    "96": "icon96.png"
+  },
+
+  "content_scripts": [
+    {
+      "matches": ["*://*.forum-dessine.fr/*"],
+      "js": ["content.js"]
+    }
+  ],
+
+  "background": {
+	"service_worker": "background.js"
+  },
+
+  "permissions": [
+    "storage"
+  ],
+
+  "web_accessible_resources": [{
+    "resources": ["*"],
+    "matches": ["*://*.forum-dessine.fr/*"]
+  }]
+}

manifest.firefox.json

@@ -0,0 +1,34 @@
+{
+  "manifest_version": 2,
+  "name": "FD transparent",
+  "version": "3.0.1",
+
+  "description": "Ajoute un bouton pour activer et désactiver la transparence des images sur le Forum Dessiné (https://forum-dessine.fr).",
+
+  "icons": {
+    "48": "icon48.png",
+    "96": "icon96.png"
+  },
+
+  "content_scripts": [
+    {
+      "matches": ["*://*.forum-dessine.fr/*"],
+      "js": ["content.js"]
+    }
+  ],
+
+  "background": {
+	"scripts": ["permissions.js", "background.js"]
+  },
+
+  "permissions": [
+    "storage",
+	"*://*.forum-dessine.fr/*"
+  ],
+
+  "browser_specific_settings": {
+    "gecko": {
+      "id": "{9bf41bb9-68ed-49b8-9866-5caf0725e153}"
+    }
+  }
+}

manifest.firefox.v3.json

@@ -0,0 +1,37 @@
+{
+  "manifest_version": 3,
+  "name": "FD transparent",
+  "version": "3.0",
+
+  "description": "Ajoute un bouton pour activer et désactiver la transparence des images sur le Forum Dessiné (https://forum-dessine.fr).",
+
+  "icons": {
+    "48": "icon48.png",
+    "96": "icon96.png"
+  },
+
+  "content_scripts": [
+    {
+      "matches": ["*://*.forum-dessine.fr/*"],
+      "js": ["content.js"]
+    }
+  ],
+
+  "background": {
+	"scripts": ["permissions.js", "background.js"]
+  },
+
+  "permissions": [
+    "storage"
+  ],
+
+  "web_accessible_resources": [{
+    "resources": ["*"],
+    "matches": ["*://*.forum-dessine.fr/*"]
+  }],
+  "browser_specific_settings": {
+    "gecko": {
+      "id": "{9bf41bb9-68ed-49b8-9866-5caf0725e153}"
+    }
+  }
+}

manifest.json

@@ -0,0 +1,34 @@
+{
+  "manifest_version": 2,
+  "name": "FD transparent",
+  "version": "3.0.1",
+
+  "description": "Ajoute un bouton pour activer et désactiver la transparence des images sur le Forum Dessiné (https://forum-dessine.fr).",
+
+  "icons": {
+    "48": "icon48.png",
+    "96": "icon96.png"
+  },
+
+  "content_scripts": [
+    {
+      "matches": ["*://*.forum-dessine.fr/*"],
+      "js": ["content.js"]
+    }
+  ],
+
+  "background": {
+	"scripts": ["permissions.js", "background.js"]
+  },
+
+  "permissions": [
+    "storage",
+	"*://*.forum-dessine.fr/*"
+  ],
+
+  "browser_specific_settings": {
+    "gecko": {
+      "id": "{9bf41bb9-68ed-49b8-9866-5caf0725e153}"
+    }
+  }
+}

missing_permissions/index.html

@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8" />
+	<title>FD Transparent - Permissions Manquantes</title>
+	<style>
+		body {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
+
+		p, button {
+			font-family: "comic sans ms";
+			font-weight: bold;
+			font-size: 18px;
+		}
+
+		button {
+			border-radius: 6px;
+			border-width: 2px;
+			padding: 6px;
+		}
+
+		body > div {
+			padding: 0 10px; /* ugly padding */
+			border: solid 2px black; /* ugly borders */
+			border-radius: 6px;
+		}
+
+		p > img {
+			display: inline-block;
+			height: 1.5em;
+			vertical-align: bottom;
+		}
+
+		#boutonbox {
+			display: none;
+		}
+	</style>
+</head>
+<body>
+	<div>
+		<p id="msg">
+			...
+		</p>
+		<p id="boutonbox">
+			<button id="bouton" style="display: inline-block; text-align: right;">
+				Accorder la permission
+			</button>
+			&lt;- bouton moche
+		</p>
+	</div>
+	<script type="text/javascript" src="/permissions.js"></script>
+	<script type="text/javascript" src="script.js"></script>
+</body>
+</html>

missing_permissions/script.js

@@ -0,0 +1,31 @@
+{
+	function hideBouton() {
+		document.getElementById('boutonbox').style.display = "none";
+	}
+
+	function showBouton() {
+		document.getElementById('boutonbox').style.display = "block";
+	}
+
+	document.getElementById('bouton').addEventListener("click", () => {
+		askPermissions(browser).then((hello) => {
+			updateMsg();
+		});
+	});
+
+	function updateMsg() {
+		hasPermissions(browser).then((hasPerm) => {
+			let txt;
+			if (hasPerm) {
+				hideBouton();
+				txt = "permission accordée ! <img src='zy_lezgo.png' />";
+			}
+			else {
+				showBouton();
+				txt = "<img src='zy_awaiting.png' /> pour que FD Transparent puisse fonctionner, il faut que vous permettiez à l'extension l'accès aux pages du Forum Dessiné en appuyant sur le bouton moche";
+			}
+			document.getElementById("msg").innerHTML = txt;
+		});
+	}
+	updateMsg();
+}

package-lock.json

@@ -0,0 +1,47 @@
+{
+  "name": "fd_transparent",
+  "lockfileVersion": 2,
+  "requires": true,
+  "packages": {
+    "": {
+      "dependencies": {
+        "node": "^22.1.0"
+      }
+    },
+    "node_modules/node": {
+      "version": "22.1.0",
+      "resolved": "https://registry.npmjs.org/node/-/node-22.1.0.tgz",
+      "integrity": "sha512-eeRKoLhxcx3DEzsdU1XxbJlDfVX2rvobe24YT9+jzXa5heKMCadyWjYwAEgevi1+r4WU/weKr5DUoNJbI5OKmw==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "node-bin-setup": "^1.0.0"
+      },
+      "bin": {
+        "node": "bin/node"
+      },
+      "engines": {
+        "npm": ">=5.0.0"
+      }
+    },
+    "node_modules/node-bin-setup": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/node-bin-setup/-/node-bin-setup-1.1.3.tgz",
+      "integrity": "sha512-opgw9iSCAzT2+6wJOETCpeRYAQxSopqQ2z+N6BXwIMsQQ7Zj5M8MaafQY8JMlolRR6R1UXg2WmhKp0p9lSOivg=="
+    }
+  },
+  "dependencies": {
+    "node": {
+      "version": "22.1.0",
+      "resolved": "https://registry.npmjs.org/node/-/node-22.1.0.tgz",
+      "integrity": "sha512-eeRKoLhxcx3DEzsdU1XxbJlDfVX2rvobe24YT9+jzXa5heKMCadyWjYwAEgevi1+r4WU/weKr5DUoNJbI5OKmw==",
+      "requires": {
+        "node-bin-setup": "^1.0.0"
+      }
+    },
+    "node-bin-setup": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/node-bin-setup/-/node-bin-setup-1.1.3.tgz",
+      "integrity": "sha512-opgw9iSCAzT2+6wJOETCpeRYAQxSopqQ2z+N6BXwIMsQQ7Zj5M8MaafQY8JMlolRR6R1UXg2WmhKp0p9lSOivg=="
+    }
+  }
+}

package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "node": "^22.1.0"
+  }
+}

permissions.js

@@ -0,0 +1,13 @@
+"use strict";
+
+const REQUIRED_PERMISSIONS = {origins: ["*://*.forum-dessine.fr/*"]};
+
+function hasPermissions(browser) {
+	return new Promise((success) => {
+		browser.permissions.contains(REQUIRED_PERMISSIONS, success);
+	});
+}
+
+function askPermissions(browser) {
+	return browser.permissions.request(REQUIRED_PERMISSIONS);
+}