. This Chrome (maybe soon Firefox as well) extension embed this features:

• Based on Tailwind CSS + Daisy UI component
• OpenWeather
• React + Typescript
• Support Manifest V3

Intro

Welcome to the Vaporflow Chrome Extension README! Vaporflow is a stylish and customizable browser start page that is now available as a Chrome extension. Built on top of Chrome Extension Boilerplate React Vite, Vaporflow is powered by React 18 and TypeScript, and uses Vite as its build tool. The design is based on the popular Tailwind CSS framework, with added components from Daisy UI, to make customization a breeze. It supports the latest Chrome Extension Manifest V3 specification.

As soon as the Boilerplate template supports manifest v3, support will be added in this repo as well.

• Read more about Chrome manifest v2 support here.
• Read more about Firefox Manifest v3 support here.

Usage

Prerequisite for OpenWeather

Want to keep up-to-date with the latest weather conditions right from your start page? No problem! To add the Weather Widget to your start page, simply create an account on OpenWeather and generate an API KEY.

Setup

1. Clone of Fork this repository.
2. Run yarn or npm i (check your node version >= 16)
3. Run yarn dev or npm run dev
4. Load Extension on Chrome
   1. Open – Chrome browser
   2. Access – chrome://extensions
   3. Check – Developer mode
   4. Find – Load unpacked extension
   5. Select – dist folder in this project (after dev or build)
5. If you want to build in production, Just run yarn build or npm run build.

Configs

With the src/pages/newtab/config.json file, you can easily set your OpenWeather API key, language, units, location, and the page themes to suit your preferences. All theme reference are available in tailwind.config.cjs.

// src/pages/newtab/config.json
{
  "username": "Gaël",
  "openweather":{
    "apikey": "YOUR_API_KEY", // 👈 Add your OpenWeather key here
    "language": "en",
    "units": "metric",
    "location": "Lausanne"
  },
  "theme": [ // 👈 See tailwind.config.cjs for more themes
    {
      "name": "Light",
      "emoji": "🖨️",
      "theme": "light"
    },
    {
      "name": "Dark",
      "emoji": "🌑",
      "theme": "dark"
    },
  ]
}

Sample theme:

Bookmarks

The configuration of bookmarks is done in src/pages/newtab/Bookmarks.tsx:

1. Update const YourLinks = ... link list

/// src/pages/newtab/Bookmarks.tsx
  const socialLinks = [
    {
      href: "https://www.instagram.com/", // 👈 url link
      icon: <SlSocialInstagram className="hidden md:block" size={20} />, // 👈 react-icons
      text: "instagram", // 👈 displayed text
    },
    {
      href: "https://www.twitter.com/",
      icon: <SlSocialTwitter className="hidden md:block" size={20} />,
      text: "twitter",
    },
    ...
  ];

2. Update category title

/// src/pages/newtab/Bookmarks.tsx
      <div className="col-start-2 text-center">
        <h3 className="text-accent text-xl font-semibold">Social</h3> // 👈 Category title
        {renderLinks(socialLinks)} // 👈 Link list constant
      </div>

Tech Docs

• Boilerplate React Vite
• Vite Plugin
• Chrome Extension with manifest 3
• Rollup
• Rollup-plugin-chrome-extension
• Tailwind CSS

Contributing

Feel free to open PRs or raise issues!

GitHub

View Github