Amazing Marvin - Browser Extension

Add to Chrome/Edge, Firefox, Safari (soon!)

Table of Contents

1. Demo
2. About the Project
3. Features
4. Built with
5. Installation

Demo

Watch a short video on youtube here:

About the Project

This browser extension was built with the intention to help you quickly add tasks to your Marvin account without having to open the app. Besides being able to add new tasks to Marvin, it also allows you to:

• See your daily list of tasks
• Add emails to Marvin from gmail
• Add snippets of selected text to Marvin in just two clicks

(back to top)

Features

This section shows lists of features that are currently implemented in the extension.

• Badge with the number of tasks for today

• Gmail Addon - lets you add emails to Marvin, both from the list of emails and from the single email view. When the task is created, a message is displayed at the bottom to let you know that the task was created.

• Context menu buttons - Creates a new task in Marvin where:
  • The title is a hyperlink containing the page title and the URL of the page where the text was selected
  • The note is the selected text

• Extension also comes with a dedicated options page where users can configure the following:
  • Which buttons/inputs are visible in the Add Task view
  • Add/Change their API token
  • Force sync categories and labels
  • Where "Add to Marvin" button will be displayed in Gmail UI and whether the task will get scheduled for today

Built with

Extension is built using:

• React for the UI
• TailwindCSS and DaisyUI for styling
• Parcel for bundling
• React DayPicker for the date picker
• React Icons for icons

(back to top)

Installation

Building the extension

To start editing or using the exstension, you'll first need to clone the repo and install the dependencies. After that you'll need to build it and then load it in your browser. Building requires node (tested with v14 and higher), and npm.

1. Clone the repo

   gh repo clone amazingmarvin/amazingmarvin-browserextension

2. Install NPM packages

   npm install

3. Run build script

    npm run build

4. Build for firefox

    npm run ff:build

5. Build and watch source (for hacking)

   npm run start

Loading the extension in your browser

To load the extension, go to the extensions page in your browser. For Chrome, you can go to chrome://extensions/ and for Edge, you can go to edge://extensions/. Once you're there, click on the "Load unpacked" button and select the dist/dev folder from the project. If you don't see the "Load unpacked" button, be sure to toggle "Developer mode".

In Firefox, open about:debugging#/runtime/this-firefox and click "Load Temporary Add-On..." and select the dist_ff folder from the project.

(back to top)

Roadmap

• Optimize content script code
• Add support for Firefox
• Display currently tracked task in the popup
• Add priorities and other task fields
• Autocomplete categories, labels, and others while inputting tasks

(back to top)