'marks

A browser extension that allows you to view and manage your bookmarks right from your browser's start page

---

Table of Contents

• Developer Documentation
  • Prerequisites
  • Overview
    • Scripts
    • Architecture
  • Running the Extension
  • Resources

Developer Documentation

Prerequisites

• Install VS Code
  • Install Vue Language Features extension
  • Install ESLint extension
  • Install Tailwind CSS IntelliSense extension

Overview

• Scripts

  • npm run dev

    • Runs web-ext run and vite build to reload the extension and rebuild on file changes
      • Note that this does not include type checking in favor of faster feedback when developing. Type checking during development relies on the Vue Language Features extension.

  • npm run test

    • Runs vitest to run unit tests

  • npm run build

    • Builds, type checks, and packages the extension

• Architecture

  • App
    • Combines components with composables to make up the UI
  • Services
    • Combines data access and other services into a clean interface for the app
  • Data
    • Used by services to access data from the Web Extensions API and localStorage

Running the Extension

1. Run npm install
2. Run npm run dev
3. Open Firefox and go to about:debugging
4. Select This Firefox
5. Select Load Temporary Add-on...
6. Select the manifest.json file in the dist directory and select Open
7. Open a new tab and you will see 'marks

Resources

• MDN WebExtensions
• Tailwind CSS
• Vite
• Vitest
• Vue

Inspirations

• TailwindUI