lavender new tab 🌙

features

lavender is a soft, minimal new tab for your browser featuring:

• live time & weather updates
• 12 background colors in calming pastel and rich dark tones
• dynamic light / dark mode for adaptive viewing
• alternative UI layouts
• location-based weather fetching
• metric units & 24-hour time formatting
• options sync between devices using the chrome extension (optional)

chrome extension

lavender for Chrome

also installable to Brave and other Chromium-based browsers.

firefox extension

lavender for Firefox

web

• visit the lavender site to preview the app and customize your theme options
• set as your browser homepage or new tab page to pair lavender with any web platform

manual installation

setup

• clone or download lavender

  git clone [email protected]:fvrests/lavender.git && cd lavender

• sign up for OpenWeather API and generate a new API key (you'll be using the Current Weather Data API - the free tier should be sufficient)

• within the .env.example file, paste your key directly after "VITE_WEATHER_KEY=" and rename the file to .env

  # .env
  VITE_WEATHER_KEY=<api_key>

• install dependencies and build lavender (generating the necessary dist folder)

  pnpm install && pnpm build

platform-specific instructions

web

• paste the preview address from the terminal into your browser to view lavender locally. the build address defaults to http://localhost:4173

Chrome (& Chromium)

• navigate to chrome://extensions (or the extensions page for your Chromium browser) and turn on developer mode (in the top right corner)
• click "load unpacked" at the top and select the dist folder of lavender

firefox

• navigate to about:debugging#/runtime/this-firefox and click "load temporary add-on". select the dist/manifest.json file from lavender

open lavender

opening a new tab should now load lavender ✨ enjoy!

contributing

development

• clone or download lavender

  git clone [email protected]:fvrests/lavender.git && cd lavender

• to run the local server with test weather data for development, install Bun and run the server

  pnpm dev:server

• install dependencies and start the dev server for lavender

  pnpm install && pnpm dev

preview

• build and preview lavender (generating the necessary dist folder)

  pnpm build && pnpm preview

• follow platorm-specific instructions to load your local build

troubleshooting

location fetch

location fetch will fail on ungoogled-chromium or any browser which disables location access. in some cases, location may be spoofed instead (see workaround for ungoogled-chromium)

permissions & licensing

the extension requires the following permissions:

permission	usage
local & chrome storage	store user settings. optionally, sync between devices with chrome storage.
geolocation	fetch weather - data is used to query OpenWeather API

this project is licensed under MIT. please feel free to browse the source code or use snippets for your own projects.

privacy policy | terms of use

feedback & suggestions are always welcome!

by fvrests

support my work 💛