@cowwo/dsh-icon-custom 0.8.2 → 0.9.0

package/client/client.js

@@ -482,16 +482,66 @@ window.__ModuleLoader__.load({
 			if (iconState.active !== true) return "image/svg+xml";
 			return iconState.png === true ? "image/png" : (iconState.mime || "image/svg+xml");
 		}
-		function iconLink() {
-			let link = document.querySelector('link[rel="icon"]');
-			if (!link) {
-				link = document.createElement("link");
-				link.rel = "icon";
-				link.type = "image/svg+xml";
-				link.href = "/favicon.svg";
-				document.head.appendChild(link);
+		/**
+		 * Every `<link rel="icon">` the document carries, creating one if the page
+		 * has none.
+		 *
+		 * DSH 0.2.x ships TWO of them — a dark and a light one, each behind a
+		 * `media` query. Touching only `querySelector`'s first match left the light
+		 * one pointing at the shipped favicon, and the browser honours the LAST
+		 * suitable candidate, so a custom icon silently failed to apply in light
+		 * mode (the tab kept the platform whale and the feature looked dead).
+		 * Every write below therefore goes to all of them.
+		 */
+		function iconLinks() {
+			const links = Array.from(document.querySelectorAll('link[rel="icon"]'));
+			if (links.length > 0) return links;
+			const link = document.createElement("link");
+			link.rel = "icon";
+			link.type = "image/svg+xml";
+			link.href = "/favicon.svg";
+			document.head.appendChild(link);
+			return [link];
+		}
+		/** Authored href/type, remembered before the first write so a reset can put the shipped pair back. */
+		const ICON_ORIGINALS = new WeakMap();
+		function rememberIcon(link) {
+			if (ICON_ORIGINALS.has(link)) return;
+			ICON_ORIGINALS.set(link, { href: link.getAttribute("href"), type: link.getAttribute("type") });
+		}
+		/**
+		 * Point every icon link at one image, so no scheme-specific sibling is left stale.
+		 * Writes only on change: the head MutationObserver feeds `reconcileFavicon`,
+		 * so a redundant write would re-arm the watchdog on every tick.
+		 */
+		function setIconEverywhere(href, type) {
+			for (const link of iconLinks()) {
+				rememberIcon(link);
+				if (link.getAttribute("href") !== href) link.setAttribute("href", href);
+				if (typeof type === "string" && type !== "") {
+					if (link.getAttribute("type") !== type) link.setAttribute("type", type);
+				} else if (link.getAttribute("type") !== null) link.removeAttribute("type");
 			}
-			return link;
+		}
+		/**
+		 * Put the authored hrefs back; a link this plugin created falls back to the
+		 * platform default. Idempotent for the same watchdog reason as above, and a
+		 * no-op for any link the plugin never touched — which is what keeps the
+		 * documented "zero side effects while no custom icon is set" true.
+		 */
+		function restoreShippedIcons() {
+			for (const link of iconLinks()) {
+				const original = ICON_ORIGINALS.get(link);
+				if (original === undefined) continue; // never touched → leave the shipped tag alone
+				const href = original.href === null ? "/favicon.svg" : original.href;
+				if (link.getAttribute("href") !== href) link.setAttribute("href", href);
+				if (original.type === null) {
+					if (link.getAttribute("type") !== null) link.removeAttribute("type");
+				} else if (link.getAttribute("type") !== original.type) link.setAttribute("type", original.type);
+			}
+		}
+		function iconLink() {
+			return iconLinks()[0];
 		}
 		function roundRect(c2d, x, y, w, h) {
 			const r = Math.min(h / 2, w / 2);
@@ -535,15 +585,14 @@ window.__ModuleLoader__.load({
 			});
 		}
 		async function applyBadgeToFavicon(count, size) {
-			const link = iconLink();
 			const base = desiredIconHref();
 			if (count <= 0) {
-				// Nothing to show: make sure the page carries the plugin's own icon
-				// (this also repairs a stale/proxied link that still points elsewhere).
-				if (link.getAttribute("href") !== base) {
-					link.setAttribute("href", base);
-					link.setAttribute("type", desiredIconType());
-				}
+				// No badge to draw. With a custom icon active the page must carry it on
+				// EVERY link (a stale scheme-specific sibling outranks the one we set);
+				// with none, the shipped dark/light pair goes back untouched — the
+				// plugin promises zero side effects while it has no icon of its own.
+				if (iconState.active === true) setIconEverywhere(base, desiredIconType());
+				else restoreShippedIcons();
 				faviconBase = null;
 				return;
 			}
@@ -566,8 +615,7 @@ window.__ModuleLoader__.load({
 				const dh = ih * scale;
 				c2d.drawImage(img, (FAVICON_SIZE - dw) / 2, (FAVICON_SIZE - dh) / 2, dw, dh);
 				drawFaviconBadge(c2d, FAVICON_SIZE, count, badgeScale(size));
-				link.setAttribute("href", canvas.toDataURL("image/png"));
-				link.setAttribute("type", "image/png");
+				setIconEverywhere(canvas.toDataURL("image/png"), "image/png");
 			} catch (error) {
 				// Never silent: a failure here is invisible in the UI (the tab simply
 				// keeps its previous icon), which once cost a whole debugging session.
@@ -588,13 +636,16 @@ window.__ModuleLoader__.load({
 		 * composite was replaced and has to be rebuilt from the new base.
 		 */
 		function reconcileFavicon() {
-			const link = document.querySelector('link[rel="icon"]');
-			const href = link === null ? null : link.getAttribute("href");
-			const ours = typeof href === "string" && href.slice(0, 5) === "data:";
-			const wanted = desiredIconHref();
+			// Inspect EVERY icon link: 0.2.x ships two (dark/light), and a sibling
+			// left stale by anything outside the plugin must be repaired too — that
+			// stale sibling is exactly what used to outrank the icon we set.
+			const hrefs = iconLinks().map((candidate) => candidate.getAttribute("href"));
+			const ours = hrefs.length > 0 && hrefs.every((value) => typeof value === "string" && value.slice(0, 5) === "data:");
 			if (effectiveCount() <= 0) {
-				// No badge to draw, but the page must still carry the plugin's icon.
-				if (ours || href !== wanted) applyBadgeToFavicon(0);
+				// Carries the custom icon, or puts the shipped pair back. Both writers
+				// only touch a link that actually differs, so this stays a no-op once
+				// the page is correct and cannot re-arm the head observer.
+				applyBadgeToFavicon(0);
 				return;
 			}
 			if (ours || faviconComposing) return; // already showing, or a build is running
@@ -1169,30 +1220,18 @@ window.__ModuleLoader__.load({
 			// visible in this very tab; other tabs pick it up on their next render.
 			const applyLive = React.useCallback((s) => {
 				if (!s || s.active !== true) return;
-				const link = document.querySelector('link[rel="icon"]');
 				const href = s.png === true ? `/icon-custom-192.png?v=${s.rev}` : `/icon-custom.svg?v=${s.rev}`;
 				const type = s.png === true ? "image/png" : (s.mime || "image/svg+xml");
-				if (link) {
-					link.setAttribute("href", href);
-					link.setAttribute("type", type);
-				} else {
-					const el = document.createElement("link");
-					el.rel = "icon";
-					el.type = type;
-					el.href = href;
-					document.head.appendChild(el);
-				}
+				setIconEverywhere(href, type);
 				// The base icon just changed: rebuild the composite from it.
 				refreshFaviconBase();
 			}, []);
 
-			// When cleared, point the icon back at the platform default.
+			// When cleared, put the shipped dark/light pair back. Restoring the
+			// authored hrefs (rather than forcing one href on every link) keeps the
+			// platform's scheme-aware icons working after a reset.
 			const applyDefault = React.useCallback(() => {
-				const link = document.querySelector('link[rel="icon"]');
-				if (link) {
-					link.setAttribute("href", "/favicon.svg");
-					link.setAttribute("type", "image/svg+xml");
-				}
+				restoreShippedIcons();
 				refreshFaviconBase();
 			}, []);
 

package/lib/index.js

@@ -302,6 +302,20 @@ async function deriveSizes(source) {
 	return out
 }
 
+/**
+ * Insert markup immediately after the document's opening `<head …>` tag.
+ *
+ * Tolerates attributes on `<head>` (a bare `/<head>/` test silently missed those,
+ * which would drop the icon tag entirely). Returns the input unchanged when the
+ * document has no head to anchor to.
+ * @param html - full document source.
+ * @param markup - tag(s) to inject.
+ * @returns the rewritten document.
+ */
+function insertAfterHead(html, markup) {
+	return html.replace(/<head[^>]*>/i, (open) => `${open}${markup}`)
+}
+
 /**
  * 图标替换服务:保存/读取用户上传的 favicon,并通过 webServer 提供
  * `/icon-custom.svg` 路由与 index 头部改写。通过 typert
@@ -718,12 +732,16 @@ export class FaviconCustomService extends TypertRemoteService {
 			: `/icon-custom.svg?v=${c.rev}`
 		const favType = c.pngBaseline !== null ? 'image/png' : c.mime
 		const tag = `<link rel="icon" type="${favType}" href="${favHref}" />`
-		const re = /<link\s+rel="icon"[^>]*\/?>/i
-		out = re.test(out) ? out.replace(re, tag) : out.replace(/<head>/i, `<head>${tag}`)
+		// DSH 0.2.x ships TWO `<link rel="icon">` tags — a dark and a light one, each
+		// behind a `media` query. Replacing only the first left the light one still
+		// serving the platform favicon, and the browser honours the LAST suitable
+		// candidate, so a custom icon silently failed to apply in light mode (the tab
+		// kept the whale) while looking fine in dark mode. Drop every icon link and
+		// insert one scheme-agnostic tag, which wins under either `prefers-color-scheme`.
+		out = insertAfterHead(out.replace(/<link\s+rel="icon"[^>]*\/?>/gi, ''), tag)
 		if (c.pwa === true && c.pngBaseline !== null) {
 			const tag2 = `<link rel="apple-touch-icon" href="/icon-custom-apple-180.png?v=${c.rev}" />`
-			const re2 = /<link\s+rel="apple-touch-icon"[^>]*\/?>/i
-			out = re2.test(out) ? out.replace(re2, tag2) : out.replace(/<head>/i, `<head>${tag2}`)
+			out = insertAfterHead(out.replace(/<link\s+rel="apple-touch-icon"[^>]*\/?>/gi, ''), tag2)
 		}
 		return out
 	}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cowwo/dsh-icon-custom",
-  "version": "0.8.2",
+  "version": "0.9.0",
   "description": "自定义浏览器标签页图标:在设置页上传 SVG/PNG/ICO,立即生效并持久保存,自动适配安卓/iOS/平板 PWA 图标。· Custom browser tab favicon: upload SVG/PNG/ICO from the settings page, applies instantly and persists, auto-sizes PWA icons for Android/iOS/tablets.",
   "type": "module",
   "main": "lib/index.js",