Vaporflow Chrome Startpage
≋≋≋（🗻📼🌸🌴⛲️🐬💾 ）≋≋≋

"Vaporflow is a browser start page where I have gathered the elements that I like the most about the projects found on r/startpages. This Chrome extension (and soon Firefox as well) embeds these features:"

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

Table of Contents

• Intro
• Usage
  • Prerequisite for OpenWeather
  • Setup
  • Configs
  • Bookmarks
• Tech Docs
• Contributing

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.

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.

1. Clone of Fork this repository. git clone git@github.com:gaelgoth/vaporflow-startpage.git
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.

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:

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>

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

Feel free to open PRs or raise issues!