ComicK - Cleanup ComicK

Remove specific elements with MutationObserver.
Visit the author's site for support, ask a question, post a review, or report the script.
Wrap lines
// ==UserScript==
// @name        ComicK - Cleanup ComicK
// @namespace   https://github.com/BreezeSpark
// @match       https://comick.io/*
// @icon        https://comick.io/favicon.ico
// @version     5.29.2025.1
// @description Remove specific elements with MutationObserver.
// @author      BreezeSpark
// @run-at      document-start
// @grant       none
// @supportURL  https://github.com/BreezeSpark/Userscripts/issues
// @homepageURL https://github.com/BreezeSpark/Userscripts
// @license     GPL-3.0-or-later
// ==/UserScript==

(function () {
  // ------------------------------- Settings ----------------------------------\\
  const SETTINGS = {
    hideCommentSection: true, // Set to false to keep the comment section
    hideHomepageSidePanel: true // Set to false to keep the homepage side panel
  }
  // ---------------------------------------------------------------------------\\

  const hideElement = (selector, condition) => {
    const element = document.querySelector(selector)
    if (element && (!condition || condition(element))) {
      element.style.display = 'none'
    }
  }

  const ELEMENTS_TO_HIDE = [{
    selector: 'div.rounded.dark\\:border-gray-700.text-xs'
  },
  {
    selector: 'div.text-center.text-xs.py-2',
    condition: (el) => el.textContent.includes('ADVERTISEMENT')
  },
  {
    selector: 'div.pl-3.pb-1.lg\\:pl-4.lg\\:pb-3.pr-0.float-right.w-4\\/12.xl\\:w-3\\/12.space-y-5.overflow-hidden',
    condition: () => SETTINGS.hideHomepageSidePanel
  },
  {
    selector: '#comment-section',
    condition: () => SETTINGS.hideCommentSection
  },
  {
    selector: 'div.w-full.flex.justify-center'
  },
  {
    selector: 'div.rounded.p-2.flex.border-l-8',
    condition: (el) => el.textContent.includes('This comic is not indexed.')
  }
  ]

  const hideTargetElements = () => {
    ELEMENTS_TO_HIDE.forEach(({
      selector,
      condition
    }) => {
      hideElement(selector, condition)
    })
  }

  const adjustLayout = () => {
    if (!SETTINGS.hideHomepageSidePanel) return
    const mainElement = document.querySelector('main#main')
    if (mainElement) {
      Object.assign(mainElement.style, {
        marginLeft: 'auto',
        marginRight: 'auto',
        float: 'none',
        display: 'block'
      })
    }
  }

  hideTargetElements()
  adjustLayout()

  const observer = new MutationObserver(() => {
    hideTargetElements()
    adjustLayout()
  })

  observer.observe(document.documentElement, {
    childList: true,
    subtree: true
  })
})()