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