Merge pull request #29 from jamesainslie/feature-site-blocking

feat(content): add site blocklist controls

Author: jamesainslie

CHANGELOG.md

@@ -1,16 +1,16 @@
-## [0.3.1](https://github.com/jamesainslie/mdview/compare/mdview-v0.3.0...mdview-v0.3.1) (2025-12-02)
+## [0.3.2](https://github.com/jamesainslie/mdview/compare/mdview-v0.3.1...mdview-v0.3.2) (2025-12-02)
 
 
 ### Documentation
 
-* **changelog:** remove manual unreleased section ([eaf770f](https://github.com/jamesainslie/mdview/commit/eaf770f71be1d6696e040f34f288da47469a246f))
+* **changelog:** remove duplicate 0.2.0 section ([2e2cfd5](https://github.com/jamesainslie/mdview/commit/2e2cfd5b698b77d8c88244a3a0ed86ba6751de88))
 
-## [0.3.2](https://github.com/jamesainslie/mdview/compare/mdview-v0.3.1...mdview-v0.3.2) (2025-12-02)
+## [0.3.1](https://github.com/jamesainslie/mdview/compare/mdview-v0.3.0...mdview-v0.3.1) (2025-12-02)
 
 
 ### Documentation
 
-* **changelog:** remove duplicate 0.2.0 section ([2e2cfd5](https://github.com/jamesainslie/mdview/commit/2e2cfd5b698b77d8c88244a3a0ed86ba6751de88))
+* **changelog:** remove manual unreleased section ([eaf770f](https://github.com/jamesainslie/mdview/commit/eaf770f71be1d6696e040f34f288da47469a246f))
 
 ## [0.3.0](https://github.com/jamesainslie/mdview/compare/mdview-v0.2.8...mdview-v0.3.0) (2025-12-02)
 

public/manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "MDView - Markdown Viewer",
-  "version": "0.2.7",
+  "version": "0.3.2",
   "description": "Beautiful markdown file viewer with themes, syntax highlighting, and interactive Mermaid diagrams",
   "permissions": [
     "storage"

src/background/service-worker.ts

@@ -24,6 +24,7 @@ const defaultState: AppState = {
     tocMaxDepth: 6,
     tocAutoCollapse: false,
     tocPosition: 'left',
+    blockedSites: [], // Sites where MDView should not render
   },
   document: {
     path: '',

src/content/content-script.ts

@@ -3,6 +3,7 @@
  * Injected into markdown files to handle rendering
  */
 
+// CSS is imported but only activated when we add .mdview-active to body
 import './content.css';
 import { FileScanner } from '../utils/file-scanner';
 import type { AppState } from '../types';
@@ -51,9 +52,15 @@ class MDViewContentScript {
 
     // Check if this is a markdown file (before logging, since we need state for debug mode)
     const isMarkdown = FileScanner.isMarkdownFile();
+    console.log('[MDView] isMarkdownFile check:', {
+      isMarkdown,
+      contentType: document.contentType,
+      pathname: window.location.pathname,
+      href: window.location.href,
+    });
     if (!isMarkdown) {
-      // Can't debug.log here as debug mode isn't loaded yet
       console.log('[MDView] Not a markdown file, skipping initialization');
+      this.logStyleDebug('non-markdown');
       return;
     }
 
@@ -67,6 +74,22 @@ class MDViewContentScript {
       debug.debug('MDView', `Document ready state: ${document.readyState}`);
       debug.debug('MDView', `Debug mode enabled: ${this.state?.preferences.debug}`);
       debug.debug('MDView', `Auto-reload enabled: ${this.state?.preferences.autoReload}`);
+
+      // Check if this site is in the blocklist
+      const blockedSites = this.state?.preferences.blockedSites || [];
+      debug.info('MDView', `Blocklist check - patterns: ${JSON.stringify(blockedSites)}`);
+      debug.info('MDView', `Blocklist check - current hostname: ${window.location.hostname}`);
+      if (FileScanner.isSiteBlocked(blockedSites)) {
+        debug.info('MDView', 'Site is in blocklist, skipping rendering');
+        this.logStyleDebug('blocked');
+        console.log('[MDView] Site blocked by user preference, skipping initialization');
+        return;
+      }
+      debug.info('MDView', 'Site is NOT blocked, proceeding with render');
+
+      // Activate styles only after confirming this page should be rendered
+      this.activateStyles();
+
       debug.info('MDView', 'Content script initializing...');
       debug.info('MDView', 'Markdown file detected:', FileScanner.getFilePath());
 
@@ -270,6 +293,93 @@ class MDViewContentScript {
     }
   }
 
+  /**
+   * Activate MDView styles by adding a scoping class to the body element.
+   * Global resets in content.css are scoped to body.mdview-active to avoid
+   * impacting sites where MDView should not render (e.g. GitHub UI pages).
+   */
+  private activateStyles(): void {
+    document.body.classList.add('mdview-active');
+    debug.info('MDView', 'Content styles activated (body.mdview-active)');
+  }
+
+  /**
+   * Emit debug information about styles in different contexts
+   * (non-markdown page, blocked site, etc.). This helps verify
+   * whether any MDView styles are affecting the page when they
+   * should not.
+   */
+  private logStyleDebug(context: string): void {
+    try {
+      debug.info('MDView', `=== STYLE DEBUG START (${context}) ===`);
+
+      // 1. Body class list and key computed styles
+      const body = document.body;
+      const classes = Array.from(body.classList.values());
+      const computed = window.getComputedStyle(body);
+
+      debug.info('MDView', 'Body classList:', JSON.stringify(classes));
+      debug.info('MDView', 'Body computed styles snapshot:', {
+        backgroundColor: computed.backgroundColor,
+        color: computed.color,
+        fontFamily: computed.fontFamily,
+        fontSize: computed.fontSize,
+        lineHeight: computed.lineHeight,
+      });
+
+      // 2. Stylesheets originating from this extension
+      const styleSheets = Array.from(document.styleSheets);
+      const extensionId = chrome.runtime.id;
+
+      const extensionSheets: Array<{
+        index: number;
+        href: string | null;
+        ownerTag: string | null;
+        rules: number | 'unknown';
+      }> = [];
+
+      styleSheets.forEach((sheet, index) => {
+        let href: string | null = null;
+        let ownerTag: string | null = null;
+        let rules: number | 'unknown' = 'unknown';
+
+        try {
+          href = sheet.href || null;
+        } catch {
+          href = null;
+        }
+
+        const owner = sheet.ownerNode as HTMLElement | null;
+        if (owner) {
+          ownerTag = owner.tagName.toLowerCase();
+        }
+
+        const isFromExtension =
+          (href && href.startsWith(`chrome-extension://${extensionId}/`)) ||
+          (owner && owner.tagName.toLowerCase() === 'style');
+
+        if (!isFromExtension) {
+          return;
+        }
+
+        try {
+          // Accessing cssRules may throw for cross-origin stylesheets
+          const cssRules = sheet.cssRules;
+          rules = cssRules ? cssRules.length : 0;
+        } catch {
+          rules = 'unknown';
+        }
+
+        extensionSheets.push({ index, href, ownerTag, rules });
+      });
+
+      debug.info('MDView', 'Extension stylesheets on page:', extensionSheets);
+      debug.info('MDView', `=== STYLE DEBUG END (${context}) ===`);
+    } catch (error) {
+      debug.error('MDView', 'Failed to collect style debug:', error);
+    }
+  }
+
   private async loadState(): Promise<void> {
     try {
       const response: unknown = await chrome.runtime.sendMessage({ type: 'GET_STATE' });

src/content/content.css

@@ -32,18 +32,19 @@
               border-color 100ms ease !important;
 }
 
-/* Reset and base styles */
-* {
+/* Reset and base styles - only apply when MDView is active */
+body.mdview-active,
+body.mdview-active * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }
 
-::selection {
+body.mdview-active ::selection {
   background: var(--md-selection);
 }
 
-body {
+body.mdview-active {
   background-color: var(--md-bg);
   color: var(--md-fg);
   font-family: var(--md-font-family);
@@ -241,39 +242,44 @@ body {
 }
 
 /* Headings */
-h1, h2, h3, h4, h5, h6 {
+body.mdview-active h1,
+body.mdview-active h2,
+body.mdview-active h3,
+body.mdview-active h4,
+body.mdview-active h5,
+body.mdview-active h6 {
   color: var(--md-heading);
   font-weight: 600;
   margin-top: 24px;
   margin-bottom: 16px;
   line-height: 1.25;
 }
 
-h1 {
+body.mdview-active h1 {
   font-size: 2em;
   padding-bottom: 0.3em;
   border-bottom: 1px solid var(--md-border);
 }
 
-h2 {
+body.mdview-active h2 {
   font-size: 1.5em;
   padding-bottom: 0.3em;
   border-bottom: 1px solid var(--md-border);
 }
 
-h3 {
+body.mdview-active h3 {
   font-size: 1.25em;
 }
 
-h4 {
+body.mdview-active h4 {
   font-size: 1em;
 }
 
-h5 {
+body.mdview-active h5 {
   font-size: 0.875em;
 }
 
-h6 {
+body.mdview-active h6 {
   font-size: 0.85em;
   color: var(--md-fg);
   opacity: 0.7;
@@ -293,42 +299,43 @@ h6 {
 }
 
 /* Paragraphs */
-p {
+body.mdview-active p {
   margin-top: 0;
   margin-bottom: 16px;
 }
 
 /* Links */
-a {
+body.mdview-active a {
   color: var(--md-link);
   text-decoration: none;
 }
 
-a:hover {
+body.mdview-active a:hover {
   color: var(--md-link-hover);
   text-decoration: underline;
 }
 
-a:visited {
+body.mdview-active a:visited {
   color: var(--md-link-visited);
 }
 
 /* Lists */
-ul, ol {
+body.mdview-active ul,
+body.mdview-active ol {
   margin-top: 0;
   margin-bottom: 16px;
   padding-left: 2em;
 }
 
-li {
+body.mdview-active li {
   margin-top: 0.25em;
 }
 
-li > p {
+body.mdview-active li > p {
   margin-bottom: 0;
 }
 
-li + li {
+body.mdview-active li + li {
   margin-top: 0.25em;
 }
 
@@ -344,7 +351,7 @@ li + li {
 }
 
 /* Code */
-code {
+body.mdview-active code {
   background-color: var(--md-code-bg);
   color: var(--md-code-text);
   font-family: var(--md-font-family-code);
@@ -353,7 +360,7 @@ code {
   border-radius: 3px;
 }
 
-pre {
+body.mdview-active pre {
   background-color: var(--md-code-bg);
   color: var(--md-code-text);
   font-family: var(--md-font-family-code);
@@ -364,7 +371,7 @@ pre {
   margin-bottom: 16px;
 }
 
-pre code {
+body.mdview-active pre code {
   background: transparent;
   padding: 0;
   font-size: 100%;
@@ -558,33 +565,33 @@ hr {
   margin-bottom: 16px;
 }
 
-table {
+body.mdview-active table {
   width: 100%;
   border-collapse: collapse;
   border-spacing: 0;
 }
 
-table th {
+body.mdview-active table th {
   font-weight: 600;
   background-color: var(--md-code-bg);
 }
 
-table th,
-table td {
+body.mdview-active table th,
+body.mdview-active table td {
   padding: 6px 13px;
   border: 1px solid var(--md-border);
 }
 
-table tr {
+body.mdview-active table tr {
   background-color: var(--md-bg);
 }
 
-table tr:nth-child(2n) {
+body.mdview-active table tr:nth-child(2n) {
   background-color: var(--md-code-bg);
 }
 
 /* Images */
-img {
+body.mdview-active img {
   max-width: 100%;
   height: auto;
   display: block;