☰

LynxChan Extended Minus Minus

LynxChan Extended with even more features

安装此脚本？
作者推荐脚本

您可能也喜欢8chan-buffs。

安装此脚本 
  1. // ==UserScript==
  2. // @name         LynxChan Extended Minus Minus
  3. // @namespace    https://rentry.org/8chanMinusMinus
  4. // @version      2.3.13
  5. // @description  LynxChan Extended with even more features
  6. // @author       SaddestPanda & Dandelion & /gfg/
  7. // @license      UNLICENSE
  8. // @match        *://8chan.moe/*
  9. // @match        *://8chan.se/*
  10. // @match        *://8chan.cc/*
  11. // @grant        GM.getValue
  12. // @grant        GM.setValue
  13. // @grant        GM.deleteValue
  14. // @grant        GM.registerMenuCommand
  15. // @run-at       document-start
  16. // ==/UserScript==
  17.  
  18. //TODO LATER MAYBE: combine all CSS into one <style> and use classes on html or body instead.
  19. (async function () {
  20.     "use strict";
  21.  
  22.     const REGEX_THREAD = /\/res|last\//;
  23.     const SETTINGS_DEFINITIONS = {
  24.         firstRun:{
  25.             default:true,
  26.             hidden:true,
  27.             desc:"You shouldn't be able to see this setting! (firstRun)"
  28.         },
  29.         addKeyboardHandlers:{
  30.             default:true,
  31.             desc:"Add keyboard Ctrl+ hotkeys to the quick reply box (Disable this for 8chanSS compatibility)"
  32.         },
  33.         showScrollbarMarkers:{
  34.             default:true,
  35.             type:"checkbox_with_colors",
  36.             desc:"Show your posts and replies on the scrollbar",
  37.             color1Default:"#0092ff",
  38.             color1Desc:"<b>Your marker:</b>",
  39.             color2Default:"#a8d8f8",
  40.             color2Desc:"<b>Reply marker:</b>"
  41.         },
  42.         spoilerImageType:{
  43.             default:"off",
  44.             desc:"Override how the spoiler thumbnail looks:",
  45.             type:"radio",
  46.             options:{
  47.                 off:"Don't change the thumbnail.",
  48.                 reveal:"Reveal spoilers <span class='altText lineBefore'>(Previously spoilered images will have a red border around them indicating that they're spoilers.)</span>",
  49.                 reveal_blur:"Change to a blurred thumbnail <span class='altText lineBefore'>(Unblurred when you hover your mouse over.)</span>",
  50.                 kachina:"Makes the spoiler image Kachina from Genshin Impact.",
  51.                 thread:`<b>Use <b style="color: var(--link-color);">"ThreadSpoiler.jpg"</b> from the current thread <span class="altText lineBefore">(first posted jpg, png or webp image with that filename)</span></b>`,
  52.                 threadAlt:`same as above with the filename <b style="color: var(--link-color);">"ThreadSpoilerAlt.jpg"</b> <span class="altText lineBefore">(jpg, png or webp; uses ThreadSpoiler.jpg until this is found)</span>`,
  53.                 //test:`[TEST OPTION] Set custom spoiler thumb per-thread (For /gacha/ only!)`
  54.             },
  55.             nonewline:true
  56.         },
  57.         overrideBoardSpoilerImage: {
  58.             default:true,
  59.             parent:"spoilerImageType",
  60.             //Not implemented yet
  61.             //depends: function() {return settings.spoilerImageType != "off"},
  62.             desc:"Also override board's custom thumbnail image <span class='altText lineBefore'>(for example, /v/'s spoiler thumbnail is an image of a monitor with a ? inside it)</span>"
  63.         },
  64.         revealSpoilerText:{
  65.             default:"off",
  66.             desc:"Reveal the spoiler text. Or make it into madoka runes.",
  67.             type:"radio",
  68.             options:{
  69.                 off:"Don't reveal spoilers.",
  70.                 on:"Spoilers will be always be shown by turning the text white.",
  71.                 madoka:`Spoilers will turn into madoka runes. Please install <a href="https://www.dropbox.com/s/n6ys414nviitr9y/MadokaRunes-2.0.ttf"><u>MadokaRunes.ttf</u></a> for it to show up properly.`
  72.             }
  73.         },
  74.         markPostEdge:{
  75.             default:true,
  76.             type:"checkbox_with_colors",
  77.             desc:"<span class='boldText'>Style:</span> Mark your posts and replies <span class='altText'>(with a left border)</span>",
  78.             color1Default:"#4BB2FF",
  79.             color1Desc:"<b>Your border:</b>",
  80.             color2Default:"#0066ff",
  81.             color2Desc:"<b>Reply border:</b>",
  82.             nonewline:true
  83.         },
  84.         markYouText:{
  85.             default:true,
  86.             type:"checkbox_with_colors",
  87.             desc:"<span class='boldText'>Style:</span> Color your name and (You) links",
  88.             color1Default:"#ff2222",
  89.             color1Desc:"<b>Color:</b>",
  90.             nonewline:true
  91.         },
  92.         compactPosts:{
  93.             default:true,
  94.             desc:"<span class='boldText'>Style:</span> Make thumbnails and posts more compact",
  95.             nonewline:true
  96.         },
  97.         showStubs:{
  98.             default:true,
  99.             desc:"<span class='boldText'>Style:</span> Show post stubs when filtering",
  100.             nonewline:true
  101.         },
  102.         //I swear this used to be a built in option on 8chan
  103.         halfchanGreentexts:{
  104.             default:false,
  105.             desc:"<span class='boldText'>Style:</span> Make the greentext brighter like 4chan"
  106.         },
  107.         glowFirstPostByID:{
  108.             default:true,
  109.             type:"checkbox_with_colors",
  110.             desc:"Mark new/unique posters by adding a glow effect to their ID",
  111.             color1Default:"#26bf47",
  112.             color1Desc:"<b>Glow color:</b>",
  113.             nonewline:true
  114.         },
  115.         showPostIndex:{
  116.             default:true,
  117.             type:"checkbox_with_colors",
  118.             desc:"Show the current index of a post on the thread. <span class='altText'>(OP: 1, first post: 2 etc.)</span>",
  119.             color1Default:"#7b3bcc",
  120.             color1Desc:"<b>Index color:</b>",
  121.             nonewline:true
  122.         },
  123.         showWatcherOnLoad: {
  124.             default:false,
  125.             desc:'Show the "Watched Threads" popup on page load',
  126.             nonewline:true
  127.         },
  128.         showVideoIcons: {
  129.             default:true,
  130.             desc:"Distinguish videos, gifs and audio with an icon before the filename"
  131.         },
  132.         preserveQuickReply:{
  133.             default:false,
  134.             desc:"Preserve the quick reply text when closing the box or refreshing the page",
  135.             nonewline:true
  136.         },
  137.         preserveName:{
  138.             default:false,
  139.             desc:"Preserve the last used name between page refreshes"
  140.         },
  141.         reverseSearchOptions:{
  142.             default:{
  143.                 pixiv:true,
  144.                 booru:true,
  145.                 saucenao:true
  146.             },
  147.             desc:"Reverse image search buttons to show:",
  148.             type:"checkbox_multiple_dict", //Maybe "multiple_array" or "bitfield" types allowed in the future
  149.             options:{
  150.                 pixiv:"Pixiv <span class='altText lineBefore'>Shown if the filename matches an image downloaded from Pixiv</span>",
  151.                 booru:"Gelbooru / Danbooru / Safebooru <span class='altText lineBefore'>Shown if the filename contains an md5 hash</span>",
  152.                 saucenao:"Saucenao <span class='altText lineBefore'>Always shown, uses JS to download and reupload the image to saucenao</span>"
  153.             },
  154.             nonewline:true
  155.         },
  156.         reverseSearchBooruSite:{
  157.             desc:"Booru to link if the above option is enabled",
  158.             type:"dropdown",
  159.             default:"gelbooru",
  160.             choices:{
  161.                 "gelbooru":"https://gelbooru.com/index.php?page=post&s=list&tags=md5%3a",
  162.                 "danbooru":"https://danbooru.donmai.us/posts?tags=md5%3a",
  163.                 "safebooru":"https://safebooru.org/index.php?page=post&s=list&tags=md5%3a"
  164.             }
  165.         }
  166.         /*redirectToCatalog:{
  167.             default:false,
  168.             desc:"Redirect to catalog when clicking on the index."
  169.         }*/
  170.     }
  171.  
  172.     const settingsNames = Object.keys(SETTINGS_DEFINITIONS);
  173.  
  174.     //Collect all color fields for checkbox_with_colors settings
  175.     //In the userscript storage they look like settingName_color1 etc.
  176.     const colorSettingKeys = [];
  177.     settingsNames.forEach(key => {
  178.         const def = SETTINGS_DEFINITIONS[key];
  179.         if (def.type === "checkbox_with_colors") {
  180.             Object.keys(def).forEach(k => {
  181.                 const match = k.match(/^color(\d+)Default$/);
  182.                 if (match) {
  183.                     colorSettingKeys.push(`${key}_color${match[1]}`);
  184.                 }
  185.             });
  186.         }
  187.     });
  188.  
  189.     //Compose all keys to load: main settings + color fields
  190.     const allSettingKeys = [...settingsNames, ...colorSettingKeys];
  191.  
  192.     //For each color field, get its default from the definition
  193.     function getDefaultForKey(key) {
  194.         const colorMatch = key.match(/^(.+)_color(\d+)$/);
  195.         if (colorMatch) {
  196.             const [_, base, idx] = colorMatch;
  197.             const def = SETTINGS_DEFINITIONS[base];
  198.             //Return color setting default like color1Default
  199.             return def && def[`color${idx}Default`] ? def[`color${idx}Default`] : undefined;
  200.         }
  201.         //Return regular setting
  202.         return SETTINGS_DEFINITIONS[key]?.default;
  203.     }
  204.  
  205.     const allSettingDefaults = allSettingKeys.map(getDefaultForKey);
  206.     const allSettingValues = await Promise.all(allSettingKeys.map((key, i) => GM.getValue(key, allSettingDefaults[i])));
  207.     const settings = Object.fromEntries(allSettingKeys.map((key, i) => [key, allSettingValues[i]]));
  208.  
  209.     function addMyStyle(newID, newStyle) {
  210.         let myStyle = document.createElement("style");
  211.         //myStyle.type = 'text/css';
  212.         myStyle.id = newID;
  213.         myStyle.textContent = newStyle;
  214.         document.head.appendChild(myStyle);
  215.     }
  216.  
  217.     function waitForDom(callback) {
  218.         if (document.readyState === "loading") {
  219.             //Loading hasn't finished yet. Wait for the inital document to load and start.
  220.             document.addEventListener("DOMContentLoaded", callback);
  221.         } else {
  222.             //Document has already loaded. Start.
  223.             callback();
  224.         }
  225.     }
  226.  
  227.     if (document?.head) {
  228.         runASAP();
  229.     } else {
  230.         //On some environments document.head doesn't exist yet?
  231.         waitForDom(runASAP);
  232.     }
  233.  
  234.     async function runASAP() {
  235.         // Migrations can be removed in a few weeks 
  236.         // Migrations are disabled now. Keeping the code for potential future migrations
  237.  
  238.         // // Migrate old useExtraStylingFixes setting if present
  239.         // const oldStyling = await GM.getValue("useExtraStylingFixes", undefined);
  240.         // if (typeof oldStyling !== "undefined") {
  241.         //     // If oldStyling is false, set both new options to false
  242.         //     if (oldStyling === false) {
  243.         //         settings.markPostEdge = false;
  244.         //         settings.compactPosts = false;
  245.         //         await GM.setValue("markPostEdge", false);
  246.         //         await GM.setValue("compactPosts", false);
  247.         //     }
  248.         //     // Remove the old setting
  249.         //     await GM.deleteValue("useExtraStylingFixes");
  250.         // }
  251.  
  252.         if (settings.preserveName === false) {
  253.             localStorage.removeItem("name");
  254.         }
  255.  
  256.         //Secret tip for anyone manually editing colors:
  257.         //if you edit the saved value in your userscript manager's settings database manually, you can use semi-transparent colors for the color pickers (until you click save on the settings menu).
  258.         //or easier: just copy the relevant part of the css and paste it to the css box in the website settings. Add !important if you want to force it like: color: red !important;
  259.  
  260.         //Apply all the styles as soon as possible
  261.         if (settings.compactPosts) {
  262.             addMyStyle("lynx-compact-posts", `
  263.                 /* smaller thumbnails & image paddings */
  264.                 body .uploadCell img:not(.imgExpanded) {
  265.                     max-width: 160px;
  266.                     max-height: 125px;
  267.                     object-fit: contain;
  268.                     height: auto;
  269.                     width: auto;
  270.                     margin-right: 0em;
  271.                     margin-bottom: 0em;
  272.                 }
  273.  
  274.                 .uploadCell {
  275.                     margin-bottom: 0.45em;
  276.                 }
  277.  
  278.                 .uploadCell .imgLink {
  279.                     margin-right: 1em;
  280.                 }
  281.  
  282.                 /* smaller post spacing (not too much) */
  283.                 .divMessage {
  284.                     margin: .8em .8em .5em 3em;
  285.                 }
  286.  
  287.                 /* file details: reduce paddings and icon sizes */
  288.                 .uploadDetails {
  289.                     & > * {
  290.                         vertical-align: top;
  291.                         font-size: 95%;
  292.                     }
  293.                     & > .dimensionLabel {
  294.                         margin-right: 0.3ch;
  295.                     }
  296.                     .coloredIcon {
  297.                         font-size: 90%;
  298.                     }
  299.                     & > a.nameLink {
  300.                         margin-right: -2.5px;
  301.                     }
  302.                     & > span.hideFileButton {
  303.                         margin-right: -4px;
  304.                     }
  305.                 }
  306.  
  307.                 /* This thing adds an unnecessary line break (only on chrome) */
  308.                 .uploadCell > details > summary + br {
  309.                     display: none;
  310.                 }
  311.  
  312.                 /* Contain expanded images to the page */
  313.                 .imgExpanded {
  314.                     max-height: 100vh; 
  315.                     object-fit: contain;
  316.                 }
  317.  
  318.             `);
  319.         }
  320.  
  321.         const markerColor1 = settings.showScrollbarMarkers_color1 || SETTINGS_DEFINITIONS.showScrollbarMarkers.color1Default;
  322.         const markerColor2 = settings.showScrollbarMarkers_color2 || SETTINGS_DEFINITIONS.showScrollbarMarkers.color2Default;
  323.         const indexColor = settings.showPostIndex_color1 || SETTINGS_DEFINITIONS.showPostIndex.color1Default;
  324.         const glowColor = settings.glowFirstPostByID_color1 || SETTINGS_DEFINITIONS.glowFirstPostByID.color1Default;
  325.         addMyStyle("lynx-extended-css", `
  326.         :root {
  327.             --showScrollbarMarkers_color1: ${markerColor1};
  328.             --showScrollbarMarkers_color2: ${markerColor2};
  329.             --showPostIndex_color1: ${indexColor};
  330.             --glowFirstPostByID_color1: ${glowColor};
  331.         }
  332.  
  333.         /* Booru links */
  334.         /* For multiple uploads the button is below the image, for single upload it's next to the filename */
  335.         /* single upload buttons can also be moved below the image by setting the innerPost as relative. */
  336.         .lynxReverseImageSearch a:hover {
  337.             text-decoration: underline;
  338.         }
  339.         .lynxReverseImageSearch > a {
  340.             margin: 0 4px 0 1px;
  341.  
  342.             &.fetch-awaiting:after {
  343.                 content: attr(data-booruname)" (please wait...)" !important;
  344.             }
  345.  
  346.             &.fetch-failed:after {
  347.                 content: attr(data-booruname)" (failed!)" !important;
  348.             }
  349.  
  350.             & > svg {
  351.                 margin-block: -2.5px;
  352.                 height: 1em;
  353.                 width: 1em;
  354.             }
  355.         }
  356.  
  357.         .panelUploads:not(.multipleUploads) .lynxReverseImageSearch > a:after, lynxReverseImageSearch.showSearchNames > a:after {
  358.             content: attr(data-booruname);
  359.         }
  360.  
  361.         .multipleUploads .uploadCell:has(.lynxReverseImageSearch) {
  362.             position: relative;
  363.         }
  364.  
  365.         .multipleUploads .lynxReverseImageSearch {
  366.             position: absolute;
  367.             bottom: 0;
  368.             left: 0;
  369.             z-index: 2; /* Fixes the button not being clickable if you have spoiler thumbs disabled */
  370.  
  371.             & a {
  372.                 font-size: 0.9em;
  373.                 filter: drop-shadow(0px 0px 1px black) drop-shadow(0px 0px 1px var(--contrast-color)) drop-shadow(0px 0px 1px var(--contrast-color));
  374.                 &:hover,
  375.                 &:active {
  376.                     background: var(--contrast-color);
  377.                     opacity: 0.9;
  378.                     max-width: 999px;
  379.                     &:after {
  380.                         content: attr(data-booruname);
  381.                     }
  382.                 }
  383.             }
  384.         }
  385.  
  386.         /* video icons for filenames */
  387.         a.originalNameLink.lynx-video::before {
  388.             content: "\\e0a9";
  389.             font-family: "Icons"; /* open-iconic font from the page */
  390.             font-size: 90%;
  391.             margin-right: 2px;
  392.         }
  393.  
  394.         /* Scrollbar you and reply markers */
  395.         .marker-container {
  396.             position: fixed;
  397.             top: 8px;
  398.             right: 0px;
  399.             width: 10px;
  400.             height: calc(100vh - 16px);
  401.             z-index: 11000;
  402.             pointer-events: none;
  403.         }
  404.  
  405.         .marker {
  406.             position: absolute;
  407.             width: 100%;
  408.             height: 7px;
  409.             background: var(--showScrollbarMarkers_color1);
  410.             cursor: pointer;
  411.             pointer-events: auto;
  412.             border-radius: 40% 0 0 40%;
  413.             z-index: 5;
  414.             filter: drop-shadow(0px 0px 1px #000000BA);
  415.         }
  416.  
  417.         .marker.alt {
  418.             background: var(--showScrollbarMarkers_color2);
  419.             z-index: 2;
  420.         }
  421.  
  422.         .postNum.index {
  423.             color: var(--showPostIndex_color1);
  424.             font-weight: bold;
  425.         }
  426.  
  427.         .labelId.glows {
  428.             box-shadow: 0 0 15px var(--glowFirstPostByID_color1);
  429.         }
  430.  
  431.         #lynxExtendedMenu {
  432.             position: fixed;
  433.             top: 15px;
  434.             left: 50%;
  435.             transform: TranslateX(-50%);
  436.             padding: 10px;
  437.             z-index: 10000;
  438.             font-family: Arial, sans-serif;
  439.             font-size: 14px;
  440.             box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  441.             background: var(--contrast-color);
  442.             color: var(--text-color);
  443.             border: 1px solid #737373;
  444.             border-radius: 4px;
  445.             max-height:90%;
  446.             overflow-y: auto;
  447.             line-height: 0.8em;
  448.  
  449.             & .altText {
  450.                 opacity: 0.8;
  451.                 font-size: 0.9em;
  452.  
  453.                 &.lineBefore:before {
  454.                     content: "—— ";
  455.                 }
  456.             }
  457.  
  458.             & .boldText {
  459.                 color: var(--link-color);
  460.                 font-weight: bold;
  461.             }
  462.  
  463.             & .colorLabel {
  464.                 padding: 3px 2px 3px 4px;
  465.                 border-radius: 8px;
  466.                 box-shadow: 0px 0px 1px currentColor;
  467.                 margin-left: 0.5em;
  468.             }
  469.  
  470.             & input[type="color"] {
  471.                 width: 40px;
  472.                 height: 20px;
  473.                 padding: 1px;
  474.                 transform: translate(0, 2px);
  475.             }
  476.  
  477.             & button {
  478.                 padding: 10px 20px;
  479.                 margin-right: 4px;
  480.                 margin-bottom: 0;
  481.                 filter: contrast(115%) brightness(110%);
  482.                 &:hover {
  483.                     filter: brightness(130%);
  484.                 }
  485.             }
  486.         }
  487.         #lynxExtendedMenu > .settings-footer {
  488.             height: auto;
  489.         }
  490.         @media screen and (max-width: 1000px) {
  491.             #lynxExtendedMenu{
  492.                 right:0;
  493.                 width:90%;
  494.                 line-height: 1em;
  495.                 /*bottom:15px;*/
  496.             }
  497.         }
  498.  
  499.         .lynxExtendedButton::before {
  500.             content: "\\e0da";
  501.         }
  502.  
  503.         `);
  504.  
  505.         if (settings.markPostEdge) {
  506.             const color1 = settings.markPostEdge_color1 || SETTINGS_DEFINITIONS.markPostEdge.color1Default;
  507.             const color2 = settings.markPostEdge_color2 || SETTINGS_DEFINITIONS.markPostEdge.color2Default;
  508.             addMyStyle("lynx-mark-posts", `
  509.                 /* 
  510.                 README:
  511.                 Mark your posts and replies with a left border. Specificity order: (you) > (reply). 
  512.                 Important: The :not(#SP1) selectors are used for extra specificity.
  513.                 These are made extra specific so we can override ones from other userscripts.
  514.                 (because Lynx-- has an option to disable only this and also has the ability to customize the color)
  515.                 */
  516.                 /* Match your posts. This is easy. */
  517.                 body:not(#SP1#SP1) :is(.innerOP.yourPost, .innerPost.yourPost) {
  518.                     border-left: 3px dashed var(--markPostEdge_color1, ${color1});
  519.                 }
  520.  
  521.                 /* 
  522.                 * Match replies:
  523.                 * This can be a simple .divMessage > .quoteLink 
  524.                 * or it can be a .divMessage > details > .spoiler > s > u > .quoteLink (or something like that)
  525.                 */
  526.                 body:not(#SP1) :is(.innerOP.quotesYou, .innerPost.quotesYou) {
  527.                     border-left: 2px solid var(--markPostEdge_color2, ${color2});
  528.                 }
  529.             `);
  530.         }
  531.  
  532.         if (settings.markYouText) {
  533.             const color1 = settings.markYouText_color1 || SETTINGS_DEFINITIONS.markYouText.color1Default;
  534.             addMyStyle("lynx-mark-you-text", `
  535.                     .youName { color: var(--markYouText_color1, ${color1}); }
  536.                     .you { --link-color: var(--markYouText_color1, ${color1}); }
  537.             `);
  538.         }
  539.  
  540.         if (settings.halfchanGreentexts) {
  541.             addMyStyle("lynx-halfchanGreentexts",
  542.                 `.greenText {
  543.                     filter: brightness(110%);
  544.                 }
  545.             `);
  546.         }
  547.  
  548.         if (settings.showStubs === false) {
  549.             addMyStyle("lynx-hide-stubs",`
  550.             .postCell:has(> span.unhideButton.glowOnHover) {
  551.                 display: none;
  552.             }
  553.             `);
  554.         }
  555.  
  556.         if (settings.revealSpoilerText=="on") {
  557.             addMyStyle("lynx-reveal-spoilertext1",`
  558.                 span.spoiler { color: white }
  559.             `);
  560.         } else if (settings.revealSpoilerText=="madoka") {
  561.             addMyStyle("lynx-reveal-spoilertext2",`
  562.                 span.spoiler:not(:hover) {
  563.                     color: white;
  564.                     font-family: MadokaRunes !important;
  565.                 }
  566.             `);
  567.         }
  568.  
  569.     } //End of runASAP()
  570.  
  571.     //Everything in runAfterDom runs after document has loaded (like @run-at document-end)
  572.     //Everything in runAfterDom runs after document has loaded (like @run-at document-end)
  573.     //Everything in runAfterDom runs after document has loaded (like @run-at document-end)
  574.     async function runAfterDom() {
  575.         console.log("%cLynx Minus Minus Started with settings:", "color:rgb(0, 140, 255)", settings);
  576.  
  577.         //Detect if the current page is a thread
  578.         const url = window.location.href;
  579.         const isThread = REGEX_THREAD.test(url);
  580.  
  581.         //Keep these for now I guess.
  582.         //Get the following window objects
  583.         //unsafeWindow works on chrome and Tampermonkey FF, wrappedJSObject works on Firefox VM.
  584.         //Chrome and firefox behavior is different here. In Chrome you can simply do 'api' to check if the variable is defined, in Firefox you need to do typeof api !== 'undefined'.
  585.         //And a && will return the second element if the first is true.
  586.  
  587.         // const window_api = (typeof api !== 'undefined' && api) || window?.api || unsafeWindow?.api || wrappedJSObject?.api || undefined;
  588.         // const window_posting = (typeof posting !== 'undefined' && posting) || window?.posting || unsafeWindow?.posting || wrappedJSObject?.posting || undefined;
  589.         // const window_qr = (typeof qr !== 'undefined' && qr) || window?.qr || unsafeWindow?.qr || wrappedJSObject?.qr || undefined;
  590.         // if (window_api && window_posting && window_qr) {
  591.         //     windowAccessible = true;
  592.         // } else {
  593.         //     //I think greasemonkey sandboxes the script. I use violentmonkey though
  594.         //     console.error("Lynx Minus Minus: This JS script is sandboxed and can't access page JS... (If you can read this, let me know what browser/extension does this. Or maybe the site just failed to load?)")
  595.         // }
  596.  
  597.         if (settings.preserveQuickReply === false) {
  598.             const qrBody = document.getElementById("qrbody");
  599.             if (qrBody) {
  600.                 qrBody.value = "";
  601.             }
  602.         }
  603.  
  604.         function pageHotkeys(ev) {
  605.             const key = ev.key.toLowerCase();
  606.             //Ctrl+Q or Alt+R to open quick reply
  607.             if ((ev.ctrlKey && key == "q") || (ev.altKey && key == "r")) {
  608.                 ev.preventDefault();
  609.                 //8chan's HTML will keep the text after a reload so attempt to clear it again
  610.                 const qrBody = document.getElementById("qrbody");
  611.                 if (settings.preserveQuickReply === false) {
  612.                     if (qrBody) {
  613.                         qrBody.value = "";
  614.                     }
  615.                 }
  616.                 const replyBtn = document.getElementById("replyButton");
  617.                 replyBtn?.click();
  618.                 qrBody?.focus();
  619.             };
  620.             //Alt+T to toggle thread watcher
  621.             if (ev.altKey && (key == "t")) {
  622.                 ev.preventDefault();
  623.                 const watcherBtn = document.querySelector("body > nav a.watcherButton");
  624.                 if (watcherBtn) watcherBtn.click();
  625.             }
  626.         }
  627.         document.addEventListener("keydown", pageHotkeys);
  628.  
  629.         function createSettingsButton() {
  630.             //Desktop
  631.             document.querySelector("#navLinkSpan > .settingsButton").insertAdjacentHTML("afterend", `
  632.             <span>/</span>
  633.             <a id="navigation-lynxextended" class="coloredIcon lynxExtendedButton" title="LynxChan Extended-- Settings"></a>
  634.             `);
  635.             //Mobile
  636.             document.querySelector("#sidebar-menu > ul > li > .settingsButton").parentElement.insertAdjacentHTML("afterend", `
  637.                 <li>
  638.                     <a id="navigation-lynxextended-mobile" class="coloredIcon lynxExtendedButton" title="LynxChan Extended-- Settings">Lynx Ex-- Settings</a>
  639.                 </li>
  640.             `);
  641.             document.querySelector("#navigation-lynxextended").addEventListener("click", openMenu);
  642.             document.querySelector("#navigation-lynxextended-mobile").addEventListener("click", openMenu);
  643.         }
  644.  
  645.         //Register menu command for the settings button
  646.         GM.registerMenuCommand("Show Options Menu", openMenu);
  647.         try {
  648.             createSettingsButton();
  649.         } catch (error) {
  650.             console.log("Error while creating settings button:", error);
  651.         }
  652.  
  653.         //Open the settings menu on the first run
  654.         if (settings.firstRun) {
  655.             settings.firstRun = false;
  656.             await GM.setValue("firstRun", settings.firstRun);
  657.             openMenu();
  658.         }
  659.         
  660.         //Show watched threads on page load
  661.         if (settings.showWatcherOnLoad) {
  662.             const watchedMenu = document.querySelector("body > #watchedMenu");
  663.             const watcherButton = document.querySelector("body > nav > #navLinkSpan > .watcherButton");
  664.             if (watchedMenu && watcherButton) {
  665.                 if (watchedMenu?.style?.display === "none") {
  666.                     watcherButton.click();
  667.                 }
  668.             }
  669.         }
  670.  
  671.         function replyKeyboardShortcuts(ev) {
  672.             if (ev.ctrlKey) {
  673.                 let combinations = {
  674.                     "s":["[spoiler]","[/spoiler]"],
  675.                     "b":["'''","'''"],
  676.                     "u":["__","__"],
  677.                     "i":["''","''"],
  678.                     "d":["[doom]","[/doom]"],
  679.                     "m":["[moe]","[/moe]"]
  680.                 }
  681.                 for (var key in combinations)
  682.                 {
  683.                     if (ev.key == key)
  684.                     {
  685.                         ev.preventDefault();
  686.                         console.log("ctrl+"+key+" pressed in textbox")
  687.                         const textBox = ev.target;
  688.                         let newText = textBox.value;
  689.                         const tags = combinations[key]
  690.                         const selectionStart = textBox.selectionStart
  691.                         const selectionEnd = textBox.selectionEnd
  692.                         
  693.                         if (selectionStart == selectionEnd) { //If there is nothing selected, make empty tags and center the cursor between it
  694.                             document.execCommand("insertText",false, tags[0] + tags[1]);
  695.                             //Center the cursor between tags
  696.                             textBox.selectionStart = textBox.selectionEnd = (textBox.selectionEnd - tags[1].length);
  697.                         } else {
  698.                             //Insert text and keep undo/redo support (Only replaces highlighted text)
  699.                             document.execCommand("insertText",false, tags[0] + newText.slice(selectionStart, selectionEnd) + tags[1])
  700.                         }
  701.                         return;
  702.                     }
  703.                 }
  704.                 //Ctrl+Enter to send reply
  705.                 if (ev.key=="Enter") {
  706.                     document.getElementById("qrbutton")?.click()
  707.                 }
  708.             }
  709.         }
  710.  
  711.  
  712.         function openMenu() {
  713.             const oldMenu = document.getElementById("lynxExtendedMenu");
  714.             if (oldMenu) {
  715.                 oldMenu.remove();
  716.                 return;
  717.             }
  718.             // Create options menu
  719.             const menu = document.createElement("div");
  720.             menu.id = "lynxExtendedMenu";
  721.             menu.innerHTML = `
  722.             <h3 style="text-align: center; color: var(--subject-color);" class='settings-header'>LynxChan Extended-- Options</h3>
  723.             <p style="text-align: center;"><a href="https://greasyfork.org/en/scripts/533169-lynxchan-extended-minus-minus/versions">Version ${GM.info.script.version}</a></p><br>
  724.             `;
  725.  
  726.             //we use createElement() here instead of setting innerHTML so we can attach onclick to elements
  727.             //...In the future, at least. There aren't any onclicks added yet.
  728.             let settings_content = document.createElement("div");
  729.             settings_content.classList.add("settings-content");
  730.             Object.keys(SETTINGS_DEFINITIONS).forEach((name) => {
  731.                 const setting = SETTINGS_DEFINITIONS[name];
  732.                 if (setting.hidden) {
  733.                     //pass
  734.                 }
  735.                 else if (setting.type == "radio") {
  736.                     let html = `<span>${setting.desc}</span><br><form id="${name}" action='#'>`;
  737.                     for (const [value, description] of Object.entries(setting.options)) {
  738.                         html += `
  739.                         <label>
  740.                             <input name="${name}" type="radio" value="${value}" ${settings[name]==value ? "checked" : ""}
  741.                             <span>${description}</span>
  742.                         </label><br>
  743.                         `;
  744.                     }
  745.                     html += `</form>${setting.nonewline ? '' : '<br>'}`;
  746.                     settings_content.innerHTML += html;
  747.                 } else if (setting.type == "checkbox_multiple_dict") {
  748.                     const dict = settings[name]
  749.                     let html = `<span>${setting.desc}</span><br><form id="${name}" action='#'>`;
  750.                     for (const [key, description] of Object.entries(setting.options)) {
  751.                         html += `
  752.                         <label>
  753.                             <input name="${name}" type="checkbox" value="${key}" ${dict[key] ? "checked" : ""}
  754.                             <span>${description}</span>
  755.                         </label><br>
  756.                         `;
  757.                     }
  758.                     html += `</form>${setting.nonewline ? '' : '<br>'}`;
  759.                     settings_content.innerHTML += html;
  760.                 } else if (setting.type == "dropdown") {
  761.                     let html = `<label for="${name}">${setting.desc}:</label><select id="${name}">`
  762.                     Object.keys(setting['choices']).forEach(value => {
  763.                         html+=`<option value="${value}" ${settings[name]==value ? "selected" : ""}>${value}</option>`
  764.                     })
  765.                     html+=`</select><br>${setting.nonewline ? '' : '<br>'}`;
  766.                     settings_content.innerHTML += html;
  767.  
  768.                 } else if (setting.type == "checkbox_with_colors") {
  769.                     let colorHtml = "";
  770.                     let colorFields = Object.keys(setting).filter(k => /^color\d+Default$/.test(k));
  771.                     colorFields.forEach((colorKey) => {
  772.                         const idx = colorKey.match(/^color(\d+)Default$/)[1];
  773.                         const colorValue = settings[`${name}_color${idx}`] || setting[`color${idx}Default`];
  774.                         const colorDesc = setting[`color${idx}Desc`] || "";
  775.                         colorHtml += `
  776.                         <label class="colorLabel">
  777.                             ${colorDesc}
  778.                             <input type="color" id="${name}_color${idx}" value="${colorValue}" ${settings[name] ? '' : 'disabled'}>
  779.                         </label>
  780.                         `;
  781.                     });
  782.                     settings_content.innerHTML += `
  783.                     <label>
  784.                         <input type="checkbox" id="${name}" ${settings[name] ? "checked" : ""}>
  785.                         ${setting.desc}
  786.                     </label>
  787.                     ${colorHtml}
  788.                     <br>${setting.nonewline ? '' : '<br>'}`;
  789.                 } else {
  790.                     settings_content.innerHTML += `
  791.                     <label>
  792.                         <input type="checkbox" id="${name}" ${settings[name] ? "checked" : ""}>
  793.                         ${setting.desc}
  794.                     </label><br>${setting.nonewline ? '' : '<br>'}`;
  795.                 }
  796.             })
  797.             menu.appendChild(settings_content);
  798.             menu.innerHTML += `
  799.                 <div class='settings-footer'>
  800.                     <button id="saveSettings">Save</button>
  801.                     <button id="closeMenu">Close</button>
  802.                     <button id="resetSettings" style="float: right;">Reset</button>
  803.                 </div>
  804.             `;
  805.             document.body.appendChild(menu);
  806.  
  807.             // Save button functionality
  808.             document.getElementById("saveSettings").addEventListener("click", async () => {
  809.                 Object.keys(SETTINGS_DEFINITIONS).forEach((name) => {
  810.                     const setting = SETTINGS_DEFINITIONS[name];
  811.                     if (!('hidden' in setting)) {
  812.                         if (setting.type=="radio") {
  813.                             settings[name] = menu.querySelector(`input[name="${name}"]:checked`).value;
  814.                         } else if (setting.type == "checkbox_multiple_dict") {
  815.                             
  816.                             const d = {}
  817.                             menu.querySelectorAll(`input[name="${name}"]`).forEach(checkbox => {
  818.                                 d[checkbox.value] = checkbox.checked;
  819.                             })
  820.                             settings[name] = d;
  821.                             
  822.                         } else if (setting.type=="dropdown") {
  823.                             settings[name] = document.getElementById(name).value;
  824.                         } else if (setting.type=="checkbox_with_colors") {
  825.                             settings[name] = document.getElementById(name).checked;
  826.                             let colorFields = Object.keys(setting).filter(k => /^color\d+Default$/.test(k));
  827.                             colorFields.forEach((colorKey) => {
  828.                                 const idx = colorKey.match(/^color(\d+)Default$/)[1];
  829.                                 const colorName = `${name}_color${idx}`;
  830.                                 const colorValue = document.getElementById(colorName).value;
  831.                                 settings[colorName] = colorValue;
  832.                                 // Set CSS variable on body (so it can be used without a refresh)
  833.                                 document.body.style.setProperty(`--${colorName}`, colorValue);
  834.                             });
  835.                         } else {
  836.                             settings[name] = document.getElementById(name).checked;
  837.                         }
  838.                     }
  839.                 })
  840.                 console.log("Saving settings ",settings)
  841.                 await Promise.all(Object.entries(settings).map(([key, value]) => GM.setValue(key, value)));
  842.                 setTimeout(()=>{
  843.                     alert("Settings saved!\nFor most settings you must refresh the page for the changes to take effect.\n\n(only color pickers don't need a refresh)");
  844.                 }, 1);
  845.                 // menu.remove();
  846.             });
  847.  
  848.             // Reset button functionality
  849.             document.getElementById("resetSettings").addEventListener("click", async () => {
  850.                 if (!confirm("Are you sure you want to reset all settings? This will delete all saved data.")) return;
  851.                 const keys = await GM.listValues();
  852.                 await Promise.all(keys.map(key => GM.deleteValue(key)));
  853.                 alert("All settings have been reset.\nRefreshing automatically for the changes to take effect.");
  854.                 menu.remove();
  855.                 location.reload();
  856.             });
  857.  
  858.             // Close button functionality
  859.             document.getElementById("closeMenu").addEventListener("click", () => {
  860.                 menu.remove();
  861.             });
  862.  
  863.         }
  864.  
  865.         function createMarker(element, container, isReply) {
  866.             const pageHeight = document.body.scrollHeight;
  867.             const offsetTop = element.offsetTop;
  868.             const percent = offsetTop / pageHeight;
  869.             const top = (percent * 100).toFixed(2);
  870.  
  871.             const marker = document.createElement("div");
  872.             marker.classList.add("marker");
  873.             if (isReply) {
  874.                 marker.classList.add("alt");
  875.             }
  876.             marker.style.top = `${top}%`;
  877.             marker.dataset.postid = element.id;
  878.  
  879.             marker.addEventListener("click", () => {
  880.                 let elem = element?.previousElementSibling || element;
  881.                 if (elem) elem.scrollIntoView({ behavior: "instant", block: "start" });
  882.             });
  883.  
  884.             container.appendChild(marker);
  885.         }
  886.  
  887.         function recreateScrollMarkers() {
  888.             let oldContainer = document.querySelector(".marker-container");
  889.             if (oldContainer) {
  890.                 oldContainer.remove();
  891.             }
  892.             // Create marker container
  893.             const markerContainer = document.createElement("div");
  894.             markerContainer.classList.add("marker-container");
  895.             document.body.appendChild(markerContainer);
  896.     
  897.             // Match and create markers for "my posts" (matches native & dollchan)
  898.             document.querySelectorAll(".postCell:has(> .innerPost > .postInfo.title :is(.linkName.youName, .de-post-counter-you)),.postCell:has(.innerPost.de-mypost)")
  899.                 .forEach((elem) => {
  900.                     createMarker(elem, markerContainer, false);
  901.                 });
  902.     
  903.             // Match and create markers for "replies" (matches native & dollchan)
  904.             document.querySelectorAll(".postCell:has(> .innerPost > .divMessage :is(.quoteLink.you, .de-ref-you)),.postCell:has(.innerPost.de-mypost-reply)")
  905.                 .forEach((elem) => {
  906.                     createMarker(elem, markerContainer, true);
  907.                 });
  908.         }
  909.     
  910.         let postCount = 1;
  911.         const postIndexLookup = {};
  912.         function addPostCount(post, newpost = true) {
  913.             // const posts = Array.from(document.querySelectorAll(".innerOP, .divPosts > .postCell"));
  914.             if (post.querySelector(".postNum")) {
  915.                 return;
  916.             }
  917.     
  918.             const postInfoDiv = post.getElementsByClassName("title")[0]
  919.             if (!postInfoDiv) {
  920.                 console.error("[Lynx--] Failed to find post for div ", post);
  921.                 return;
  922.             }
  923.     
  924.             const posterNameDiv = postInfoDiv.getElementsByClassName("linkName")[0];
  925.             const postNumber = post.querySelector(".linkQuote")?.textContent;
  926.             if (!postNumber) return;
  927.  
  928.             let localCount = postCount;
  929.             if (newpost) {
  930.                 postIndexLookup[postNumber] = localCount;
  931.                 postCount++;
  932.             } else {
  933.                 //Show cached post count for inlines & hovers
  934.                 localCount = postIndexLookup[postNumber];
  935.                 if (!localCount) return;
  936.             }
  937.  
  938.             let newNode = document.createElement("span");
  939.             newNode.innerText = localCount;
  940.             newNode.className = "postNum index";
  941.             if (localCount < Infinity) //knownBumpLimit
  942.             {
  943.                 // color is handled by .postNum.index
  944.                 newNode.style = "";
  945.             }
  946.             else
  947.             {
  948.                 newNode.style = "color: rgb(255, 4, 4); font-weight: bold;"
  949.             }
  950.             postInfoDiv.insertBefore(newNode, posterNameDiv);
  951.             let foo = document.createTextNode("\u00A0"); // Non-breaking space
  952.             postInfoDiv.insertBefore(foo, posterNameDiv);
  953.         }
  954.  
  955.         //Open source svg from iconify.design
  956.         const SVG_SEARCH = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" d="m20 20l-6-6"></path><path d="M15 9.5a5.5 5.5 0 1 1-11 0a5.5 5.5 0 0 1 11 0Z"></path></g></svg>`;
  957.         function filenameFeatures(post) {
  958.             const fileNames = post.querySelectorAll(".originalNameLink[href]");
  959.  
  960.             //Feature: Distinguish videos, gifs and audio with an icon
  961.             //Theres also a mime type on .imgLink
  962.             if (settings.showVideoIcons) {
  963.                 const videoExts = /\.(webm|mp4|mkv|mov|avi|flv|wmv|m4v|gif|apng|mp3|flac|opus|ogg|wav|aac|m4a|wma)$/i;
  964.                 fileNames.forEach((nameElem) => {
  965.                     if (videoExts.test(nameElem.download)) {
  966.                         nameElem.classList.add("lynx-video");
  967.                     }
  968.                 });
  969.             }
  970.  
  971.             //Last feature: Reverse image search buttons
  972.             //TODO MAYBE: Make this button open a small menu (like the post menu) instead of multiple buttons. AI can do it in 20 seconds.
  973.             // .some() will return true if any value in the dict is true
  974.             // So inverting this means no values are true, so return without doing anything
  975.             if (!Object.values(settings.reverseSearchOptions).some(Boolean)) {
  976.                 return;
  977.             }
  978.  
  979.             const fileNameElements = Array.from(fileNames);
  980.             const regex_md5sum = /[0-9a-f]{32}/g;
  981.             const regex_pixiv = /(\d+)_p\d+/;
  982.  
  983.             for (let i = fileNameElements.length-1; i>=0; i--)
  984.             {
  985.                 const nameElem = fileNameElements[i];
  986.                 const parent = nameElem.parentElement
  987.                 if (parent.querySelector(".lynxReverseImageSearch")) {
  988.                     return;
  989.                 }
  990.                 const attachmentFileName = nameElem.download;
  991.  
  992.                 const span = document.createElement("span");
  993.                 span.classList.add("lynxReverseImageSearch");
  994.  
  995.                 let searchButtonsAdded = 0
  996.  
  997.                 let m;
  998.                 if (settings.reverseSearchOptions.pixiv && (m = regex_pixiv.exec(attachmentFileName)) !== null) {
  999.                     span.innerHTML += `<a rel="noopener noreferrer" target="_blank" data-booruname="pixiv" href="https://pixiv.net/i/${m[1]}">${SVG_SEARCH}</a>`
  1000.                     searchButtonsAdded++;
  1001.                 }
  1002.                 //This is 'else if' because these options are mutually exclusive - a filename will never match pixiv AND an md5 hash
  1003.                 //Careful with this insane abuse of conditionals, the order of operations matters (&& is before = without parenthesis)
  1004.                 //And we don't want to match >1 because that could be an 8chan hash (There should only be 1 md5 hash in a file name anyways)
  1005.                 else if (settings.reverseSearchOptions.booru && (m = [...attachmentFileName.matchAll(regex_md5sum)]) && m?.length == 1) {
  1006.                     span.innerHTML += `<a rel="noopener noreferrer" target="_blank" data-booruname="${settings.reverseSearchBooruSite}" href="${SETTINGS_DEFINITIONS['reverseSearchBooruSite']['choices'][settings.reverseSearchBooruSite]}${m[0]}">${SVG_SEARCH}</a>`
  1007.                     searchButtonsAdded++;
  1008.                 }
  1009.  
  1010.                 if (settings.reverseSearchOptions.saucenao) {
  1011.                     //Logic: for everything thats not supported i.e. not an image use the thumbnail if its available
  1012.                     //Supported image extensions for Saucenao direct search
  1013.                     const imageExts = /\.(png|jpe?g|webp|bmp|gif)$/i;
  1014.                     let validImage = true;
  1015.                     let useThumbInstead = false;
  1016.                     let thumbUrl = null;
  1017.                     if (!imageExts.test(attachmentFileName)) {
  1018.                         // Not a supported image, try to find a thumbnail
  1019.                         const uploadCell = parent.closest('.uploadCell');
  1020.                         if (uploadCell) {
  1021.                             const thumbImg = uploadCell.querySelector('.imgLink > img');
  1022.                             const thumbSrc = thumbImg?.getAttribute("src");
  1023.                             if (thumbImg && thumbSrc?.startsWith('/.media/t_')) {
  1024.                                 useThumbInstead = true;
  1025.                                 thumbUrl = thumbSrc;
  1026.                             }
  1027.                         }
  1028.                         // If no valid thumbnail, don't add saucenao
  1029.                         if (!useThumbInstead) {
  1030.                             // Don't add saucenao button for this file
  1031.                             validImage = false;
  1032.                         }
  1033.                     }
  1034.  
  1035.                     const sauceNaoWrapper = function(ev) {
  1036.                         ev.preventDefault(); //Prevent <details> node from contracting
  1037.                         const a = ev.currentTarget;
  1038.                         a.classList.add("fetch-awaiting");
  1039.                         const fetchUrl = useThumbInstead ? thumbUrl : nameElem.href;
  1040.                         const fetchName = useThumbInstead ? ("thumbnail_" + attachmentFileName) : attachmentFileName;
  1041.                         fetch(fetchUrl)
  1042.                             .then(resp => {
  1043.                                 if (!resp.ok) throw new Error("Fetch failed");
  1044.                                 return resp.blob();
  1045.                             })
  1046.                             .then(blob => {
  1047.                                 let file = new File([blob], fetchName, {type: blob.type} );
  1048.                                 let dataTransfer = new DataTransfer();
  1049.                                 dataTransfer.items.add(file);
  1050.                                 document.getElementById("saucenao_file_input").files = dataTransfer.files;
  1051.                                 document.getElementById("saucenao_submit").click();
  1052.                                 a.classList.remove("fetch-awaiting");
  1053.                             })
  1054.                             .catch(() => {
  1055.                                 a.classList.remove("fetch-awaiting");
  1056.                                 a.classList.add("fetch-failed");
  1057.                             });
  1058.                     }
  1059.  
  1060.                     if (validImage) {
  1061.                         const a = document.createElement("a");
  1062.                         a.setAttribute("data-booruname","saucenao")
  1063.                         // a.innerText = '🔍︎'
  1064.                         a.innerHTML = SVG_SEARCH;
  1065.                         a.addEventListener("click", sauceNaoWrapper)
  1066.                         span.appendChild(a);
  1067.                         //span.innerHTML += `<a data-booruname='saucenao' onclick=''>🔍︎</a>`
  1068.                         searchButtonsAdded++;
  1069.                     }
  1070.                 }
  1071.  
  1072.                 if (searchButtonsAdded > 1) {
  1073.                     span.classList.add("showSearchNames")
  1074.                 }
  1075.  
  1076.                 if (searchButtonsAdded > 0) {
  1077.                     parent.insertAdjacentElement("beforeend", span);
  1078.                 }
  1079.             }
  1080.         }
  1081.     
  1082.         /*function glowpost() {
  1083.             // Create a frequency map to track occurrences of each item
  1084.             const list = document.querySelectorAll(".labelId");
  1085.             const countMap = Array.from(list).reduce((acc, item) => {
  1086.             acc[item.style.backgroundColor] = (acc[item.style.backgroundColor] || 0) + 1;
  1087.             return acc;
  1088.             }, {});
  1089.             
  1090.             // Filter the list to keep only items with a count of 1
  1091.             Array.from(list).filter(item => countMap[item.style.backgroundColor] === 1).forEach((item) => {
  1092.                 item.style.boxShadow = "0 0 15px #26bf47";
  1093.                 item.title = "This is the first post from this ID.";
  1094.             });
  1095.         }*/
  1096.         var idMap = {};
  1097.         const glowpost = function(post, newpost = true) {
  1098.             const list = post.querySelectorAll(".labelId");
  1099.             const postNumber = post.querySelector(".linkQuote")?.textContent;
  1100.             list.forEach((poster) => {
  1101.                 const bgColor = poster.style.backgroundColor;
  1102.                 if (newpost && idMap[bgColor] === undefined) {
  1103.                     idMap[bgColor] = postNumber;
  1104.                     poster.classList.add("glows");
  1105.                     poster.title = "This is the first post from this ID.";
  1106.                 } else if (!newpost && idMap[bgColor] == postNumber) {
  1107.                     poster.classList.add("glows");
  1108.                     poster.title = "This is the first post from this ID.";
  1109.                 }
  1110.             });
  1111.         }
  1112.  
  1113.         const revealSpoilerImages = function(post) {
  1114.             const spoilers = post.querySelectorAll(".imgLink > img:is([src='/spoiler.png'],[src*='/custom.spoiler'])");
  1115.             spoilers.forEach(spoiler => {
  1116.                 spoiler.classList.add('spoiler-thumb');
  1117.                 const parent = spoiler.parentElement;
  1118.                 const hrefTokens = parent.href.split("/");
  1119.                 const fileNameTokens = hrefTokens[4].split(".");
  1120.         
  1121.                 const thumbUrl = `/.media/t_${fileNameTokens[0]}`;
  1122.                 spoiler.src = thumbUrl;
  1123.                 //spoiler.style.border = "2px dotted red";
  1124.             });
  1125.         }
  1126.  
  1127.         if (settings.spoilerImageType.startsWith("reveal")) {
  1128.             addMyStyle("lynx-reveal-spoilerimage",`
  1129.                 img.spoiler-thumb {
  1130.                     transition: 0.2s;
  1131.                     outline: 2px dotted #ff0000ee;
  1132.                     ${settings.spoilerImageType=="reveal_blur" ? "filter: blur(10px);" : ""}
  1133.                 }
  1134.                 img.spoiler-thumb:hover {
  1135.                     filter: blur(0);
  1136.                 }
  1137.             `)
  1138.         }
  1139.     
  1140.         // Add functionality to apply the custom spoiler image CSS
  1141.         let threadSpoilerFound = false;
  1142.         let tsFallbackUsed = false;
  1143.         function setThreadSpoiler(post) {
  1144.             if (threadSpoilerFound) return;
  1145.  
  1146.             let spoilerImageUrl = null;
  1147.  
  1148.             //When the option is "threadAlt", fallback to "thread" if "threadAlt" doesn't exist yet.
  1149.             if (settings.spoilerImageType == "threadAlt") {
  1150.                 const altSpoilerLink = Array.from(post.querySelectorAll('a.originalNameLink[download^="ThreadSpoilerAlt"]')).find(link => /\.(jpg|jpeg|png|webp)$/i.test(link.download));
  1151.                 spoilerImageUrl = altSpoilerLink ? altSpoilerLink.href : null;
  1152.                 tsFallbackUsed = false; //stop looking for threadAlt
  1153.             }
  1154.  
  1155.             if (settings.spoilerImageType == "thread" || (!spoilerImageUrl && !tsFallbackUsed && settings.spoilerImageType == "threadAlt")) {	
  1156.                 const spoilerLink = Array.from(post.querySelectorAll('a.originalNameLink[download^="ThreadSpoiler"]')).find(link => /\.(jpg|jpeg|png|webp)$/i.test(link.download));
  1157.                 spoilerImageUrl = spoilerLink ? spoilerLink.href : null;
  1158.                 if (settings.spoilerImageType == "threadAlt") {
  1159.                     tsFallbackUsed = true; //Keep looking for threadAlt
  1160.                 }
  1161.             } else if (settings.spoilerImageType == "test") {
  1162.                 const myArray = [
  1163.                     'https://8chan.moe/.media/f76e9657d6b506115ccd0ade73d3d562777a441e4b6bb396610669396ff3032a.png',
  1164.                     'https://8chan.moe/.media/1074fdb6eea4ba609910581e7824106736a1bcad446ace1ae0792b231b52cf9a.png',
  1165.                     'https://8chan.moe/.media/c32b4de8490d7e77987f0e2a381d5935ffa6fec9b98c78ea7c05bd4381d6f64b.png',
  1166.                     'https://8chan.moe/.media/bb225302110d52494ec2bea68693d566acee09767212ce4ee8c0d83d49cfa05b.png'
  1167.                 ];
  1168.                 spoilerImageUrl = myArray[Math.floor(Math.random() * myArray.length)];
  1169.                 addMyStyle("lynx-thread-spoiler-css1", `
  1170.                     body {
  1171.                         --spoiler-img: url("${spoilerImageUrl}")
  1172.                     }
  1173.                     .uploadCell:not(.expandedCell) a.imgLink:has(>img[src="/spoiler.png"]),
  1174.                     .uploadCell:not(.expandedCell) a.imgLink:has(>img[src*="/custom.spoiler"]) {
  1175.                         background-image: var(--spoiler-img);
  1176.                         background-size: cover;
  1177.                         background-position: center;
  1178.                         & > img {
  1179.                             opacity: 0;
  1180.                         }
  1181.                     }
  1182.                 `);
  1183.                 threadSpoilerFound = true;
  1184.                 return;
  1185.             }
  1186.  
  1187.             if (spoilerImageUrl) {
  1188.                 document.head?.querySelector("#lynx-thread-spoiler-css2")?.remove(); //Remove if the style already exists (from fallback)
  1189.                 addMyStyle("lynx-thread-spoiler-css2", `
  1190.                     ${settings.overrideBoardSpoilerImage ? '.uploadCell:not(.expandedCell) a.imgLink:has(>img[src*="/custom.spoiler"]),' : "" }
  1191.                     .uploadCell:not(.expandedCell) a.imgLink:has(>img[src="/spoiler.png"]) {
  1192.                         background-image: url("${spoilerImageUrl}");
  1193.                         background-size: cover;
  1194.                         background-position: center;
  1195.                         outline: dashed 2px #ff000090;
  1196.                         & > img {
  1197.                             opacity: 0;
  1198.                         }
  1199.                     }
  1200.                 `);
  1201.                 if (!tsFallbackUsed) {
  1202.                     threadSpoilerFound = true;
  1203.                 }
  1204.             }
  1205.         }
  1206.  
  1207.         if (settings.spoilerImageType=="kachina") {
  1208.             addMyStyle("lynx-kachinaSpoilers",`
  1209.                 ${settings.overrideBoardSpoilerImage ? '.uploadCell:not(.expandedCell) a.imgLink:has(>img[src*="/custom.spoiler"]),' : "" }
  1210.                 .uploadCell:not(.expandedCell) a.imgLink:has(>img[src="/spoiler.png"]) {
  1211.                     background-size: cover;
  1212.                     background-position: center;
  1213.                     margin-right:5px;
  1214.                     background-image: url("data:image/jpeg;base64,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");
  1215.                     & > img {
  1216.                         opacity: 0;
  1217.                     }
  1218.                 }
  1219.             `)
  1220.         }
  1221.  
  1222.         function iterateAllPosts() {
  1223.             //Get ALL posts (this does NOT include inlined posts and hovered posts)
  1224.             const allPosts = document.querySelectorAll("#divThreads > .opCell > .innerOP, .divPosts > .postCell");
  1225.             const postsArray = Array.from(allPosts); //use an array to find the last post
  1226.             postsArray.forEach((post, index) => {
  1227.                 if (index == postsArray.length-1) {
  1228.                     //only the last post sends batching=false
  1229.                     iterateSinglePost(post, true, false);
  1230.                 } else {
  1231.                     iterateSinglePost(post, true, true);
  1232.                 }
  1233.             });
  1234.         }
  1235.  
  1236.         /**
  1237.          * Processes a single post element.
  1238.          *
  1239.          * @param {HTMLElement} post - The post here can be an .innerPost or one of its containers
  1240.          * @param {boolean} newpost - True if this is a new post in the thread (i.e. not a tooltip or inline)
  1241.          * @param {boolean} batching - False if this is not from a batch from iterateAllPosts (or not the last post of the batch)
  1242.          */
  1243.         function iterateSinglePost(post, newpost = false, batching = false) {
  1244.             // console.log("Lynx-- processing post", {post}, {newpost}, {batching});
  1245.             filenameFeatures(post);
  1246.             if (settings.glowFirstPostByID)
  1247.                 glowpost(post, newpost);
  1248.             if (settings.spoilerImageType.startsWith("reveal"))
  1249.                 revealSpoilerImages(post);
  1250.             if (settings.showPostIndex)
  1251.                 addPostCount(post, newpost);
  1252.  
  1253.             //Run only if its a new post in the thread
  1254.             if (newpost) {
  1255.                 if (settings.spoilerImageType=="thread" || settings.spoilerImageType=="threadAlt")
  1256.                     setThreadSpoiler(post);
  1257.                 //This still has to iterate all posts, do it last and only when necessary.
  1258.                 //These are manually ran in the mutation observer
  1259.                 if (batching === false && settings.showScrollbarMarkers)
  1260.                     recreateScrollMarkers();
  1261.             }
  1262.         }
  1263.  
  1264.         //ANYTHING BELOW ONLY RUNS ON THREAD PAGES (if (isThread))
  1265.         //ANYTHING BELOW ONLY RUNS ON THREAD PAGES (if (isThread))
  1266.         //99% of above are functions. They can be ignored.
  1267.         if (isThread) {
  1268.             if (settings.addKeyboardHandlers) {
  1269.                 document.getElementById("qrbody")?.addEventListener("keydown", replyKeyboardShortcuts);
  1270.                 document.getElementById("quick-reply")?.addEventListener('keydown',function(ev) {
  1271.                     if (ev.key == "Escape") {
  1272.                         document.getElementById("quick-reply")?.querySelector(".close-btn").click();
  1273.                     }
  1274.                 })
  1275.             }
  1276.             //I'm not sure who would ever want this on but I'm making it an option anyways
  1277.             if (settings.preserveQuickReply===false) {
  1278.                 document.getElementById("quick-reply")?.querySelector(".close-btn")?.addEventListener("click", function(ev){
  1279.                     document.getElementById("qrbody").value = "";
  1280.                 });
  1281.                 //This doesn't replace the built in onclick but adds to it so the original onclick will still bring up the qr
  1282.                 document.getElementById("replyButton")?.addEventListener("click", function(ev){
  1283.                     ev.preventDefault();
  1284.                     const qrBody = document.getElementById("qrbody");
  1285.                     if (qrBody) {
  1286.                         qrBody.value = "";
  1287.                         qrBody?.focus();
  1288.                     }
  1289.                 });
  1290.             }
  1291.             if (settings.reverseSearchOptions.saucenao) {
  1292.                 //have to shove this at the bottom of the document since the entire thread is inside a form div and I can't nest it
  1293.                 const formm =`
  1294.                 <form target="_blank" action="https://saucenao.com/search.php" method="POST" enctype="multipart/form-data" style="display:none">
  1295.                 <input type="file" name="file" size="50" id='saucenao_file_input'>
  1296.                 <input type="submit" accesskey="s" value="get sauce" id='saucenao_submit'>
  1297.                 </form>`
  1298.                 document.body.insertAdjacentHTML('beforeend', formm);
  1299.             }
  1300.             //Start running and observing, no need for a delay.
  1301.             iterateAllPosts();
  1302.             //Observe posts and all their children
  1303.             const observer = new MutationObserver((mt_callback) => {
  1304.                 let foundNewPost = false;
  1305.                 mt_callback.forEach(mut => {
  1306.                     if (mut.type == "childList" && mut.addedNodes?.length > 0) {
  1307.                         //console.log("MutationObserver!!!");
  1308.                         mut.addedNodes.forEach(node => {
  1309.                             //New posts, new inlined posts, new hovered posts all contain .innerPost and are always in a div container.
  1310.                             //New posts are div.postCell and new inlines are div.inlineQuote
  1311.                             if (node.tagName === "DIV") {
  1312.                                 // console.log("lynx ~ observer:", {node}, {mut});
  1313.                                 //batching=true for both new posts and inlined posts
  1314.                                 if (node.classList.contains("postCell")) {
  1315.                                     foundNewPost = true;
  1316.                                     iterateSinglePost(node, true, true); 
  1317.                                 } else if (node.classList.contains("inlineQuote")) {
  1318.                                     iterateSinglePost(node, false, true);
  1319.                                 }
  1320.                             }
  1321.                         });
  1322.                     }
  1323.                 });
  1324.                 //Manually run all batching=false actions here
  1325.                 if (foundNewPost && settings.showScrollbarMarkers) {
  1326.                     recreateScrollMarkers();
  1327.                 }
  1328.             });
  1329.             observer.observe(document.querySelector(".divPosts"), {childList: true, subtree: true});
  1330.  
  1331.             //Observe the hover tooltip (ignore everything else)
  1332.             const toolObserver = new MutationObserver((mutationsList) => {
  1333.                 for (const mutation of mutationsList) {
  1334.                     if (mutation.type === 'childList') {
  1335.                         mutation.addedNodes.forEach(node => {
  1336.                             if (node.tagName === "DIV" && node.matches(".innerPost, .innerOP")) {
  1337.                                 //New hover tooltip found
  1338.                                 iterateSinglePost(node, false, false);
  1339.                             }
  1340.                         });
  1341.                     }
  1342.                 }
  1343.             });
  1344.             const quoteTooltip = document.body?.querySelector(":scope > div.quoteTooltip");
  1345.             if (quoteTooltip) {
  1346.                 toolObserver.observe(quoteTooltip, {childList: true});
  1347.             }
  1348.         }
  1349.     } //End of runAfterDom()
  1350.  
  1351.     //Starting runAfterDom when the document is ready
  1352.     waitForDom(runAfterDom);
  1353. })();
  1354.