TabSlap

TabSlap is an open-source Chrome extension that blocks distracting websites after a daily active-time limit. When you really need access, you can unlock a site temporarily by solving a quick math quiz.

The goal is not to make the web impossible to use. The goal is to add a small moment of friction before low-intent browsing.

Features

• Block any number of websites by domain.
• Set a daily active-time limit per site.
• Count time only while the page is visible and the browser window has focus.
• Unlock temporarily by solving a math quiz.
• Configure everything locally from the extension settings page.
• Export and import settings as JSON.
• Store all settings and usage data locally in Chrome storage.

How It Works

TabSlap uses a Manifest V3 service worker for rules, state, unlocks, and daily usage tracking. A content script runs on regular web pages and asks the service worker whether the current hostname should be blocked.

If the site is blocked, the content script places a full-page overlay over the website. The page is still technically loaded, but the user cannot view or interact with it until the daily limit resets or the quiz unlock is solved.

Active time is tracked in short intervals. A page only adds time when:

• the document is visible;
• the browser window has focus;
• the matched site is not currently blocked.

Installation

1. Clone or download this repository.
2. Open Chrome and go to chrome://extensions.
3. Enable Developer mode.
4. Click Load unpacked.
5. Select the repository folder.

No build step is required.

Usage

Open the TabSlap popup or options page and add one or more sites.

For each site you can configure:

• Domain: a hostname such as instagram.com, youtube.com, or x.com.
• Daily limit: the maximum active time allowed each day.

Set Daily limit to 0 to disable blocking for that site.

Project Structure

manifest.json
src/
  background.js   # state, rules, usage tracking, unlocks
  content.js      # page decision checks and blocking overlay
  content.css     # overlay styles
  options.html    # settings UI
  options.css     # settings styles
  options.js      # settings persistence and rendering
test/
  rules.test.js   # matching, limit, and unlock tests

Development

This project intentionally uses plain HTML, CSS, and JavaScript so it stays easy to inspect, fork, and modify.

Useful checks:

npm run check
npm test

After editing extension files, reload the extension from chrome://extensions before testing again.

See TESTING.md for the manual release checklist.

For local preview cleanup during development:

npm run reset:dev

Limitations

• Chrome extensions cannot run content scripts on internal pages such as chrome:// URLs, the Chrome Web Store, or restricted browser documents.
• Blocking is implemented with a page overlay. This is suitable for personal friction and self-control, not for parental-control or enterprise enforcement.
• Usage is tracked locally and can be reset by clearing extension storage.

Roadmap

• Optional stricter unlock modes.
• Per-site unlock durations.
• Usage history charts.
• Firefox support.
• Localization.
• Sync support as an opt-in setting.

Contributing

Contributions are welcome. Please keep the project simple, privacy-preserving, and dependency-light.

See CONTRIBUTING.md for the full workflow.

Before opening a pull request:

1. Create a focused branch.
2. Keep changes scoped to one feature or fix.
3. Run the syntax checks listed in Development.
4. Test the extension manually in Chrome.
5. Describe the behavior change and testing steps in the pull request.

Good first issues:

• improve accessibility of the options page;
• add tests for usage tracking edge cases;
• improve the blocked overlay copy;
• add release screenshots and demo recordings.

Privacy

TabSlap stores settings, unlock state, and usage counters locally in chrome.storage.local. It does not send browsing data to a server.

License

MIT. See LICENSE.