Fix: use stored ext to generate filename

BUILD.md

@@ -9,7 +9,7 @@ Preparation
 2. Test if the installation succeeded. Run `node --version && npm --version`. You should get version numbers similar to this:
     <!-- $inline.start("cmd:node --version && npm --version|markdown:codeblock|indent") -->
     ```
-    v24.4.1
+    v25.5.0
     11.6.2
 
     ```

rollup.config.mjs

@@ -20,6 +20,12 @@ export default async () => ({
   plugins: [
     shim({
       path: `
+        export function extname(s) {
+          const base = basename(s);
+          const i = base.lastIndexOf(".");
+          if (i < 0) return "";
+          return base.slice(i);
+          }
         export function basename(s) {
           const parts = s.split(/[\\/]/);
           return parts[parts.length - 1];

src/background.js

@@ -558,15 +558,20 @@ async function batchDownload({tabs, env, batchId}) {
 		}
 		for (const {url, filename, alt} of tab.images) {
       cachedImages.delete(url);
-			expandEnv(env, {
+      const thisEnv = Object.assign({}, env, {
         url,
         index: i + 1,
         base: filename,
         alt
       });
-      const fullFileName = renderFilename(env);
       const t = batchDownloadLock.read(async () => {
         let blob = await imageCache.get(url);
+        const meta = await imageCache.getMeta(url);
+        if (meta.ext) {
+          thisEnv.ext = "." + meta.ext;
+        }
+        expandEnv(thisEnv);
+        const fullFileName = renderFilename(thisEnv);
         let err;
         try {
           await packer.pack({index: i, url, blob, filename: fullFileName});
@@ -621,10 +626,11 @@ async function singleDownload({url, env, tabId, frameId, referrer, alt}) {
       })
   ]);
   expandDate(env);
-  expandEnv(env, {
+  Object.assign(env, {
     url,
     base: data && data.filename,
-    alt
+    alt,
+    ext: data && data.ext
   });
   const filePattern = pref.get("filePatternStandaloneEnabled") && env.pageContentType.startsWith("image/") ?
     pref.get("filePatternStandalone") : pref.get("filePattern");

src/lib/expand-env.mjs

@@ -27,29 +27,32 @@ const props = {
   alt
 }
 */
-export function expandEnv(env, props) {
-  Object.assign(env, props);
+export function expandEnv(env) {
 	// image url
 	var url = new URL(env.url);
 	env.hostname = url.hostname;
 
 	// image filename
-	var base, name, ext;
-	if (env.base) {
-		base = env.base;
-	} else {
+  let {base, ext, name} = env;
+
+  if (!base) {
 		try {
 			base = url.href.match(/([^/]+)\/?$/)[1];
 		} catch {
 			base = pref.get("defaultName");
 		}
 	}
-	try {
-		[, name, ext] = base.match(IMG_RE);
-	} catch {
-		name = base;
-		ext = pref.get("defaultExt");
-	}
+  if (!name) {
+    const match = base.match(IMG_RE);
+    if (match) {
+      name = match[1];
+      ext = ext || match[2];
+    } else {
+      // base is not like an image filename?
+      name = base;
+      ext = ext || pref.get("defaultExt");
+    }
+  }
 	env.base = nestDecodeURIComponent(base);
 	env.name = nestDecodeURIComponent(name);
 	env.ext = nestDecodeURIComponent(ext);

src/lib/fetch-image.js

@@ -1,17 +1,9 @@
 import contentDisposition from "content-disposition";
 import {createLock} from "@eight04/read-write-lock";
-// import {fetchXHR} from "./fetch.js";
+import * as mimelib from "./mime.js";
 
 const lock = createLock({maxActiveReader: 5});
 
-function getMime(contentType) {
-  if (!contentType) {
-    return;
-  }
-  const match = contentType.match(/^\s*([^\s;]+)/);
-  return match && match[1].toLowerCase();
-}
-
 function getFilename(value) {
   try {
     return contentDisposition.parse(value).parameters.filename;
@@ -32,7 +24,23 @@ export function fetchImage(url, referrer) {
 }
 
 export function createImage(url, blob, contentType, contentDisposition) {
-  const mime = getMime(contentType);
+  let mime, ext, filename;
+  if (contentType) {
+    mime = mimelib.fromContentType(contentType);
+  }
+  if (contentDisposition) {
+    filename = getFilename(contentDisposition);
+    ext = filename?.match(/\.([^.]+)$/)?.[1];
+  }
+  if (!mime && ext) {
+    mime = mimelib.fromExt(ext)
+  }
+  if (!mime && blob.type) {
+    mime = blob.type;
+  }
+  if (mime && !ext) {
+    ext = mimelib.toExt(mime);
+  }
   if (mime && !blob.type) {
     // create a new blob with correct mime type
     blob = new Blob([blob], {type: mime});
@@ -41,7 +49,9 @@ export function createImage(url, blob, contentType, contentDisposition) {
     url,
     blob,
     mime,
-    filename: getFilename(contentDisposition),
+    ext,
+    filename,
     size: blob.size
   };
 }
+

src/lib/image-cache.js

@@ -16,7 +16,7 @@ function createImageCache() {
     name: "image-cache",
     conflictAction: "stack"
   });
-  return {add, get, delete: delete_, deleteMany, clearAll, fetchImage: _fetchImage};
+  return {add, get, getMeta, delete: delete_, deleteMany, clearAll, fetchImage: _fetchImage};
 
   async function _fetchImage(url, tabId, frameId, referrer) {
     if (IS_CHROME) {
@@ -55,6 +55,10 @@ function createImageCache() {
   function get(url) {
     return cache.get(url);
   }
+
+  function getMeta(url) {
+    return cache.getMeta(url);
+  }
 
   function delete_(url) {
     return cache.delete(url);

src/lib/mime.js

@@ -0,0 +1,18 @@
+// NOTE: the entire mime db is large, just hand pick what we need
+
+export function fromContentType(contentType) {
+  const match = contentType.match(/^\s*([^\s;]+)/);
+  return match && match[1].toLowerCase();
+}
+
+export function fromExt(ext) {
+  if (ext == "svg") return "image/svg+xml";
+}
+
+export function toExt(mime) {
+  // this should be enough most of the time
+  const match = mime.match(/^image\/(\w+)/);
+  if (match) {
+    return match[1]; 
+  }
+}

src/picker.js

@@ -290,13 +290,15 @@ function updateFilenamePreviewFactory(tabs) {
       image = newImage;
     }
     expandDate(env);
-    expandEnv(env, {
+    Object.assign(env, {
       // FIXME: do we want to use real index number?
       index: 1,
       url: image.url,
       base: image.data && image.data.filename,
-      alt: image.alt
+      alt: image.alt,
+      ext: image.data && image.data.ext
     });
+    expandEnv(env);
     const filename = compileStringTemplate(pattern)(env);
     document.querySelector("#filePatternBatch").closest(".toolbar-control").title = `Preview: ${filename}`;
   };