Tab Refresh

A smart multi-tab auto-refresh Chrome extension — rule matching, multiple refresh modes, and automatic scheduled refreshing.

Installation / Features / Usage / Development

Features

• Rule matching: supports exact domain, subdomain wildcard, and regular expression patterns
• Four refresh modes:
  • Normal Reload — standard page refresh
  • Hard Reload — force refresh (bypass cache)
  • DOM Refresh — partial refresh; clones and replaces a specific DOM node identified by a CSS selector
  • Custom Script — executes custom JavaScript code
• Automatic scheduled refresh: automatically refreshes matched tabs at millisecond-level intervals
• Three trigger methods:
  • Floating widget on the page (content script injected into the bottom-right corner of every page)
  • Toolbar popup (one-click refresh all matched tabs)
  • Keyboard shortcut Alt+R to refresh all
• Concurrency control: limits the number of tabs refreshed simultaneously to prevent browser lag
• Data management: export/import rules and settings (JSON format)
• Debug log: records refresh time, URL, mode, and status for easy troubleshooting
• Internationalization: English and Simplified Chinese

Installation

Option 1: Download from Releases

1. Go to the Releases page and download the latest tab-refresh.zip
2. Unzip it, open Chrome and navigate to chrome://extensions/
3. Enable “Developer mode” in the top right corner
4. Click “Load unpacked” and select the extracted dist folder

Option 2: Build from Source

git clone https://github.com/your-username/tab-refresh.git
cd tab-refresh
npm install
npm run build

The build output is in the dist/ folder. Follow steps 2–4 from Option 1 to load it.

Usage

Rule Configuration

1. Click the toolbar icon → “Open Settings” (or right-click the icon → “Options”)
2. Add rules under the “Rule Management” tab:

Setting	Description
Rule Name	Optional, for identification
Domain / Match Pattern	e.g. localhost:3000, *.dev.com, or a regex pattern when regex mode is enabled
Refresh Mode	normal / hard / dom / script
CSS Selector	Required for DOM refresh mode, e.g. #app or .container
Custom Script	Required for custom script mode
Auto-Refresh Interval	In milliseconds, 0 disables auto-refresh
Delay	Milliseconds to wait before refreshing

3. Click “Save Changes”

Global Settings

Setting	Description
Master Switch	One-click enable/disable all rules
Max Concurrent Refreshes	Default 5, prevents too many tabs from refreshing at once
Debug Mode	Output detailed logs in the console when enabled
Interface Language	English / 中文（简体）
Data Management	Export/import rules and settings as a JSON backup

Floating Widget

A floating widget appears in the bottom-right corner of every page after the extension is loaded:

• Click the widget to expand the panel and see rules that match the current page
• “Current Rule Pages” — refreshes only tabs that match the same rule as the current page
• “All Rule Pages” — refreshes all tabs that match any rule
• When no rule matches, it shows “Add Rule for Current Domain”, allowing one-click rule creation

Shortcuts

The default shortcut Alt+R triggers a refresh of all matched tabs. You can customize it at chrome://extensions/shortcuts.

Refresh Modes in Detail

Normal Reload

Equivalent to pressing F5; uses browser cache.

Hard Reload

Equivalent to Ctrl+F5; bypasses the cache and re-requests all resources.

DOM Refresh

Uses a CSS selector to locate a DOM element on the page, clones it, and swaps it in place of the original node. Useful for refreshing only a specific section of a page (e.g. a chart or data panel) without a full page reload.

Custom Script

Injects and executes custom JavaScript, enabling flexible page interactions, for example:

document.querySelector("#refresh-btn").click();

Technical Architecture

tab-refresh/
├── src/
│   ├── background/index.ts    # Service Worker — core background logic
│   ├── content/index.tsx      # Content Script — floating widget (Shadow DOM isolation)
│   ├── popup/index.tsx        # Toolbar popup
│   ├── options/index.tsx      # Settings page
│   ├── core/
│   │   ├── storage.ts         # Chrome Storage API wrapper
│   │   ├── ruleEngine.ts      # URL rule matching engine
│   │   ├── refreshEngine.ts   # Refresh execution engine
│   │   └── logger.ts          # Debug logger
│   ├── i18n/index.ts          # Internationalization
│   └── types/index.ts         # TypeScript type definitions
├── public/
│   ├── manifest.json          # Chrome Extension Manifest V3
│   └── content-wrapper.js     # Content script dynamic loader
└── vite.config.ts             # Vite multi-entry build config

• React 19 + TypeScript: UI components
• Tailwind CSS 4: styling
• Vite 6: multi-entry build (Background / Content / Popup / Options)
• Chrome Manifest V3: Service Worker + Content Scripts + Commands API
• Shadow DOM: complete style isolation for content scripts
• chrome.storage.sync: cross-device sync for rules and settings; chrome.storage.local: local storage for debug logs

Development

# Install dependencies
npm install

# Start the dev server (port 3000, listens on all network interfaces)
npm run dev

# Type-check
npm run lint

# Build for production
npm run build

# Preview the production build
npm run preview

License

MIT