diff --git a/src/entries/contentScript/primary/Header.tsx b/src/entries/contentScript/primary/Header.tsx index 076fd79..43b36d7 100644 --- a/src/entries/contentScript/primary/Header.tsx +++ b/src/entries/contentScript/primary/Header.tsx @@ -2,13 +2,15 @@ import React, { useState } from "react" import SettingsPopup from "./SettingsPopup" import $ from "jquery" -interface HeaderBarProps { - board: string; -} -const Header: React.FC = () => { - const indexUrl = "https://boards.4chan.org/pol/" - const catalogUrl = "https://boards.4chan.org/pol/catalog" + +const Header = () => { + // Get the board name from the URL (e.g. /g/ or /pol/) + const board = window.location.pathname.split("/")[1] + // Get the URL for the index page of the board + const indexUrl = `https://boards.4chan.org/${board}/` + // Get the URL for the catalog page of the board + const catalogUrl = `https://boards.4chan.org/${board}/catalog` const [settingsVisible, setSettingsVisible] = useState(false) // Remove the default header $("#boardNavDesktop").remove() @@ -16,6 +18,7 @@ const Header: React.FC = () => { $("h4").remove() $(".abovePostForm").remove() $(".boardList").remove() + $("#boardNavMobile").remove() const toggleSettingsPopup = () => { setSettingsVisible(!settingsVisible) diff --git a/src/entries/contentScript/primary/main.tsx b/src/entries/contentScript/primary/main.tsx index 4594ef6..a13b646 100644 --- a/src/entries/contentScript/primary/main.tsx +++ b/src/entries/contentScript/primary/main.tsx @@ -7,12 +7,16 @@ import "../../../index.css" import { initImageHovering } from "../image" import $ from "jquery" import Header from "./Header" +import { Thread } from "~/types/thread" + + + renderContent(import.meta.PLUGIN_WEB_EXT_CHUNK_CSS_PATHS, (appRoot) => { ReactDOM.createRoot(appRoot).render( -
+
) }) @@ -22,4 +26,27 @@ renderContent(import.meta.PLUGIN_WEB_EXT_CHUNK_CSS_PATHS, (appRoot) => { $(document).ready(() => { console.log("Document is ready!") initImageHovering() + // Assume the 4chan API URL is like this + const apiUrl = "https://a.4cdn.org/{board}/catalog.json" + + // Replace {board} with the actual board name + const boardName = window.location.pathname.split("/")[1] + const boardApiUrl = apiUrl.replace("{board}", boardName) + + $.getJSON(boardApiUrl, (data) => { + const threads = data.flatMap((page: { threads: Thread[] }) => page.threads) + threads.forEach((thread: Thread) => { + const threadId = thread.no + const comment = thread.com + + // Assuming each thread teaser has an id like `thread-{id}` + const threadTeaser = $(`#thread-${threadId} > .teaser`) + if (threadTeaser.length > 0) { + // Replace the teaser with the comment + threadTeaser.html(comment) + // Add css to the class "quote" and make the text green #789922 + threadTeaser.find(".quote").css("color", "#789922") + } + }) + }) }) \ No newline at end of file diff --git a/src/types/thread.d.ts b/src/types/thread.d.ts new file mode 100644 index 0000000..6574f74 --- /dev/null +++ b/src/types/thread.d.ts @@ -0,0 +1,25 @@ +export interface Thread { + no: number + sticky: number + closed: number + now: string + sub: string + com: string + filename: string + ext: string + w: number + h: number + tn_w: number + tn_h: number + tim: number + time: number + md5: string + fsize: number + resto: number + capcode: string + semantic_url: string + replies: number + images: number + unique_ips: number + +} \ No newline at end of file