Skip to content

readAI.md

Latest commit

 

History

History
62 lines (43 loc) · 4.01 KB

readAI.md

File metadata and controls

62 lines (43 loc) · 4.01 KB

Here is a prompt designed to give an LLM all the necessary information to accurately recreate the provided YouTube Shorts channel blocker code, focusing on the current functionality and UI constraints.

📝 LLM Code Recreation Prompt

"You are an expert JavaScript developer tasked with recreating a Tampermonkey/Greasemonkey UserScript designed to filter YouTube Shorts videos. The goal is to enforce a binary block/allow list based purely on the channel name.

The final script must adhere strictly to the following Functionality, Data Structure, and User Interface (UI) requirements:

1. Script Metadata & Setup

  • Type: JavaScript for Tampermonkey/Greasemonkey.
  • Match: Must target https://www.youtube.com/*.
  • Grant: none.
  • Engine: Use a MutationObserver on the #shorts-inner-container or document.body and a setInterval fallback to detect when a new video (ytd-reel-video-renderer[is-active]) loads.

2. Core Data & Persistence

  • Data Structure: The block list must be an Array of Objects (BlockedChannelsWithTime), where each object contains { name: string, blockedAt: number }. The name must be stored in lowercase.
  • Storage: Use chrome.storage.local (or equivalent browser storage) to save and load the block list data persistently using the key ChannelBlockerList.
  • Fast Lookup: Maintain a separate Set (BlockedChannelNamesFastLookup) in memory for quick lookups when checking if a channel is blocked.

3. Channel Detection

  • Implement a robust function (getActiveChannelName) to extract the channel name (e.g., 'mianxiwei7406' from @mianxiwei7406) from the active video player. Prioritize selectors that target the link near the subscribe button, such as a.yt-core-attributed-string__link[href*="/shorts"].
  • If the video is detected as 'Sponsored' (using .yt-badge-shape__text), the script must immediately trigger a skip.

4. User Interface (UI) and Interaction

The script must inject a minimalist overlay (#channel-blocker-overlay) in the fixed position (top: 70px, right: 20px). The overlay must contain:

Element Location Function/Appearance
Header Top row Displays 'CHANNEL FILTER' and the Manage List Button (📋 icon).
Block Button Directly before the channel name. Icon: ⛔ (Unicode Stop Sign).
Channel Name In the main body, next to the Block Button. Displays @channelName.
Feedback Hidden layer Displays brief messages (e.g., 'Blocked: X Channel').

Interaction Logic:

  • Click Block Button (⛔):
    1. Add the current channel name (lowercase) and current timestamp to the BlockedChannelsWithTime array and update the BlockedChannelNamesFastLookup set.
    2. Immediately call triggerSkipToNextVideo() (with a 400ms delay).
    3. Update the UI button state to Blocked.
  • Video Load (Engine): When a new video loads:
    1. Check if the channel is in the block list.
    2. If Blocked, the UI must update to the Blocked State (Red text/button, disabled click).
    3. If Blocked, the script must NOT automatically trigger a skip or change the video's opacity, as skipping is handled solely by the button click.

UI Visual States (updateOverlay):

State Block Button Style Channel Name Style Button Interaction
Allowed Background: #222, Border: #444, Opacity: 1. Color: #a855f7 (Purple) Enabled (pointer-events: auto)
Blocked Background: #600 (Dark Red), Border: #f87171 (Red), Opacity: 0.7. Color: #f87171 (Red) Disabled (pointer-events: none)

5. Management Modal

  • The 📋 button must open a modal (#blocker-list-modal).
  • The modal must list all blocked channels (BlockedChannelsWithTime), sorted by blockedAt in descending order (most recent blocks first).
  • Each list item must include a "Re-Allow" button that calls unblockChannel, removes the channel from storage, and visually updates the list."