r3bl-org / shortlink

This Chrome extension provides a browser action that simply allows the user to create a shortlink for all the selected tabs in the current window. It can be activated via a keyboard shortcut Alt + L. To use it, in the omnibar, type go then press Tab, then type the phrase you have created a shortlink for earlier & it will open the tab(s).

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.

shortlink's Issues

Show tooltip of URLs for a shortlink, when mouse hovers over it

Currently each shortlink has a pointer cursor when the user's mouse hovers over it.

In addition to this, show a tooltip that contains all the URLs that this shortlink maps to. In the tooltip, each URL should be separated by \n.

Create comprehensive tests to check the logic of the entire extension

Currently storage.ts isn't well tested. It is not trivial to test the logic here since a lot of the work gets delegated to chrome.storage.

We should introduce dependency injection to solve this issue by passing something that wraps chrome.storage or whatever other storage provider we decide to use in the future. We can also introduce an interface type for this storage provider.

Here's a great video on DI: https://www.youtube.com/watch?v=J1f5b4vcxCQ

In tests, we can then pass a fixture for the storage provider that we can use to verify our tests.

Allow copying of shortlink to clipboard

Add ESLint for Code Quality Improvement.

Description:
ESLint is a tool that statically analyzes JavaScript code to identify and report potential errors, enforce coding conventions, and improve code quality by applying a set of configurable rules. It helps developers catch and fix issues early in the development process, leading to cleaner and more maintainable code.

Things to Consider:
ESLint Rules should created in such a way that it insures good typescript practices in the code base.

Acceptance Criteria:
-ESLint is successfully integrated into the project.
-The project's code base is properly linted, and all existing code conforms to the linting rules.
-A README or documentation is updated to include information on how to use and configure ESLint for the project.

Clean up logic to use `types.ts`

Use discriminated unions to better handle command parsing and processing. Make it more like Rust enum and match.

Make async / promise code consistent

Currently the code is using both async / await & promises. Standardize on async / await (where possible). In some places it might still be easier to use promises.

Refactor entire codebase to use promisified `chrome.storage.sync` API

The chrome.storage.sync API uses call backs and it causes a lot of issues w/ writing async code easily. Replace all use of callbacks and replace with async / await and promisified storage API.

Port this to Edge & Mozilla Firefox

Try and port this extension to both Edge and Firefox and publish this in their respective app stores.

• https://github.com/mozilla/webextension-polyfill
• https://stackoverflow.com/questions/45985198/the-best-practice-to-detect-whether-a-browser-extension-is-running-on-chrome-or
  • "You might want to mention that Firefox natively supports using the chrome.* namespace and callbacks. Thus, the easiest code-compatibility between Chrome and Firefox is to just use chrome.* in both. You only need to use the browser.* polyfill if really want to use Promises."

Related issues:

• #32

Implement drag & drop for import and export

Current behavior

Currently a user can type import, and export in the text input area. Here's an example of typing export into the input area.

Desired behavior

1. When a user types export, in addition to copying the JSON blob of all the shortlinks to the clipboard, also save it to the downloads folder as a file. I don't think that it is necessary to allow the user to choose a filename.

2. When a user types import, make the text area that is shown a drop target. The user should be able to drag / drop this JSON file into the text area and it should allow the contents of the file to be put inside the text area so the user can edit it and then click on "Save shortlinks"

Add keyboard navigation to the edit experience

Currently, in order to edit shortlinks, the user has to use a mouse. It would be great to have a way to use keyboard shortcuts to navigate the entire editing experience.

This could look like:

• The user types a keyboard shortcut to activate edit mode
• Then they can press up / down to move focus between the shortlink that is selected
• Maybe they press Enter and that triggers the edit button, or they press Delete and that triggers the delete button
• As a bonus, if there was a way to search / filter the shortlinks in edit mode, that would be great too!

Extend the `copy`/`c` command such that you can pass in multiple arguments that are comma delimited

Extend the copy/c command such that you can pass in multiple arguments that are comma delimited. These should all be copied to the clipboard & joined w/ \n.

• Eg: copy foo_bar baz

Create an electron app (and Tauri app) to package this chrome extension as an app

This is an experiment to see what it would take to package this chrome extension as an electron desktop app.

Currently the extension only works on Chrome. It would be great to get it working for the other browsers. But also add the ability for the same extension to run in an electron container so that it can be run as a desktop app.

Bonus - try to use Tauri as well.

Related issue:

• #32

Refactor and reorganize the codebase for readability and maintainability

• Introduce folders (modules) that contain domains like storage, or components
• Refactor existing inline code into functions that make their arguments explicit, instead of inheriting them from the lexical scope (eg: function components can be refactored into smaller functions that take explicit arguments for variables that they were previously capturing from their lexical scope)
• Where possible introduce types and provide more robust design for state data, maybe even use custom hooks

Make default action in `popup.tsx` open an existing shortlink (instead of overwriting it)

Currently when you type "foo", a new shortlink will be created or an existing one will be updated.

Change the behavior so that if existing shortlink exists, then just open that. Add a "replace / r" command to replace an existing shortlink.

Implement `import` and `export` commands

Currently all the shortlinks are saved in a key-value store in Chrome Sync for the user's logged in account. It would be useful to be able to export and import all these links.

Add an export command that simply takes the entire hashmap of shortlinks, turns them into JSON, and then copies them to the clipboard.

Add an import command that does the reverse (clipboard -> JSON text -> shortlinks).

Use case

• export - When someone types export we are going to copy the shortlink JSON content into the clipboard. And the user can save it to a file or whatever they would like.

• import - When someone types import we are going to display a popup in the text area where the user can paste JSON content.

Here's a user journey:

• The thinking is that I have first run export, then the shortlink JSON gets copied to the clipboard.
• Then I save that in a file.
• Then I install shortlink extension in a different browser (with a different chrome user) and then I type import.
• Then the extension can show a text area where I can paste the JSON text in there, and I have all the shortlinks imported here.

Allow mouse click in popup to open tabs

In the popup, currently all the shortlink names are displayed. But they aren't clickable. Make them clickable, so that a user can open tabs with their mouse & not have to type anything.

Optional - Further refinement would be to allow Tab focus traversal and Enter to open the tabs themselves.

Use types in the codebase

Introduce types.ts and capture things like:

• shortlink struct
  • name: string
  • urls: Url[]

Already using Url.

Add priority queue for most frequently used links

Show links sorted by most frequently used.
Optional: Can also do the most recently used links. Maybe add an options page for these preferences?

Validate new shortlink input (for save)

When new shortlinks are added, make sure to remove any spaces or commas and replace them with _.

• Eg: foo, bar , is saved as foo_bar (commas and spaces are replaced w/ underscores, then remove multiple underscores).

Allow all existing shortlinks to be edited

Provide a nice table / grid view that allows each shortlink to be seen and edited or deleted. The idea here is that you might want to merge or prune a few entries. And you don't want to do a full export to JSON, modify that, and then re-import it.

Hide chrome api behind provider

The extension features for import and export, drag and drop, and export to a file needs chrome api access. To make this extension easily portable and testable move these apis to the storage provider or equivalent and write more tests.

Provide a way to search / filter shortlinks

Currently the extension shows all shortlinks in the UI all at once. This works if there are 20 or 30 links. However, if there are 50 or more, then this becomes difficult to find what a user might be looking for.

It would be great to have a text field that allows the user to type a string. As they type, this can be used to filter what shortlinks are shown in the UI.

When a shortlink has lots of URLs, they spill over out of the container of the popup, and it should not do this