☰

5ch.net Image Inserter

Insert images found in 5ch threads.

  1. // ==UserScript==
  2. // @name        5ch.net Image Inserter
  3. // @name:ja     5ch.net Image Inserter
  4. // @namespace   Violentmonkey Scripts
  5. // @include     */r/*/*/*
  6. // @include     */test/read.cgi/*/*
  7. // @include     */read.php/*/*
  8. // @include     */log/*/*/*/
  9. // @include     *.5ch.net/*/*
  10. // @grant       unsafeWindow
  11. // @version     1.2
  12. // @author      -
  13. // @description Insert images found in 5ch threads.
  14. // @description:ja 5chのスレッドにあるイメージをインサートする。
  15. // @license     MIT
  16. // @icon        https://5ch.net/favicon.ico
  17. // ==/UserScript==
  18.  
  19. function fileExtension(url) {
  20.   const parts = url.split('/')
  21.   const fileParts = parts[parts.length - 1].split('.')
  22.   let ext = fileParts[fileParts.length - 1]
  23.   ext = ext.replace(/\?.*$/, '')
  24.   return ext
  25. }
  26.  
  27. const imageExtensions = [
  28.   'gif',
  29.   'jpg',
  30.   'jpeg',
  31.   'png',
  32.   'webp'
  33. ]
  34. const videoExtensions = [
  35.   'webm',
  36.   'mp4'
  37. ]
  38. function typeOf(url) {
  39.   const ext = fileExtension(url).toLowerCase()
  40.   if (imageExtensions.includes(ext)) {
  41.     return 'image'
  42.   } else if (videoExtensions.includes(ext)) {
  43.     return 'video'
  44.   } else {
  45.     return 'other'
  46.   }
  47. }
  48.  
  49. function cleanUrl(url) {
  50.   const newUrl = url.replace(/^http.*jump.5ch.net\/\?/, '')
  51.   return newUrl
  52. }
  53.  
  54. function insertImage(a) {
  55.   const newUrl = cleanUrl(a.href)
  56.   a.innerHTML = `<img class="inserted" src="${newUrl}" loading="lazy" />`
  57. }
  58.  
  59. function insertVideo(a) {
  60.   const newUrl = cleanUrl(a.href)
  61.   a.innerHTML = `<video controls loop class="inserted"><source src="${newUrl}" /></video>`
  62. }
  63.  
  64. // main _______________________________________________________________
  65.  
  66. // Apply CSS
  67. let css = `
  68. video {
  69.   max-width: 100%;
  70. }
  71. `
  72. let style = document.createElement("style");
  73. style.type = "text/css";
  74. style.appendChild(document.createTextNode(css));
  75. document.head.appendChild(style);
  76.  
  77. // scan 2023-04+ era DOM
  78. document.querySelectorAll('article .post-content a').forEach((a) => {
  79.   const t = typeOf(a.href)
  80.   switch (t) {
  81.   case 'image':
  82.     insertImage(a)
  83.     break;
  84.   case 'video':
  85.     insertVideo(a)
  86.     break;
  87.   }
  88. })