SFW (Safe For Works)

A Chrome extension that blocks unwanted content on websites using two powerful methods: DOM element removal and network-level blocking.

Features

DOM Element Removal

• Specify DOM elements to remove or hide per website
• Hide mode: Apply display: none !important style (element stays in DOM)
• Remove mode: Completely remove element from DOM
• Support for both CSS selectors and XPath
• Interactive element picker with keyboard navigation
• Automatically remove/hide dynamically added elements (MutationObserver)
• Manage and save rules per site

Network-Level Blocking

• Block network requests before they load (like AdBlock)
• Automatic URL pattern expansion (e.g., ads.com → 4 blocking patterns)
• Extract URLs from page elements with element picker
• Filter by resource type (images, scripts, CSS, XHR, iframes)
• Powered by Chrome's declarativeNetRequest API

Settings Management

• Export: Save all rules to JSON file (💾 button)
• Import: Restore rules from JSON file (📥 button)
• Backup and share your filtering rules across devices
• Version-tagged export files with timestamps

Installation

1. Navigate to chrome://extensions/ in Chrome browser
2. Enable "Developer mode" in the top right corner
3. Click "Load unpacked"
4. Select this project folder

Usage

The extension has two tabs: "요소 제거" (Element Removal) and "네트워크 차단" (Network Blocking).

Tab 1: 요소 제거 (DOM Element Removal)

Option A: Manual Entry

1. Visit the desired website (e.g., github.com)
2. Click the extension icon
3. Select selector type:
   • CSS Selector: #logo, .ads, div.header
   • XPath: //*[@id="logo"], //div[@class="ads"]
4. Enter the selector and click "Add"
5. The page will automatically reload and apply the rule (default: remove)

Changing Action Mode (Hide vs Remove)

1. After adding a rule, use the radio buttons in each rule item:
   • 숨김 (Hide): Apply display: none !important - element stays in DOM but invisible
   • 삭제 (Remove): Completely remove element from DOM
2. The page automatically reloads when you change the action mode

Option B: Element Picker

1. Click the extension icon
2. Click the 🎯 button
3. Hover over elements on the page to preview selection
4. Use arrow keys to navigate:
   • ↑ (Arrow Up): Select parent element
   • ↓ (Arrow Down): Select child element
   • ESC: Cancel selection
5. Click to select the element
6. The XPath will be automatically filled in the popup

Tab 2: 네트워크 차단 (Network Blocking)

Option A: Direct URL Pattern Entry

1. Switch to the "네트워크 차단" tab
2. Enter a domain (e.g., ads.google.com)
3. Select resource types to block (all checked by default)
4. Click "Add"
5. The extension automatically creates 4 blocking patterns:
   • *://ads.google.com
   • *://*.ads.google.com
   • *://ads.google.com/*
   • *://*.ads.google.com/*

Option B: Extract URL from Element

1. Click the 🎯 button in the "네트워크 차단" tab
2. Click on an image, iframe, or script element on the page
3. The URL will be automatically extracted and filled in
4. Click "Add" to block that resource

Managing Rules

Deleting Rules

• Click the 🗑️ (trash icon) button next to any saved rule in either tab

Export/Import Settings

1. Export Settings:

   • Click the 💾 button in the top-right corner
   • Downloads a JSON file: sfw-settings-YYYY-MM-DD.json
   • Contains all DOM and Network rules from all sites

2. Import Settings:

   • Click the 📥 button in the top-right corner
   • Select a previously exported JSON file
   • Confirm to overwrite current settings
   • All rules will be restored and applied immediately

Examples

Example 1: Remove GitHub Logo (DOM Removal)

• Tab: 요소 제거
• Type: CSS Selector
• Selector: #logo

Example 2: Remove Specific Element with XPath (DOM Removal)

• Tab: 요소 제거
• Type: XPath
• Selector: //*[@id="mat-expansion-panel-header-288"]/span[1]/mat-panel-title/div/div/div[1]

Example 3: Block Google Ads (Network Blocking)

• Tab: 네트워크 차단
• URL Pattern: doubleclick.net (auto-expands to 4 patterns)
• Resource Types: All (default)
• Result: Blocks all requests to *.doubleclick.net

Example 4: Block Ad Images Only (Network Blocking)

• Tab: 네트워크 차단
• URL Pattern: ads.example.com
• Resource Types: Image only
• Result: Blocks image requests from ad server

Data Storage

Rules are stored in chrome.storage.sync and synced across your Google account.

DOM Removal Rules

{
  "sfwRules": {
    "github.com": [
      { "type": "css", "selector": "#logo", "action": "remove" },
      { "type": "xpath", "selector": "//*[@id='something']", "action": "hide" }
    ],
    "example.com": [
      { "type": "css", "selector": ".ads", "action": "remove" }
    ]
  }
}

• action: "hide" (display:none) or "remove" (delete from DOM)
• Default: "remove"

Network Blocking Rules

{
  "sfwNetworkRules": [
    {
      "urlPattern": "*://ads.google.com",
      "resourceTypes": ["image", "script", "stylesheet", "xmlhttprequest", "sub_frame"]
    },
    {
      "urlPattern": "*://*.ads.google.com/*",
      "resourceTypes": ["image", "script", "stylesheet", "xmlhttprequest", "sub_frame"]
    }
  ]
}

Network blocking rules are applied globally using Chrome's declarativeNetRequest API.

Export File Format

{
  "version": "1.0",
  "exportDate": "2025-10-10T12:34:56.789Z",
  "domRules": { /* sfwRules object */ },
  "networkRules": [ /* sfwNetworkRules array */ ]
}

Project Structure

sfw/
├── manifest.json       # Extension configuration
├── content.js         # Element picker + DOM removal + URL extraction
├── popup.html         # Popup UI with tabs
├── popup.css          # Popup styles
├── popup.js           # Popup logic + network blocking
├── picker.css         # Element picker visual styles
└── icons/             # Icon files
    ├── icon16.svg
    ├── icon48.svg
    └── icon128.svg

Tech Stack

• Manifest V3
• Vanilla JavaScript
• Chrome Extension APIs
  • chrome.storage.sync - Rule persistence
  • chrome.storage.local - Temporary picker data
  • chrome.tabs - Tab control
  • chrome.declarativeNetRequest - Network blocking
  • Content Scripts
• MutationObserver API - Dynamic element removal
• DOM APIs - Element selection and manipulation

Key Differences from AdBlock

Feature	SFW	AdBlock
Blocking Method	DOM removal + Network blocking	Network blocking only
Timing	After page load (DOM) / Before request (Network)	Before request
Target	User-selected elements + URLs	Filter list subscriptions
Customization	Full control per element/URL	Limited per-site control
Use Case	Remove any page element + block ads	Block ads only

License

MIT