Shortcut - a browser extension written in Typescript and React

Table of contents:

• What is it?
• Prerequisites
• Option
• Includes the following
• Project Structure
• Setup
• Build
• Build in watch mode
  • terminal
  • Visual Studio Code
• Load extension to chrome
• Test

Demo of it in action

shortlink-demo-2023-10-08_10.58.52.mp4

What is it?

Years ago when I used to work at Google, there was a way to create something called a "go link". Here's a deprecated extension in the Chrome store that replicated this functionality. The idea was to create a name that you can remember to represent one or more tabs. So for example, if you want to visit your "banking" sites, you can create a shortlink called "banking" to open Bank of America and Bank of the West websites for example.

This is equivalent to creating a bookmark. Except it is much faster and you can just type "go" into your chrome address bar, and then press Tab, then type "banking". Press Enter and your tabs will reopen!

Currently this browser extension is only available for Chrome. If you would like to contribute there are plenty of issues that need to be worked on. And one of them is porting this to Firefox and Edge.

Prerequisites

• node + npm (Current Version)

Option

• Visual Studio Code

Includes the following

• TypeScript
• Webpack
• React
• Jest
• Code
  • Chrome Storage
  • Badge number
  • Background script

Project Structure

Folder	Description
src/	TypeScript source files
public/	static files
dist	Chrome Extension directory
dist/js	Generated JavaScript files

Setup

npm install

Build

npm run build

Build in watch mode

terminal

npm run watch

Visual Studio Code

Run watch mode.

type Ctrl + Shift + B

Load extension to chrome

Load dist directory.

Test

Run npx jest or npm run test.