Add a loading text thing, fix userscript deleting settings...

chrome/dist/background.js

@@ -1874,7 +1874,6 @@
 
   // src/platform.ts
   var lqueue = {};
-  var localLoad = (key, def) => "__pee__" + key in localStorage ? JSON.parse(localStorage.getItem("__pee__" + key)) : def;
   var localSet = (key, value) => localStorage.setItem("__pee__" + key, JSON.stringify(value));
   var port1;
   console.log("chrome_api", true);
@@ -1900,11 +1899,7 @@
         lqueue[ev.data.id](ev.data);
       },
       postMessage(msg, tr) {
-        postMessage({
+        msgBuff.push([msg, tr]);
-          type: "ipc",
-          tr,
-          msg
-        }, tr);
       }
     };
   }
@@ -1915,7 +1910,7 @@
       if (overwrite)
         cmd.id = id;
       lqueue[id] = (e) => {
-        _(e);
+        _(e.res);
         if (todelete)
           delete lqueue[id];
       };
@@ -1926,6 +1921,8 @@
   var bridge = (name, f) => {
     if (false)
       return f;
+    if (true)
+      return f;
     return (...args) => {
       return sendCmd({ name, args });
     };
@@ -1957,8 +1954,29 @@
         i = (await obj2.tabs.getCurrent()).index + 1;
       return obj2.tabs.create({ active: opts.active, url: src, index: i });
     }
-    static getValue(name, def) {
+    static async getValue(key, def) {
-      return localLoad(name, def);
+      const isinls = "__pee__" + key in localStorage;
+      let ret;
+      if (isinls) {
+        let it = localStorage.getItem("__pee__" + key);
+        if (it === "undefined")
+          it = null;
+        ret = { ...def, ...JSON.parse(it || "{}") };
+      } else
+        ret = def;
+      if (true) {
+        if (isinls) {
+          delete localStorage["__pee__" + key];
+          await chrome.storage.local.set({
+            [key]: JSON.stringify(ret)
+          });
+        } else {
+          const d = await chrome.storage.local.get([key]);
+          if (typeof d[key] == "string")
+            return { ...def, ...await JSON.parse("" + d[key] || "{}") };
+        }
+      }
+      return ret;
     }
     static setValue(name, val) {
       localSet(name, val);
@@ -2112,6 +2130,7 @@
   (async () => {
     while (true) {
       const c = await new Promise(waitConnect);
+      console.log("New connection");
       const pendingFetches = /* @__PURE__ */ new Map();
       onMessage(c, async (obj2) => {
         const { id, name, args, sid, fid, url } = obj2;

chrome/manifest.json

@@ -2,7 +2,7 @@
   "manifest_version": 3,
   "name": "PngExtraEmbedder",
   "description": "Discover embedded files on 4chan and archives!",
-  "version": "0.300",
+  "version": "0.302",
   "icons": {
     "64": "1449696017588.png"
   },

firefox/dist/background.js

@@ -1874,7 +1874,6 @@
 
   // src/platform.ts
   var lqueue = {};
-  var localLoad = (key, def) => "__pee__" + key in localStorage ? JSON.parse(localStorage.getItem("__pee__" + key)) : def;
   var localSet = (key, value) => localStorage.setItem("__pee__" + key, JSON.stringify(value));
   var port1;
   console.log("ff_api", true);
@@ -1900,11 +1899,7 @@
         lqueue[ev.data.id](ev.data);
       },
       postMessage(msg, tr) {
-        postMessage({
+        msgBuff.push([msg, tr]);
-          type: "ipc",
-          tr,
-          msg
-        }, tr);
       }
     };
   }
@@ -1915,7 +1910,7 @@
       if (overwrite)
         cmd.id = id;
       lqueue[id] = (e) => {
-        _(e);
+        _(e.res);
         if (todelete)
           delete lqueue[id];
       };
@@ -1926,6 +1921,8 @@
   var bridge = (name, f) => {
     if (false)
       return f;
+    if (true)
+      return f;
     return (...args) => {
       return sendCmd({ name, args });
     };
@@ -1955,8 +1952,29 @@
         i = (await obj2.tabs.getCurrent()).index + 1;
       return obj2.tabs.create({ active: opts.active, url: src, index: i });
     }
-    static getValue(name, def) {
+    static async getValue(key, def) {
-      return localLoad(name, def);
+      const isinls = "__pee__" + key in localStorage;
+      let ret;
+      if (isinls) {
+        let it = localStorage.getItem("__pee__" + key);
+        if (it === "undefined")
+          it = null;
+        ret = { ...def, ...JSON.parse(it || "{}") };
+      } else
+        ret = def;
+      if (true) {
+        if (isinls) {
+          delete localStorage["__pee__" + key];
+          await chrome.storage.local.set({
+            [key]: JSON.stringify(ret)
+          });
+        } else {
+          const d = await chrome.storage.local.get([key]);
+          if (typeof d[key] == "string")
+            return { ...def, ...await JSON.parse("" + d[key] || "{}") };
+        }
+      }
+      return ret;
     }
     static setValue(name, val) {
       localSet(name, val);
@@ -2077,6 +2095,7 @@
   (async () => {
     while (true) {
       const c = await new Promise(waitConnect);
+      console.log("New connection");
       const pendingFetches = /* @__PURE__ */ new Map();
       onMessage(c, async (obj2) => {
         const { id, name, args, sid, fid, url } = obj2;

firefox/manifest.json

@@ -7,7 +7,7 @@
   },
   "name": "PngExtraEmbedder",
   "description": "Discover embedded files on 4chan and archives!",
-  "version": "0.300",
+  "version": "0.302",
   "icons": {
     "64": "1449696017588.png"
   },

firefox_update.json

@@ -1 +1 @@
-{"addons":{"{34ac4994-07f2-44d2-8599-682516a6c6a6}":{"updates":[{"version":"0.300","update_link":"https://git.coom.tech/fuckjannies/lolipiss/raw/branch/%E4%B8%AD%E5%87%BA%E3%81%97/pngextraembedder-0.300.xpi"}]}}}
+{"addons":{"{34ac4994-07f2-44d2-8599-682516a6c6a6}":{"updates":[{"version":"0.302","update_link":"https://git.coom.tech/fuckjannies/lolipiss/raw/branch/%E4%B8%AD%E5%87%BA%E3%81%97/pngextraembedder-0.302.xpi"}]}}}

main.meta.js

@@ -1,7 +1,7 @@
 // ==UserScript==
 // @name         PNGExtraEmbed
 // @namespace    https://coom.tech/
-// @version      0.300
+// @version      0.302
 // @description  uhh
 // @author       You
 // @match        https://boards.4channel.org/*

src/Components/App.svelte

@@ -114,6 +114,12 @@
   });
 </script>
 
+{#if $appState.processing != $appState.processed}
+  <div class="loading">
+    PEE Loading... ({$appState.processed} / {$appState.processing})
+  </div>
+{/if}
+
 {#if visible}
   <div class="backpanel" transition:slide>
     <div class="content">
@@ -506,4 +512,16 @@
     max-height: 80vh;
     min-width: 321px;
   }
+
+  .loading {
+    position: absolute;
+    right: 32px;
+    padding: 10px;
+    bottom: 32px;
+    border: 1px solid;
+    border-radius: 10px;
+    background-color: rgba(0, 0, 0, 0.8);
+    pointer-events: all;
+    backdrop-filter: blur(9px);
+  }
 </style>

src/background.ts

@@ -203,7 +203,6 @@ const onMessage = (c: MessagePort, cb: any) =>
         const pendingFetches = new Map<MessagePort, { [id in number]: { fetchFully: boolean } }>();
 
         onMessage(c, async (obj: any) => {
-            console.log(obj);
             const { id, name, args, sid, fid, url } = obj as any;
             if (name == "keepAlive") {
                 console.log('im alive, tho?');

src/main.ts

@@ -2,7 +2,7 @@
 /// <reference lib="dom" />
 
 import { Buffer } from "buffer";
-import { appState, settings, initial_settings } from "./stores";
+import { appState, settings, initial_settings, localLoad } from "./stores";
 import { debounce } from './debounce';
 import globalCss from './global.css';
 
@@ -427,51 +427,58 @@ const convertToLocalEmbed = (wef: WorkerEmbeddedFile) => {
     return ret!;
 };
 
-const processPost = async (post: HTMLDivElement) => {
+const reportEmbed = (post: HTMLDivElement, op: number) => {
-    const origlink = qp.getImageLink(post);
+    if (!csettings)
-    if (!origlink)
-        return;
-    const thumbLink = qp.getThumbnailLink(post);
-    if (!thumbLink)
         return;
-    let res2: [WorkerEmbeddedFile[], boolean][] | undefined = undefined;
+    if (csettings.tm) {
-
+        // dont report results from archive, only live threads
-    let op: number;
+        if (['boards.4chan.org', 'boards.4channel.org'].includes(location.host)) {
-    if (cappState.isCatalog)
+            if (!cappState.isCatalog) { // only save from within threads
-        op = +post.id.slice(2);
+                // we must be in a thread, thus the following is valid
-    else
+                pendingPosts.push({ id: +(post.id.match(/([0-9]+)/)![1]), op });
-        op = +location.pathname.match(/\/thread\/(.*)/)![1];
+                signalNewEmbeds(); // let it run async
-    const reportEmbed = () => {
-        if (!csettings)
-            return;
-        if (csettings.tm) {
-            // dont report results from archive, only live threads
-            if (['boards.4chan.org', 'boards.4channel.org'].includes(location.host)) {
-                if (!cappState.isCatalog) { // only save from within threads
-                    // we must be in a thread, thus the following is valid
-                    pendingPosts.push({ id: +(post.id.match(/([0-9]+)/)![1]), op });
-                    signalNewEmbeds(); // let it run async
-                }
             }
         }
-    };
+    }
+};
 
-    const reportNoEmbed = () => {
+const reportNoEmbed = (post: HTMLDivElement, op: number) => {
-        if (!csettings)
+    if (!csettings)
-            return;
+        return;
-        if (csettings.tm) {
+    if (csettings.tm) {
-            // dont report results from archive, only live threads
+        // dont report results from archive, only live threads
-            if (['boards.4chan.org', 'boards.4channel.org'].includes(location.host)) {
+        if (['boards.4chan.org', 'boards.4channel.org'].includes(location.host)) {
-                if (!cappState.isCatalog) { // only save from within threads
+            if (!cappState.isCatalog) { // only save from within threads
-                    // we must be in a thread, thus the following is valid
+                // we must be in a thread, thus the following is valid
-                    pendingNoPosts.push({ id: +(post.id.match(/([0-9]+)/)![1]), op });
+                pendingNoPosts.push({ id: +(post.id.match(/([0-9]+)/)![1]), op });
-                    signalNewEmbeds(); // let it run async
+                signalNewEmbeds(); // let it run async
-                }
             }
         }
-    };
+    }
+};
+
+const processed = new Set<string>();
 
+const processPost = async (post: HTMLDivElement) => {
+    let inc = true;
     try {
+        if (processed.has(post.id)) {
+            inc = false;
+            return;
+        }
+        const origlink = qp.getImageLink(post);
+        if (!origlink)
+            return;
+        const thumbLink = qp.getThumbnailLink(post);
+        if (!thumbLink)
+            return;
+        let res2: [WorkerEmbeddedFile[], boolean][] | undefined = undefined;
+
+        let op: number;
+        if (cappState.isCatalog)
+            op = +post.id.slice(2);
+        else
+            op = +location.pathname.match(/\/thread\/(.*)/)![1];
         if (shouldUseCache()) {
             res2 = await getEmbedsFromCache(qp.getCurrentBoard(), +qp.getCurrentThread()!, post.id);
         }
@@ -481,15 +488,19 @@ const processPost = async (post: HTMLDivElement) => {
             res2.push(...tmp);
             res2 = res2?.filter(e => e);
         }
+        if (!res2 || res2.length == 0)
+            return reportNoEmbed(post, op);
+        reportEmbed(post, op);
+        post.querySelector('.post')?.classList.add("embedfound");
+        processAttachments(post, res2?.flatMap(e => e![0].map(k => [convertToLocalEmbed(k), e![1]] as [EmbeddedFile, boolean])));
     } catch (e) {
         console.error(e);
         return;
+    } finally {
+        processed.add(post.id);
+        if (inc)
+            appState.update(v => { return v.processed++, v; });
     }
-    if (!res2 || res2.length == 0)
-        return reportNoEmbed();
-    reportEmbed();
-    post.querySelector('.post')?.classList.add("embedfound");
-    processAttachments(post, res2?.flatMap(e => e![0].map(k => [convertToLocalEmbed(k), e![1]] as [EmbeddedFile, boolean])));
 };
 
 const versionCheck = async () => {
@@ -670,12 +681,8 @@ const startup = async (is4chanX = true) => {
     else
         qp = lqp;
 
-    await new Promise<void>(_ => {
+    const nset = await localLoad('settingsv2', initial_settings);
-        settings.subscribe(val => {
+    settings.set(nset);
-            if (val)
-                _();
-        });
-    });
 
     if (!csettings)
         return false;
@@ -750,8 +757,15 @@ const startup = async (is4chanX = true) => {
                         let el = qp.postsWithFiles(e);
                         if (!el && e.classList.contains('postContainer'))
                             el = [e];
-                        if (el)
+                        if (el) {
+                            appState.update(v => {
+                                console.log("ADDED FROM MUTATION UPDATE", el.length);
+
+                                v.processing += el.length;
+                                return v;
+                            });
                             [...el].map(el => processPost(el as any));
+                        }
                     });
         });
 
@@ -834,6 +848,13 @@ const startup = async (is4chanX = true) => {
     const n = 1;
     //console.log(posts);
     const range = ~~(posts.length / n) + 1;
+    appState.update(v => {
+        console.log("ADDED FROM INIT", posts.length);
+        v.processing += posts.length;
+        console.log("NOW IS", v.processing);
+        return v;
+    });
+
     await Promise.all([...new Array(n + 1)].map(async (e, i) => {
         const postsslice = posts.slice(i * range, (i + 1) * range);
         for (const post of postsslice) {
@@ -901,7 +922,15 @@ document.addEventListener('ThreadUpdate', <any>(async (e: CustomEvent<any>) => {
     const newPosts = e.detail.newPosts;
     for (const post of newPosts) {
         const postContainer = document.getElementById("pc" + post.substring(post.indexOf(".") + 1)) as HTMLDivElement;
-        processPost(postContainer);
+        const fn = qp.getFilename(postContainer);
+        if (fn) {
+            appState.update(v => {
+                v.processing++;
+                return v;
+            });
+
+            processPost(postContainer);
+        }
     }
 }));
 

src/platform.ts

@@ -87,7 +87,7 @@ export const sendCmd = <V>(cmd: any, tr?: Transferable[], overwrite = false, tod
         if (overwrite)
             cmd.id = id;
         lqueue[id] = (e: any) => {
-            _(e);
+            _(e.res);
             if (todelete)
                 delete lqueue[id];
         };

src/processor.worker.ts

@@ -2,15 +2,15 @@
 /// <reference lib="webworker" />
 
 import * as platform from './platform';
-import { initial_settings } from './stores';
+import { initial_settings, localLoad, settings } from './stores';
 //import { initial_settings } from './stores';
 //import { initial_settings } from './stores';
-//import pngv3 from "./pngv3";
+import pngv3 from "./pngv3";
 //import webm from "./webm";
 //import gif from "./gif";
-//import jpg from "./jpg";
+import jpg from "./jpg";
 import thirdeye from "./thirdeye";
-//import pomf from "./pomf";
+import pomf from "./pomf";
 
 console.log("Worker started");
 
@@ -102,7 +102,7 @@ export interface ImageProcessor {
 }
 
 const processors: ImageProcessor[] =
-    [thirdeye];//, pomf, pngv3, jpg]; //, webm, gif
+    [thirdeye, pomf, pngv3, jpg]; //, webm, gif
 
 const processImage = async (srcs: AsyncGenerator<string, void, void>, fn: string, hex: string, prevurl: string) => {
     const ret = await Promise.all(processors.filter(e => e.match(fn)).map(async proc => {
@@ -158,21 +158,30 @@ const processImage = async (srcs: AsyncGenerator<string, void, void>, fn: string
     return ret.filter(e => e).map(e => e!);
 };
 
-const snooze = (n:number) => new Promise(_ => setTimeout(_, n));
+const snooze = (n: number) => new Promise(_ => setTimeout(_, n));
-
+let init = false;
 (async () => {
     onmessage = async (msg: MessageEvent<any>) => {
-        console.log(msg.data);
         const des = deserializeMessage(msg.data);
         switch (des.type) {
             case 'ipc': {
                 platform.setupPort(des.port);
+                const nset = await localLoad('settingsv2', initial_settings);
+                settings.set(nset);
                 break;
             }
             case 'cmd': {
                 switch (des.fun) {
                     case 'processImage': {
-                        await initial_settings;
+                        if (!init) {
+                            await new Promise<void>(_ => {
+                                settings.subscribe(v => {
+                                    if (v)
+                                        _();
+                                });
+                            });
+                            init = true;
+                        }
                         //console.log('Received process image command', des);
                         const res = await processImage(des.args[0], des.args[1], des.args[2], des.args[3]);
                         //console.log('Finished process image command', des);

src/stores.ts

@@ -7,10 +7,6 @@ import { Platform } from "./platform";
 // Todo: use GM get/setValue instead?
 export const localLoad = async <T>(key: string, def: T) => {
     const ret = await Platform.getValue(key, def);
-    if (execution_mode == "worker") {
-        return (ret as any).res;
-    }
-    
     return ret;
 };
 
@@ -24,7 +20,7 @@ const localSet = (key: string, value: any) => {
         localStorage.setItem('__pee__' + key, JSON.stringify(value));
 };
 
-export const initial_settings = localLoad('settingsv2', {
+export const initial_settings = {
     loop: true,
     dh: false,
     pmeth: 5,
@@ -57,23 +53,22 @@ export const initial_settings = localLoad('settingsv2', {
     ho: false,
     blacklist: [] as string[],
     rsources: [] as (Omit<Booru, 'quirks'> & { view: string, disabled?: boolean })[],
-});
+};
 
 export const settings = writable<Awaited<typeof initial_settings>>();
 
-initial_settings.then(v => {
-    settings.set(v);
-});
-
 export const appState = writable({
     isCatalog: false,
     is4chanX: false,
     akValid: false,
     herror: '' as string | undefined,
     client: null as HydrusClient | null,
+    processing: 0,
+    processed: 0,
     foundPosts: [] as HTMLElement[]
 });
 
 settings.subscribe(newVal => {
-    localSet('settingsv2', newVal);
+    if (newVal)
+        localSet('settingsv2', newVal);
 });