Merge pull request #3 from tshmieldev/tshmieldev/commentsandmobilestuff

Filter comments toggle, X on phones, and m.youtube.com

Author: tshmieldev

CONTRIBUTING.md

@@ -157,7 +157,13 @@ scripts/        Per-target extension build, manifest derivation, release, icons
 importing a site entry alone installs no listeners or observers. The background
 worker and popup remain separate extension entry points.
 
-**YouTube is rules only.** The adapter reads public settings, sets
+**YouTube is rules only, on both of its sites.** `www.youtube.com` and
+`m.youtube.com` run the same adapter: it sets attributes and the stylesheet
+decides what they mean, so the mobile site cost selectors rather than code.
+`ytd-` elements are the desktop site, `ytm-` the mobile one, and the newer
+`*-view-model` elements and `yt*ViewModel` classes are shared; a selector that
+matches nothing on the site in front of it costs nothing, so the pairs sit
+together per feature. The adapter reads public settings, sets
 `data-aitf-yt-shorts` and `data-aitf-yt-comments` on `<html>`, plus
 `data-aitf-yt-thumbs="blurred"` or `"hidden"`, and follows storage changes.
 Hidden thumbnails give up their height; the badges that sat on the picture

README.md

@@ -41,7 +41,8 @@ Describe what you want to see — or never see again — in plain language.
 - **Any OpenAI-compatible provider.** OpenRouter, OpenAI, Anthropic, or your
   own endpoint.
 - **YouTube, the quiet way.** Hide Shorts, hide comments, and show, blur or
-  drop thumbnails. Durations stay. No model involved.
+  drop thumbnails. Durations stay. No model involved. Works on the mobile site
+  too.
 - **Greyscale.** Wash the colour out of the chrome, the content, or both, on X
   and on YouTube. Less pull, same information.
 

manifest.json

@@ -8,6 +8,7 @@
     "https://x.com/*",
     "https://twitter.com/*",
     "https://www.youtube.com/*",
+    "https://m.youtube.com/*",
     "https://openrouter.ai/*",
     "https://api.openai.com/*",
     "https://api.anthropic.com/*"
@@ -31,7 +32,7 @@
       "run_at": "document_start"
     },
     {
-      "matches": ["https://www.youtube.com/*"],
+      "matches": ["https://www.youtube.com/*", "https://m.youtube.com/*"],
       "js": ["content.js"],
       "css": ["content.css"],
       "run_at": "document_start"

privacy-policy.md

@@ -51,8 +51,9 @@ or [Anthropic](https://www.anthropic.com/legal/privacy).
 - **Storage** — to save your settings, key, and decision cache locally.
 - **Access to x.com and twitter.com** — to read posts on the page and hide the
   ones that match your criteria.
-- **Access to www.youtube.com** — to apply the YouTube page rules you turn on.
-  Nothing on YouTube is read or sent anywhere; the rules are stylesheet rules.
+- **Access to www.youtube.com and m.youtube.com** — to apply the YouTube page
+  rules you turn on, on the desktop and mobile sites alike. Nothing on YouTube
+  is read or sent anywhere; the rules are stylesheet rules.
 - **Access to your provider's API** (`openrouter.ai`, `api.openai.com`,
   `api.anthropic.com`, or a custom endpoint you enter) — to send classification
   requests. A custom endpoint asks for its own permission when you save it.

src/background/index.ts

@@ -131,7 +131,8 @@ chrome.runtime.onMessage.addListener((raw: unknown, sender, respond) => {
     const message = yield* Schema.decodeUnknown(Request)(raw);
     const privileged = fromExtensionPage(sender);
     const fromSite =
-      sender.tab && /^https:\/\/(?:x\.com|twitter\.com|www\.youtube\.com)\//.test(sender.url ?? '');
+      sender.tab &&
+      /^https:\/\/(?:x\.com|twitter\.com|(?:www|m)\.youtube\.com)\//.test(sender.url ?? '');
     if (!privileged && !(fromSite && contentRequests.has(message.type))) {
       return yield* new OperationError({
         message: 'This operation is not available to content scripts.',

src/common/settings.ts

@@ -41,6 +41,7 @@ export const Settings = Schema.Struct({
   presets: Schema.Array(Preset),
   corrections: Schema.Array(Correction).pipe(Schema.maxItems(MAX_CORRECTIONS)),
   notInterested: Schema.Boolean,
+  filterComments: Schema.Boolean,
   analyzeImages: Schema.Boolean,
   maxImagesPerPost: boundedInt(1, 4),
   hideStyle: Schema.Literal('collapse', 'blur'),
@@ -83,6 +84,7 @@ export const defaults: Settings = {
   presets: [],
   corrections: [],
   notInterested: false,
+  filterComments: false,
   analyzeImages: false,
   maxImagesPerPost: 2,
   hideStyle: 'collapse',
@@ -138,6 +140,7 @@ export const siteOrigins = [
   'https://x.com/*',
   'https://twitter.com/*',
   'https://www.youtube.com/*',
+  'https://m.youtube.com/*',
 ] as const;
 
 /** The origin the configured provider is reached at, if it has a usable one. A

src/index.ts

@@ -10,6 +10,7 @@ export function startSite(site: Pick<Location, 'protocol' | 'hostname'> = locati
     case 'twitter.com':
       return startX();
     case 'www.youtube.com':
+    case 'm.youtube.com':
       return startYouTube();
   }
 }

src/popup/App.tsx

@@ -9,7 +9,7 @@ import { ListSheet, type ListKey } from './ListSheet';
 import { ModelBrowser } from './ModelBrowser';
 import { Rail, type Section, type Site } from './Rail';
 import { XPanel, type XTab } from './XPanel';
-import { YouTubePanel } from './YouTubePanel';
+import { YouTubePanel, type YouTubeTab } from './YouTubePanel';
 import { Notice } from './ui';
 
 type Form = { draft: Settings; saved: Settings };
@@ -18,7 +18,7 @@ const same = (a: unknown, b: unknown) => JSON.stringify(a) === JSON.stringify(b)
 const noop = () => {};
 /** `https://x.com/*` reads as x.com to the person being asked about it. */
 const host = (origin: string) => origin.replace(/^https:\/\//, '').replace(/\/\*$/, '');
-const filtered = /^https:\/\/(?:x\.com|twitter\.com|www\.youtube\.com)\//;
+const filtered = /^https:\/\/(?:x\.com|twitter\.com|(?:www|m)\.youtube\.com)\//;
 
 /** The page the reader was looking at when they opened Sharp. Desktop Chrome
  *  floats the popup above the page, so that is simply the active tab —
@@ -65,6 +65,7 @@ export function App() {
   const [section, setSection] = useState<Section>('x');
   const [xTab, setXTab] = useState<XTab>('filtering');
   const [generalTab, setGeneralTab] = useState<GeneralTab>('connection');
+  const [youtubeTab, setYoutubeTab] = useState<YouTubeTab>('filtering');
   const [overlay, setOverlay] = useState<Overlay | null>(null);
   const [stats, setStats] = useState<Stats | null>(null);
   const [bytes, setBytes] = useState(0);
@@ -116,7 +117,7 @@ export function App() {
       if (/^https:\/\/(?:x|twitter)\.com\//.test(url)) {
         setSite('x');
         setThread(threadId(new URL(url).pathname));
-      } else if (/^https:\/\/www\.youtube\.com\//.test(url)) {
+      } else if (/^https:\/\/(?:www|m)\.youtube\.com\//.test(url)) {
         setSite('youtube');
         setSection('youtube');
       }
@@ -294,9 +295,13 @@ export function App() {
                 ['filtering', 'Filtering'],
                 ['rules', 'Rules'],
                 ['activity', 'Activity'],
+                ['misc', 'Misc'],
               ] as const)
             : section === 'youtube'
-              ? ([['filtering', 'Filtering']] as const)
+              ? ([
+                  ['filtering', 'Filtering'],
+                  ['misc', 'Misc'],
+                ] as const)
               : ([
                   ['connection', 'Connection'],
                   ['appearance', 'Appearance'],
@@ -309,11 +314,12 @@ export function App() {
               class="tab"
               role="tab"
               aria-selected={
-                section === 'x' ? xTab === id : section === 'youtube' || generalTab === id
+                (section === 'x' ? xTab : section === 'youtube' ? youtubeTab : generalTab) === id
               }
               onClick={() => {
                 if (section === 'x') setXTab(id as XTab);
-                else if (section === 'general') setGeneralTab(id as GeneralTab);
+                else if (section === 'youtube') setYoutubeTab(id as YouTubeTab);
+                else setGeneralTab(id as GeneralTab);
               }}
             >
               {label}
@@ -394,7 +400,7 @@ export function App() {
               }
             />
           ) : section === 'youtube' ? (
-            <YouTubePanel {...editor} />
+            <YouTubePanel {...editor} tab={youtubeTab} />
           ) : (
             <GeneralPanel
               {...editor}

src/popup/XPanel.tsx

@@ -6,7 +6,7 @@ import * as fmt from './format';
 import { lists, type ListKey } from './ListSheet';
 import { RangeField, ToggleRow, type SettingsEditor } from './ui';
 
-export type XTab = 'filtering' | 'rules' | 'activity';
+export type XTab = 'filtering' | 'rules' | 'activity' | 'misc';
 
 // A hidden post is one the reader did not have to read past. This is roughly
 // the time a post holds the eye on the way by, and the number is labelled as
@@ -91,6 +91,26 @@ export function XPanel({
     onSavePreset(name);
   };
 
+  if (tab === 'misc') {
+    return (
+      <div class="panel">
+        <section class="group">
+          <h2>Greyscale</h2>
+          <ToggleRow
+            label="Greyscale UI"
+            checked={settings.greyscaleUi}
+            onChange={(value) => update('greyscaleUi', value)}
+          />
+          <ToggleRow
+            label="Greyscale content"
+            checked={settings.greyscaleContent}
+            onChange={(value) => update('greyscaleContent', value)}
+          />
+        </section>
+      </div>
+    );
+  }
+
   if (tab === 'rules') {
     return (
       <div class="panel">
@@ -332,6 +352,20 @@ export function XPanel({
         )}
       </section>
 
+      <section class="group">
+        <h2>Comments</h2>
+        <ToggleRow
+          label="Filter comments"
+          hint={
+            settings.filterComments
+              ? 'Replies under a post are judged like any other post.'
+              : 'Replies under a post are left alone. Only the timeline is filtered.'
+          }
+          checked={settings.filterComments}
+          onChange={(value) => update('filterComments', value)}
+        />
+      </section>
+
       {settings.corrections.length > 0 && (
         <section class="group">
           <h2>Corrections</h2>
@@ -411,20 +445,6 @@ export function XPanel({
           onChange={(value) => update('analyzeImages', value)}
         />
       </section>
-
-      <section class="group">
-        <h2>Misc</h2>
-        <ToggleRow
-          label="Greyscale UI"
-          checked={settings.greyscaleUi}
-          onChange={(value) => update('greyscaleUi', value)}
-        />
-        <ToggleRow
-          label="Greyscale content"
-          checked={settings.greyscaleContent}
-          onChange={(value) => update('greyscaleContent', value)}
-        />
-      </section>
     </div>
   );
 }

src/popup/YouTubePanel.tsx

@@ -6,7 +6,29 @@ const thumbnailOptions = [
   { value: 'hidden', label: 'Hidden' },
 ] as const;
 
-export function YouTubePanel({ settings, update }: SettingsEditor) {
+export type YouTubeTab = 'filtering' | 'misc';
+
+export function YouTubePanel({ settings, update, tab }: SettingsEditor & { tab: YouTubeTab }) {
+  if (tab === 'misc') {
+    return (
+      <div class="panel">
+        <section class="group">
+          <h2>Greyscale</h2>
+          <ToggleRow
+            label="Greyscale UI"
+            checked={settings.youtubeGreyscaleUi}
+            onChange={(value) => update('youtubeGreyscaleUi', value)}
+          />
+          <ToggleRow
+            label="Greyscale content"
+            checked={settings.youtubeGreyscaleContent}
+            onChange={(value) => update('youtubeGreyscaleContent', value)}
+          />
+        </section>
+      </div>
+    );
+  }
+
   return (
     <div class="panel">
       <section class="group">
@@ -38,19 +60,6 @@ export function YouTubePanel({ settings, update }: SettingsEditor) {
           onChange={(value) => update('thumbnails', value)}
         />
       </section>
-      <section class="group">
-        <h2>Misc</h2>
-        <ToggleRow
-          label="Greyscale UI"
-          checked={settings.youtubeGreyscaleUi}
-          onChange={(value) => update('youtubeGreyscaleUi', value)}
-        />
-        <ToggleRow
-          label="Greyscale content"
-          checked={settings.youtubeGreyscaleContent}
-          onChange={(value) => update('youtubeGreyscaleContent', value)}
-        />
-      </section>
     </div>
   );
 }