Update readme

README.md

@@ -18,18 +18,21 @@ Or use the prebuilt main.user.js at the root of this repo.
 How to use
 ==========
 
-Posts with an embedded image/video will have an eye icon next to it.
-Clicking the icon reveal the content.
-![eye](eye.png)
+Posts with an embedded image/video will have an colored dashed line on their right. Golden means the file is external (ie. a booru), and pink means it was a file embedded in the post file.
+
+
+![eye](settings.png)
 
 In the quick reply form, a magnet icon will appear.
-You need to select a png file to upload first, as you would normally (this is what the file will appear as), then click on the magnet to select a file to embed.
+You need to select a png/webm/gif file to upload first, as you would normally (this is what the file will appear as), then click on the magnet to select a file to embed (can be anything).
 
 ![qr](screen.png)
 
-Format
+Formats
 ======
 
+PNG
+---
 This works by appending the file in the last IDAT chunk.
 Metadata information is stored in a tEXt chunk, placed near the header so that a parser looking for that embedded information can bail out without having to parse the whole file.
 
@@ -41,6 +44,29 @@ CUM[null]X is reserved for future extensions
 
 Possible workaround for 4chan jannies would be to assoome IDAT chunks don't go over a certain size, slightly harder workaround would be to check if the deflate stream yields enough pixels to fit the described dimensions of the image. 
 
+
+Webm
+----
+The file is embedded in a SimpleTag tag, with a TagName of C00M and a TagBinary that contains the file content.
+The Tags section of that file can contain a TagName with a value of COOMFILENAME and a TagString containing a filename
+
+GIF
+---
+
+The embedded data is contained in an application extension chunk, usually right after the NETSCAPE extension.
+The extension is named COOMTECH0.1, the rest of the bytes encode directly the file content, with no filename. The filesize is implicitely determined by a sentinel value that marks the end of the subchunk.
+
+JPG
+---
+
+Can never be supported as 4chan reincodes them.
+
+Third Eye
+---------
+
+Third eye filenames are supported.
+Filename just need to be made of 32 hex characters that correspond to a filename in any of the supported boorus.
+
 Other formats
 =============
 

main.meta.js

@@ -1,7 +1,7 @@
 // ==UserScript==
 // @name         PNGExtraEmbed
 // @namespace    https://coom.tech/
-// @version      0.76
+// @version      0.77
 // @description  uhh
 // @author       You
 // @match        https://boards.4channel.org/*
@@ -14,5 +14,4 @@
 // @connect      4chan.org
 // @connect      4channel.org
 // @connect      i.4cdn.org
-// @connect      *
 // ==/UserScript==

main.user.js

@@ -1,7 +1,7 @@
 // ==UserScript==
 // @name         PNGExtraEmbed
 // @namespace    https://coom.tech/
-// @version      0.76
+// @version      0.77
 // @description  uhh
 // @author       You
 // @match        https://boards.4channel.org/*
@@ -14,7 +14,6 @@
 // @connect      4chan.org
 // @connect      4channel.org
 // @connect      i.4cdn.org
-// @connect      *
 // ==/UserScript==
 (() => {
   var __create = Object.create;
@@ -5844,9 +5843,9 @@
     }
   });
 
-  // node_modules/ebml/lib/ebml/tools.js
+  // node_modules/ts-ebml/node_modules/ebml/lib/ebml/tools.js
   var require_tools = __commonJS({
-    "node_modules/ebml/lib/ebml/tools.js"(exports, module) {
+    "node_modules/ts-ebml/node_modules/ebml/lib/ebml/tools.js"(exports, module) {
       init_esbuild_inject();
       var tools = {
         readVint: function(buffer, start) {
@@ -14951,6 +14950,33 @@
 }
 `));
   document.documentElement.insertBefore(customStyles, null);
+  if (window["pagemode"]) {
+    onload = () => {
+      const resbuf = async (s) => import_buffer4.Buffer.isBuffer(s) ? s : await s();
+      const container = document.getElementById("container");
+      const injection = document.getElementById("injection");
+      container.onchange = injection.onchange = async () => {
+        console.log("eval changed");
+        if (container.files?.length && injection.files?.length) {
+          const dlr = document.getElementById("dlr");
+          const dle = document.getElementById("dle");
+          const res = await gif_default.inject(container.files[0], injection.files[0]);
+          console.log("inj done");
+          const result = document.getElementById("result");
+          const extracted = document.getElementById("extracted");
+          const res2 = new Blob([res], { type: (await fileTypeFromBuffer(res))?.mime });
+          result.src = URL.createObjectURL(res2);
+          dlr.href = result.src;
+          console.log("url created");
+          const embedded = await gif_default.extract(res);
+          if (!embedded)
+            debugger;
+          extracted.src = URL.createObjectURL(new Blob([await resbuf(embedded?.data)]));
+          dle.href = extracted.src;
+        }
+      };
+    };
+  }
 })();
 /*!
  * The buffer module from node.js, for the browser.