Mynt (My New Tab) Dialer
This project is working towards a clean, free to manage, alternative to the Speed Dial [FVD] Chrome extension.
This extension is not currently offered through the Chrome Web Store so it needs to be manually installed.
The extension is a React application so Node.js is required for development and to create a build locally. I recommend using NVM if you need to install Node.
- Clone this git repository to your computer.
- Using a terminal, navigate to the root of the repo and install the required Node packages,
npm i. - Create a build of the application,
npm run build. This will create abuilddirectory in the root of the repository. - Copy the
builddirectory to a location on your computer where you'd like your personal Chrome extensions to live. I personally recommend something likeDocuments/My Chrome Extensions. Finally, rename the copiedbuilddirectory to something that makes sense, like "Mynt Dialer". - In Chrome, go to Extensions > Manage Extensions > Load Unpacked. Then navigate to the renamed build directory, "Mynt Dialer" in this example.
- Open a new Chrome tab to use the extension. At startup you can either enter the public URL to a copy of your configuration file or begin creating your first group and dial in the UI. There is an example of a config file in
src/Demo/demo-config.jsonthat you can use if you'd like to start writing your own manually.
Mynt Dialer can read a config file when given a public URL, creating a downstream sync to your extension. If you use Mynt Dialer on multiple machines you only need to edit a single file, then prompt your devices to sync when desired.
One free, simple, and quick solution is to host your config file as a gist. Gist is GitHub's service for sharing code snippets and just so happens to meet the needs of hosting a Mynt Dialer configuration file using these simple steps:
- Create an account and/or sign in to gist.github.com.
- Click on the "plus" symbol in the top-right corner to create a new gist.
- Paste the contents of your config file, or the
src/Demo/demo-config.jsonfile, into the body of the gist. - Give the gist a filename and extension of
.json. - At the bottom-right corner choose to either "Create secret gist" or "Create public gist". I recommend creating a secret gist otherwise the contents of your config are publicly discoverable to anyone. If you mark the gist as "secret", the gist is still technically publically visible by URL, but it is not discoverable through search or Gist's social feeds. So weigh those concerns when determining if hosting on Gist is right for you.
- Once the gist has been created, click on the "Raw" button located near the top-right of the file.
- After being redirected to the raw file view, copy the URL in your browser and supply that to your Mynt Dialer extension at startup or in the Settings view.
Setting up the development environment uses the same Installing instructions above. You can easily create builds and run them immediately in the browser with the npm run now script, this allows you to develop the app like a regular React site without having to install it as an extension.
Because this application is a Chrome Extension there may be functionality that is only avaialble when your code is loaded into the browser as an extension rather than a site (such as the Chrome API for downloading to the client's file system). Depending on what feature you are working on you may have to install/reload the extension in your browser between changes while developing.
This project uses prettier for JavaScript formatting. Use npm run format to perform a formatting pass before committing. There is a GitHub Action that will prevent unformatted files from being merged.
Mynt Dialer uses localStorage to hold state using Zustand's Persist integration as well as image metadata used to expire cached images. caches is also utilized to store dial and background images so they are not retrieved each time the extension is loaded. You may need to purge these two storage locations if you are having issues while developing.