Implement fetch progress event

README.md

@@ -23,7 +23,7 @@ Note: 4chanX isn't a hard requirement, just recommended because it's overall a n
 ## The newer way (WIP)
 
 - [Install 4chanX (recommended)](https://www.4chan-x.net/builds/4chan-X.user.js)
-- Install the correct WebExtension for your Browser ([Firefox](https://git.coom.tech/coomdev/PEE/raw/branch/%E4%B8%AD%E5%87%BA%E3%81%97/pngextraembedder-0.208-an+fx.xpi) or [Chrome-based](https://git.coom.tech/coomdev/PEE/raw/branch/%E4%B8%AD%E5%87%BA%E3%81%97/PEE-chrome.crx))
+- Install the correct WebExtension for your Browser ([Firefox](https://git.coom.tech/coomdev/PEE/raw/branch/%E4%B8%AD%E5%87%BA%E3%81%97/pngextraembedder-0.210-an+fx.xpi) or [Chrome-based](https://git.coom.tech/coomdev/PEE/raw/branch/%E4%B8%AD%E5%87%BA%E3%81%97/PEE-chrome.crx))
 
 How to Build 
 ============

chrome/manifest.json

@@ -3,7 +3,7 @@
   "update_url": "https://git.coom.tech/fuckjannies/lolipiss/raw/branch/%E4%B8%AD%E5%87%BA%E3%81%97/chrome_update.xml",
   "name": "PngExtraEmbedder",
   "description": "Discover embedded files on 4chan and archives!",
-  "version": "0.209",
+  "version": "0.210",
   "icons": {
     "64": "1449696017588.png"
   },

chrome_update.xml

@@ -1,6 +1,6 @@
 <?xml version='1.0' encoding='UTF-8'?>
 <gupdate xmlns='http://www.google.com/update2/response' protocol='2.0'>
   <app appid='ilffidhdekahjldemialkgahicnajchb'>
-    <updatecheck codebase='https://git.coom.tech/coomdev/PEE/raw/branch/%E4%B8%AD%E5%87%BA%E3%81%97/PEE-chrome.crx' version='0.209' prodversionmin='64.0.3242' />
+    <updatecheck codebase='https://git.coom.tech/coomdev/PEE/raw/branch/%E4%B8%AD%E5%87%BA%E3%81%97/PEE-chrome.crx' version='0.210' prodversionmin='64.0.3242' />
   </app>
 </gupdate>

extheader.js

@@ -28,6 +28,7 @@ export const extheader = `// ==UserScript==
 // @grant        GM.setValue
 // @grant        GM_openInTab
 // @grant        GM.openInTab
+// @grant        GM_addElement
 // @grant        unsafeWindow
 // @run-at       document-start
 // @connect      4chan.org

firefox/manifest.json

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

firefox_update.json

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

src/background.ts

@@ -142,14 +142,18 @@ const bgCorsFetch = async (c: browser.runtime.Port, id: number, input: string, i
 
     let buff: Buffer[] = [];
 
+    const ctotal = +headerObj['content-length'] || 0; // content total
+    let ltotal = 0; // loaded total
+
     // sequence number, required to reorder messages client-side
     // if they get processed out of order
     let s = 0;
     const e = {
         write(chunk: Uint8Array) {
+            ltotal += chunk.byteLength;
+            c.postMessage({ id, progress: [ltotal, ctotal] });
             if (!pendingFetches.get(c)![id].fetchFully) {
                 const url = URL.createObjectURL(new Blob([chunk]));
-                console.log('created blob of size', chunk.byteLength);
                 c.postMessage({ id, s: s++, pushData: { data: url } });
             } else {
                 buff.push(Buffer.from(chunk));

src/platform.ts

@@ -69,7 +69,7 @@ const extrBlob = async (url: string) => {
     return new Uint8Array(ret);
 };
 
-export const corsFetch = async (input: string, init?: RequestInit) => {
+export const corsFetch = async (input: string, init?: RequestInit, lsn?: EventTarget) => {
     const id = gid++;
 
     /*    if (init) {
@@ -106,6 +106,12 @@ export const corsFetch = async (input: string, init?: RequestInit) => {
         const cmdbuff: any[] = [];
 
         lqueue[id] = (async (e: any) => {
+            // this is computed from the background script because the content script may
+            // request everything to be delivered in one chunk, defeating the purpose
+            if (e.progress) {
+                lsn?.dispatchEvent(new CustomEvent("progress", { detail: e.progress }));
+            }
+
             if (e.pushData) {
                 if (e.s > s) {
                     // insert before an hypothetical cmd with a higher seq number
@@ -125,8 +131,10 @@ export const corsFetch = async (input: string, init?: RequestInit) => {
                 // this also  means that cmdbuff must contain 0 or more ordered commands that must be processed
                 // afterward until discontinuity 
                 const processCmd = async (e: any) => {
+
                     if (e.pushData.data) {
                         const data = await extrBlob(e.pushData.data);
+
                         if (gcontroller)
                             gcontroller.enqueue(data);
                         else
@@ -169,17 +177,9 @@ export const corsFetch = async (input: string, init?: RequestInit) => {
                     return ret;
                 };
 
-                const blob = async () => {
+                const blob = async () => new Blob([await arrayBuffer()]);
-                    return new Blob([await arrayBuffer()]);
+                const text = async () => new TextDecoder().decode(await arrayBuffer());
-                };
+                const json = async () => JSON.parse(await text());
-
-                const text = async () => {
-                    return new TextDecoder().decode(await arrayBuffer());
-                };
-
-                const json = async () => {
-                    return JSON.parse(await text());
-                };
 
                 if (e.ok)
                     _({
@@ -227,7 +227,7 @@ export async function getHeaders(s: string) {
 
 export async function ifetch(...[url, opt, lisn]: [...Parameters<typeof fetch>, EventTarget?]): ReturnType<typeof fetch> {
     if (execution_mode != "userscript")
-        return corsFetch(url.toString(), opt);
+        return corsFetch(url.toString(), opt, lisn);
     return GM_fetch(url, opt, lisn);
 }