blagoj5 / tab-master

Chrome extension for navigating trough tabs like a PRO

TAB MASTER

Demo video

Architecture

• Background script/worker

  • Used for listening to initial command for opening and staring the modal
  • Used for sending tabs, history and bookmarks to the content/react script

• Content script (modal)

  • Statically injected (all time available), and not programmatically
  • Used for creating the dialog with specific id that react script will use
  • Used for creating and injecting the react script to the previously created dialog with a specific ID

Chrome

How to build and test locally

• yarn build
• Go to chrome://extensions
• Enable dev switch
• Load unpacked
• Go to any page and press ctrl/cmd + key

How to use it for dev

• yarn build:watch
• Go to chrome://extensions
• Enable dev switch
• Load unpacked
• Go to any page and press ctrl/cmd + key
• If you do any changes it will automatically build the extension with all the changes, you only have to press on the refresh icon of the extension

How to use it for dev, individually each package

• Go to the package you want to run and do yarn, followed by yarn dev
• yarn build used from inside the package, it will only build that package in the current folder

Firefox

How to build and test locally

• yarn build
• Go to about://debugging -> This Firefox
• Load Temporary Add-on -> Select build-firefox/manifest.json
• Go to any page and press ctrl/cmd + key

How to use it for dev

• yarn build:watch
• Go to about://debugging -> This Firefox
• Load Temporary Add-on -> Select build-firefox/manifest.json
• Go to any page and press ctrl/cmd + key
• If you do any changes it will automatically build the extension with all the changes, you only have to press on the refresh icon of the extension

Project Structure

MONOREPO, using yarn workspaces:

• packages
  • modal
  • common (used for types and utilities that are shared between background script and content script/s)
  • popup (currently being build, will be the actual config page)
  • config (the actual config page, full screen version of popup)
• scripts
  • setup.js - used for copying all the needed files (manifest.json, etc..)
  • build.js - used for building the extension itself

tab-master's Issues

Prototype

Screen.Recording.2021-11-21.at.23.03.01.mov

Please add option to change ctrl + k keybind

Not working on edge, because edge's ctrl + k shortcut for focusing on search bar
Please add option to change this keybind.

P.S. - also not working on github.com, because it opens command palete.

Open the modal even if the current page is a new tab page

When I am on the new tab page with no other tabs / url open, I would like to open the modal and navigate to an item in the history.

Expected: Modal should open on the new tab page.

Actual: Modal doesn't open on the new tab page

The digit zero under the search bar

Great work on the extension @Blagoj5

As you can see from the screenshot, there is the '0' under the search bar. Does it have a meaning? I don't see it in the demo.