---

'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
    • Follow instructions for disabling VSCode's Typescript and Javascript Language Features for this workspace.
  • 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

• Firefox

  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

• Chrome

  1. Run npm install
  2. Run npm run dev
  3. Open Chrome and go to chrome://extensions/
  4. Toggle Developer mode on
  5. Select Load unpacked
  6. Select 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