Lucid - Cognitive-Adaptive Web Browsing

Lucid is a lightweight browser extension that estimates cognitive load using simple interaction signals and adapts webpages in real time to reduce visual clutter. When the extension detects that the user may be overloaded, it reveals a control that applies targeted layout simplifications, making dense, distracting pages feel calmer and easier to process.

Walkthrough and demo

Local setup

1. Clone the repository, install dependencies

git clone https://github.com/yatish1606/lucid
cd lucid
npm i --legacy-peer-deps

2. Install compatible versions of dev dependencies.

npm i --save-dev @types/chrome prettier cpx

3. Create a local build within dist.

npm run build

4. Run test app on local.

cd test
npm i
npm run dev

5. Get your Google Gemini API key from aistudio.google.com by creating a new project. Then, create a .env at the root of your project and add the following.

LUCID_GEMINI_API_KEY=<your-api-key-here>

6. Load dist as an unpacked extension within Chrome.

macOS

# Close Chrome first, then:
"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" \
  --user-data-dir="$HOME/chrome-lucid-profile" \
  --load-extension="/absolute/path/to/your/project/dist"

Linux

google-chrome \
  --user-data-dir="$HOME/chrome-lucid-profile" \
  --load-extension="/absolute/path/to/your/project/dist"

Powershell

Start-Process "C:\Program Files\Google\Chrome\Application\chrome.exe" -ArgumentList @(
  '--user-data-dir="C:\chrome-lucid-profile"',
  '--load-extension="C:\absolute\path\to\your\project\dist"'
)

To use Lucid across platforms, add these scripts to the `package.json` at the root. Use `cross-env` only if you need environment portability; otherwise plain paths are fine.

{
    "scripts": {
        "build": "npm run build:extension",
        "chrome:load:mac": "\"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome\" --user-data-dir=\"$HOME/chrome-lucid-profile\" --load-extension=\"$PWD/dist\"",
        "chrome:load:linux": "google-chrome --user-data-dir=\"$HOME/chrome-lucid-profile\" --load-extension=\"$PWD/dist\"",
        "chrome:load:win": "Start-Process \"C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe\" -ArgumentList '--user-data-dir=%USERPROFILE%\\\\chrome-lucid-profile','--load-extension=%CD%\\\\dist'"
    }
}

Then, run

npm run build
npm run chrome:load:mac   # or chrome:load:linux / chrome:load:win

8. Open up a fresh instance of Chrome. Check if Lucid is visible within chrome://extensions and enable the extension.

Contributions

Contributions, ideas, and critiques are welcome. If you’d like to explore adaptive browsing or cognitive-load sensing, feel free to open an issue or suggest enhancements.