☰

8chanSS

Userscript to style 8chan

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

您可能也喜欢Fullchan X。

安装此脚本 
  1. // ==UserScript==
  2. // @name         8chanSS
  3. // @version      1.47.0
  4. // @namespace    8chanss
  5. // @description  Userscript to style 8chan
  6. // @author       otakudude
  7. // @minGMVer     4.3
  8. // @minFFVer     121
  9. // @license      MIT; https://github.com/otacoo/8chanSS/blob/main/LICENSE 
  10. // @match        *://8chan.moe/*
  11. // @match        *://8chan.se/*
  12. // @exclude      *://8chan.moe/login.html
  13. // @exclude      *://8chan.se/login.html
  14. // @grant        GM.getValue
  15. // @grant        GM.setValue
  16. // @grant        GM.deleteValue
  17. // @grant        GM.listValues
  18. // @run-at       document-start
  19. // @icon         data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAZlBMVEUAAABdlloAhl758AH58AH58AcAhl758ADj4CYAh14AhV4AhV0Ahl748AcChl4Chl0Ab2H58AIAhl758AD58AAAhl757wL48AD47wL78QL47wcAh1748AF3oFfs5yEAh1/68QDz7BM5qSu8AAAAH3RSTlMA/lg/OYtM8g/onXtoXzAaCdzBsIFzczMeaCXXyrmp9ddA3QAAANpJREFUSMft0tkOgjAQheFjtVCQVVxwnfr+L+kWM5FOC73TxP/6fBedFJwpyx5CtSpqSHXWpns4qYxo1cDtkNp7GoOW9KgSwM4+09KeEhmw4H0IuGJDAbCw79a8nwJYFDQCuO1gT8oLWCiKAXavKA5cZ78I5n/wBx7wfb+1TwOggpD2gxxSpvWBrIbY3AcUPK1lkMNbJ4FV4wd964KsQqBF6oAEwcoh2GAk/QlyjNYx4AeHMicGxxoTOrRvIB5IPtULJJhY+QIFJrd9gCUi0tdZjqgu5yYOGAO5G/kyc3TkciPeAAAAAElFTkSuQmCC
  20. // ==/UserScript==
  21.  
  22. function onReady(fn) {
  23.     if (document.readyState === "loading") {
  24.         document.addEventListener("DOMContentLoaded", fn, { once: true });
  25.     } else {
  26.         fn();
  27.     }
  28. }
  29. const faviconManager = (() => {
  30.     const STYLES = [
  31.         "default",
  32.         "eight", "eight_dark",
  33.         "pixel", "pixel_alt"
  34.     ];
  35.     const STATES = ["base", "unread", "notif"];
  36.     const FAVICON_DATA = {
  37.         default: {
  38.             base: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAq1BMVEUAAACKtMV2lqSE1PWZ1Oyr1eaqzNp7udPO7vuc3ffh8vmG0/OB0fKv3e+N0e3B4e693+56x+bb6e6YzeOgydl7wd3L3OOwytS35fjZ8fuQ2feB1Pbo9vyy5Pjm9Pmp4PW85fbW7feO1/S55Pbk8/mq3/TY7fbn9Pnf7/bQ6vWS1fDa7fWH0vCb0+rY6/Pc7POBzezA4/GNz+vJ4+662ebH1958wNzD6vqm4Ph4HvJJAAAAN3RSTlMADwXliF4dGP7949HLn5mUhWllVCglJBf6+fn5+Pjo4N3a2NfV1MzIxb28rayinJKOioB7UzEt0Y3/cQAAAIBJREFUGNOVjsUOhVAMRG97BXcePHd3Q/7/y0hhQWDHrDpJT86wIQHo1t/xHGLb8aNvzHnYFC2KFHh+mu1PNTW6GuVB0vlaJvTsTl2xWjgxw5upCOB3ZLEzXvve5IlE8DdJ5K7QL0nts61cEw9Q8p82kmDGt4ZgbTCwrS/0Rw9IBRlvB34XFuslAAAAAElFTkSuQmCC",
  39.             unread: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAolBMVEUAAACG2vyC1/iH1vaB1/mC1PSC2PuC2fuD2fyE2fyG3P2I3Pqn3vWB1PWO1fKD2fuE2vqE2vyH3Puk4PaK1vSg2/OP1vJ/0fGB0/SF1vaC1faB1vmF2vyy5PiP2PbF6vnK6vjU7/m/5/ao3fKF0/K55PaW2PKK1PGA0/SP2PWA1/mC2fuE2fyD2fyx4vaT1e+S1/PX8PrO7vqb3fjh9Pu25fiNN6jgAAAAMXRSTlMAHK7Kmf6CYlc/EAnrxOt4OSwV/f3y8OrQv7afI/7+/f379/Pz8OLhvLmRb1pK+/PUqRXqEQAAALhJREFUGNN1j8cSgkAAQ7c3dykiSLFTpaiA/v+vCXrAi7klM5nkgUWrFfjVWgrhqMVDnkQREeuPURBCEevjSaNurrmcsYbo4dQ/NYMA7GxTlhinGj/OZ+QAxc1m9DwrRHad91cJXJIdgsDb+5igyxzImGYowf5r76d9TlwgK7qtbRRat+NwwVwBB1EaGutucFFE9m4aYVu6OYwBaRjj7kzQoSmxYjG9U1+IllQm4XDBUI5o5QTxB/wNI78Nh2SdMuEAAAAASUVORK5CYII=",
  40.             notif: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAA4VBMVEUAAACE3vuD1veC1veB2PqB2fuD2/2H2/2I3PqP1vOB1faE2vyN1/WD1PSB2PuE2vzQ7Pak4PaB0/OG0/J/0fGn3vSB1vmC2PqE2vmG2vq54vKf3fWrLzam4PaO1fGD1faP2PWE2fyD2fyD2fzW8PrD5PG11+WXtcW55PVvbnqqOj+XmKaT1e+x3e1+obS4AACBjqGH0/F8vNh5hpuQNj+P2PZyX2+C1/SKEBOC2ftjKjApAAAdAAAJAACD1fXkAADg9Pu05/qb3fi1vsefoq+xhIildHu4PECpMjSkLDDPAQHtACoGAAAAPnRSTlMAEsOumWJVGwnuuT39zIMs/f388erpn3k4I/Tz8/Lmz7laSkH++/v7+vr5+PPv7ezk4M7OzcSdkZFwWTIVCIgxa4YAAADDSURBVBjTdY/VrgJBGIP/cWZm3XE77oLLLm7v/0BAgMANvWuapv3gqlwOboU05wm6esEijClHp1AIwVX49BiSxrFmM8vq0/J8s5yElgDIx/i3Yprl9+zNcUgCiGFj5rqV6n9W+pzUmmBT35DSnRZ/slLhoaZBq9QnkVmcLrK1U6A2NFUadGNSlc/b1UubIdDE80wsP/Df6xeO84cRK0hTYyZpZ9di9pGgQQLP8BUffPfOP+tU4YiJ8XB0wUp4XR/CO+B76XMRs7uqu4cAAAAASUVORK5CYII=",
  41.         },
  42.         eight: {
  43.             base: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAA6lBMVEUAAAAxV2oFSGADP1Y1Wm0zWW1EY3Q1VmgpU2g2VWYkUGUyUWIiTWEAKUcFSmErU2c5W24zVWghUWckTmIKSmEZTmUxUmMwUWP1+fxcc4HL6f7j9f/g7PWi1fWWprFJZXUeSl7Z7v6Myu7d4OOjt8SKrcOSrsFMa30/YnT////C5v/Q6PmHz/nt7/Gw1e+bzu+Dx+7A1+d7wOa+ztqtx9m5v8Sds8KDn7J0lqqJl6GEkZtJfZlRb4E5Zn1Ybnw0YHc3V2kPSWAAQVqY0vZpstqMu9mIutjO0tV5rcyru8dfm7xTmLthh51TfpcZngh2AAAAGHRSTlMA1cx8MBoH8fHm5s3Kv5qUiFhYUFDxmpptBtYcAAAAzUlEQVQY0zWOVRKDQBBEB4+77OLB4+5B43b/64QU8P76VddMQwpTyWGFbEAGXTjoaLxWqmlmSRnF9HUl7bSwKO49fO+vyURQsvCMiDZGY+Xfb1JlQ9iENcJDCMf3SqetOe8tgzDaIz0HTH43GfD8sLfcGCI6VKD7laamtYqNIIhygQHudj6qarDi54aMSRrA1jSfqKkWb5WpFhv/cBYzlyNUc7ClkgnF1+hh2x9pcmomou5cRtpUknYlFhKqznsxux7zNGTUi77LdZg0/QBWixhGoJiKLQAAAABJRU5ErkJggg==",
  44.             unread: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAtFBMVEUAAAAAYYUAYYQAXIAAW38AYYMAY4YAXYAAYIQAZIcAY4Udc5MAWX8BZogldJQAWn6L2fIRa4xy0faB2/xt0vqI3Ph+0vBdxO1Wp8c/i6l41fhPwO1Ivu1Lo8dEoMYegaYYcZMEa46X5f1NxvZfyfNZyPOI1OxqwuV3w947rttputpdttldq8porscrmcNRnbtEmLpOmLU9krQFb5MHZIVIueY6tuaAyeJOstp1vNRCp9Auh6qJsLovAAAADnRSTlMAWfLRzujVm5EzHAqLiBrNc7IAAADDSURBVBjTNY9XEsIwEEPd0mFtp4d0eocU+v3vRRic9yeNZldCCtsgIBlGI5aWbMX6JE2lHdoEgRDzh1QZDGGYALzmJ/Y3JhfvyHUCYi1/eWzS2Iv5VAchYLhH4ZpvZvue8yTYEmRrbeT7rjvbx8cwSAxklMuoKA6D43lho9mI7FYl5/3B3cQXoBZCkKW1PuWFn7MJdoYf9T3riM5z/6pasvPiXVWfKKrGknK3SNPVsqWO2mHK8y17lpqFRjCrO2LYSn0BV4wQhK3VgFcAAAAASUVORK5CYII=",
  45.             notif: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAABEVBMVEUAAAAAW38AYoUAYoQAYYQAZYgAYYMAZIYAXoEBZom1AwbrAABGAAAALT4AAAAAYYRHAAAAAAAadJTeAAABZohHGymuAABFAACcAAAAAAAAAAAAUnIAZ4oAAAAQao2M2/Qic5Rw0/pKv+1EoscAXoD5AAB31fhfxO0egaYpdpUAa40AWX3/AgK/AAC6AABNAACX5f2B2/xr0fqH2/dNxvZy0fVfyfNZyPN80e+I1OxQv+x7xuA7rttmu9ldttlorsddqsdUpsZLocMrmcNEmLpPm7g+iqkFb5MZcJJYwu1IueY6tuZoweROstp1vNRdsdBCp9Bwt8xAk7U6kbRYnbEuh6oJZYWZdYM1RF0AKDwAHjhOZ3nrAAAAHnRSTlMA0FnyjRzo1psy/v785K2UiVwL+PLu6OPLyL6nm49luDk4AAAA4ElEQVQY0zWP5XLDMBAGT5YpnJRRkiHGOg0zc7lheP8HiTN29t/t7NzMByGCjBlBHFyIiNMWbfRIKryv0KRUojTfImHD2fX6lNm/+R4KBD8p9F0J27RBzj3Ho0FhoPOJw4Iy/x9i4+G30dH3UW+3vgFBXJlFRakY/ffsm3d8Admqfmhat2J0fJFLCIDbNcvVt13l7yyeAJjadCRe15RhPJaNJgHIlzrDkqsVx8/38TQAoFH5fz7fmKZzex27ewXgSLusNmvVJUrnvIeMn6TI6FP9scQIJB8zwRDkzLAsQMAJImsd3S869hIAAAAASUVORK5CYII=",
  46.         },
  47.         eight_dark: {
  48.             base: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAA2FBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAmKCkAAAADBAQAAAD1+fxMTEzM6v4vLy7i9f/E6P/v8PKMye2frbiFo7aNpLQ1P0b////Z7/+I0PrQ6Pmk1vab0/bi7PXe6fKfz+6w1O2Cxu15veS/1OPY2dq8ydOrwdKHtdK1traZqbSQmqF8kZ+QlJhshJSBhIZ7fH0+YnY9R09GREMOIiwfJivp+f/X7fyYzO3g4OBmrtTMzMt0pcKnsrpWjq1Ii6xUcIEyZX8ENUgYNkYAKD1NaNryAAAADnRSTlMAzPGY5tV8WFAwGge/iAmaI18AAADKSURBVBjTNY7XFoIwEEQ3CR1NQi/23rsC9q7//0fiAe7bzLlndyBHI5ibSIYCVdgMmTM1SZ51tGQplZOZOwpvt9YRv1SmKCukuXWjIubMMf++IpU8a0bLYuQwnt5Du4U/qI4opWs2xKAJq65tG/XDaOa12IYA2TY6fjA26tW91V4KGuBJ85XaY2PgzTlSAULX/YplGhhBSVL09Efc732wSH17IWUT0L12DcNnp7tTskJOzjX32GyskA4ZJHn0e5OtoEKBjOI3Jlqefl82Et7gg4sWAAAAAElFTkSuQmCC",
  49.             unread: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAA6lBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAQEAAADb3NxEQ0IAAAAAAABISEgAAAAAAAAlKCk9NzGurq6cnJwAAAD+/v73+Pi6u7tNTExGREMwLy7N6v61trY1QEfE6P/t7u+dzu6Mye2rwdKForaNpLTy+f/h9f/Z7//S6vuI0Pqk1vbg6/Sw1O2Cxu2+0uCHtdLKzM2qtbycqrV8kaCPl51shJV8f4I+YnYOIiwfJiud1PaY0vbo6Oh+vuR0vOPg4OBmrtS8ydN0pcLAwMBWjq1Ii6yjpaZUcIEyZX88R08ENUgYNkYAKD0sty6hAAAAFXRSTlMAzZjyWeUa1owv/Oe/roh8UAf26MtVcWhmAAAA10lEQVQY0zWP1ZLDMBRDr+04SbkLpjgMZeZ2mfn/f2ebqas3aTQaHTCyMVEaWXBWhW6rIg40Nv4CrTsdIfijNp22Go22nprzAJ2C1rq7YA5RItZlv92qL7tL5lI25+q4h75X+bT3zHQg5QcBm27GUeT3ewuPc8kw4N0wyYvM7089wSW1gcxuvxhjmZ+VQR0gTNM/x2WFX1zGPGgA7B8mv8RhebTCNa8JAOht8BKGn8k4rFXvrlwA6/A0SJOb4QY15et1+Rwf3u8nsx2tQMPQWmj/Q7BtOP8BG/MW/0ZJlAQAAAAASUVORK5CYII=",
  50.             notif: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAABDlBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAQEAAAAAAAAAAAC2AQHrAAA4AAAAAAAAAABIAgIAAAAAAAAlKCneAABDAACuAABFAACcAAADBAQAAAAAAAC8AABNTE3+AQHN6v72+PmKo7QvLy5GAAD+/v/E6P+Myu6rwtLy+f/h9f/Z7//S6vuI0Pqk1vab0/bg6/Sfz+6w1O2Cxu2+0uHc3d2HtdLKzc61tracqrV8kaBshJV8f4I+YnY5R081QUkOIiwfJiv3AADt7u/r7e6YzO1+vuR0vONmrtS8ydN0pcKtucGnsrqQqLeCordWjq1Ii6yjqaqQmqGOk5i3hYhUcIEyZX8ENUgYNkZGREM1PEEAKD1ovUZyAAAAGnRSTlMAzfLlmliSGtYv/v77v66IfFAH+Ozo4suIXxNuy1MAAADcSURBVBjTNY9VjkJBFERvyxMcxud2Pxfc3cfdffa/ESA09VeVk0oOqBicSo9osEuCTbrO+cDTVd8j78Wi4wRdTzEF2WhMfmU/GJDtkH8rPaBJpXPhbfhCPjMsDVFn2A/k+o/MRm6nfIvppPh4pWCwcSsM7Ur53rcsgRz4tNZ8cmO70vHPLMEMoL36FyLGdrwZMgDzKPo3T9C1H9MpK5kFWFy3f6iJbjjiR34OAMhz9W7+99lszQ72U4c6gLa8qUaX9dqY5IQ4PgUAffly1e5NWQKyylYji2/KDeW5AobCG0Lco88iAAAAAElFTkSuQmCC",
  51.         },
  52.         pixel: {
  53.             base: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAYFBMVEUAAAAAAAAAAABiam00WmxcZWlFTE4jQE1GTU8jQU4yV2g8QUIbNkE/WGRWYWY9WGUAAAAAAADg8vnY6fB5yOyA0fW95fi23fB+z/PQ4Od0weNoeYFWcoBSXmNFS00jP0wFxP2oAAAAEnRSTlMAIRHe3v3w8Nzc/ezs/u7u7EbfERAsAAAAcUlEQVQY05VP1wqAMAw0de82TYf7//9SOhBFELy3G1wuyQcYYw8OVVHBzYJUokzBW3VZg+MYFMhI0ThMMm9zlIXnVmmzbFy0iHtSkmq63mhtYuJQthO8X40OHSHR0DwO4UrsoAziDq84HudcO15P/MAJxpAGt0Xg7i0AAAAASUVORK5CYII=",
  54.             unread: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAYFBMVEUAAAAATHcAIGJii6I0gKFFepYjdJVGepYjdJUAXIFeiaEyf6A8dZIbcJJThZ8/f55WhZ89f58AY4YAM2ng8/p/0vbY6/R5zPC95vq23/TQ5O10xelolKxWj6tFepUjdJUJarSxAAAAFHRSTlMAIBHe3vDw3Nwj/f3s7P7+7u7sRkWW9w4AAAB4SURBVBjTlY/ZDoUwCERL3fcNSnsX/f+/tEpjNCYm8nZgMjOoh9FaXxiyJIPTCSKDJoL9lKc5bIx+U3iOmXjoP6asSzSJKjwTWfdrx6lGnFXKVDWds9a1oliImmns/s6Khygq/g69pAQPjiH0kBTPoc7R4/bEi1kBHCgHTIPhydUAAAAASUVORK5CYII=",
  55.             notif: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAhFBMVEUAAAAAV34AIDg0gKEkdJQjdJUUAAMAAEAyf6AbcJI7dZA/f55MAABAgaBEeZVljaVUhJ4AZIZpkKYAQmp5y/B+0fVrS0224PPf8vnP4uu85vqA0/fY6/NUIivtAABNHynjAAB0xelolKxWj6tNgZpFepUjdJVOTU9fREtAREvaAABiAADosgfnAAAAFHRSTlMAIBHe8NzcIP3s3v7x7u7e7uzeRqhOt1sAAACESURBVBjTlY9ZDoMwDERxCHvp6mASSKH7dv/71YWoAiEh4b83Ho3H3swIIUYchaswGqwgta1N4ccQyABgr4tjoTfA7KPCfKtrFsp63bGqDJ2vloXy5klUcZKRMfRsO8e9Uslhl12IXp8HZ/SOGE+5bN4NX3EZ6IPr0SvMrs6/x+SJBfMF/doItAPX5RIAAAAASUVORK5CYII=",
  56.         },
  57.         pixel_alt: {
  58.             base: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAY1BMVEUAAAAATHcAIGJii6I0gKFFepYjdJVGepYjdJUAXIFeiaEyf6A8dZIbcJJThZ8/f55WhZ89f58AY4YAQmoAJGjg8/p/0vbY6/R5zPC95vq23/TQ5O10xelolKxWj6tFepUjdJUOfB3LAAAAFXRSTlMAIBHe3vDw3Nwj/f3s7P7+7u7sRkaqQLDYAAAAeUlEQVQY05WP6Q6EMAiES73vYxdKu4e+/1NapTEaExP598FkZlA3o7U+MWRJBocTRAZNBNspT3NYGf2m8Bwz8dB/TFmXaBJVeCay7teO7xpxUilT1XTOWteKYiZqXmP3d1Y8RFHxd+glJXhwDKGHpHgOdfYelycezAI9gweHH0yPzQAAAABJRU5ErkJggg==",
  59.             unread: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAhFBMVEUAAAAjR1sKChFJeZBBa4FAZ3tCbIEVFRYABA9IeI9OaXlReI1MTExSeo9WcYBxh5RjfYw4WGt0ipcdKTh7y+6A0vdqbm/f8fi85fl+0PTY6vK23fDt7OzP4OdVWFlOUlS44PPj4+NZdITR4+t3xefa2tpyj55jiZ1Ba4BgZ2tiYF9ATFKjqzLCAAAAFHRSTlMAIBHe8O3c3CD93v7x7u7e7uzeRvBdAgMAAACFSURBVBjTlY9ZDoMwDERxIKylqwOBlATo3t7/fjVpVIGQkPDfG4/GY29hGGMTjqNNFI9WkOpOpzAwhEEIcGyKc9HsgNhHgfn+UpNQ1lvLlZDtvdcklL0XoEh4pqRUr846nqLip0P2aNXnbSjj50jwmnNzM3TFZaAProdVBnZ1/j1mT6yYLxHCCNKMC/PDAAAAAElFTkSuQmCC",
  60.             notif: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAdVBMVEUAAAAkSFwKChFAaX9JeZAABBhCbIEVAABIeI9yiJVObnxReI1MAABSeo9WcYBjfYw4WGsdKTiA0vd7y+5rS0233/JSHiPf8vnP4um85fnY6/LtAABZdobjAAB3xedyj55jiZ1Ba4BOTU9gREtAREvaAABiAADFYUIqAAAAEnRSTlMAIRHv3iDc3P3e3v7x7u7u7EYDRb2ZAAAAgklEQVQY05WPWQ7CMAxE67jpSlnsOk1Kyw73PyJJFCEQUqX6741H43G2MEqpH9blptRfK2jMbBoIDAUWoGvbH3tbg+ecibudHb0wjNvIRE7Ok/HCMGXIVGErzsl9jo4rER727UXk8bqFjOio+NSheYYrKYNzSD2iEjjV+fT4e2LFvAFuzge5hY5wYgAAAABJRU5ErkJggg==",
  61.         }
  62.     };
  63.     let currentStyle = "default";
  64.     let currentState = "base";
  65.     function removeFavicons() {
  66.         document.querySelectorAll('link[rel="icon"], link[rel="shortcut icon"]').forEach(link => link.remove());
  67.     }
  68.     function insertFavicon(href) {
  69.         const link = document.createElement('link');
  70.         link.rel = 'icon';
  71.         link.type = 'image/png';
  72.         link.href = href;
  73.         document.head.appendChild(link);
  74.     }
  75.     async function getUserFaviconStyle() {
  76.         let style = "default";
  77.         try {
  78.             style = await getSetting("customFavicon_faviconStyle");
  79.         } catch { }
  80.         if (!STYLES.includes(style)) style = "default";
  81.         return style;
  82.     }
  83.     async function setFaviconStyle(style, state = "base") {
  84.         if (!STYLES.includes(style)) style = "default";
  85.         if (!STATES.includes(state)) state = "base";
  86.         const url = (FAVICON_DATA?.[style]?.[state]) || FAVICON_DATA.default.base;
  87.         removeFavicons();
  88.         insertFavicon(url);
  89.         currentStyle = style;
  90.         currentState = state;
  91.         document.dispatchEvent(new CustomEvent("faviconStateChanged", {
  92.             detail: { style, state }
  93.         }));
  94.     }
  95.     async function setFavicon(state = "base") {
  96.         if (!STATES.includes(state)) state = "base";
  97.         const style = await getUserFaviconStyle();
  98.         await setFaviconStyle(style, state);
  99.     }
  100.     async function resetFavicon() {
  101.         await setFavicon("base");
  102.     }
  103.     function getCurrentFaviconState() {
  104.         return { style: currentStyle, state: currentState };
  105.     }
  106.  
  107.     return {
  108.         setFavicon,
  109.         setFaviconStyle,
  110.         resetFavicon,
  111.         getCurrentFaviconState,
  112.         STYLES,
  113.         STATES
  114.     };
  115. })();
  116. onReady(async function () {
  117.     "use strict";
  118.     const divThreads = document.getElementById("divThreads");
  119.     const innerOP = document.querySelector(".innerOP");
  120.     const divPosts = document.querySelector(".divPosts");
  121.     const opHeadTitle = document.querySelector(".opHead.title");
  122.     const scriptSettings = {
  123.         site: {
  124.             _siteTWTitle: { type: "title", label: ":: Thread Watcher" },
  125.             _siteSection1: { type: "separator" },
  126.             alwaysShowTW: { label: "Pin Thread Watcher", default: false },
  127.             autoExpandTW: { label: "Auto Expand Thread Watcher", default: false },
  128.             _siteSiteTitle: { type: "title", label: ":: Site" },
  129.             _siteSection2: { type: "separator" },
  130.             customFavicon: {
  131.                 label: "Custom Favicon",
  132.                 default: false,
  133.                 subOptions: {
  134.                     faviconStyle: {
  135.                         label: "Favicon Style",
  136.                         type: "select",
  137.                         default: "default",
  138.                         options: [
  139.                             { value: "default", label: "Default" },
  140.                             { value: "pixel", label: "Pixel" },
  141.                             { value: "pixel_alt", label: "Pixel Alt" },
  142.                             { value: "eight", label: "Eight" },
  143.                             { value: "eight_dark", label: "Eight Dark" }
  144.                         ]
  145.                     }
  146.                 }
  147.             },
  148.             enableBottomHeader: { label: "Bottom Header", default: false },
  149.             enableAutoHideHeaderScroll: { label: "Auto-hide Header On Scroll", default: false },
  150.             enableHeaderCatalogLinks: {
  151.                 label: "Header Catalog Links",
  152.                 default: true,
  153.                 subOptions: {
  154.                     openInNewTab: {
  155.                         label: "Always open in new tab",
  156.                         default: false,
  157.                     }
  158.                 }
  159.             },
  160.             enableScrollArrows: { label: "Show Up/Down Arrows", default: false },
  161.             _siteMediaTitle: { type: "title", label: ":: Media" },
  162.             _siteSection3: { type: "separator" },
  163.             enableThreadImageHover: { label: "Thread Image Hover", default: true },
  164.             blurSpoilers: {
  165.                 label: "Blur Spoilers",
  166.                 default: false,
  167.                 subOptions: {
  168.                     removeSpoilers: {
  169.                         label: "Remove Spoilers",
  170.                         default: false
  171.                     }
  172.                 }
  173.             },
  174.             enableMediaViewer: {
  175.                 label: "Enable Advanced Media Viewer",
  176.                 default: false,
  177.                 subOptions: {
  178.                     viewerStyle: {
  179.                         label: "Style",
  180.                         type: "select",
  181.                         default: "native",
  182.                         options: [
  183.                             { value: "native", label: "Native" },
  184.                             { value: "topright", label: "Pin Top Right" },
  185.                             { value: "topleft", label: "Pin Top Left" }
  186.                         ]
  187.                     }
  188.                 }
  189.             },
  190.             hoverVideoVolume: { label: "Hover Media Volume (0-100%)", default: 50, type: "number", min: 0, max: 100 }
  191.         },
  192.         threads: {
  193.             _threadsNotiTitle: { type: "title", label: ":: Notifications" },
  194.             _threadsSection1: { type: "separator" },
  195.             beepOnYou: { label: "Beep on (You)", default: false },
  196.             notifyOnYou: {
  197.                 label: "Tab Notification when (You) (!)",
  198.                 default: true,
  199.                 subOptions: {
  200.                     customMessage: {
  201.                         label: "Custom Text (max: 8 chars.)",
  202.                         default: "",
  203.                         type: "text",
  204.                         maxLength: 9
  205.                     }
  206.                 }
  207.             },
  208.             _threadsNavTitle: { type: "title", label: ":: Navigation & Others" },
  209.             _threadsSection3: { type: "separator" },
  210.             enableScrollSave: {
  211.                 label: "Save Scroll Position",
  212.                 default: true,
  213.                 subOptions: {
  214.                     showUnreadLine: {
  215.                         label: "Show Unread Line",
  216.                         default: true,
  217.                     }
  218.                 }
  219.             },
  220.             quoteThreading: { label: "Enable Quote Threading", default: false },
  221.             enableHashNav: { label: "Hash Navigation", default: false },
  222.             threadStatsInHeader: { label: "Thread Stats in Header", default: false },
  223.             watchThreadOnReply: { label: "Watch Thread on Reply", default: true },
  224.             scrollToBottom: { label: "Don't Scroll to Bottom on Reply", default: true },
  225.             deleteSavedName: { label: "Delete Name Checkbox", default: false }
  226.         },
  227.         catalog: {
  228.             enableCatalogImageHover: { label: "Catalog Image Hover", default: true },
  229.             enableThreadHiding: { label: "Enable Thread Hiding", default: false },
  230.             openCatalogThreadNewTab: { label: "Always Open Threads in New Tab", default: false }
  231.         },
  232.         styling: {
  233.             _stylingSiteTitle: { type: "title", label: ":: Site Styling" },
  234.             _stylingSection1: { type: "separator" },
  235.             hideAnnouncement: { label: "Hide Announcement", default: false },
  236.             hidePanelMessage: { label: "Hide Panel Message", default: false },
  237.             hidePostingForm: {
  238.                 label: "Hide Posting Form",
  239.                 default: false,
  240.                 subOptions: {
  241.                     showCatalogForm: {
  242.                         label: "Don't Hide in Catalog",
  243.                         default: false
  244.                     }
  245.                 }
  246.             },
  247.             hideBanner: { label: "Hide Board Banners", default: false },
  248.             hideDefaultBL: { label: "Hide Default Board List", default: true },
  249.             hideNoCookieLink: { label: "Hide No Cookie? Link", default: false },
  250.             hideJannyTools: { label: "Hide Janitor Forms", default: false },
  251.             _stylingThreadTitle: { type: "title", label: ":: Thread Styling" },
  252.             _stylingSection2: { type: "separator" },
  253.             highlightOnYou: { label: "Style (You) posts", default: true },
  254.             enableStickyQR: { label: "Enable Sticky Quick Reply", default: false },
  255.             fadeQuickReply: { label: "Fade Quick Reply", default: false },
  256.             enableFitReplies: { label: "Fit Replies", default: false },
  257.             enableSidebar: {
  258.                 label: "Enable Sidebar",
  259.                 default: false,
  260.                 subOptions: {
  261.                     leftSidebar: {
  262.                         label: "Sidebar on Left",
  263.                         default: false
  264.                     }
  265.                 }
  266.             },
  267.             threadHideCloseBtn: { label: "Hide Inline Close Button", default: false },
  268.             hideHiddenPostStub: { label: "Hide Stubs of Hidden Posts", default: false, },
  269.             hideCheckboxes: { label: "Hide Post Checkbox", default: false }
  270.         },
  271.         miscel: {
  272.             enableShortcuts: { label: "Enable Keyboard Shortcuts", type: "checkbox", default: true },
  273.             enhanceYoutube: { label: "Enhanced Youtube Links", type: "checkbox", default: true },
  274.             highlightNewIds: {
  275.                 label: "Highlight New IDs",
  276.                 default: false,
  277.                 subOptions: {
  278.                     idHlStyle: {
  279.                         label: "Highlight Style",
  280.                         type: "select",
  281.                         default: "moetext",
  282.                         options: [
  283.                             { value: "moetext", label: "Moe" },
  284.                             { value: "glow", label: "Glow" },
  285.                             { value: "dotted", label: "Border" }
  286.                         ]
  287.                     }
  288.                 }
  289.             },
  290.             enableIdFilters: { label: "Show only posts by ID when ID is clicked", type: "checkbox", default: true },
  291.             switchTimeFormat: { label: "Enable 12-hour Clock (AM/PM)", default: false },
  292.             truncFilenames: {
  293.                 label: "Truncate filenames",
  294.                 default: false,
  295.                 subOptions: {
  296.                     customTrunc: {
  297.                         label: "Max filename length (min: 5, max: 50)",
  298.                         default: 15,
  299.                         type: "number",
  300.                         min: 5,
  301.                         max: 50
  302.                     }
  303.                 }
  304.             }
  305.         }
  306.     };
  307.  
  308.     Object.freeze(scriptSettings); 
  309.     let flatSettings = null;
  310.     function flattenSettings() {
  311.         if (flatSettings !== null) return flatSettings; 
  312.         const result = {};
  313.         Object.keys(scriptSettings).forEach((category) => {
  314.             Object.keys(scriptSettings[category]).forEach((key) => {
  315.                 if (key.startsWith('_')) return;
  316.                 result[key] = scriptSettings[category][key];
  317.                 if (!scriptSettings[category][key].subOptions) return;
  318.                 Object.keys(scriptSettings[category][key].subOptions).forEach(
  319.                     (subKey) => {
  320.                         const fullKey = `${key}_${subKey}`;
  321.                         result[fullKey] =
  322.                             scriptSettings[category][key].subOptions[subKey];
  323.                     }
  324.                 );
  325.             });
  326.         });
  327.         flatSettings = Object.freeze(result);
  328.         return flatSettings;
  329.     }
  330.     flattenSettings();
  331.     async function getSetting(key) {
  332.         if (!flatSettings[key]) {
  333.             console.warn(`Setting key not found: ${key}`);
  334.             return false;
  335.         }
  336.         let val;
  337.         try {
  338.             val = await GM.getValue("8chanSS_" + key, null);
  339.         } catch (err) {
  340.             console.error(`Failed to get setting for key ${key}:`, err);
  341.             return flatSettings[key]?.default ?? false;
  342.         }
  343.         if (val === null) return flatSettings[key].default;
  344.         if (flatSettings[key].type === "number") return Number(val);
  345.         if (flatSettings[key].type === "text") return String(val).replace(/[<>"']/g, "").slice(0, flatSettings[key].maxLength || 32);
  346.         if (flatSettings[key].type === "textarea") return String(val);
  347.         if (flatSettings[key].type === "select") return String(val);
  348.         return val === "true";
  349.     }
  350.  
  351.     async function setSetting(key, value) {
  352.         try {
  353.             await GM.setValue("8chanSS_" + key, String(value));
  354.         } catch (err) {
  355.             console.error(`Failed to set setting for key ${key}:`, err);
  356.         }
  357.     }
  358.     async function featureCssClassToggles() {
  359.         document.documentElement.classList.add("8chanSS");
  360.         const enableSidebar = await getSetting("enableSidebar");
  361.         const enableSidebar_leftSidebar = await getSetting("enableSidebar_leftSidebar");
  362.  
  363.         const classToggles = {
  364.             enableFitReplies: "fit-replies",
  365.             enableSidebar_leftSidebar: "ss-leftsidebar",
  366.             enableStickyQR: "sticky-qr",
  367.             fadeQuickReply: "fade-qr",
  368.             enableBottomHeader: "bottom-header",
  369.             hideHiddenPostStub: "hide-stub",
  370.             hideBanner: "disable-banner",
  371.             hidePostingForm: "hide-posting-form",
  372.             hidePostingForm_showCatalogForm: "show-catalog-form",
  373.             hideDefaultBL: "hide-defaultBL",
  374.             hidePanelMessage: "hide-panelmessage",
  375.             highlightOnYou: "highlight-you",
  376.             threadHideCloseBtn: "hide-close-btn",
  377.             hideCheckboxes: "hide-checkboxes",
  378.             hideNoCookieLink: "hide-nocookie",
  379.             autoExpandTW: "auto-expand-tw",
  380.             hideJannyTools: "hide-jannytools"
  381.         };
  382.         if (enableSidebar && !enableSidebar_leftSidebar) {
  383.             document.documentElement.classList.add("ss-sidebar");
  384.         } else {
  385.             document.documentElement.classList.remove("ss-sidebar");
  386.         }
  387.         const settingKeys = Object.keys(classToggles);
  388.         const settingValues = await Promise.all(settingKeys.map(getSetting));
  389.         settingKeys.forEach((key, i) => {
  390.             const className = classToggles[key];
  391.             if (settingValues[i]) {
  392.                 document.documentElement.classList.add(className);
  393.             } else {
  394.                 document.documentElement.classList.remove(className);
  395.             }
  396.         });
  397.         const path = window.location.pathname.toLowerCase();
  398.         const urlClassMap = [
  399.             { pattern: /\/catalog\.html$/i, className: "is-catalog" },
  400.             { pattern: /\/res\/[^/]+\.html$/i, className: "is-thread" },
  401.             { pattern: /\/[^/]+\/$/i, className: "is-index" },
  402.         ];
  403.  
  404.         urlClassMap.forEach(({ pattern, className }) => {
  405.             if (pattern.test(path)) {
  406.                 document.documentElement.classList.add(className);
  407.             } else {
  408.                 document.documentElement.classList.remove(className);
  409.             }
  410.         });
  411.     }
  412.     featureCssClassToggles();
  413.     async function featureSidebar() {
  414.         const enableSidebar = await getSetting("enableSidebar");
  415.         const enableSidebar_leftSidebar = await getSetting("enableSidebar_leftSidebar");
  416.  
  417.         const mainPanel = document.getElementById("mainPanel");
  418.         if (!mainPanel) return;
  419.  
  420.         if (enableSidebar && enableSidebar_leftSidebar) {
  421.             mainPanel.style.marginLeft = "19rem";
  422.             mainPanel.style.marginRight = "0";
  423.         } else if (enableSidebar) {
  424.             mainPanel.style.marginRight = "19rem";
  425.             mainPanel.style.marginLeft = "0";
  426.         } else {
  427.             mainPanel.style.marginRight = "0";
  428.             mainPanel.style.marginLeft = "0";
  429.         }
  430.     }
  431.     featureSidebar();
  432.     const currentPath = window.location.pathname.toLowerCase();
  433.     const currentHost = window.location.hostname.toLowerCase();
  434.  
  435.     let css = "";
  436.  
  437.     if (/^8chan\.(se|moe)$/.test(currentHost)) {
  438.         css += ":not(.is-catalog) body{margin:0}#sideCatalogDiv{z-index:200;background:var(--background-gradient)}#navFadeEnd,#navFadeMid,.watchedNotification::before,:root.disable-banner #bannerImage,:root.hide-announcement #dynamicAnnouncement,:root.hide-checkboxes .deletionCheckBox,:root.hide-close-btn .inlineQuote>.innerPost>.postInfo.title>a:first-child,:root.hide-jannytools #actionsForm,:root.hide-jannytools #boardContentLinks,:root.hide-nocookie #captchaBody>table:nth-child(2)>tbody:first-child>tr:nth-child(2),:root.hide-panelmessage #panelMessage,:root.hide-posting-form #postingForm{display:none}:root.hide-defaultBL #navTopBoardsSpan{display:none!important}:root.is-catalog.show-catalog-form #postingForm{display:block!important}footer{visibility:hidden;height:0}nav.navHeader{z-index:300}nav.navHeader>.nav-boards:hover{overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}:not(:root.bottom-header) .navHeader{box-shadow:0 1px 2px rgba(0,0,0,.15)}:root.bottom-header nav.navHeader{top:auto!important;bottom:0!important;box-shadow:0 -1px 2px rgba(0,0,0,.15)}:root.highlight-you .innerOP:has(> .opHead.title > .youName),:root.highlight-you .innerPost:has(> .postInfo.title > .youName){border-left:dashed #68b723 2px}:root.highlight-you .innerPost:has(>.divMessage>.you),:root.highlight-you .innerPost:has(>.divMessage>:not(div)>.you),:root.highlight-you .innerPost:has(>.divMessage>:not(div)>:not(div)>.you){border-left:solid var(--subject-color) 2px}:root.fit-replies :not(.hidden).innerPost{margin-left:10px;display:flow-root}:root.fit-replies :not(.hidden,.inlineQuote).innerPost{margin-left:0}.originalNameLink{display:inline;overflow-wrap:anywhere;white-space:normal}.multipleUploads .uploadCell:not(.expandedCell){max-width:215px}:not(#media-viewer)>.imgExpanded,:not(#media-viewer)>video{max-height:90vh!important;object-fit:contain;width:auto!important}:not(:root.auto-expand-tw) #watchedMenu .floatingContainer{overflow-x:hidden;overflow-wrap:break-word}:root.auto-expand-tw #watchedMenu .floatingContainer{height:fit-content!important;padding-bottom:10px}.watchedCellLabel a::before{content:attr(data-board);color:#aaa;margin-right:4px;font-weight:700}.watchButton.watched-active::before{color:#dd003e!important}#media-viewer,#multiboardMenu,#settingsMenu,#watchedMenu{font-size:smaller;padding:5px!important;box-shadow:-3px 3px 2px 0 rgba(0,0,0,.19)}#watchedMenu,#watchedMenu .floatingContainer{min-width:200px;max-width:100vw}.watchedNotification::before{padding-right:2px}#watchedMenu .floatingContainer{scrollbar-width:thin;scrollbar-color:var(--link-color) var(--contrast-color)}.scroll-arrow-btn{position:fixed;right:50px;width:36px;height:35px;background:#222;color:#fff;border:none;border-radius:50%;box-shadow:0 2px 8px rgba(0,0,0,.18);font-size:22px;cursor:pointer;opacity:.7;z-index:800;display:flex;align-items:center;justify-content:center;transition:opacity .2s,background .2s}:root:not(.is-index,.is-catalog).ss-sidebar .scroll-arrow-btn{right:330px!important}.scroll-arrow-btn:hover{opacity:1;background:#444}#scroll-arrow-up{bottom:80px}#scroll-arrow-down{bottom:32px}.innerUtility.top{margin-top:2em;background-color:transparent!important;color:var(--link-color)!important}.innerUtility.top a{color:var(--link-color)!important}.bumpLockIndicator::after{padding-right:3px}.floatingMenu.focused{z-index:305!important}#quick-reply{padding:0}#media-viewer{padding:20px 0 0!important}#media-viewer.topright{top:26px!important;right:0!important;left:auto!important;max-height:97%!important;max-width:max-content!important}#media-viewer.topleft{top:26px!important;left:0!important;right:auto!important;max-height:97%!important;max-width:max-content!important}#media-viewer.topright::after{pointer-events:none}#media-viewer.topleft::after{pointer-events:none}.ss-chevron{transition:transform .2s;margin-left:6px;font-size:12px;display:inline-block}a.imgLink[data-filemime^='audio/'],a.originalNameLink[href$='.m4a'],a.originalNameLink[href$='.mp3'],a.originalNameLink[href$='.ogg'],a.originalNameLink[href$='.wav']{position:relative}.audio-preview-indicator{display:none;position:absolute;background:rgba(0,0,0,.7);color:#fff;padding:5px;font-size:12px;border-radius:3px;z-index:1000;left:0;top:0;white-space:nowrap;pointer-events:none}a.originalNameLink:hover .audio-preview-indicator,a[data-filemime^='audio/']:hover .audio-preview-indicator{display:block}.yt-icon{width:16px;height:13px;vertical-align:middle;margin-right:2px}.id-glow{box-shadow:0 0 12px var(--subject-color)}.id-dotted{border:2px dotted #fff}";
  439.     }
  440.     if (/\/res\/[^/]+\.html$/.test(currentPath)) {
  441.         css += ":root.sticky-qr #quick-reply{display:block;top:auto!important;bottom:0}:root.sticky-qr.ss-sidebar #quick-reply{left:auto!important;right:0!important}:root.sticky-qr.ss-leftsidebar #quick-reply{left:0!important;right:auto!important}:root.sticky-qr #qrbody{resize:vertical;max-height:50vh;height:130px}#selectedDivQr,:root.sticky-qr #selectedDiv{display:inline-flex;overflow:scroll hidden;max-width:300px}#qrbody{min-width:300px}:root.bottom-header #quick-reply{bottom:28px!important}:root.fade-qr #quick-reply{padding:0;opacity:.7;transition:opacity .3s ease}:root.fade-qr #quick-reply:focus-within,:root.fade-qr #quick-reply:hover{opacity:1}#qrFilesBody{max-width:310px}#quick-reply{box-shadow:-3px 3px 2px 0 rgba(0,0,0,.19)}#unread-line{height:2px;border:none!important;pointer-events:none!important;background-image:linear-gradient(to left,rgba(185,185,185,.2),var(--text-color),rgba(185,185,185,.2));margin:-3px auto 0 auto;width:60%}:root.ss-sidebar #bannerImage{width:19rem;right:0;position:fixed;top:26px}:root.ss-sidebar.bottom-header #bannerImage{top:0!important}:root.ss-leftsidebar #bannerImage{width:19rem;left:0;position:fixed;top:26px}:root.ss-leftsidebar.bottom-header #bannerImage{top:0!important}.quoteTooltip{z-index:999}.nestedQuoteLink{text-decoration:underline dashed!important}:root.hide-stub .unhideButton{display:none}.quoteTooltip .innerPost{overflow:hidden}.inlineQuote .innerPost,.quoteTooltip .innerPost{box-shadow:-1px 1px 2px 0 rgba(0,0,0,.19)}.inlineQuote{margin-top:4px}.postInfo.title>.inlineQuote{margin-left:15px}.postCell.is-hidden-by-filter{display:none}.reply-inlined{opacity:.5;text-decoration:underline dashed!important;text-underline-offset:2px}.quote-inlined{opacity:.5;text-decoration:underline dashed!important;text-underline-offset:2px}.target-highlight{background:var(--marked-color);border-color:var(--marked-border-color);color:var(--marked-text-color)}.statLabel{color:var(--link-color)}.statNumb{color:var(--text-color)}.postCell::before{display:inline!important;height:auto!important}.threadedReplies{border-left:1px solid #ccc;padding-left:15px}";
  442.     }
  443.     if (/\/catalog\.html$/.test(currentPath)) {
  444.         css += "#postingForm{margin:2em auto}#divTools>div:nth-child(5){float:left!important;margin-top:9px!important;margin-right:8px}";
  445.     }
  446.  
  447.     if (!document.getElementById('8chSS')) {
  448.         const style = document.createElement('style');
  449.         style.id = '8chSS';
  450.         style.textContent = css;
  451.         document.head.appendChild(style);
  452.     }
  453.     const featureMap = [
  454.         { key: "enableScrollSave", fn: featureSaveScroll },
  455.         { key: "watchThreadOnReply", fn: featureWatchThreadOnReply },
  456.         { key: "blurSpoilers", fn: featureBlurSpoilers },
  457.         { key: "enableHeaderCatalogLinks", fn: featureHeaderCatalogLinks },
  458.         { key: "openCatalogThreadNewTab", fn: catalogThreadsInNewTab },
  459.         { key: "deleteSavedName", fn: featureDeleteNameCheckbox },
  460.         { key: "enableScrollArrows", fn: featureScrollArrows },
  461.         { key: "alwaysShowTW", fn: featureAlwaysShowTW },
  462.         { key: "scrollToBottom", fn: preventFooterScrollIntoView },
  463.         { key: "enableThreadHiding", fn: featureCatalogHiding },
  464.         { key: "switchTimeFormat", fn: featureLabelCreated12h },
  465.         { key: "enableIdFilters", fn: enableIdFiltering },
  466.         { key: "enhanceYoutube", fn: enhanceYouTubeLinks },
  467.         { key: "threadStatsInHeader", fn: threadInfoHeader },
  468.         { key: "enableHashNav", fn: hashNavigation },
  469.         { key: "hideAnnouncement", fn: featureHideAnnouncement },
  470.         { key: "enableAutoHideHeaderScroll", fn: autoHideHeaderOnScroll },
  471.         { key: "enableMediaViewer", fn: mediaViewerPositioning },
  472.         { key: "customFavicon", fn: enableFavicon },
  473.         { key: "highlightNewIds", fn: featureHighlightNewIds },
  474.         { key: "quoteThreading", fn: featureQuoteThreading },
  475.     ];
  476.     for (const { key, fn } of featureMap) {
  477.         try {
  478.             if (await getSetting(key)) {
  479.                 fn();
  480.             }
  481.         } catch (e) {
  482.             console.error(`${fn.name || 'Feature'} failed:`, e);
  483.         }
  484.     }
  485.     if (await getSetting("truncFilenames")) {
  486.         try {
  487.             const filenameLength = await getSetting("truncFilenames_customTrunc");
  488.             truncateFilenames(filenameLength);
  489.         } catch (e) {
  490.             console.error("truncateFilenames failed:", e);
  491.         }
  492.     }
  493.     async function enableFavicon() {
  494.         try {
  495.             const customFaviconEnabled = await getSetting("customFavicon");
  496.             const selectedStyle = await getSetting("customFavicon_faviconStyle");
  497.  
  498.             if (customFaviconEnabled) {
  499.                 if (selectedStyle && typeof selectedStyle === 'string') {
  500.                     await faviconManager.setFaviconStyle(selectedStyle);
  501.                 } else {
  502.                     console.warn("Invalid favicon style:", selectedStyle);
  503.                     await faviconManager.setFaviconStyle("eight_dark");
  504.                 }
  505.             } else {
  506.                 await faviconManager.resetFavicon();
  507.             }
  508.         } catch (e) {
  509.             console.error("Error updating favicon:", e);
  510.         }
  511.     }
  512.     const isCatalogPage = /\/catalog\.html$/.test(window.location.pathname.toLowerCase());
  513.     let imageHoverEnabled = false;
  514.     try {
  515.         if (isCatalogPage) {
  516.             imageHoverEnabled = await getSetting("enableCatalogImageHover");
  517.         } else {
  518.             imageHoverEnabled = await getSetting("enableThreadImageHover");
  519.         }
  520.         if (imageHoverEnabled) {
  521.             localStorage.removeItem("hoveringImage");
  522.             featureImageHover();
  523.         }
  524.     } catch (e) {
  525.         console.error("featureImageHover failed:", e);
  526.     }
  527.     async function featureSaveScroll() {
  528.         function getDivPosts() {
  529.             return document.querySelector(".divPosts");
  530.         }
  531.         const STORAGE_KEY = "8chanSS_scrollPositions";
  532.         const UNREAD_LINE_ID = "unread-line";
  533.         const MAX_THREADS = 150;
  534.         const threadPagePattern = /^\/[^/]+\/res\/[^/]+\.html$/i;
  535.         if (!threadPagePattern.test(window.location.pathname)) return;
  536.         function getBoardAndThread() {
  537.             const match = window.location.pathname.match(/^\/([^/]+)\/res\/([^/.]+)\.html$/i);
  538.             if (!match) return null;
  539.             return { board: match[1], thread: match[2] };
  540.         }
  541.         async function getAllSavedScrollData() {
  542.             const saved = await GM.getValue(STORAGE_KEY, null);
  543.             if (!saved) return {};
  544.             try { return JSON.parse(saved); } catch { return {}; }
  545.         }
  546.         async function setAllSavedScrollData(data) {
  547.             await GM.setValue(STORAGE_KEY, JSON.stringify(data));
  548.         }
  549.         function getCurrentPostCount() {
  550.             const divPosts = getDivPosts();
  551.             if (!divPosts) return 0;
  552.             return divPosts.querySelectorAll(":scope > .postCell[id]").length;
  553.         }
  554.         function removeUnreadLineMarker() {
  555.             const oldMarker = document.getElementById(UNREAD_LINE_ID);
  556.             if (oldMarker && oldMarker.parentNode) {
  557.                 oldMarker.parentNode.removeChild(oldMarker);
  558.             }
  559.         }
  560.         let lastSeenPostCount = 0;
  561.         let unseenCount = 0;
  562.         let tabTitleBase = null;
  563.         let previousFaviconState = null;
  564.         const customFaviconEnabled = await getSetting("customFavicon");
  565.         
  566.         async function updateTabTitle() {
  567.             if (window.isNotifying) return;
  568.             if (!tabTitleBase) tabTitleBase = document.title.replace(/^\(\d+\)\s*/, "");
  569.             document.title = unseenCount > 0 ? `(${unseenCount}) ${tabTitleBase}` : tabTitleBase;
  570.             const { style, state } = faviconManager.getCurrentFaviconState();
  571.  
  572.             if (unseenCount > 0 && customFaviconEnabled) {
  573.                 if (state !== "unread") {
  574.                     previousFaviconState = { style, state };
  575.                 }
  576.                 faviconManager.setFaviconStyle(style, "unread");
  577.             } else if (unseenCount == 0 && customFaviconEnabled) {
  578.                 if (state === "unread" && previousFaviconState) {
  579.                     faviconManager.setFaviconStyle(previousFaviconState.style, previousFaviconState.state);
  580.                     previousFaviconState = null;
  581.                 } else if (state === "unread") {
  582.                     faviconManager.setFavicon("base");
  583.                 }
  584.             }
  585.         }
  586.         async function updateUnseenCountFromSaved() {
  587.             const info = getBoardAndThread();
  588.             if (!info) return;
  589.             const allData = await getAllSavedScrollData();
  590.             const key = `${info.board}/${info.thread}`;
  591.             const saved = allData[key];
  592.             const currentCount = getCurrentPostCount();
  593.             lastSeenPostCount = (saved && typeof saved.lastSeenPostCount === "number") ? saved.lastSeenPostCount : 0;
  594.             unseenCount = Math.max(0, currentCount - lastSeenPostCount);
  595.             updateTabTitle();
  596.         }
  597.         let lastScrollY = window.scrollY;
  598.         async function onScrollUpdateSeen() {
  599.             const info = getBoardAndThread();
  600.             if (!info || !(await getSetting("enableScrollSave"))) return;
  601.             const posts = Array.from(document.querySelectorAll(".divPosts > .postCell[id]"));
  602.             let maxIndex = -1;
  603.             for (let i = 0; i < posts.length; ++i) {
  604.                 const rect = posts[i].getBoundingClientRect();
  605.                 if (rect.bottom > 0 && rect.top < window.innerHeight) maxIndex = i;
  606.             }
  607.             const currentCount = getCurrentPostCount();
  608.             let newLastSeen = lastSeenPostCount;
  609.  
  610.             if (window.scrollY > lastScrollY) {
  611.                 if (maxIndex >= 0 && currentCount > 0) {
  612.                     if ((window.innerHeight + window.scrollY) >= (document.body.offsetHeight - 20)) {
  613.                         newLastSeen = currentCount;
  614.                     } else {
  615.                         newLastSeen = Math.max(lastSeenPostCount, maxIndex + 1);
  616.                     }
  617.                 }
  618.                 if (newLastSeen !== lastSeenPostCount) {
  619.                     lastSeenPostCount = newLastSeen;
  620.                     let allData = await getAllSavedScrollData();
  621.                     const key = `${info.board}/${info.thread}`;
  622.                     if (!allData[key]) allData[key] = {};
  623.                     allData[key].lastSeenPostCount = lastSeenPostCount;
  624.                     allData[key].timestamp = Date.now();
  625.                     if (
  626.                         typeof allData[key].position !== "number" ||
  627.                         window.scrollY > allData[key].position
  628.                     ) {
  629.                         allData[key].position = window.scrollY;
  630.                     }
  631.                     await setAllSavedScrollData(allData);
  632.                 }
  633.                 unseenCount = Math.max(0, currentCount - lastSeenPostCount);
  634.                 updateTabTitle();
  635.             }
  636.             lastScrollY = window.scrollY;
  637.         }
  638.         async function saveScrollPosition() {
  639.             const info = getBoardAndThread();
  640.             if (!info || !(await getSetting("enableScrollSave"))) return;
  641.  
  642.             const scrollPosition = window.scrollY;
  643.             const timestamp = Date.now();
  644.  
  645.             let allData = await getAllSavedScrollData();
  646.             const keys = Object.keys(allData);
  647.             if (keys.length >= MAX_THREADS) {
  648.                 keys.sort((a, b) => (allData[a].timestamp || 0) - (allData[b].timestamp || 0));
  649.                 for (let i = 0; i < keys.length - MAX_THREADS + 1; ++i) delete allData[keys[i]];
  650.             }
  651.  
  652.             const key = `${info.board}/${info.thread}`;
  653.             if (!allData[key]) allData[key] = {};
  654.             if (
  655.                 typeof allData[key].position !== "number" ||
  656.                 scrollPosition > allData[key].position
  657.             ) {
  658.                 allData[key].position = scrollPosition;
  659.                 allData[key].timestamp = timestamp;
  660.                 await setAllSavedScrollData(allData);
  661.             }
  662.         }
  663.         function scrollElementToViewportCenter(el) {
  664.             if (!el) return;
  665.             const rect = el.getBoundingClientRect();
  666.             const elTop = rect.top + window.pageYOffset;
  667.             const elHeight = rect.height;
  668.             const viewportHeight = window.innerHeight;
  669.             const scrollTo = elTop - (viewportHeight / 2) + (elHeight / 2);
  670.             window.scrollTo({ top: scrollTo, behavior: "auto" });
  671.         }
  672.         async function restoreScrollPosition() {
  673.             const info = getBoardAndThread();
  674.             if (!info || !(await getSetting("enableScrollSave"))) return;
  675.  
  676.             const allData = await getAllSavedScrollData();
  677.             const key = `${info.board}/${info.thread}`;
  678.             const saved = allData[key];
  679.             if (!saved || typeof saved.position !== "number") return;
  680.  
  681.             const anchor = window.location.hash ? window.location.hash.replace(/^#/, "") : null;
  682.             const safeAnchor = anchor && /^[a-zA-Z0-9_-]+$/.test(anchor) ? anchor : null;
  683.  
  684.             if (safeAnchor) {
  685.                 setTimeout(() => {
  686.                     const post = document.getElementById(safeAnchor);
  687.                     if (post && post.classList.contains("postCell")) {
  688.                         scrollElementToViewportCenter(post);
  689.                     }
  690.                     addUnreadLineAtSavedScrollPosition(saved.position, false);
  691.                 }, 25);
  692.                 return;
  693.             }
  694.             saved.timestamp = Date.now();
  695.             await setAllSavedScrollData(allData);
  696.  
  697.             setTimeout(() => addUnreadLineAtSavedScrollPosition(saved.position, true), 100);
  698.         }
  699.         async function addUnreadLineAtSavedScrollPosition(scrollPosition, centerAfter = false) {
  700.             if (!(await getSetting("enableScrollSave_showUnreadLine"))) return;
  701.             if (!divPosts) return;
  702.             const posts = Array.from(divPosts.querySelectorAll(":scope > .postCell[id]"));
  703.             let targetPost = null;
  704.             for (let i = 0; i < posts.length; ++i) {
  705.                 const postTop = posts[i].offsetTop;
  706.                 if (postTop > scrollPosition) break;
  707.                 targetPost = posts[i];
  708.             }
  709.             if (!targetPost) return;
  710.             removeUnreadLineMarker();
  711.             const marker = document.createElement("hr");
  712.             marker.id = UNREAD_LINE_ID;
  713.             if (targetPost.nextSibling) {
  714.                 divPosts.insertBefore(marker, targetPost.nextSibling);
  715.             } else {
  716.                 divPosts.appendChild(marker);
  717.             }
  718.             if (centerAfter) {
  719.                 setTimeout(() => {
  720.                     const markerElem = document.getElementById(UNREAD_LINE_ID);
  721.                     if (markerElem) {
  722.                         const rect = markerElem.getBoundingClientRect();
  723.                         const desiredY = window.innerHeight / 3;
  724.                         const scrollY = window.scrollY + rect.top - desiredY;
  725.                         window.scrollTo({ top: scrollY, behavior: "auto" });
  726.                     }
  727.                 }, 25);
  728.             }
  729.         }
  730.         function observePostCount() {
  731.             if (!divPosts) return;
  732.             const observer = new MutationObserver(() => {
  733.                 updateUnseenCountFromSaved();
  734.             });
  735.             observer.observe(divPosts, { childList: true, subtree: false });
  736.         }
  737.         async function removeUnreadLineIfAtBottom() {
  738.             if (!(await getSetting("enableScrollSave_showUnreadLine"))) return;
  739.             const margin = 10; 
  740.             if ((window.innerHeight + window.scrollY) >= (document.body.offsetHeight - margin)) {
  741.                 removeUnreadLineMarker();
  742.             }
  743.         }
  744.         window.addEventListener("beforeunload", () => {
  745.             saveScrollPosition();
  746.         });
  747.  
  748.         document.addEventListener("DOMContentLoaded", () => {
  749.             tabTitleBase = document.title.replace(/^\(\d+\)\s*/, "");
  750.             updateTabTitle();
  751.         });
  752.         window.addEventListener("load", async () => {
  753.             await restoreScrollPosition();
  754.             await updateUnseenCountFromSaved();
  755.             observePostCount();
  756.         });
  757.  
  758.         let scrollTimeout = null;
  759.         window.addEventListener("scroll", () => {
  760.             if (scrollTimeout) return;
  761.             scrollTimeout = setTimeout(async () => {
  762.                 await onScrollUpdateSeen();
  763.                 await removeUnreadLineIfAtBottom();
  764.                 scrollTimeout = null;
  765.             }, 100); 
  766.         });
  767.         await restoreScrollPosition();
  768.         await updateUnseenCountFromSaved();
  769.         observePostCount();
  770.     }
  771.     async function featureHeaderCatalogLinks() {
  772.         function debounce(fn, delay) {
  773.             let timeout;
  774.             return function (...args) {
  775.                 clearTimeout(timeout);
  776.                 timeout = setTimeout(() => fn.apply(this, args), delay);
  777.             };
  778.         }
  779.  
  780.         async function appendCatalogToLinks() {
  781.             const navboardsSpan = document.getElementById("navBoardsSpan");
  782.             if (navboardsSpan) {
  783.                 const links = navboardsSpan.getElementsByTagName("a");
  784.                 const openInNewTab = await getSetting(
  785.                     "enableHeaderCatalogLinks_openInNewTab"
  786.                 );
  787.  
  788.                 for (let link of links) {
  789.                     if (
  790.                         link.href &&
  791.                         !link.href.endsWith("/catalog.html") &&
  792.                         !link.dataset.catalogLinkProcessed
  793.                     ) {
  794.                         link.href += "/catalog.html";
  795.                         link.dataset.catalogLinkProcessed = "1";
  796.                         if (openInNewTab) {
  797.                             link.target = "_blank";
  798.                             link.rel = "noopener noreferrer"; 
  799.                         } else {
  800.                             link.target = "";
  801.                             link.rel = "";
  802.                         }
  803.                     }
  804.                 }
  805.             }
  806.         }
  807.         appendCatalogToLinks();
  808.         const debouncedAppend = debounce(appendCatalogToLinks, 100);
  809.         const config = { childList: true, subtree: true };
  810.         const navboardsSpan = document.getElementById("navBoardsSpan");
  811.         if (navboardsSpan && !navboardsSpan._catalogLinksObserverAttached) {
  812.             const observer = new MutationObserver(debouncedAppend);
  813.             observer.observe(navboardsSpan, config);
  814.             navboardsSpan._catalogLinksObserverAttached = true;
  815.         }
  816.     }
  817.     function catalogThreadsInNewTab() {
  818.         const catalogDiv = document.querySelector('.catalogDiv');
  819.         if (!catalogDiv) return;
  820.         catalogDiv.querySelectorAll('.catalogCell a.linkThumb').forEach(link => {
  821.             if (link.getAttribute('target') !== '_blank') {
  822.                 link.setAttribute('target', '_blank');
  823.             }
  824.         });
  825.         catalogDiv.addEventListener('click', function (e) {
  826.             const link = e.target.closest('.catalogCell a.linkThumb');
  827.             if (link && link.getAttribute('target') !== '_blank') {
  828.                 link.setAttribute('target', '_blank');
  829.             }
  830.         });
  831.     }
  832.     function featureImageHover() {
  833.         const MEDIA_MAX_WIDTH = "90vw";
  834.         const MEDIA_OPACITY_LOADING = "0";
  835.         const MEDIA_OPACITY_LOADED = "1";
  836.         const MEDIA_OFFSET = 50; 
  837.         const MEDIA_BOTTOM_MARGIN = 3; 
  838.         const AUDIO_INDICATOR_TEXT = "▶ Playing audio...";
  839.         function getExtensionForMimeType(mime) {
  840.             const map = {
  841.                 "image/jpeg": ".jpg",
  842.                 "image/jpg": ".jpg",
  843.                 "image/jxl": ".jxl",
  844.                 "image/png": ".png",
  845.                 "image/apng": ".png",
  846.                 "image/gif": ".gif",
  847.                 "image/avif": ".avif",
  848.                 "image/webp": ".webp",
  849.                 "image/bmp": ".bmp",
  850.                 "video/mp4": ".mp4",
  851.                 "video/webm": ".webm",
  852.                 "video/x-m4v": ".m4v",
  853.                 "audio/ogg": ".ogg",
  854.                 "audio/mpeg": ".mp3",
  855.                 "audio/x-m4a": ".m4a",
  856.                 "audio/x-wav": ".wav",
  857.             };
  858.             return map[mime.toLowerCase()] || null;
  859.         }
  860.         function sanitizeUrl(url) {
  861.             try {
  862.                 const parsed = new URL(url, window.location.origin);
  863.                 if ((parsed.protocol === "http:" || parsed.protocol === "https:") &&
  864.                     parsed.origin === window.location.origin) {
  865.                     return parsed.href;
  866.                 }
  867.             } catch { }
  868.             return "";
  869.         }
  870.         let floatingMedia = null;
  871.         let cleanupFns = [];
  872.         let currentAudioIndicator = null;
  873.         let lastMouseEvent = null; 
  874.         const docElement = document.documentElement;
  875.         const SCROLLBAR_WIDTH = window.innerWidth - docElement.clientWidth; 
  876.         function clamp(val, min, max) {
  877.             return Math.max(min, Math.min(max, val));
  878.         }
  879.         function positionFloatingMedia(event) {
  880.             if (!floatingMedia) return;
  881.             const vw = window.innerWidth;
  882.             const vh = window.innerHeight;
  883.             const mw = floatingMedia.offsetWidth || 0;
  884.             const mh = floatingMedia.offsetHeight || 0;
  885.  
  886.             const MEDIA_BOTTOM_MARGIN_PX = window.innerHeight * (MEDIA_BOTTOM_MARGIN / 100); 
  887.  
  888.             let x, y;
  889.             let rightX = event.clientX + MEDIA_OFFSET;
  890.             let leftX = event.clientX - MEDIA_OFFSET - mw;
  891.             if (rightX + mw <= vw - SCROLLBAR_WIDTH) {
  892.                 x = rightX;
  893.             }
  894.             else if (leftX >= 0) {
  895.                 x = leftX;
  896.             }
  897.             else {
  898.                 x = clamp(rightX, 0, vw - mw - SCROLLBAR_WIDTH);
  899.             }
  900.  
  901.             y = event.clientY;
  902.             const maxY = vh - mh - MEDIA_BOTTOM_MARGIN_PX;
  903.             y = Math.max(0, Math.min(y, maxY));
  904.  
  905.             floatingMedia.style.left = `${x}px`;
  906.             floatingMedia.style.top = `${y}px`;
  907.         }
  908.         function cleanupFloatingMedia() {
  909.             cleanupFns.forEach(fn => { try { fn(); } catch { } });
  910.             cleanupFns = [];
  911.             if (floatingMedia) {
  912.                 if (["VIDEO", "AUDIO"].includes(floatingMedia.tagName)) {
  913.                     try {
  914.                         floatingMedia.pause();
  915.                         floatingMedia.srcObject = null;
  916.                         URL.revokeObjectURL(floatingMedia.src);
  917.                         floatingMedia.removeAttribute("src");
  918.                         floatingMedia.load();
  919.                     } catch { }
  920.                 }
  921.                 floatingMedia.remove();
  922.                 floatingMedia = null;
  923.             }
  924.             if (currentAudioIndicator && currentAudioIndicator.parentNode) {
  925.                 currentAudioIndicator.parentNode.removeChild(currentAudioIndicator);
  926.                 currentAudioIndicator = null;
  927.             }
  928.         }
  929.         function getFullMediaSrc(thumbNode, filemime) {
  930.             const thumbnailSrc = thumbNode.getAttribute("src");
  931.             if (!filemime) {
  932.                 if (
  933.                     thumbNode.closest('.catalogCell') ||
  934.                     /^\/\.media\/t?_[a-f0-9]{40,}$/i.test(thumbnailSrc.replace(/\\/g, ''))
  935.                 ) {
  936.                     return thumbnailSrc;
  937.                 }
  938.                 return null;
  939.             }
  940.             const parentA = thumbNode.closest("a.linkThumb, a.imgLink");
  941.             const fileWidth = parentA ? parseInt(parentA.getAttribute("data-filewidth"), 10) : null;
  942.             const fileHeight = parentA ? parseInt(parentA.getAttribute("data-fileheight"), 10) : null;
  943.             const isSmallImage = (fileWidth && fileWidth < 220) || (fileHeight && fileHeight < 220);
  944.             if (
  945.                 isSmallImage &&
  946.                 filemime && filemime.toLowerCase() === "image/png" &&
  947.                 !/\/t_/.test(thumbnailSrc) &&
  948.                 !/\.[a-z0-9]+$/i.test(thumbnailSrc)
  949.             ) {
  950.                 return thumbnailSrc;
  951.             }
  952.             if (isSmallImage && thumbnailSrc.match(/\/\.media\/[^\/]+\.[a-zA-Z0-9]+$/)) {
  953.                 return thumbnailSrc;
  954.             }
  955.             if (/\/t_/.test(thumbnailSrc)) {
  956.                 let base = thumbnailSrc.replace(/\/t_/, "/");
  957.                 base = base.replace(/\.(jpe?g|jxl|png|apng|gif|avif|webp|webm|mp4|m4v|ogg|mp3|m4a|wav)$/i, "");
  958.                 if (filemime && (filemime.toLowerCase() === "image/apng" || filemime.toLowerCase() === "video/x-m4v")) {
  959.                     return base;
  960.                 }
  961.  
  962.                 const ext = filemime ? getExtensionForMimeType(filemime) : null;
  963.                 if (!ext) return null;
  964.                 return base + ext;
  965.             }
  966.             if (
  967.                 thumbnailSrc.match(/^\/\.media\/[a-f0-9]{40,}$/i) && 
  968.                 !/\.[a-z0-9]+$/i.test(thumbnailSrc)
  969.             ) {
  970.                 if (filemime && (filemime.toLowerCase() === "image/apng" || filemime.toLowerCase() === "video/x-m4v")) {
  971.                     return thumbnailSrc;
  972.                 }
  973.  
  974.                 const ext = filemime ? getExtensionForMimeType(filemime) : null;
  975.                 if (!ext) {
  976.                     return thumbnailSrc;
  977.                 }
  978.                 return thumbnailSrc + ext;
  979.             }
  980.  
  981.             if (
  982.                 /\/spoiler\.png$/i.test(thumbnailSrc) ||
  983.                 /\/custom\.spoiler$/i.test(thumbnailSrc) ||
  984.                 /\/audioGenericThumb\.png$/i.test(thumbnailSrc)
  985.             ) {
  986.                 if (parentA && parentA.getAttribute("href")) {
  987.                     return sanitizeUrl(parentA.getAttribute("href"));
  988.                 }
  989.                 return null;
  990.             }
  991.             return null;
  992.         }
  993.         async function onThumbEnter(e) {
  994.             cleanupFloatingMedia();
  995.             lastMouseEvent = e; 
  996.             const thumb = e.currentTarget;
  997.             let filemime = null, fullSrc = null, isVideo = false, isAudio = false;
  998.             if (thumb.tagName === "IMG") {
  999.                 const parentA = thumb.closest("a.linkThumb, a.imgLink");
  1000.                 if (!parentA) return;
  1001.                 const href = parentA.getAttribute("href");
  1002.                 if (!href) return;
  1003.                 const ext = href.split(".").pop().toLowerCase();
  1004.                 filemime =
  1005.                     parentA.getAttribute("data-filemime") ||
  1006.                     {
  1007.                         jpg: "image/jpeg",
  1008.                         jpeg: "image/jpeg",
  1009.                         jxl: "image/jxl",
  1010.                         png: "image/png",
  1011.                         apng: "image/apng",
  1012.                         gif: "image/gif",
  1013.                         avif: "image/avif",
  1014.                         webp: "image/webp",
  1015.                         bmp: "image/bmp",
  1016.                         mp4: "video/mp4",
  1017.                         webm: "video/webm",
  1018.                         m4v: "video/x-m4v",
  1019.                         ogg: "audio/ogg",
  1020.                         mp3: "audio/mpeg",
  1021.                         m4a: "audio/x-m4a",
  1022.                         wav: "audio/wav",
  1023.                     }[ext];
  1024.                 fullSrc = getFullMediaSrc(thumb, filemime);
  1025.                 isVideo = filemime && filemime.startsWith("video/");
  1026.                 isAudio = filemime && filemime.startsWith("audio/");
  1027.             }
  1028.             fullSrc = sanitizeUrl(fullSrc);
  1029.             if (!fullSrc) return;
  1030.             let volume = 0.5;
  1031.             try {
  1032.                 if (typeof getSetting === "function") {
  1033.                     const v = await getSetting("hoverVideoVolume");
  1034.                     if (typeof v === "number" && !isNaN(v)) {
  1035.                         volume = Math.max(0, Math.min(1, v / 100));
  1036.                     }
  1037.                 }
  1038.             } catch { }
  1039.  
  1040.             if (isAudio) {
  1041.                 let container = thumb.closest("a.linkThumb, a.imgLink");
  1042.                 if (container && !container.style.position) {
  1043.                     container.style.position = "relative";
  1044.                 }
  1045.                 floatingMedia = document.createElement("audio");
  1046.                 floatingMedia.src = fullSrc;
  1047.                 floatingMedia.controls = false;
  1048.                 floatingMedia.style.display = "none";
  1049.                 floatingMedia.volume = volume;
  1050.                 document.body.appendChild(floatingMedia);
  1051.                 floatingMedia.play().catch(() => { });
  1052.                 const indicator = document.createElement("div");
  1053.                 indicator.classList.add("audio-preview-indicator");
  1054.                 indicator.textContent = AUDIO_INDICATOR_TEXT;
  1055.                 if (container) {
  1056.                     container.appendChild(indicator);
  1057.                 }
  1058.                 currentAudioIndicator = indicator;
  1059.                 const cleanup = () => cleanupFloatingMedia();
  1060.                 thumb.addEventListener("mouseleave", cleanup, { once: true });
  1061.                 if (container) container.addEventListener("click", cleanup, { once: true });
  1062.                 window.addEventListener("scroll", cleanup, { passive: true, once: true });
  1063.                 cleanupFns.push(() => thumb.removeEventListener("mouseleave", cleanup));
  1064.                 if (container) cleanupFns.push(() => container.removeEventListener("click", cleanup));
  1065.                 cleanupFns.push(() => window.removeEventListener("scroll", cleanup));
  1066.                 return;
  1067.             }
  1068.             floatingMedia = isVideo ? document.createElement("video") : document.createElement("img");
  1069.             floatingMedia.src = fullSrc;
  1070.             floatingMedia.id = "hover-preview-media";
  1071.             floatingMedia.style.position = "fixed";
  1072.             floatingMedia.style.zIndex = "9999";
  1073.             floatingMedia.style.pointerEvents = "none";
  1074.             floatingMedia.style.opacity = MEDIA_OPACITY_LOADING;
  1075.             floatingMedia.style.left = "-9999px";
  1076.             floatingMedia.style.top = "-9999px";
  1077.             floatingMedia.style.maxWidth = MEDIA_MAX_WIDTH;
  1078.             const availableHeight = window.innerHeight * (1 - MEDIA_BOTTOM_MARGIN / 100);
  1079.             floatingMedia.style.maxHeight = `${availableHeight}px`;
  1080.             if (isVideo) {
  1081.                 floatingMedia.autoplay = true;
  1082.                 floatingMedia.loop = true;
  1083.                 floatingMedia.muted = false;
  1084.                 floatingMedia.playsInline = true;
  1085.                 floatingMedia.volume = volume;
  1086.             }
  1087.             document.body.appendChild(floatingMedia);
  1088.             function mouseMoveHandler(ev) {
  1089.                 lastMouseEvent = ev;
  1090.                 positionFloatingMedia(ev);
  1091.             }
  1092.             document.addEventListener("mousemove", mouseMoveHandler, { passive: true });
  1093.             thumb.addEventListener("mouseleave", leaveHandler, { passive: true, once: true });
  1094.             cleanupFns.push(() => document.removeEventListener("mousemove", mouseMoveHandler));
  1095.             if (lastMouseEvent) {
  1096.                 positionFloatingMedia(lastMouseEvent);
  1097.             }
  1098.             if (isVideo) {
  1099.                 floatingMedia.onloadeddata = function () {
  1100.                     if (floatingMedia) {
  1101.                         floatingMedia.style.opacity = MEDIA_OPACITY_LOADED;
  1102.                         if (lastMouseEvent) positionFloatingMedia(lastMouseEvent);
  1103.                     }
  1104.                 };
  1105.             } else {
  1106.                 floatingMedia.onload = function () {
  1107.                     if (floatingMedia) {
  1108.                         floatingMedia.style.opacity = MEDIA_OPACITY_LOADED;
  1109.                         if (lastMouseEvent) positionFloatingMedia(lastMouseEvent);
  1110.                     }
  1111.                 };
  1112.             }
  1113.             floatingMedia.onerror = cleanupFloatingMedia;
  1114.             function leaveHandler() { cleanupFloatingMedia(); }
  1115.             thumb.addEventListener("mouseleave", leaveHandler, { once: true });
  1116.             window.addEventListener("scroll", leaveHandler, { passive: true, once: true });
  1117.             cleanupFns.push(() => thumb.removeEventListener("mouseleave", leaveHandler));
  1118.             cleanupFns.push(() => window.removeEventListener("scroll", leaveHandler));
  1119.         }
  1120.         function attachThumbListeners(root = document) {
  1121.             root.querySelectorAll("a.linkThumb > img, a.imgLink > img").forEach(thumb => {
  1122.                 if (!thumb._fullImgHoverBound) {
  1123.                     thumb.addEventListener("mouseenter", onThumbEnter);
  1124.                     thumb._fullImgHoverBound = true;
  1125.                 }
  1126.             });
  1127.             if (
  1128.                 root.tagName === "IMG" &&
  1129.                 root.parentElement &&
  1130.                 (root.parentElement.matches("a.linkThumb") || root.parentElement.matches("a.imgLink")) &&
  1131.                 !root._fullImgHoverBound
  1132.             ) {
  1133.                 root.addEventListener("mouseenter", onThumbEnter);
  1134.                 root._fullImgHoverBound = true;
  1135.             }
  1136.         }
  1137.         attachThumbListeners();
  1138.         if (divThreads) {
  1139.             const observer = new MutationObserver((mutations) => {
  1140.                 const addedElements = [];
  1141.                 for (const mutation of mutations) {
  1142.                     for (const node of mutation.addedNodes) {
  1143.                         if (node.nodeType === 1) {
  1144.                             addedElements.push(node);
  1145.                         }
  1146.                     }
  1147.                 }
  1148.                 addedElements.forEach(node => attachThumbListeners(node));
  1149.             });
  1150.             observer.observe(divThreads, { childList: true, subtree: true });
  1151.         }
  1152.     }
  1153.     function featureBlurSpoilers() {
  1154.         function getExtensionForMimeType(mime) {
  1155.             const map = {
  1156.                 "image/jpeg": ".jpg",
  1157.                 "image/jpg": ".jpg",
  1158.                 "image/jxl": ".jxl",
  1159.                 "image/png": ".png",
  1160.                 "image/apng": ".png",
  1161.                 "image/gif": ".gif",
  1162.                 "image/avif": ".avif",
  1163.                 "image/webp": ".webp",
  1164.                 "image/bmp": ".bmp",
  1165.             };
  1166.             return map[mime.toLowerCase()] || "";
  1167.         }
  1168.         function revealSpoilers() {
  1169.             const spoilerLinks = document.querySelectorAll("a.imgLink");
  1170.             spoilerLinks.forEach(async (link) => {
  1171.                 const img = link.querySelector("img");
  1172.                 if (!img) return;
  1173.                 if (
  1174.                     /\/\.media\/[^\/]+?\.[a-zA-Z0-9]+$/.test(img.src) && 
  1175.                     !/\/\.media\/t_[^\/]+?\.[a-zA-Z0-9]+$/.test(img.src) 
  1176.                 ) {
  1177.                     return;
  1178.                 }
  1179.                 const isCustomSpoiler = img.src.includes("/custom.spoiler")
  1180.                     || img.src.includes("/*/custom.spoiler")
  1181.                     || img.src.includes("/spoiler.png");
  1182.                 const isNotThumbnail = !img.src.includes("/.media/t_");
  1183.                 const hasFilenameExtension = !isCustomSpoiler && /\.[a-zA-Z0-9]+$/.test(img.src);
  1184.  
  1185.                 if (isNotThumbnail || isCustomSpoiler) {
  1186.                     let href = link.getAttribute("href");
  1187.                     if (!href) return;
  1188.                     const match = href.match(/\/\.media\/([^\/]+)\.[a-zA-Z0-9]+$/);
  1189.                     if (!match) return;
  1190.                     const fileMime = link.getAttribute("data-filemime") || "";
  1191.                     const ext = getExtensionForMimeType(fileMime);
  1192.                     const fileWidthAttr = link.getAttribute("data-filewidth");
  1193.                     const fileHeightAttr = link.getAttribute("data-fileheight");
  1194.                     let transformedSrc;
  1195.                     if (
  1196.                         (fileWidthAttr && Number(fileWidthAttr) < 250) ||
  1197.                         (fileHeightAttr && Number(fileHeightAttr) < 250)
  1198.                     ) {
  1199.                         transformedSrc = `/.media/${match[1]}${ext}`;
  1200.                     } else if (!hasFilenameExtension && isCustomSpoiler) {
  1201.                         transformedSrc = `/.media/t_${match[1]}`;
  1202.                     } else {
  1203.                         return;
  1204.                     }
  1205.                     const initialWidth = img.offsetWidth;
  1206.                     const initialHeight = img.offsetHeight;
  1207.                     img.style.width = initialWidth + "px";
  1208.                     img.style.height = initialHeight + "px";
  1209.                     img.src = transformedSrc;
  1210.                     img.onload = function () {
  1211.                         img.style.width = img.naturalWidth + "px";
  1212.                         img.style.height = img.naturalHeight + "px";
  1213.                     };
  1214.                     if (await getSetting("blurSpoilers_removeSpoilers")) {
  1215.                         img.style.filter = "";
  1216.                         img.style.transition = "";
  1217.                         img.style.border = "1px dotted var(--border-color)";
  1218.                         img.onmouseover = null;
  1219.                         img.onmouseout = null;
  1220.                         return;
  1221.                     } else {
  1222.                         img.style.filter = "blur(5px)";
  1223.                         img.style.transition = "filter 0.3s ease";
  1224.                         img.addEventListener("mouseover", () => {
  1225.                             img.style.filter = "none";
  1226.                         });
  1227.                         img.addEventListener("mouseout", () => {
  1228.                             img.style.filter = "blur(5px)";
  1229.                         });
  1230.                     }
  1231.                 }
  1232.             });
  1233.         }
  1234.         revealSpoilers();
  1235.         const observer = new MutationObserver(revealSpoilers);
  1236.         observer.observe(divThreads, { childList: true, subtree: true });
  1237.     };
  1238.     function autoHideHeaderOnScroll() {
  1239.         const header = document.getElementById('dynamicHeaderThread');
  1240.         if (!header) return;
  1241.         const scrollThreshold = 50; 
  1242.         let lastScrollY = window.scrollY;
  1243.         let scrollDirection = 'none';
  1244.         let ticking = false;
  1245.  
  1246.         function updateHeaderVisibility() {
  1247.             const currentScrollY = window.scrollY;
  1248.             scrollDirection = currentScrollY > lastScrollY ? 'down' : 'up';
  1249.             lastScrollY = currentScrollY;
  1250.             const isNearTop = currentScrollY < 100;
  1251.             if (scrollDirection === 'up' || isNearTop) {
  1252.                 header.classList.remove('nav-hidden');
  1253.             } else if (scrollDirection === 'down' && currentScrollY > scrollThreshold) {
  1254.                 header.classList.add('nav-hidden');
  1255.             }
  1256.  
  1257.             ticking = false;
  1258.         }
  1259.         const style = document.createElement('style');
  1260.         style.textContent = `
  1261.             #dynamicHeaderThread {
  1262.                 transition: transform 0.3s ease;
  1263.             }
  1264.             #dynamicHeaderThread.nav-hidden {
  1265.                 transform: translateY(-100%);
  1266.             }
  1267.             :root.bottom-header #dynamicHeaderThread.nav-hidden {
  1268.                 transform: translateY(100%);
  1269.             }
  1270.         `;
  1271.         document.head.appendChild(style);
  1272.         window.addEventListener('scroll', () => {
  1273.             if (!ticking) {
  1274.                 window.requestAnimationFrame(updateHeaderVisibility);
  1275.                 ticking = true;
  1276.             }
  1277.         }, { passive: true });
  1278.         updateHeaderVisibility();
  1279.     }
  1280.     const decodeHtmlEntitiesTwice = (() => {
  1281.         const txt = document.createElement('textarea');
  1282.         return function (html) {
  1283.             txt.innerHTML = html;
  1284.             const once = txt.value;
  1285.             txt.innerHTML = once;
  1286.             return txt.value;
  1287.         };
  1288.     })();
  1289.     function highlightMentions() {
  1290.         const watchedCells = document.querySelectorAll("#watchedMenu .watchedCell");
  1291.         const watchButton = document.querySelector(".opHead .watchButton");
  1292.         if (!watchedCells.length) return; 
  1293.         watchedCells.forEach((cell) => {
  1294.             const notification = cell.querySelector(".watchedCellLabel span.watchedNotification");
  1295.             if (!notification) return; 
  1296.  
  1297.             const labelLink = cell.querySelector(".watchedCellLabel a");
  1298.             if (!labelLink) return; 
  1299.             if (!labelLink.dataset.board) {
  1300.                 const href = labelLink.getAttribute("href");
  1301.                 const match = href?.match(/^(?:https?:\/\/[^\/]+)?\/([^\/]+)\//);
  1302.                 if (match) {
  1303.                     labelLink.dataset.board = `/${match[1]}/ -`;
  1304.                 }
  1305.                 if (document.location.href.includes(href)) {
  1306.                     if (watchButton) {
  1307.                         watchButton.style.color = "var(--board-title-color)";
  1308.                         watchButton.title = "Watched";
  1309.                     }
  1310.                 }
  1311.                 const originalText = labelLink.textContent;
  1312.                 const decodedText = decodeHtmlEntitiesTwice(originalText);
  1313.                 if (labelLink.textContent !== decodedText) {
  1314.                     labelLink.textContent = decodedText;
  1315.                 }
  1316.             }
  1317.             const notificationText = notification.textContent.trim();
  1318.  
  1319.             function styleMentionYou(labelLink, notification, totalReplies) {
  1320.                 labelLink.style.color = "var(--board-title-color)";
  1321.                 notification.style.color = "var(--board-title-color)";
  1322.                 notification.textContent = ` (${totalReplies}) (You)`;
  1323.                 notification.style.fontWeight = "bold";
  1324.             }
  1325.  
  1326.             function styleMentionNumber(notification, notificationText) {
  1327.                 notification.textContent = ` (${notificationText})`;
  1328.                 notification.style.color = "var(--link-color)";
  1329.                 notification.style.fontWeight = "bold";
  1330.             }
  1331.             if (notificationText.startsWith("(") === true) {
  1332.                 return;
  1333.             }
  1334.             if (notificationText.includes("(you)") === true) {
  1335.                 const parts = notificationText.split(", ");
  1336.                 const totalReplies = parts[0];
  1337.                 styleMentionYou(labelLink, notification, totalReplies);
  1338.             }
  1339.             else if (/^\d+$/.test(notificationText)) {
  1340.                 styleMentionNumber(notification, notificationText);
  1341.             }
  1342.             notification.dataset.processed = "true";
  1343.         });
  1344.     }
  1345.     highlightMentions();
  1346.     const watchedMenu = document.getElementById("watchedMenu");
  1347.     if (watchedMenu) {
  1348.         const observer = new MutationObserver(() => {
  1349.             highlightMentions();
  1350.         });
  1351.         observer.observe(watchedMenu, { childList: true, subtree: true });
  1352.     }
  1353.     async function featureWatchThreadOnReply() {
  1354.         const getWatchButton = () => document.querySelector(".watchButton");
  1355.         function watchThreadIfNotWatched() {
  1356.             const btn = getWatchButton();
  1357.             if (btn && !btn.classList.contains("watched-active")) {
  1358.                 btn.click(); 
  1359.                 setTimeout(() => {
  1360.                     btn.classList.add("watched-active");
  1361.                 }, 100);
  1362.             }
  1363.         }
  1364.         function updateWatchButtonClass() {
  1365.             const btn = getWatchButton();
  1366.             if (!btn) return;
  1367.             if (btn.classList.contains("watched-active")) {
  1368.                 btn.classList.add("watched-active");
  1369.             } else {
  1370.                 btn.classList.remove("watched-active");
  1371.             }
  1372.         }
  1373.         const submitButton = document.getElementById("qrbutton");
  1374.         if (submitButton) {
  1375.             submitButton.removeEventListener("click", submitButton._watchThreadHandler || (() => { }));
  1376.             submitButton._watchThreadHandler = async function () {
  1377.                 if (await getSetting("watchThreadOnReply")) {
  1378.                     setTimeout(watchThreadIfNotWatched, 500); 
  1379.                 }
  1380.             };
  1381.             submitButton.addEventListener("click", submitButton._watchThreadHandler);
  1382.         }
  1383.         updateWatchButtonClass();
  1384.         const btn = getWatchButton();
  1385.         if (btn) {
  1386.             btn.removeEventListener("click", btn._updateWatchHandler || (() => { }));
  1387.             btn._updateWatchHandler = () => setTimeout(updateWatchButtonClass, 100);
  1388.             btn.addEventListener("click", btn._updateWatchHandler);
  1389.         }
  1390.     }
  1391.     async function featureAlwaysShowTW() {
  1392.         if (!(await getSetting("alwaysShowTW"))) return;
  1393.  
  1394.         function showThreadWatcher() {
  1395.             const watchedMenu = document.getElementById("watchedMenu");
  1396.             if (watchedMenu) {
  1397.                 watchedMenu.style.display = "flex";
  1398.             }
  1399.         }
  1400.  
  1401.         showThreadWatcher();
  1402.     }
  1403.     function markAllThreadsAsRead() {
  1404.         const handleDiv = document.querySelector('#watchedMenu > div.handle');
  1405.         if (!handleDiv) return;
  1406.         if (handleDiv.querySelector('.watchedCellDismissButton.markAllRead')) return;
  1407.         const btn = document.createElement('a');
  1408.         btn.className = 'watchedCellDismissButton glowOnHover coloredIcon markAllRead';
  1409.         btn.title = 'Mark all threads as read';
  1410.         btn.style.float = 'right';
  1411.         btn.style.paddingTop = '3px';
  1412.         function hasUnreadThreads() {
  1413.             const watchedMenu = document.querySelector('#watchedMenu > div.floatingContainer');
  1414.             if (!watchedMenu) return false;
  1415.             return watchedMenu.querySelectorAll('td.watchedCellDismissButton.glowOnHover.coloredIcon[title="Mark as read"]').length > 0;
  1416.         }
  1417.         function updateButtonState() {
  1418.             if (hasUnreadThreads()) {
  1419.                 btn.style.opacity = '1';
  1420.                 btn.style.pointerEvents = 'auto';
  1421.                 btn.title = 'Mark all threads as read';
  1422.             } else {
  1423.                 btn.style.opacity = '0.5';
  1424.                 btn.style.pointerEvents = 'none';
  1425.                 btn.title = 'No unread threads';
  1426.             }
  1427.         }
  1428.         function clickAllMarkAsReadButtons(watchedMenu) {
  1429.             const markButtons = watchedMenu.querySelectorAll('td.watchedCellDismissButton.glowOnHover.coloredIcon[title="Mark as read"]');
  1430.             markButtons.forEach(btn => {
  1431.                 try {
  1432.                     btn.click();
  1433.                 } catch (e) {
  1434.                     console.log("Error clicking button:", e);
  1435.                 }
  1436.             });
  1437.             return markButtons.length;
  1438.         }
  1439.         function markAllThreadsAsReadWithRetry(retriesLeft, callback) {
  1440.             setTimeout(function () {
  1441.                 const watchedMenu = document.querySelector('#watchedMenu > div.floatingContainer');
  1442.                 if (!watchedMenu) {
  1443.                     if (callback) callback();
  1444.                     return;
  1445.                 }
  1446.                 const clickedCount = clickAllMarkAsReadButtons(watchedMenu);
  1447.                 if (clickedCount === 0) {
  1448.                     updateButtonState();
  1449.                     if (callback) callback();
  1450.                     return;
  1451.                 }
  1452.                 if (retriesLeft > 0) {
  1453.                     setTimeout(() => markAllThreadsAsReadWithRetry(retriesLeft - 1, callback), 200);
  1454.                 } else if (callback) {
  1455.                     callback();
  1456.                 }
  1457.             }, 100);
  1458.         }
  1459.         function debounce(fn, delay) {
  1460.             let timeout;
  1461.             return function (...args) {
  1462.                 clearTimeout(timeout);
  1463.                 timeout = setTimeout(() => fn.apply(this, args), delay);
  1464.             };
  1465.         }
  1466.         const watchedMenu = document.querySelector('#watchedMenu > div.floatingContainer');
  1467.         let observer = null;
  1468.         if (watchedMenu) {
  1469.             const debouncedUpdate = debounce(updateButtonState, 100);
  1470.             observer = new MutationObserver(debouncedUpdate);
  1471.             observer.observe(watchedMenu, { childList: true, subtree: true });
  1472.             const removalObserver = new MutationObserver(() => {
  1473.                 if (!document.body.contains(watchedMenu) || watchedMenu.style.display === "none") {
  1474.                     observer.disconnect();
  1475.                     removalObserver.disconnect();
  1476.                 }
  1477.             });
  1478.             removalObserver.observe(document.body, { childList: true, subtree: true });
  1479.         }
  1480.         updateButtonState();
  1481.         handleDiv.appendChild(btn);
  1482.         document.body.addEventListener('click', function (e) {
  1483.             const closeBtn = e.target.closest('#watchedMenu .close-btn');
  1484.             if (closeBtn) {
  1485.                 const watchedMenu = document.getElementById("watchedMenu");
  1486.                 if (watchedMenu) watchedMenu.style.display = "none";
  1487.                 return;
  1488.             }
  1489.             const markAllBtn = e.target.closest('.watchedCellDismissButton.markAllRead');
  1490.             if (markAllBtn) {
  1491.                 e.preventDefault();
  1492.                 if (markAllBtn.style.pointerEvents === 'none' || markAllBtn.dataset.processing === 'true') return;
  1493.                 markAllBtn.dataset.processing = 'true';
  1494.                 markAllBtn.style.opacity = '0.5';
  1495.                 markAllThreadsAsReadWithRetry(3, function () {
  1496.                     markAllBtn.dataset.processing = 'false';
  1497.                     updateButtonState();
  1498.                 });
  1499.             }
  1500.         });
  1501.     }
  1502.     markAllThreadsAsRead();
  1503.     function hashNavigation() {
  1504.         if (!document.documentElement.classList.contains("is-thread")) return;
  1505.         const processedLinks = new WeakSet();
  1506.         function addHashLinks(container = document) {
  1507.             const links = container.querySelectorAll('.panelBacklinks a, .altBacklinks a, .divMessage .quoteLink');
  1508.             links.forEach(link => {
  1509.                 if (
  1510.                     processedLinks.has(link) ||
  1511.                     (link.nextSibling && link.nextSibling.classList && link.nextSibling.classList.contains('hash-link-container'))
  1512.                 ) return;
  1513.                 const hashSpan = document.createElement('span');
  1514.                 hashSpan.textContent = ' #';
  1515.                 hashSpan.className = 'hash-link';
  1516.                 hashSpan.style.cursor = 'pointer';
  1517.                 hashSpan.style.color = 'var(--navbar-text-color)';
  1518.                 hashSpan.title = 'Scroll to post';
  1519.                 const wrapper = document.createElement('span');
  1520.                 wrapper.className = 'hash-link-container';
  1521.                 wrapper.appendChild(hashSpan);
  1522.  
  1523.                 link.insertAdjacentElement('afterend', wrapper);
  1524.                 processedLinks.add(link);
  1525.             });
  1526.         }
  1527.         function debounce(fn, delay) {
  1528.             let timer;
  1529.             return function (...args) {
  1530.                 clearTimeout(timer);
  1531.                 timer = setTimeout(() => fn.apply(this, args), delay);
  1532.             };
  1533.         }
  1534.         addHashLinks();
  1535.         if (window.tooltips) {
  1536.             ['loadTooltip', 'addLoadedTooltip'].forEach(fn => {
  1537.                 if (typeof tooltips[fn] === 'function') {
  1538.                     const orig = tooltips[fn];
  1539.                     tooltips[fn] = function (...args) {
  1540.                         const result = orig.apply(this, args);
  1541.                         let container = args[0];
  1542.                         if (container && container.nodeType === Node.ELEMENT_NODE) {
  1543.                             addHashLinks(container);
  1544.                         }
  1545.                         return result;
  1546.                     };
  1547.                 }
  1548.             });
  1549.             ['addInlineClick', 'processQuote'].forEach(fn => {
  1550.                 if (typeof tooltips[fn] === 'function') {
  1551.                     const orig = tooltips[fn];
  1552.                     tooltips[fn] = function (quote, ...rest) {
  1553.                         if (
  1554.                             !quote.href ||
  1555.                             quote.classList.contains('hash-link') ||
  1556.                             quote.closest('.hash-link-container') ||
  1557.                             quote.href.includes('#q')
  1558.                         ) {
  1559.                             return;
  1560.                         }
  1561.                         return orig.apply(this, [quote, ...rest]);
  1562.                     };
  1563.                 }
  1564.             });
  1565.         }
  1566.         const postsContainer = divPosts || document.body;
  1567.         postsContainer.addEventListener('click', function (e) {
  1568.             if (e.target.classList.contains('hash-link')) {
  1569.                 e.preventDefault();
  1570.                 const link = e.target.closest('.hash-link-container').previousElementSibling;
  1571.                 if (!link || !link.href) return;
  1572.                 const hashMatch = link.href.match(/#(\d+)$/);
  1573.                 if (!hashMatch) return;
  1574.                 const postId = hashMatch[1];
  1575.                 const safePostId = /^[0-9]+$/.test(postId) ? postId : null;
  1576.                 if (!safePostId) return;
  1577.                 const postElem = document.getElementById(safePostId);
  1578.                 if (postElem) {
  1579.                     window.location.hash = `#${safePostId}`;
  1580.                     if (postElem.classList.contains('opCell')) {
  1581.                         const offset = 25; 
  1582.                         const rect = postElem.getBoundingClientRect();
  1583.                         const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  1584.                         const targetY = rect.top + scrollTop - offset;
  1585.                         window.scrollTo({ top: targetY, behavior: "smooth" });
  1586.                     } else {
  1587.                         postElem.scrollIntoView({ behavior: "smooth", block: "center" });
  1588.                     }
  1589.                 }
  1590.             }
  1591.         }, true);
  1592.  
  1593.         const debouncedAddHashLinks = debounce(addHashLinks, 25);
  1594.  
  1595.         const observer = new MutationObserver(mutations => {
  1596.             let shouldUpdate = false;
  1597.             mutations.forEach(mutation => {
  1598.                 mutation.addedNodes.forEach(node => {
  1599.                     if (node.nodeType === Node.ELEMENT_NODE) {
  1600.                         shouldUpdate = true;
  1601.                     }
  1602.                 });
  1603.             });
  1604.             if (shouldUpdate) debouncedAddHashLinks();
  1605.         });
  1606.         observer.observe(postsContainer, { childList: true, subtree: true });
  1607.     }
  1608.     function featureScrollArrows() {
  1609.         if (document.getElementById("scroll-arrow-up") || document.getElementById("scroll-arrow-down")) {
  1610.             return;
  1611.         }
  1612.         const upBtn = document.createElement("button");
  1613.         upBtn.id = "scroll-arrow-up";
  1614.         upBtn.className = "scroll-arrow-btn";
  1615.         upBtn.title = "Scroll to top";
  1616.         upBtn.innerHTML = "▲";
  1617.         upBtn.addEventListener("click", () => {
  1618.             window.scrollTo({ top: 0, behavior: "smooth" });
  1619.         });
  1620.         const downBtn = document.createElement("button");
  1621.         downBtn.id = "scroll-arrow-down";
  1622.         downBtn.className = "scroll-arrow-btn";
  1623.         downBtn.title = "Scroll to bottom";
  1624.         downBtn.innerHTML = "▼";
  1625.         downBtn.addEventListener("click", () => {
  1626.             window.scrollTo({ top: document.body.scrollHeight, behavior: "smooth" });
  1627.         });
  1628.  
  1629.         document.body.appendChild(upBtn);
  1630.         document.body.appendChild(downBtn);
  1631.     }
  1632.     function featureDeleteNameCheckbox() {
  1633.         const nameExists = document.getElementById("qr-name-row");
  1634.         if (nameExists && nameExists.classList.contains("hidden")) {
  1635.             return;
  1636.         }
  1637.  
  1638.         const alwaysUseBypassCheckbox = document.getElementById("qralwaysUseBypassCheckBox");
  1639.         if (!alwaysUseBypassCheckbox) {
  1640.             return;
  1641.         }
  1642.  
  1643.         const checkbox = document.createElement("input");
  1644.         checkbox.type = "checkbox";
  1645.         checkbox.id = "saveNameCheckbox";
  1646.         checkbox.classList.add("postingCheckbox");
  1647.  
  1648.         const label = document.createElement("label");
  1649.         label.htmlFor = "saveNameCheckbox";
  1650.         label.textContent = "Delete Name";
  1651.         label.title = "Delete Name on refresh";
  1652.  
  1653.         alwaysUseBypassCheckbox.parentNode.insertBefore(checkbox, alwaysUseBypassCheckbox);
  1654.         alwaysUseBypassCheckbox.parentNode.insertBefore(label, checkbox.nextSibling);
  1655.         const savedCheckboxState = localStorage.getItem("8chanSS_deleteNameCheckbox") === "true";
  1656.         checkbox.checked = savedCheckboxState;
  1657.  
  1658.         const nameInput = document.getElementById("qrname");
  1659.         if (nameInput) {
  1660.             if (checkbox.checked) {
  1661.                 nameInput.value = "";
  1662.                 localStorage.removeItem("name");
  1663.             }
  1664.             checkbox.addEventListener("change", function () {
  1665.                 localStorage.setItem("8chanSS_deleteNameCheckbox", checkbox.checked);
  1666.             });
  1667.         }
  1668.     }
  1669.     async function featureHideAnnouncement() {
  1670.         function getContentHash(str) {
  1671.             let hash = 5381;
  1672.             for (let i = 0; i < str.length; i++) {
  1673.                 hash = ((hash << 5) + hash) + str.charCodeAt(i);
  1674.             }
  1675.             return hash >>> 0;
  1676.         }
  1677.         async function processElement(selector, settingKey, hashKey) {
  1678.             const el = document.querySelector(selector);
  1679.             if (!el) return;
  1680.  
  1681.             const content = el.textContent || "";
  1682.             const sanitizedContent = content.replace(/[^\w\s.,!?-]/g, ""); 
  1683.             const hash = getContentHash(sanitizedContent);
  1684.             const shouldHide = await GM.getValue(`8chanSS_${settingKey}`, "false") === "true";
  1685.             const storedHash = await GM.getValue(`8chanSS_${hashKey}`, null);
  1686.             const root = document.documentElement;
  1687.  
  1688.             if (shouldHide) {
  1689.                 if (storedHash !== null && String(storedHash) !== String(hash)) {
  1690.                     if (typeof window.setSetting === "function") {
  1691.                         await window.setSetting("hideAnnouncement", false);
  1692.                     }
  1693.                     await GM.setValue(`8chanSS_${settingKey}`, "false");
  1694.                     await GM.deleteValue(`8chanSS_${hashKey}`);
  1695.                     return;
  1696.                 }
  1697.                 root.classList.add("hide-announcement");
  1698.                 await GM.setValue(`8chanSS_${hashKey}`, hash);
  1699.             } else {
  1700.                 root.classList.remove("hide-announcement");
  1701.                 await GM.deleteValue(`8chanSS_${hashKey}`);
  1702.             }
  1703.         }
  1704.  
  1705.         await processElement("#dynamicAnnouncement", "hideAnnouncement", "announcementHash");
  1706.     }
  1707.     async function featureBeepOnYou() {
  1708.         if (!divPosts) return;
  1709.         let audioContext = null;
  1710.         function createBeepSound() {
  1711.             if (!audioContext) {
  1712.                 audioContext = new (window.AudioContext || window.webkitAudioContext)();
  1713.             }
  1714.             return function playBeep() {
  1715.                 try {
  1716.                     const oscillator = audioContext.createOscillator();
  1717.                     const gainNode = audioContext.createGain();
  1718.  
  1719.                     oscillator.type = 'sine';
  1720.                     oscillator.frequency.value = 550; 
  1721.                     gainNode.gain.value = 0.1; 
  1722.  
  1723.                     oscillator.connect(gainNode);
  1724.                     gainNode.connect(audioContext.destination);
  1725.                     oscillator.start();
  1726.                     setTimeout(() => {
  1727.                         oscillator.stop();
  1728.                     }, 100); 
  1729.                 } catch (e) {
  1730.                     console.warn("Beep failed:", e);
  1731.                 }
  1732.             };
  1733.         }
  1734.         window.originalTitle = document.title;
  1735.         window.isNotifying = false;
  1736.         let beepOnYouSetting = false;
  1737.         let notifyOnYouSetting = false;
  1738.         let customMsgSetting = "(!) ";
  1739.         let previousFaviconState = null;
  1740.         async function initSettings() {
  1741.             beepOnYouSetting = await getSetting("beepOnYou");
  1742.             notifyOnYouSetting = await getSetting("notifyOnYou");
  1743.             const customMsg = await getSetting("notifyOnYou_customMessage");
  1744.             if (customMsg) customMsgSetting = customMsg;
  1745.         }
  1746.         await initSettings();
  1747.         const playBeep = createBeepSound();
  1748.         let scrollHandlerActive = false;
  1749.         async function notifyOnYou() {
  1750.             if (!window.isNotifying) {
  1751.                 window.isNotifying = true;
  1752.                 document.title = customMsgSetting + " " + window.originalTitle;
  1753.                 if (await getSetting("customFavicon")) {
  1754.                     const { style, state } = faviconManager.getCurrentFaviconState();
  1755.                     if (state !== "notif") {
  1756.                         previousFaviconState = { style, state };
  1757.                     }
  1758.                     faviconManager.setFaviconStyle(style, "notif");
  1759.                 }
  1760.             }
  1761.         }
  1762.         function setupNotificationScrollHandler() {
  1763.             if (scrollHandlerActive) return;
  1764.             scrollHandlerActive = true;
  1765.             const BOTTOM_OFFSET = 45;
  1766.             function checkScrollPosition() {
  1767.                 if (!window.isNotifying) return;
  1768.                 const scrollPosition = window.scrollY + window.innerHeight;
  1769.                 const documentHeight = document.documentElement.scrollHeight;
  1770.                 if (scrollPosition >= documentHeight - BOTTOM_OFFSET) {
  1771.                     document.title = window.originalTitle;
  1772.                     window.isNotifying = false;
  1773.                     const { state } = faviconManager.getCurrentFaviconState();
  1774.                     if (state === "notif" && previousFaviconState) {
  1775.                         faviconManager.setFaviconStyle(previousFaviconState.style, previousFaviconState.state);
  1776.                         previousFaviconState = null;
  1777.                     } else if (state === "notif") {
  1778.                         faviconManager.setFavicon("base");
  1779.                     }
  1780.                     window.removeEventListener('scroll', checkScrollPosition);
  1781.                     scrollHandlerActive = false;
  1782.                 }
  1783.             }
  1784.             window.addEventListener('scroll', checkScrollPosition);
  1785.         }
  1786.         window.addEventListener("focus", () => {
  1787.             if (window.isNotifying) {
  1788.                 setupNotificationScrollHandler();
  1789.             }
  1790.         });
  1791.         const observer = new MutationObserver((mutations) => {
  1792.             for (const mutation of mutations) {
  1793.                 for (const node of mutation.addedNodes) {
  1794.                     if (
  1795.                         node.nodeType === 1 &&
  1796.                         typeof node.matches === "function" &&
  1797.                         (node.matches('.postCell') || node.matches('.opCell')) &&
  1798.                         node.querySelector("a.quoteLink.you") &&
  1799.                         !node.closest('.innerPost')
  1800.                     ) {
  1801.                         if (beepOnYouSetting) {
  1802.                             playBeep();
  1803.                         }
  1804.                         if (notifyOnYouSetting) {
  1805.                             notifyOnYou();
  1806.                             setupNotificationScrollHandler();
  1807.                         }
  1808.                     }
  1809.                 }
  1810.             }
  1811.         });
  1812.  
  1813.         observer.observe(divPosts, { childList: true, subtree: false });
  1814.         window.addEventListener("8chanSS_settingChanged", async (e) => {
  1815.             if (e.detail && e.detail.key) {
  1816.                 const key = e.detail.key;
  1817.                 if (key === "beepOnYou") {
  1818.                     beepOnYouSetting = await getSetting("beepOnYou");
  1819.                 } else if (key === "notifyOnYou") {
  1820.                     notifyOnYouSetting = await getSetting("notifyOnYou");
  1821.                 } else if (key === "notifyOnYou_customMessage") {
  1822.                     const customMsg = await getSetting("notifyOnYou_customMessage");
  1823.                     if (customMsg) customMsgSetting = customMsg;
  1824.                 }
  1825.             }
  1826.         });
  1827.     }
  1828.     featureBeepOnYou();
  1829.     function enhanceYouTubeLinks() {
  1830.         const ytTitleCache = {};
  1831.         function loadCache() {
  1832.             try {
  1833.                 const data = localStorage.getItem('ytTitleCache');
  1834.                 if (data) Object.assign(ytTitleCache, JSON.parse(data));
  1835.             } catch (e) { }
  1836.         }
  1837.         function saveCache() {
  1838.             try {
  1839.                 localStorage.setItem('ytTitleCache', JSON.stringify(ytTitleCache));
  1840.             } catch (e) { }
  1841.         }
  1842.         loadCache();
  1843.         function getYouTubeId(url) {
  1844.             try {
  1845.                 const u = new URL(url);
  1846.                 if (u.hostname.endsWith('youtube.com')) {
  1847.                     return u.searchParams.get('v');
  1848.                 }
  1849.                 if (u.hostname === 'youtu.be') {
  1850.                     return u.pathname.slice(1);
  1851.                 }
  1852.             } catch (e) { }
  1853.             return null;
  1854.         }
  1855.         function sanitizeYouTubeId(videoId) {
  1856.             if (!videoId) return null;
  1857.             const match = videoId.match(/([a-zA-Z0-9_-]{11})/);
  1858.             return match ? match[1] : null;
  1859.         }
  1860.         async function fetchYouTubeTitle(videoId) {
  1861.             const cleanId = sanitizeYouTubeId(videoId);
  1862.             if (!cleanId) return null;
  1863.             if (ytTitleCache[cleanId]) {
  1864.                 return Promise.resolve(ytTitleCache[cleanId]);
  1865.             }
  1866.             return fetch(`https://www.youtube.com/oembed?url=https://www.youtube.com/watch?v=${cleanId}&format=json`)
  1867.                 .then(r => r.ok ? r.json() : null)
  1868.                 .then(data => {
  1869.                     const title = data ? data.title : null;
  1870.                     if (title) {
  1871.                         ytTitleCache[cleanId] = title;
  1872.                         saveCache();
  1873.                     }
  1874.                     return title;
  1875.                 })
  1876.                 .catch(() => null);
  1877.         }
  1878.         function processLinks(root = document) {
  1879.             root.querySelectorAll('a[href*="youtu"]').forEach(link => {
  1880.                 if (link.dataset.ytEnhanced) return;
  1881.                 const videoId = getYouTubeId(link.href);
  1882.                 if (!videoId) return;
  1883.                 link.dataset.ytEnhanced = "1";
  1884.                 fetchYouTubeTitle(videoId).then(title => {
  1885.                     if (title) {
  1886.                         link.innerHTML = `<img class="yt-icon" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAMCAYAAABr5z2BAAABIklEQVQoz53LvUrDUBjG8bOoOammSf1IoBSvoCB4JeIqOHgBLt6AIMRBBQelWurQ2kERnMRBsBUcIp5FJSBI5oQsJVkkUHh8W0o5nhaFHvjBgef/Mq+Q46RJBMkI/vE+aOus956tnEswIZe1LV0QyJ5sE2GzgZfVMtRNIdiDpccEssdlB1mW4bvTwdvWJtRdErM7U+8S/FJykCRJX5qm+KpVce8UMNLRLbulz4iSjTAMh6Iowsd5BeNadp3nUF0VlxAEwZBotXC0Usa4ll3meZdA1iguwvf9vpvDA2wvmKgYGtSud8suDB4TyGr2PF49D/vra9jRZ1BVdknMzgwuCGSnZEObwu6sBnVTCHZiaC7BhFx2PKdxUidiAH/4lLo9Mv0DELVs9qsOHXwAAAAASUVORK5CYII="><span>[Youtube]</span> ${title}`;
  1887.                     }
  1888.                 });
  1889.             });
  1890.         }
  1891.         processLinks(document);
  1892.         new MutationObserver(() => processLinks(divThreads)).observe(divThreads, { childList: true, subtree: true });
  1893.     }
  1894.     function featureLabelCreated12h() {
  1895.         function convertLabelCreatedTimes(root = document) {
  1896.             (root.querySelectorAll
  1897.                 ? root.querySelectorAll('.labelCreated')
  1898.                 : []).forEach(span => {
  1899.                     if (span.dataset.timeConverted === "1") return;
  1900.  
  1901.                     const text = span.textContent;
  1902.                     const match = text.match(/^(.+\))\s+(\d{2}):(\d{2}):(\d{2})$/);
  1903.                     if (!match) return;
  1904.  
  1905.                     const [_, datePart, hourStr, minStr, secStr] = match;
  1906.                     let hour = parseInt(hourStr, 10);
  1907.                     const min = minStr;
  1908.                     const sec = secStr;
  1909.                     const ampm = hour >= 12 ? 'PM' : 'AM';
  1910.                     let hour12 = hour % 12;
  1911.                     if (hour12 === 0) hour12 = 12;
  1912.  
  1913.                     const newText = `${datePart} ${hour12}:${min}:${sec} ${ampm}`;
  1914.                     span.textContent = newText;
  1915.                     span.dataset.timeConverted = "1";
  1916.                 });
  1917.         }
  1918.         convertLabelCreatedTimes();
  1919.         if (divPosts) {
  1920.             new MutationObserver(() => {
  1921.                 convertLabelCreatedTimes(divPosts);
  1922.             }).observe(divPosts, { childList: true, subtree: true });
  1923.         }
  1924.     }
  1925.     function truncateFilenames(filenameLength) {
  1926.         function processLinks(root = document) {
  1927.             root.querySelectorAll('a.originalNameLink').forEach(link => {
  1928.                 if (link.dataset.truncated === "1") return;
  1929.                 const fullFilename = link.getAttribute('download');
  1930.                 if (!fullFilename) return;
  1931.                 const lastDot = fullFilename.lastIndexOf('.');
  1932.                 if (lastDot === -1) return; 
  1933.                 const name = fullFilename.slice(0, lastDot);
  1934.                 const ext = fullFilename.slice(lastDot);
  1935.                 let truncated = fullFilename;
  1936.                 if (name.length > filenameLength) {
  1937.                     truncated = name.slice(0, filenameLength) + '(...)' + ext;
  1938.                 }
  1939.                 link.textContent = truncated;
  1940.                 link.dataset.truncated = "1";
  1941.                 link.addEventListener('mouseenter', function () {
  1942.                     link.textContent = fullFilename;
  1943.                 });
  1944.                 link.addEventListener('mouseleave', function () {
  1945.                     link.textContent = truncated;
  1946.                 });
  1947.                 link.title = fullFilename;
  1948.             });
  1949.         }
  1950.         processLinks(document);
  1951.         if (divThreads) {
  1952.             new MutationObserver(() => {
  1953.                 processLinks(divThreads);
  1954.             }).observe(divThreads, { childList: true, subtree: true });
  1955.         }
  1956.     }
  1957.     function threadInfoHeader(retries = 10, delay = 200) {
  1958.         const navHeader = document.querySelector('.navHeader');
  1959.         const navOptionsSpan = document.getElementById('navOptionsSpan');
  1960.         const postCountEl = document.getElementById('postCount');
  1961.         const userCountEl = document.getElementById('userCountLabel');
  1962.         const fileCountEl = document.getElementById('fileCount');
  1963.         function retryIfElementsMissing(checkFn, callback, retries, delay) {
  1964.             if (!checkFn()) {
  1965.                 if (retries > 0) {
  1966.                     setTimeout(() => retryIfElementsMissing(checkFn, callback, retries - 1, delay), delay);
  1967.                 }
  1968.                 return true;
  1969.             }
  1970.             return false;
  1971.         }
  1972.  
  1973.         if (retryIfElementsMissing(
  1974.             () => navHeader && navOptionsSpan && postCountEl && userCountEl && fileCountEl,
  1975.             () => threadInfoHeader(retries - 1, delay),
  1976.             retries,
  1977.             delay
  1978.         )) return;
  1979.         const postCount = postCountEl.textContent || '0';
  1980.         const userCount = userCountEl.textContent || '0';
  1981.         const fileCount = fileCountEl.textContent || '0';
  1982.         let statsDisplay = navHeader.querySelector('.thread-stats-display');
  1983.         if (!statsDisplay) {
  1984.             statsDisplay = document.createElement('span');
  1985.             statsDisplay.className = 'thread-stats-display';
  1986.             statsDisplay.style.marginRight = '1px';
  1987.         }
  1988.  
  1989.         statsDisplay.innerHTML = `
  1990.         [ 
  1991.         <span class="statLabel">Posts: </span><span class="statNumb">${postCount}</span> | 
  1992.         <span class="statLabel">Users: </span><span class="statNumb">${userCount}</span> | 
  1993.         <span class="statLabel">Files: </span><span class="statNumb">${fileCount}</span>
  1994.         ]
  1995.         `;
  1996.         if (statsDisplay.parentNode && statsDisplay.parentNode !== navOptionsSpan) {
  1997.             statsDisplay.parentNode.removeChild(statsDisplay);
  1998.         }
  1999.         if (navOptionsSpan.firstChild !== statsDisplay) {
  2000.             navOptionsSpan.insertBefore(statsDisplay, navOptionsSpan.firstChild);
  2001.         }
  2002.         if (!threadInfoHeader._observerInitialized) {
  2003.             const statIds = ['postCount', 'userCountLabel', 'fileCount'];
  2004.             function debounce(fn, wait) {
  2005.                 let timeout;
  2006.                 return function (...args) {
  2007.                     clearTimeout(timeout);
  2008.                     timeout = setTimeout(() => fn.apply(this, args), wait);
  2009.                 };
  2010.             }
  2011.  
  2012.             if (!threadInfoHeader._debouncedUpdate) {
  2013.                 threadInfoHeader._debouncedUpdate = debounce(() => threadInfoHeader(0, delay), 100);
  2014.             }
  2015.             statIds.forEach(id => {
  2016.                 const el = document.getElementById(id);
  2017.                 if (el) {
  2018.                     new MutationObserver(threadInfoHeader._debouncedUpdate).observe(el, { childList: true, subtree: false, characterData: true });
  2019.                 }
  2020.             });
  2021.             threadInfoHeader._observerInitialized = true;
  2022.         }
  2023.     }
  2024.     function mediaViewerPositioning() {
  2025.         localStorage.setItem("mediaViewer", "true");
  2026.         async function updateMediaViewerClass() {
  2027.             const mediaViewer = document.getElementById('media-viewer');
  2028.             if (!mediaViewer) return;
  2029.  
  2030.             const isEnabled = await getSetting("enableMediaViewer");
  2031.             if (!isEnabled) {
  2032.                 mediaViewer.classList.remove('topright', 'topleft');
  2033.                 return;
  2034.             }
  2035.  
  2036.             const viewerStyle = await getSetting("enableMediaViewer_viewerStyle");
  2037.             mediaViewer.classList.remove('topright', 'topleft');
  2038.             if (viewerStyle === 'topright' || viewerStyle === 'topleft') {
  2039.                 mediaViewer.classList.add(viewerStyle);
  2040.             } else {
  2041.             }
  2042.         }
  2043.         function setupIfMediaViewerExists() {
  2044.             const mediaViewer = document.getElementById('media-viewer');
  2045.             if (mediaViewer) {
  2046.                 updateMediaViewerClass();
  2047.                 return true;
  2048.             }
  2049.             return false;
  2050.         }
  2051.         if (setupIfMediaViewerExists()) {
  2052.         } else {
  2053.             const observer = new MutationObserver((mutations) => {
  2054.                 for (const mutation of mutations) {
  2055.                     if (mutation.addedNodes.length) {
  2056.                         for (const node of mutation.addedNodes) {
  2057.                             if (node.id === 'media-viewer' ||
  2058.                                 (node.nodeType === 1 && node.querySelector('#media-viewer'))) {
  2059.                                 updateMediaViewerClass();
  2060.                                 observer.disconnect();
  2061.                                 return;
  2062.                             }
  2063.                         }
  2064.                     }
  2065.                 }
  2066.             });
  2067.             observer.observe(document.body, { childList: true, subtree: false });
  2068.         }
  2069.     }
  2070.     async function featureHighlightNewIds() {
  2071.         const hlStyle = await getSetting("highlightNewIds_idHlStyle");
  2072.         if (!divPosts) return;
  2073.         if (!document.querySelector('.spanId')) return;
  2074.         const styleClassMap = {
  2075.             moetext: "moeText",
  2076.             glow: "id-glow",
  2077.             dotted: "id-dotted"
  2078.         };
  2079.         const styleClass = styleClassMap[hlStyle] || "moeText"; 
  2080.         function highlightIds(root = divPosts) {
  2081.             const idFrequency = {};
  2082.             const labelSpans = root.querySelectorAll('.labelId');
  2083.             labelSpans.forEach(span => {
  2084.                 const id = span.textContent.trim();
  2085.                 idFrequency[id] = (idFrequency[id] || 0) + 1;
  2086.             });
  2087.             const seen = {};
  2088.             labelSpans.forEach(span => {
  2089.                 const id = span.textContent.trim();
  2090.                 span.classList.remove('moetext', 'id-glow', 'id-dotted');
  2091.                 if (!seen[id]) {
  2092.                     seen[id] = true;
  2093.                     span.classList.add(styleClass);
  2094.                     span.title = idFrequency[id] === 1
  2095.                         ? "This ID appears only once."
  2096.                         : "This was the first occurrence of this ID.";
  2097.                 } else {
  2098.                     span.title = "";
  2099.                 }
  2100.             });
  2101.         }
  2102.         highlightIds();
  2103.         const observer = new MutationObserver(mutations => {
  2104.             let needsUpdate = false;
  2105.             for (const mutation of mutations) {
  2106.                 for (const node of mutation.addedNodes) {
  2107.                     if (node.nodeType === 1 && node.querySelector && node.querySelector('.labelId')) {
  2108.                         needsUpdate = true;
  2109.                         break;
  2110.                     }
  2111.                 }
  2112.                 if (needsUpdate) break;
  2113.             }
  2114.             if (needsUpdate) {
  2115.                 highlightIds();
  2116.             }
  2117.         });
  2118.         observer.observe(divPosts, { childList: true, subtree: true });
  2119.     }
  2120.     async function featureQuoteThreading() {
  2121.         const isEnabled = typeof getSetting === "function"
  2122.             ? await getSetting("quoteThreading")
  2123.             : true;
  2124.  
  2125.         if (!isEnabled) {
  2126.             document.querySelector('.quoteThreadingRefresh')?.remove();
  2127.             return;
  2128.         }
  2129.         function processPosts(posts) {
  2130.             posts.forEach(post => {
  2131.                 if (post.closest('.threadedReplies')) {
  2132.                     return;
  2133.                 }
  2134.  
  2135.                 const backlinks = post.querySelectorAll('.panelBacklinks .backLink.postLink');
  2136.  
  2137.                 backlinks.forEach(backlink => {
  2138.                     const targetUri = backlink.getAttribute('data-target-uri');
  2139.                     if (!targetUri) return;
  2140.  
  2141.                     const targetPostId = targetUri.split('#')[1];
  2142.                     const targetPost = document.getElementById(targetPostId);
  2143.  
  2144.                     if (targetPost) {
  2145.                         if (targetPost.closest('.threadedReplies')) {
  2146.                             return;
  2147.                         }
  2148.  
  2149.                         let repliesContainer = post.nextElementSibling;
  2150.                         if (!repliesContainer?.classList.contains('threadedReplies')) {
  2151.                             repliesContainer = document.createElement('div');
  2152.                             repliesContainer.className = 'threadedReplies';
  2153.                             post.parentNode.insertBefore(repliesContainer, post.nextSibling);
  2154.                         }
  2155.                         if (!repliesContainer.contains(targetPost)) {
  2156.                             repliesContainer.appendChild(targetPost);
  2157.                         }
  2158.                     }
  2159.                 });
  2160.             });
  2161.         }
  2162.         function threadAllPosts() {
  2163.             processPosts(document.querySelectorAll('.divPosts .postCell'));
  2164.         }
  2165.  
  2166.         function threadNewPosts() {
  2167.             const allPosts = document.querySelectorAll('.divPosts .postCell');
  2168.             processPosts(Array.from(allPosts).slice(-5));
  2169.         }
  2170.         function setupPostObserver() {
  2171.             const observer = new MutationObserver(mutations => {
  2172.                 mutations.forEach(mutation => {
  2173.                     if (mutation.addedNodes.length) {
  2174.                         setTimeout(threadNewPosts, 50);
  2175.                     }
  2176.                 });
  2177.             });
  2178.  
  2179.             if (typeof divPosts !== 'undefined') {
  2180.                 observer.observe(divPosts, {
  2181.                     childList: true,
  2182.                     subtree: false
  2183.                 });
  2184.             }
  2185.         }
  2186.         function addRefreshButton() {
  2187.             const replyButton = document.querySelector('.threadBottom .innerUtility #replyButton');
  2188.             if (!replyButton || replyButton.nextElementSibling?.classList.contains('quoteThreadingBtn')) return;
  2189.  
  2190.             const refreshBtn = document.createElement('a');
  2191.             refreshBtn.href = "#";
  2192.             refreshBtn.className = "quoteThreadingBtn";
  2193.             refreshBtn.title = "Refresh quote threading";
  2194.             refreshBtn.textContent = "ReThread";
  2195.  
  2196.             replyButton.after(' ', refreshBtn);
  2197.  
  2198.             refreshBtn.addEventListener('click', e => {
  2199.                 e.preventDefault();
  2200.                 threadAllPosts();
  2201.             });
  2202.         }
  2203.         threadAllPosts();  
  2204.         addRefreshButton();
  2205.         setupPostObserver();
  2206.     }
  2207.     async function createSettingsMenu() {
  2208.         let menu = document.getElementById("8chanSS-menu");
  2209.         if (menu) return menu;
  2210.         menu = document.createElement("div");
  2211.         menu.id = "8chanSS-menu";
  2212.         menu.style.position = "fixed";
  2213.         menu.style.top = "3rem"; 
  2214.         menu.style.left = "20rem"; 
  2215.         menu.style.zIndex = "99999";
  2216.         menu.style.background = "rgb(from var(--menu-color) r g b / 1)";
  2217.         menu.style.color = "var(--text-color)";
  2218.         menu.style.borderColor = "1px solid var(--border-color)";
  2219.         menu.style.padding = "0";
  2220.         menu.style.boxShadow = "0 4px 16px rgba(0,0,0,0.25)";
  2221.         menu.style.display = "none";
  2222.         menu.style.minWidth = "220px";
  2223.         menu.style.width = "100%";
  2224.         menu.style.maxWidth = "470px";
  2225.         menu.style.fontFamily = "sans-serif";
  2226.         menu.style.userSelect = "none";
  2227.         let isDragging = false,
  2228.             dragOffsetX = 0,
  2229.             dragOffsetY = 0;
  2230.         const header = document.createElement("div");
  2231.         header.style.display = "flex";
  2232.         header.style.justifyContent = "space-between";
  2233.         header.style.alignItems = "center";
  2234.         header.style.marginBottom = "0";
  2235.         header.style.cursor = "move";
  2236.         header.style.color = "var(--subject-color)";
  2237.         header.style.background = "rgb(from var(--contrast-color) r g b / 1)";
  2238.         header.style.padding = "1px 18px 1px";
  2239.         header.addEventListener("mousedown", function (e) {
  2240.             isDragging = true;
  2241.             const rect = menu.getBoundingClientRect();
  2242.             dragOffsetX = e.clientX - rect.left;
  2243.             dragOffsetY = e.clientY - rect.top;
  2244.             document.body.style.userSelect = "none";
  2245.         });
  2246.         document.addEventListener("mousemove", function (e) {
  2247.             if (!isDragging) return;
  2248.             let newLeft = e.clientX - dragOffsetX;
  2249.             let newTop = e.clientY - dragOffsetY;
  2250.             const menuRect = menu.getBoundingClientRect();
  2251.             const menuWidth = menuRect.width;
  2252.             const menuHeight = menuRect.height;
  2253.             const viewportWidth = window.innerWidth;
  2254.             const viewportHeight = window.innerHeight;
  2255.             newLeft = Math.max(0, Math.min(newLeft, viewportWidth - menuWidth));
  2256.             newTop = Math.max(0, Math.min(newTop, viewportHeight - menuHeight));
  2257.             menu.style.left = newLeft + "px";
  2258.             menu.style.top = newTop + "px";
  2259.             menu.style.right = "auto";
  2260.         });
  2261.         document.addEventListener("mouseup", function () {
  2262.             isDragging = false;
  2263.             document.body.style.userSelect = "";
  2264.         });
  2265.         const title = document.createElement("span");
  2266.         title.textContent = "8chanSS Settings";
  2267.         title.style.fontWeight = "bold";
  2268.         header.appendChild(title);
  2269.  
  2270.         const closeBtn = document.createElement("button");
  2271.         closeBtn.textContent = "✕";
  2272.         closeBtn.style.background = "none";
  2273.         closeBtn.style.setProperty("background", "none", "important");
  2274.         closeBtn.style.border = "none";
  2275.         closeBtn.style.color = "var(--subject-color)";
  2276.         closeBtn.style.fontSize = "18px";
  2277.         closeBtn.style.cursor = "pointer";
  2278.         closeBtn.style.marginLeft = "10px";
  2279.         closeBtn.addEventListener("click", () => {
  2280.             menu.style.display = "none";
  2281.         });
  2282.         header.appendChild(closeBtn);
  2283.  
  2284.         menu.appendChild(header);
  2285.         const closeOnOutsideClick = (e) => {
  2286.             if (menu.style.display !== "none" && !menu.contains(e.target)) {
  2287.                 const menuToggle = document.getElementById("8chanSS-icon");
  2288.                 if (menuToggle && !menuToggle.contains(e.target)) {
  2289.                     menu.style.display = "none";
  2290.                 }
  2291.             }
  2292.         };
  2293.         Object.defineProperty(menu.style, 'display', {
  2294.             set: function (value) {
  2295.                 const oldValue = this.getPropertyValue('display');
  2296.                 this.setProperty('display', value);
  2297.                 if (oldValue === 'none' && value !== 'none') {
  2298.                     setTimeout(() => { 
  2299.                         document.addEventListener('click', closeOnOutsideClick);
  2300.                     }, 10);
  2301.                 }
  2302.                 else if (oldValue !== 'none' && value === 'none') {
  2303.                     document.removeEventListener('click', closeOnOutsideClick);
  2304.                 }
  2305.             },
  2306.             get: function () {
  2307.                 return this.getPropertyValue('display');
  2308.             }
  2309.         });
  2310.         const tabNav = document.createElement("div");
  2311.         tabNav.style.display = "flex";
  2312.         tabNav.style.borderBottom = "1px solid #444";
  2313.         tabNav.style.background = "rgb(from var(--menu-color) r g b / 1)";
  2314.         const tabContent = document.createElement("div");
  2315.         tabContent.style.padding = "15px 16px";
  2316.         tabContent.style.maxHeight = "65vh";
  2317.         tabContent.style.overflowY = "auto";
  2318.         tabContent.style.scrollbarWidth = "thin";
  2319.         tabContent.style.fontSize = "smaller";
  2320.         const tempSettings = {};
  2321.         await Promise.all(
  2322.             Object.keys(flatSettings).map(async (key) => {
  2323.                 tempSettings[key] = await getSetting(key);
  2324.             })
  2325.         );
  2326.         const tabs = {
  2327.             site: {
  2328.                 label: "Site",
  2329.                 content: createTabContent("site", tempSettings),
  2330.             },
  2331.             threads: {
  2332.                 label: "Threads",
  2333.                 content: createTabContent("threads", tempSettings),
  2334.             },
  2335.             catalog: {
  2336.                 label: "Catalog",
  2337.                 content: createTabContent("catalog", tempSettings),
  2338.             },
  2339.             styling: {
  2340.                 label: "Style",
  2341.                 content: createTabContent("styling", tempSettings),
  2342.             },
  2343.             miscel: {
  2344.                 label: "Misc.",
  2345.                 content: createTabContent("miscel", tempSettings),
  2346.             },
  2347.             shortcuts: {
  2348.                 label: "⌨️",
  2349.                 content: createShortcutsTab(),
  2350.             },
  2351.         };
  2352.         Object.keys(tabs).forEach((tabId, index, arr) => {
  2353.             const tab = tabs[tabId];
  2354.             const tabButton = document.createElement("button");
  2355.             tabButton.textContent = tab.label;
  2356.             tabButton.dataset.tab = tabId;
  2357.             tabButton.style.background = index === 0 ? "var(--contrast-color)" : "transparent";
  2358.             tabButton.style.border = "none";
  2359.             tabButton.style.borderRight = "1px solid #444";
  2360.             tabButton.style.setProperty("border-left-radius", "0", "important");
  2361.             tabButton.style.color = "var(--text-color)";
  2362.             tabButton.style.padding = "8px 15px";
  2363.             tabButton.style.margin = "5px 0 0 0";
  2364.             tabButton.style.setProperty("border-top-right-radius", "0", "important");
  2365.             tabButton.style.setProperty("border-bottom-right-radius", "0", "important");
  2366.             tabButton.style.cursor = "pointer";
  2367.             tabButton.style.flex = "1";
  2368.             tabButton.style.fontSize = "14px";
  2369.             tabButton.style.transition = "background 0.2s";
  2370.             if (index === 0) {
  2371.                 tabButton.style.setProperty("border-top-left-radius", "8px", "important");
  2372.                 tabButton.style.setProperty("border-top-right-radius", "0", "important");
  2373.                 tabButton.style.setProperty("border-bottom-left-radius", "0", "important");
  2374.                 tabButton.style.setProperty("border-bottom-right-radius", "0", "important");
  2375.                 tabButton.style.margin = "5px 0 0 5px";
  2376.             }
  2377.             if (index === arr.length - 1) {
  2378.                 tabButton.style.setProperty("border-top-right-radius", "8px", "important");
  2379.                 tabButton.style.setProperty("border-top-left-radius", "0", "important");
  2380.                 tabButton.style.setProperty("border-bottom-left-radius", "0", "important");
  2381.                 tabButton.style.setProperty("border-bottom-right-radius", "0", "important");
  2382.                 tabButton.style.margin = "5px 5px 0 0";
  2383.                 tabButton.style.borderRight = "none"; 
  2384.             }
  2385.  
  2386.             tabButton.addEventListener("click", () => {
  2387.                 Object.values(tabs).forEach((t) => {
  2388.                     t.content.style.display = "none";
  2389.                 });
  2390.                 tab.content.style.display = "block";
  2391.                 tabNav.querySelectorAll("button").forEach((btn) => {
  2392.                     btn.style.background = "transparent";
  2393.                 });
  2394.                 tabButton.style.background = "var(--contrast-color)";
  2395.             });
  2396.  
  2397.             tabNav.appendChild(tabButton);
  2398.         });
  2399.  
  2400.         menu.appendChild(tabNav);
  2401.         Object.values(tabs).forEach((tab, index) => {
  2402.             tab.content.style.display = index === 0 ? "block" : "none";
  2403.             tabContent.appendChild(tab.content);
  2404.         });
  2405.  
  2406.         menu.appendChild(tabContent);
  2407.         const buttonContainer = document.createElement("div");
  2408.         buttonContainer.style.display = "flex";
  2409.         buttonContainer.style.gap = "10px";
  2410.         buttonContainer.style.padding = "0 18px 15px";
  2411.         const saveBtn = document.createElement("button");
  2412.         saveBtn.textContent = "Save";
  2413.         saveBtn.style.setProperty("background", "#4caf50", "important");
  2414.         saveBtn.style.setProperty("color", "#fff", "important");
  2415.         saveBtn.style.border = "none";
  2416.         saveBtn.style.borderRadius = "4px";
  2417.         saveBtn.style.padding = "8px 18px";
  2418.         saveBtn.style.fontSize = "15px";
  2419.         saveBtn.style.cursor = "pointer";
  2420.         saveBtn.style.flex = "1";
  2421.         saveBtn.addEventListener("click", async function () {
  2422.             for (const key of Object.keys(tempSettings)) {
  2423.                 await setSetting(key, tempSettings[key]);
  2424.             }
  2425.             saveBtn.textContent = "Saved!";
  2426.             setTimeout(() => {
  2427.                 saveBtn.textContent = "Save";
  2428.             }, 900);
  2429.             setTimeout(() => {
  2430.                 window.location.reload();
  2431.             }, 400);
  2432.         });
  2433.         buttonContainer.appendChild(saveBtn);
  2434.         const resetBtn = document.createElement("button");
  2435.         resetBtn.textContent = "Reset";
  2436.         resetBtn.style.setProperty("background", "#dd3333", "important");
  2437.         resetBtn.style.setProperty("color", "#fff", "important");
  2438.         resetBtn.style.border = "none";
  2439.         resetBtn.style.borderRadius = "4px";
  2440.         resetBtn.style.padding = "8px 18px";
  2441.         resetBtn.style.fontSize = "15px";
  2442.         resetBtn.style.cursor = "pointer";
  2443.         resetBtn.style.flex = "1";
  2444.         resetBtn.addEventListener("click", async function () {
  2445.             if (confirm("Reset all 8chanSS settings to defaults?")) {
  2446.                 const keys = await GM.listValues();
  2447.                 for (const key of keys) {
  2448.                     if (key.startsWith("8chanSS_")) {
  2449.                         await GM.deleteValue(key);
  2450.                     }
  2451.                 }
  2452.                 resetBtn.textContent = "Reset!";
  2453.                 setTimeout(() => {
  2454.                     resetBtn.textContent = "Reset";
  2455.                 }, 900);
  2456.                 setTimeout(() => {
  2457.                     window.location.reload();
  2458.                 }, 400);
  2459.             }
  2460.         });
  2461.         buttonContainer.appendChild(resetBtn);
  2462.  
  2463.         menu.appendChild(buttonContainer);
  2464.         const info = document.createElement("div");
  2465.         info.style.fontSize = "11px";
  2466.         info.style.padding = "0 18px 12px";
  2467.         info.style.opacity = "0.7";
  2468.         info.style.textAlign = "center";
  2469.         info.innerHTML = 'Press Save to apply changes. Page will reload. - <a href="https://github.com/otacoo/8chanSS/blob/main/CHANGELOG.md" target="_blank" title="Check the changelog." style="color: var(--link-color); text-decoration: underline dashed;">Ver. 1.47.0</a>';
  2470.         menu.appendChild(info);
  2471.  
  2472.         document.body.appendChild(menu);
  2473.         return menu;
  2474.     }
  2475.     function createTabContent(category, tempSettings) {
  2476.         const container = document.createElement("div");
  2477.         const categorySettings = scriptSettings[category];
  2478.  
  2479.         Object.keys(categorySettings).forEach((key) => {
  2480.             const setting = categorySettings[key];
  2481.             if (setting.type === "separator") {
  2482.                 const hr = document.createElement("hr");
  2483.                 hr.style.border = "none";
  2484.                 hr.style.borderTop = "1px solid #444";
  2485.                 hr.style.margin = "12px 0";
  2486.                 container.appendChild(hr);
  2487.                 return;
  2488.             }
  2489.             if (setting.type === "title") {
  2490.                 const title = document.createElement("div");
  2491.                 title.textContent = setting.label;
  2492.                 title.style.fontWeight = "bold";
  2493.                 title.style.color = "var(--subject-title)";
  2494.                 title.style.fontSize = "1rem";
  2495.                 title.style.margin = "10px 0 6px 0";
  2496.                 title.style.opacity = "0.9";
  2497.                 container.appendChild(title);
  2498.                 return;
  2499.             }
  2500.             const parentRow = document.createElement("div");
  2501.             parentRow.style.display = "flex";
  2502.             parentRow.style.alignItems = "center";
  2503.             parentRow.style.marginBottom = "0px";
  2504.             if (key === "hoverVideoVolume" && setting.type === "number") {
  2505.                 const label = document.createElement("label");
  2506.                 label.htmlFor = "setting_" + key;
  2507.                 label.textContent = setting.label + ": ";
  2508.                 label.style.flex = "1";
  2509.  
  2510.                 const sliderContainer = document.createElement("div");
  2511.                 sliderContainer.style.display = "flex";
  2512.                 sliderContainer.style.alignItems = "center";
  2513.                 sliderContainer.style.flex = "1";
  2514.  
  2515.                 const slider = document.createElement("input");
  2516.                 slider.type = "range";
  2517.                 slider.id = "setting_" + key;
  2518.                 slider.min = setting.min;
  2519.                 slider.max = setting.max;
  2520.                 slider.value = Number(tempSettings[key]).toString();
  2521.                 slider.style.flex = "unset";
  2522.                 slider.style.width = "100px";
  2523.                 slider.style.marginRight = "10px";
  2524.  
  2525.                 const valueLabel = document.createElement("span");
  2526.                 valueLabel.textContent = slider.value + "%";
  2527.                 valueLabel.style.minWidth = "40px";
  2528.                 valueLabel.style.textAlign = "right";
  2529.  
  2530.                 slider.addEventListener("input", function () {
  2531.                     let val = Number(slider.value);
  2532.                     if (isNaN(val)) val = setting.default;
  2533.                     val = Math.max(setting.min, Math.min(setting.max, val));
  2534.                     slider.value = val.toString();
  2535.                     tempSettings[key] = val;
  2536.                     valueLabel.textContent = val + "%";
  2537.                 });
  2538.  
  2539.                 sliderContainer.appendChild(slider);
  2540.                 sliderContainer.appendChild(valueLabel);
  2541.  
  2542.                 parentRow.appendChild(label);
  2543.                 parentRow.appendChild(sliderContainer);
  2544.                 const wrapper = document.createElement("div");
  2545.                 wrapper.style.marginBottom = "10px";
  2546.                 wrapper.appendChild(parentRow);
  2547.                 container.appendChild(wrapper);
  2548.                 return; 
  2549.             }
  2550.             const checkbox = document.createElement("input");
  2551.             checkbox.type = "checkbox";
  2552.             checkbox.id = "setting_" + key;
  2553.             checkbox.checked =
  2554.                 tempSettings[key] === true || tempSettings[key] === "true";
  2555.             checkbox.style.marginRight = "8px";
  2556.             const label = document.createElement("label");
  2557.             label.htmlFor = checkbox.id;
  2558.             label.textContent = setting.label;
  2559.             label.style.flex = "1";
  2560.             let chevron = null;
  2561.             let subOptionsContainer = null;
  2562.             if (setting?.subOptions) {
  2563.                 chevron = document.createElement("span");
  2564.                 chevron.className = "ss-chevron";
  2565.                 chevron.innerHTML = "&#9654;"; 
  2566.                 chevron.style.display = "inline-block";
  2567.                 chevron.style.transition = "transform 0.2s";
  2568.                 chevron.style.marginLeft = "6px";
  2569.                 chevron.style.fontSize = "12px";
  2570.                 chevron.style.userSelect = "none";
  2571.                 chevron.style.transform = checkbox.checked
  2572.                     ? "rotate(90deg)"
  2573.                     : "rotate(0deg)";
  2574.             }
  2575.             checkbox.addEventListener("change", function () {
  2576.                 tempSettings[key] = checkbox.checked;
  2577.                 if (!setting?.subOptions) return;
  2578.                 if (!subOptionsContainer) return;
  2579.  
  2580.                 subOptionsContainer.style.display = checkbox.checked
  2581.                     ? "block"
  2582.                     : "none";
  2583.  
  2584.                 if (!chevron) return;
  2585.                 chevron.style.transform = checkbox.checked
  2586.                     ? "rotate(90deg)"
  2587.                     : "rotate(0deg)";
  2588.             });
  2589.  
  2590.             parentRow.appendChild(checkbox);
  2591.             parentRow.appendChild(label);
  2592.             if (chevron) parentRow.appendChild(chevron);
  2593.             const wrapper = document.createElement("div");
  2594.             wrapper.style.marginBottom = "10px";
  2595.  
  2596.             wrapper.appendChild(parentRow);
  2597.             if (setting?.subOptions) {
  2598.                 subOptionsContainer = document.createElement("div");
  2599.                 subOptionsContainer.style.marginLeft = "25px";
  2600.                 subOptionsContainer.style.marginTop = "5px";
  2601.                 subOptionsContainer.style.display = checkbox.checked ? "block" : "none";
  2602.  
  2603.                 Object.keys(setting.subOptions).forEach((subKey) => {
  2604.                     const subSetting = setting.subOptions[subKey];
  2605.                     const fullKey = `${key}_${subKey}`;
  2606.  
  2607.                     const subWrapper = document.createElement("div");
  2608.                     subWrapper.style.marginBottom = "5px";
  2609.  
  2610.                     if (subSetting.type === "text") {
  2611.                         const subLabel = document.createElement("label");
  2612.                         subLabel.htmlFor = "setting_" + fullKey;
  2613.                         subLabel.textContent = subSetting.label + ": ";
  2614.  
  2615.                         const subInput = document.createElement("input");
  2616.                         subInput.type = "text";
  2617.                         subInput.id = "setting_" + fullKey;
  2618.                         subInput.value = tempSettings[fullKey] || "";
  2619.                         subInput.maxLength = subSetting.maxLength;
  2620.                         subInput.style.width = "60px";
  2621.                         subInput.style.marginLeft = "2px";
  2622.                         subInput.placeholder = "(!) ";
  2623.                         subInput.addEventListener("input", function () {
  2624.                             let val = subInput.value.replace(/[<>"']/g, "");
  2625.                             if (val.length > subInput.maxLength) {
  2626.                                 val = val.slice(0, subInput.maxLength);
  2627.                             }
  2628.                             subInput.value = val;
  2629.                             tempSettings[fullKey] = val;
  2630.                         });
  2631.  
  2632.                         subWrapper.appendChild(subLabel);
  2633.                         subWrapper.appendChild(subInput);
  2634.                     } else if (subSetting.type === "textarea") {
  2635.                         const subLabel = document.createElement("label");
  2636.                         subLabel.htmlFor = "setting_" + fullKey;
  2637.                         subLabel.textContent = subSetting.label + ": ";
  2638.  
  2639.                         const subTextarea = document.createElement("textarea");
  2640.                         subTextarea.id = "setting_" + fullKey;
  2641.                         subTextarea.value = tempSettings[fullKey] || "";
  2642.                         subTextarea.rows = subSetting.rows || 4;
  2643.                         subTextarea.style.width = "90%";
  2644.                         subTextarea.style.margin = "5px 0 0";
  2645.                         subTextarea.placeholder = subSetting.placeholder || "";
  2646.  
  2647.                         subTextarea.addEventListener("input", function () {
  2648.                             tempSettings[fullKey] = subTextarea.value;
  2649.                         });
  2650.  
  2651.                         subWrapper.appendChild(subLabel);
  2652.                         subWrapper.appendChild(document.createElement("br"));
  2653.                         subWrapper.appendChild(subTextarea);
  2654.                     } else if (subSetting.type === "number") {
  2655.                         const subLabel = document.createElement("label");
  2656.                         subLabel.htmlFor = "setting_" + fullKey;
  2657.                         subLabel.textContent = subSetting.label + ": ";
  2658.  
  2659.                         const subInput = document.createElement("input");
  2660.                         subInput.type = "number";
  2661.                         subInput.id = "setting_" + fullKey;
  2662.                         subInput.value = tempSettings[fullKey] || subSetting.default;
  2663.                         if (subSetting.min !== undefined) subInput.min = subSetting.min;
  2664.                         if (subSetting.max !== undefined) subInput.max = subSetting.max;
  2665.                         subInput.style.width = "60px";
  2666.                         subInput.style.marginLeft = "2px";
  2667.  
  2668.                         subInput.addEventListener("input", function () {
  2669.                             let val = Number(subInput.value);
  2670.                             if (isNaN(val)) val = subSetting.default;
  2671.                             if (subSetting.min !== undefined) val = Math.max(subSetting.min, val);
  2672.                             if (subSetting.max !== undefined) val = Math.min(subSetting.max, val);
  2673.                             subInput.value = val;
  2674.                             tempSettings[fullKey] = val;
  2675.                         });
  2676.  
  2677.                         subWrapper.appendChild(subLabel);
  2678.                         subWrapper.appendChild(subInput);
  2679.                     } else if (subSetting.type === "select") {
  2680.                         const subSelect = document.createElement("select");
  2681.                         subSelect.id = "setting_" + fullKey;
  2682.                         subSelect.style.marginLeft = "5px";
  2683.                         subSelect.style.width = "120px";
  2684.                         if (Array.isArray(subSetting.options)) {
  2685.                             subSetting.options.forEach(option => {
  2686.                                 const optionEl = document.createElement("option");
  2687.                                 optionEl.value = option.value;
  2688.                                 optionEl.textContent = option.label;
  2689.                                 if (tempSettings[fullKey] === option.value) {
  2690.                                     optionEl.selected = true;
  2691.                                 }
  2692.                                 subSelect.appendChild(optionEl);
  2693.                             });
  2694.                         }
  2695.                         if (!subSelect.value && subSetting.default) {
  2696.                             subSelect.value = subSetting.default;
  2697.                             tempSettings[fullKey] = subSetting.default;
  2698.                         }
  2699.                         subSelect.addEventListener("change", function () {
  2700.                             tempSettings[fullKey] = subSelect.value;
  2701.                             if (key === "customFavicon" && tempSettings["customFavicon"]) {
  2702.                                 faviconManager.setFaviconStyle(subSelect.value, "base");
  2703.                             }
  2704.                             if (key === "faviconStyle" && tempSettings["customFavicon"]) {
  2705.                                 faviconManager.setFaviconStyle(subSelect.value, "base");
  2706.                             }
  2707.                         });
  2708.  
  2709.                         const subLabel = document.createElement("label");
  2710.                         subLabel.htmlFor = "setting_" + fullKey;
  2711.                         subLabel.textContent = subSetting.label || fullKey;
  2712.                         subLabel.style.marginLeft = "10px";
  2713.  
  2714.                         subWrapper.appendChild(subLabel);
  2715.                         subWrapper.appendChild(subSelect);
  2716.                     } else {
  2717.                         const subCheckbox = document.createElement("input");
  2718.                         subCheckbox.type = "checkbox";
  2719.                         subCheckbox.id = "setting_" + fullKey;
  2720.                         subCheckbox.checked = tempSettings[fullKey];
  2721.                         subCheckbox.style.marginRight = "8px";
  2722.  
  2723.                         subCheckbox.addEventListener("change", function () {
  2724.                             tempSettings[fullKey] = subCheckbox.checked;
  2725.                         });
  2726.  
  2727.                         const subLabel = document.createElement("label");
  2728.                         subLabel.htmlFor = subCheckbox.id;
  2729.                         subLabel.textContent = subSetting.label;
  2730.  
  2731.                         subWrapper.appendChild(subCheckbox);
  2732.                         subWrapper.appendChild(subLabel);
  2733.                     }
  2734.                     subOptionsContainer.appendChild(subWrapper);
  2735.                 });
  2736.  
  2737.                 wrapper.appendChild(subOptionsContainer);
  2738.             }
  2739.  
  2740.             container.appendChild(wrapper);
  2741.         });
  2742.  
  2743.         return container;
  2744.     }
  2745.     const themeSelector = document.getElementById("themesBefore");
  2746.     let link = null;
  2747.     let bracketSpan = null;
  2748.     if (themeSelector) {
  2749.         bracketSpan = document.createElement("span");
  2750.         bracketSpan.textContent = "] [ ";
  2751.         link = document.createElement("a");
  2752.         link.id = "8chanSS-icon";
  2753.         link.href = "#";
  2754.         link.textContent = "8chanSS";
  2755.         link.style.fontWeight = "bold";
  2756.  
  2757.         themeSelector.parentNode.insertBefore(
  2758.             bracketSpan,
  2759.             themeSelector.nextSibling
  2760.         );
  2761.         themeSelector.parentNode.insertBefore(link, bracketSpan.nextSibling);
  2762.     }
  2763.     function createShortcutsTab() {
  2764.         const container = document.createElement("div");
  2765.         const title = document.createElement("h3");
  2766.         title.textContent = "Keyboard Shortcuts";
  2767.         title.style.margin = "0 0 15px 0";
  2768.         title.style.fontSize = "16px";
  2769.         container.appendChild(title);
  2770.         const table = document.createElement("table");
  2771.         table.style.width = "100%";
  2772.         table.style.borderCollapse = "collapse";
  2773.         const tableStyles = {
  2774.             th: {
  2775.                 textAlign: "left",
  2776.                 padding: "8px 5px",
  2777.                 borderBottom: "1px solid #444",
  2778.                 fontSize: "14px",
  2779.                 fontWeight: "bold",
  2780.             },
  2781.             td: {
  2782.                 padding: "8px 5px",
  2783.                 borderBottom: "1px solid #333",
  2784.                 fontSize: "13px",
  2785.             },
  2786.             kbd: {
  2787.                 background: "#f7f7f7",
  2788.                 color: "#000",
  2789.                 border: "1px solid #555",
  2790.                 borderRadius: "3px",
  2791.                 padding: "2px 5px",
  2792.                 fontSize: "12px",
  2793.                 fontFamily: "monospace",
  2794.             },
  2795.         };
  2796.         const headerRow = document.createElement("tr");
  2797.         const shortcutHeader = document.createElement("th");
  2798.         shortcutHeader.textContent = "Shortcut";
  2799.         Object.assign(shortcutHeader.style, tableStyles.th);
  2800.         headerRow.appendChild(shortcutHeader);
  2801.  
  2802.         const actionHeader = document.createElement("th");
  2803.         actionHeader.textContent = "Action";
  2804.         Object.assign(actionHeader.style, tableStyles.th);
  2805.         headerRow.appendChild(actionHeader);
  2806.  
  2807.         table.appendChild(headerRow);
  2808.         const shortcuts = [
  2809.             { keys: ["Ctrl", "F1"], action: "Open 8chanSS settings" },
  2810.             { keys: ["Tab"], action: "Target Quick Reply text area" },
  2811.             { keys: ["R"], action: "Refresh Thread (5 sec. cooldown)" },
  2812.             { keys: ["Ctrl", "Q"], action: "Toggle Quick Reply" },
  2813.             { keys: ["Ctrl", "Enter"], action: "Submit post" },
  2814.             { keys: ["Escape"], action: "Clear QR textarea and hide all dialogs" },
  2815.             { keys: ["ALT", "W"], action: "Watch Thread" },
  2816.             { keys: ["SHIFT", "T"], action: "Toggle Quote Threading" },
  2817.             { keys: ["SHIFT", "M1"], action: "Hide Thread in Catalog" },
  2818.             { keys: ["CTRL", "UP/DOWN"], action: "Scroll between Your Replies" },
  2819.             { keys: ["CTRL", "SHIFT", "UP/DOWN"], action: "Scroll between Replies to You" },
  2820.             { keys: ["Ctrl", "B"], action: "Bold text" },
  2821.             { keys: ["Ctrl", "I"], action: "Italic text" },
  2822.             { keys: ["Ctrl", "U"], action: "Underline text" },
  2823.             { keys: ["Ctrl", "S"], action: "Spoiler text" },
  2824.             { keys: ["Ctrl", "D"], action: "Srz Bizniz text" },
  2825.             { keys: ["Ctrl", "M"], action: "Moe text" },
  2826.             { keys: ["Alt", "C"], action: "Code block" },
  2827.         ];
  2828.         shortcuts.forEach((shortcut) => {
  2829.             const row = document.createElement("tr");
  2830.             const shortcutCell = document.createElement("td");
  2831.             Object.assign(shortcutCell.style, tableStyles.td);
  2832.             shortcut.keys.forEach((key, index) => {
  2833.                 const kbd = document.createElement("kbd");
  2834.                 kbd.textContent = key;
  2835.                 Object.assign(kbd.style, tableStyles.kbd);
  2836.                 shortcutCell.appendChild(kbd);
  2837.                 if (index < shortcut.keys.length - 1) {
  2838.                     const plus = document.createTextNode(" + ");
  2839.                     shortcutCell.appendChild(plus);
  2840.                 }
  2841.             });
  2842.  
  2843.             row.appendChild(shortcutCell);
  2844.             const actionCell = document.createElement("td");
  2845.             actionCell.textContent = shortcut.action;
  2846.             Object.assign(actionCell.style, tableStyles.td);
  2847.             row.appendChild(actionCell);
  2848.  
  2849.             table.appendChild(row);
  2850.         });
  2851.  
  2852.         container.appendChild(table);
  2853.         const note = document.createElement("p");
  2854.         note.textContent =
  2855.             "Text formatting shortcuts work when text is selected or when inserting at cursor position.";
  2856.         note.style.fontSize = "12px";
  2857.         note.style.marginTop = "15px";
  2858.         note.style.opacity = "0.7";
  2859.         note.style.fontStyle = "italic";
  2860.         container.appendChild(note);
  2861.  
  2862.         return container;
  2863.     }
  2864.     if (link) {
  2865.         let menu = await createSettingsMenu();
  2866.         link.style.cursor = "pointer";
  2867.         link.title = "Open 8chanSS settings";
  2868.         link.addEventListener("click", async function (e) {
  2869.             e.preventDefault();
  2870.             let menu = await createSettingsMenu();
  2871.             menu.style.display = menu.style.display === "none" ? "block" : "none";
  2872.         });
  2873.     }
  2874.     async function shortcutsGloballyEnabled() {
  2875.         return await getSetting("enableShortcuts");
  2876.     }
  2877.     const bbCodeCombinations = new Map([
  2878.         ["s", ["[spoiler]", "[/spoiler]"]],
  2879.         ["b", ["'''", "'''"]],
  2880.         ["u", ["__", "__"]],
  2881.         ["i", ["''", "''"]],
  2882.         ["d", ["==", "=="]],           
  2883.         ["m", ["[moe]", "[/moe]"]],
  2884.         ["c", ["[code]", "[/code]"]],
  2885.     ]);
  2886.     function applyBBCode(textBox, key) {
  2887.         const [openTag, closeTag] = bbCodeCombinations.get(key);
  2888.         const { selectionStart, selectionEnd, value } = textBox;
  2889.  
  2890.         if (selectionStart === selectionEnd) {
  2891.             const before = value.slice(0, selectionStart);
  2892.             const after = value.slice(selectionEnd);
  2893.             const newCursor = selectionStart + openTag.length;
  2894.             textBox.value = before + openTag + closeTag + after;
  2895.             textBox.selectionStart = textBox.selectionEnd = newCursor;
  2896.         } else {
  2897.             const before = value.slice(0, selectionStart);
  2898.             const selected = value.slice(selectionStart, selectionEnd);
  2899.             const after = value.slice(selectionEnd);
  2900.             textBox.value = before + openTag + selected + closeTag + after;
  2901.             textBox.selectionStart = selectionStart + openTag.length;
  2902.             textBox.selectionEnd = selectionEnd + openTag.length;
  2903.         }
  2904.     }
  2905.     let lastHighlighted = null;
  2906.     let lastType = null; 
  2907.     let lastRefreshTime = 0; 
  2908.  
  2909.     function getEligiblePostCells(isOwnReply) {
  2910.         const selector = isOwnReply
  2911.             ? '.postCell:has(a.youName), .opCell:has(a.youName)'
  2912.             : '.postCell:has(a.quoteLink.you), .opCell:has(a.quoteLink.you)';
  2913.         return Array.from(document.querySelectorAll(selector));
  2914.     }
  2915.  
  2916.     function scrollToReply(isOwnReply = true, getNextReply = true) {
  2917.         const postCells = getEligiblePostCells(isOwnReply);
  2918.         if (!postCells.length) return;
  2919.         let currentIndex = -1;
  2920.         const expectedType = isOwnReply ? "own" : "reply";
  2921.         if (
  2922.             lastType === expectedType &&
  2923.             lastHighlighted
  2924.         ) {
  2925.             const container = lastHighlighted.closest('.postCell, .opCell');
  2926.             currentIndex = postCells.indexOf(container);
  2927.         }
  2928.         if (currentIndex === -1) {
  2929.             const viewportMiddle = window.innerHeight / 2;
  2930.             currentIndex = postCells.findIndex(cell => {
  2931.                 const rect = cell.getBoundingClientRect();
  2932.                 return rect.top + rect.height / 2 > viewportMiddle;
  2933.             });
  2934.             if (currentIndex === -1) {
  2935.                 currentIndex = getNextReply ? -1 : postCells.length;
  2936.             }
  2937.         }
  2938.         const targetIndex = getNextReply ? currentIndex + 1 : currentIndex - 1;
  2939.         if (targetIndex < 0 || targetIndex >= postCells.length) return;
  2940.  
  2941.         const postContainer = postCells[targetIndex];
  2942.         if (postContainer) {
  2943.             postContainer.scrollIntoView({ behavior: "smooth", block: "center" });
  2944.             if (lastHighlighted) {
  2945.                 lastHighlighted.classList.remove('target-highlight');
  2946.             }
  2947.             let anchorId = null;
  2948.             let anchorElem = postContainer.querySelector('[id^="p"]');
  2949.             if (anchorElem && anchorElem.id) {
  2950.                 anchorId = anchorElem.id;
  2951.             } else if (postContainer.id) {
  2952.                 anchorId = postContainer.id;
  2953.             }
  2954.             if (anchorId && location.hash !== '#' + anchorId) {
  2955.                 history.replaceState(null, '', '#' + anchorId);
  2956.             }
  2957.             const innerPost = postContainer.querySelector('.innerPost');
  2958.             if (innerPost) {
  2959.                 innerPost.classList.add('target-highlight');
  2960.                 lastHighlighted = innerPost;
  2961.             } else {
  2962.                 lastHighlighted = null;
  2963.             }
  2964.             lastType = isOwnReply ? "own" : "reply";
  2965.         }
  2966.     }
  2967.     window.addEventListener('hashchange', () => {
  2968.         if (lastHighlighted) {
  2969.             lastHighlighted.classList.remove('target-highlight');
  2970.             lastHighlighted = null;
  2971.         }
  2972.         const hash = location.hash.replace('#', '');
  2973.         if (hash) {
  2974.             const postElem = document.getElementById(hash);
  2975.             if (postElem) {
  2976.                 const innerPost = postElem.querySelector('.innerPost');
  2977.                 if (innerPost) {
  2978.                     innerPost.classList.add('target-highlight');
  2979.                     lastHighlighted = innerPost;
  2980.                 }
  2981.             }
  2982.         }
  2983.     });
  2984.     document.addEventListener("keydown", async function (event) {
  2985.         if (!(await shortcutsGloballyEnabled())) return;
  2986.         const active = document.activeElement;
  2987.         if (
  2988.             active &&
  2989.             event.key !== "Tab" && 
  2990.             (active.tagName === "INPUT" ||
  2991.                 active.tagName === "TEXTAREA" ||
  2992.                 active.isContentEditable)
  2993.         ) {
  2994.             return;
  2995.         }
  2996.         if (event.ctrlKey && event.key === "F1") {
  2997.             event.preventDefault();
  2998.             let menu = document.getElementById("8chanSS-menu") || (await createSettingsMenu());
  2999.             menu.style.display = menu.style.display === "none" || menu.style.display === "" ? "block" : "none";
  3000.             return;
  3001.         }
  3002.         if (event.ctrlKey && (event.key === "q" || event.key === "Q")) {
  3003.             event.preventDefault();
  3004.             const hiddenDiv = document.getElementById("quick-reply");
  3005.             if (!hiddenDiv) return;
  3006.             const isHidden = hiddenDiv.style.display === "none" || hiddenDiv.style.display === "";
  3007.             hiddenDiv.style.display = isHidden ? "block" : "none";
  3008.             if (isHidden) {
  3009.                 setTimeout(() => {
  3010.                     const textarea = document.getElementById("qrbody");
  3011.                     if (textarea) textarea.focus();
  3012.                 }, 50);
  3013.             }
  3014.             return;
  3015.         }
  3016.         if (event.key === "Tab") {
  3017.             const qrbody = document.getElementById("qrbody");
  3018.             const captcha = document.getElementById("QRfieldCaptcha");
  3019.  
  3020.             if (qrbody) {
  3021.                 if (document.activeElement === qrbody && captcha) {
  3022.                     event.preventDefault();
  3023.                     captcha.focus();
  3024.                 } else if (document.activeElement === captcha) {
  3025.                     event.preventDefault();
  3026.                     qrbody.focus();
  3027.                 } else if (document.activeElement !== qrbody) {
  3028.                     event.preventDefault();
  3029.                     qrbody.focus();
  3030.                 }
  3031.             }
  3032.             return;
  3033.         }
  3034.         if (event.key === "r" || event.key === "R") {
  3035.             const isThread = document.documentElement.classList.contains("is-thread");
  3036.             const isCatalog = document.documentElement.classList.contains("is-catalog");
  3037.             const threadRefreshBtn = document.getElementById("refreshButton");
  3038.             const catalogRefreshBtn = document.getElementById("catalogRefreshButton");
  3039.             const now = Date.now();
  3040.  
  3041.             if (
  3042.                 (isThread && threadRefreshBtn) ||
  3043.                 (isCatalog && catalogRefreshBtn)
  3044.             ) {
  3045.                 if (now - lastRefreshTime >= 5000) {
  3046.                     event.preventDefault();
  3047.                     if (isThread && threadRefreshBtn) {
  3048.                         threadRefreshBtn.click();
  3049.                     } else if (isCatalog && catalogRefreshBtn) {
  3050.                         catalogRefreshBtn.click();
  3051.                     }
  3052.                     lastRefreshTime = now;
  3053.                 } else {
  3054.                     event.preventDefault();
  3055.                 }
  3056.                 return;
  3057.             }
  3058.         }
  3059.         if (event.shiftKey && !event.ctrlKey && !event.altKey && (event.key === "t" || event.key === "T")) {
  3060.             event.preventDefault();
  3061.  
  3062.             const current = await getSetting("quoteThreading");
  3063.             await setSetting("quoteThreading", !current);
  3064.             try {
  3065.                 const msg = `Quote threading ${!current ? "enabled" : "disabled"}`;
  3066.                 if (window.showToast) {
  3067.                     window.showToast(msg);
  3068.                 } else {
  3069.                     const icon = document.getElementById("8chanSS-icon");
  3070.                     if (icon) {
  3071.                         let toast = document.createElement("span");
  3072.                         toast.textContent = msg;
  3073.                         toast.style.position = "absolute";
  3074.                         toast.style.background = "#222";
  3075.                         toast.style.color = "#fff";
  3076.                         toast.style.padding = "2px 8px";
  3077.                         toast.style.borderRadius = "4px";
  3078.                         toast.style.fontSize = "13px";
  3079.                         toast.style.zIndex = 99999;
  3080.                         toast.style.left = (icon.offsetLeft - 50) + "px";
  3081.                         toast.style.top = "27px";
  3082.                         toast.style.transition = "opacity 0.3s";
  3083.                         icon.parentNode.appendChild(toast);
  3084.                         setTimeout(() => { toast.style.opacity = "0"; }, 900);
  3085.                         setTimeout(() => { toast.remove(); }, 1200);
  3086.                     }
  3087.                 }
  3088.             } catch { }
  3089.             setTimeout(() => window.location.reload(), 1400);
  3090.             return;
  3091.         }
  3092.         if (event.key === "Escape") {
  3093.             const textarea = document.getElementById("qrbody");
  3094.             if (textarea) textarea.value = "";
  3095.             const quickReply = document.getElementById("quick-reply");
  3096.             if (quickReply) quickReply.style.display = "none";
  3097.             const threadWatcher = document.getElementById("watchedMenu");
  3098.             if (threadWatcher) threadWatcher.style.display = "none";
  3099.             return;
  3100.         }
  3101.         if (event.ctrlKey && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
  3102.             event.preventDefault();
  3103.             const isOwnReply = !event.shiftKey;
  3104.             const isNext = event.key === 'ArrowDown';
  3105.             scrollToReply(isOwnReply, isNext);
  3106.             return;
  3107.         }
  3108.         if (
  3109.             event.altKey &&
  3110.             (event.key === "w" || event.key === "W")
  3111.         ) {
  3112.             event.preventDefault();
  3113.             const btn = document.querySelector(".watchButton");
  3114.             if (btn && !btn.classList.contains("watched-active")) {
  3115.                 btn.click();
  3116.                 setTimeout(() => {
  3117.                     btn.classList.add("watched-active");
  3118.                 }, 100);
  3119.             }
  3120.             return;
  3121.         }
  3122.     });
  3123.     const replyTextarea = document.getElementById("qrbody");
  3124.     if (replyTextarea) {
  3125.         replyTextarea.addEventListener("keydown", async function (event) {
  3126.             if (event.ctrlKey && event.key === "Enter") {
  3127.                 event.preventDefault();
  3128.                 const submitButton = document.getElementById("qrbutton");
  3129.                 if (submitButton) {
  3130.                     submitButton.click();
  3131.                     if (await getSetting("watchThreadOnReply")) {
  3132.                         setTimeout(() => {
  3133.                             const btn = document.querySelector(".watchButton");
  3134.                             if (btn && !btn.classList.contains("watched-active")) {
  3135.                                 btn.click();
  3136.                                 setTimeout(() => {
  3137.                                     btn.classList.add("watched-active");
  3138.                                 }, 100);
  3139.                             }
  3140.                         }, 500);
  3141.                     }
  3142.                 }
  3143.             }
  3144.         });
  3145.         replyTextarea.addEventListener("keydown", function (event) {
  3146.             const key = event.key.toLowerCase();
  3147.             if (key === "c" && event.altKey && !event.ctrlKey && bbCodeCombinations.has(key)) {
  3148.                 event.preventDefault();
  3149.                 applyBBCode(event.target, key);
  3150.                 return;
  3151.             }
  3152.             if (event.ctrlKey && !event.altKey && bbCodeCombinations.has(key) && key !== "c") {
  3153.                 event.preventDefault();
  3154.                 applyBBCode(event.target, key);
  3155.                 return;
  3156.             }
  3157.         });
  3158.     }
  3159.     function featureCatalogHiding() {
  3160.         const STORAGE_KEY = "8chanSS_hiddenCatalogThreads";
  3161.         let showHiddenMode = false;
  3162.         function getBoardAndThreadNumFromCell(cell) {
  3163.             const link = cell.querySelector("a.linkThumb[href*='/res/']");
  3164.             if (!link) return { board: null, threadNum: null };
  3165.             const match = link.getAttribute("href").match(/^\/([^/]+)\/res\/(\d+)\.html/);
  3166.             if (!match) return { board: null, threadNum: null };
  3167.             return { board: match[1], threadNum: match[2] };
  3168.         }
  3169.         async function loadHiddenThreadsObj() {
  3170.             const raw = await GM.getValue(STORAGE_KEY, "{}");
  3171.             try {
  3172.                 const obj = JSON.parse(raw);
  3173.                 return typeof obj === "object" && obj !== null ? obj : {};
  3174.             } catch {
  3175.                 return {};
  3176.             }
  3177.         }
  3178.         async function saveHiddenThreadsObj(obj) {
  3179.             await GM.setValue(STORAGE_KEY, JSON.stringify(obj));
  3180.         }
  3181.         async function applyHiddenThreads() {
  3182.             const hiddenThreadsObjRaw = await GM.getValue(STORAGE_KEY, "{}");
  3183.             let hiddenThreadsObj;
  3184.             try {
  3185.                 hiddenThreadsObj = JSON.parse(hiddenThreadsObjRaw);
  3186.                 if (typeof hiddenThreadsObj !== "object" || hiddenThreadsObj === null) hiddenThreadsObj = {};
  3187.             } catch {
  3188.                 hiddenThreadsObj = {};
  3189.             }
  3190.             document.querySelectorAll(".catalogCell").forEach(cell => {
  3191.                 const { board, threadNum } = getBoardAndThreadNumFromCell(cell);
  3192.                 if (!board || !threadNum) return;
  3193.                 const hiddenThreads = hiddenThreadsObj[board] || [];
  3194.  
  3195.                 if (typeof showHiddenMode !== "undefined" && showHiddenMode) {
  3196.                     if (hiddenThreads.includes(threadNum)) {
  3197.                         cell.style.display = "";
  3198.                         cell.classList.add("ss-unhide-thread");
  3199.                         cell.classList.remove("ss-hidden-thread");
  3200.                     } else {
  3201.                         cell.style.display = "none";
  3202.                         cell.classList.remove("ss-unhide-thread", "ss-hidden-thread");
  3203.                     }
  3204.                 } else {
  3205.                     if (hiddenThreads.includes(threadNum)) {
  3206.                         cell.style.display = "none";
  3207.                         cell.classList.add("ss-hidden-thread");
  3208.                         cell.classList.remove("ss-unhide-thread");
  3209.                     } else {
  3210.                         cell.style.display = "";
  3211.                         cell.classList.remove("ss-hidden-thread", "ss-unhide-thread");
  3212.                     }
  3213.                 }
  3214.             });
  3215.         }
  3216.         async function onCatalogCellClick(e) {
  3217.             const cell = e.target.closest(".catalogCell");
  3218.             if (!cell) return;
  3219.             if (e.shiftKey && e.button === 0) {
  3220.                 const { board, threadNum } = getBoardAndThreadNumFromCell(cell);
  3221.                 if (!board || !threadNum) return;
  3222.  
  3223.                 let hiddenThreadsObj = await loadHiddenThreadsObj();
  3224.                 if (!hiddenThreadsObj[board]) hiddenThreadsObj[board] = [];
  3225.                 let hiddenThreads = hiddenThreadsObj[board];
  3226.  
  3227.                 if (showHiddenMode) {
  3228.                     hiddenThreads = hiddenThreads.filter(num => num !== threadNum);
  3229.                     hiddenThreadsObj[board] = hiddenThreads;
  3230.                     await saveHiddenThreadsObj(hiddenThreadsObj);
  3231.                     await applyHiddenThreads();
  3232.                 } else {
  3233.                     if (!hiddenThreads.includes(threadNum)) {
  3234.                         hiddenThreads.push(threadNum);
  3235.                         hiddenThreadsObj[board] = hiddenThreads;
  3236.                     }
  3237.                     await saveHiddenThreadsObj(hiddenThreadsObj);
  3238.                     cell.style.display = "none";
  3239.                     cell.classList.add("ss-hidden-thread");
  3240.                 }
  3241.                 e.preventDefault();
  3242.                 e.stopPropagation();
  3243.             }
  3244.         }
  3245.         async function showAllHiddenThreads() {
  3246.             showHiddenMode = true;
  3247.             await applyHiddenThreads();
  3248.             const btn = document.getElementById("ss-show-hidden-btn");
  3249.             if (btn) btn.textContent = "Hide Hidden";
  3250.         }
  3251.         async function hideAllHiddenThreads() {
  3252.             showHiddenMode = false;
  3253.             await applyHiddenThreads();
  3254.             const btn = document.getElementById("ss-show-hidden-btn");
  3255.             if (btn) btn.textContent = "Show Hidden";
  3256.         }
  3257.         async function toggleShowHiddenThreads() {
  3258.             if (showHiddenMode) {
  3259.                 await hideAllHiddenThreads();
  3260.             } else {
  3261.                 await showAllHiddenThreads();
  3262.             }
  3263.         }
  3264.         function addShowHiddenButton() {
  3265.             if (document.getElementById("ss-show-hidden-btn")) return;
  3266.             const refreshBtn = document.querySelector("#catalogRefreshButton");
  3267.             if (!refreshBtn) return;
  3268.             const btn = document.createElement("button");
  3269.             btn.id = "ss-show-hidden-btn";
  3270.             btn.className = "catalogLabel";
  3271.             btn.type = "button";
  3272.             btn.textContent = "Show Hidden";
  3273.             btn.style.marginRight = "8px";
  3274.             btn.addEventListener("click", toggleShowHiddenThreads);
  3275.             refreshBtn.parentNode.insertBefore(btn, refreshBtn);
  3276.         }
  3277.         function hideThreadsOnRefresh() {
  3278.             if (!/\/catalog\.html$/.test(window.location.pathname)) return;
  3279.             onReady(addShowHiddenButton);
  3280.             onReady(applyHiddenThreads);
  3281.             const catalogContainer = document.querySelector(".catalogWrapper, .catalogDiv");
  3282.             if (catalogContainer) {
  3283.                 catalogContainer.addEventListener("click", onCatalogCellClick, true);
  3284.                 const observer = new MutationObserver(applyHiddenThreads);
  3285.                 observer.observe(catalogContainer, { childList: true, subtree: false });
  3286.             }
  3287.         }
  3288.         hideThreadsOnRefresh();
  3289.     }
  3290.     function noCaptchaHistory() {
  3291.         const captchaInput = document.getElementById("QRfieldCaptcha");
  3292.         if (captchaInput) {
  3293.             captchaInput.autocomplete = "off";
  3294.         }
  3295.     }
  3296.     noCaptchaHistory();
  3297.     function preventFooterScrollIntoView() {
  3298.         const footer = document.getElementById('footer');
  3299.         if (footer && !footer._scrollBlocked) {
  3300.             footer._scrollBlocked = true; 
  3301.             footer.scrollIntoView = function () {
  3302.                 return;
  3303.             };
  3304.         }
  3305.     }
  3306.     function moveFileUploadsBelowOp() {
  3307.         if (opHeadTitle && innerOP) {
  3308.             innerOP.insertBefore(opHeadTitle, innerOP.firstChild);
  3309.         }
  3310.     }
  3311.     moveFileUploadsBelowOp();
  3312.     document.addEventListener('click', function (e) {
  3313.         const a = e.target.closest('.panelBacklinks > a');
  3314.         if (a) {
  3315.             setTimeout(() => {
  3316.                 a.classList.toggle('reply-inlined');
  3317.             }, 0);
  3318.             return;
  3319.         }
  3320.         const b = e.target.closest('a.quoteLink');
  3321.         if (b) {
  3322.             setTimeout(() => {
  3323.                 b.classList.toggle('quote-inlined');
  3324.             }, 0);
  3325.         }
  3326.     });
  3327.     function enableIdFiltering() {
  3328.         const postCellSelector = ".postCell";
  3329.         const labelIdSelector = ".labelId";
  3330.         const hiddenClassName = "is-hidden-by-filter";
  3331.         let activeFilterColor = null;
  3332.         function applyFilter(targetRgbColor) {
  3333.             activeFilterColor = targetRgbColor;
  3334.             document.querySelectorAll(postCellSelector).forEach(cell => {
  3335.                 const label = cell.querySelector(labelIdSelector);
  3336.                 const matches = label && window.getComputedStyle(label).backgroundColor === targetRgbColor;
  3337.                 cell.classList.toggle(hiddenClassName, !!targetRgbColor && !matches);
  3338.             });
  3339.         }
  3340.         function handleClick(event) {
  3341.             const clickedLabel = event.target.closest(labelIdSelector);
  3342.             if (clickedLabel && clickedLabel.closest(postCellSelector) && !clickedLabel.closest(".de-pview")) {
  3343.                 event.preventDefault();
  3344.                 event.stopPropagation();
  3345.  
  3346.                 const clickedColor = window.getComputedStyle(clickedLabel).backgroundColor;
  3347.                 const rect = clickedLabel.getBoundingClientRect();
  3348.                 const cursorOffsetY = event.clientY - rect.top;
  3349.  
  3350.                 if (activeFilterColor === clickedColor) {
  3351.                     applyFilter(null); 
  3352.                 } else {
  3353.                     applyFilter(clickedColor);
  3354.                 }
  3355.                 clickedLabel.scrollIntoView({ behavior: "instant", block: "center" });
  3356.                 window.scrollBy(0, cursorOffsetY - rect.height / 2);
  3357.             }
  3358.         }
  3359.         document.body.addEventListener("click", handleClick);
  3360.     }
  3361. });