Ducket is a Chrome Extension that uses a Markdown file to generate a tree structure of websites and pages (sort of like a bookmarks management application).
As of now, Ducket is made to work with files hosted on Git repos of Azure DevOps Services (dev.azure.com). So, as long as there's a markdown file on some Git repo of your Azure DevOps organization, you'll be able to use it.
You just need to generate a personnal access token (PAT) with sufficient access (Code - Read is the only scope required).
The markdown file can be of any name but needs to comply to a few requirements:
- The heading syntax (
#, ##, ###, ...) is used to define a folder (and thus, its level). In example, one hashtag is the equivalent of a folder on level one. - The link syntax (
[title](https://www.example.com)) is used to define a link. Its level matches the first available preceding header. Any non-whitespace character after the closing parenthesis is ignored. - The file must be clean of anything else or it won't work.
Here's an example :
Markdown file :
# Folder A
[link-A](https://www.example.com)<br>
[link-B](https://www.example.com)<br>
## Sub-Folder A
[link-C](https://www.example.com)<br>
# Folder B
[link-D](https://www.example.com)<br>
Would result in :
Folder A
| Link-A
| Link-B
| Sub-Folder A
| | Link-C
Folder B
| Link-D
- Check if your Node.js version is >= 14.
- Clone this repository.
- Run
npm installto install the dependencies. - Run
npm start - Load the extension on Chrome following these steps:
- Access
chrome://extensions/ - Check
Developer mode - Click on
Load unpacked extension - Select the
buildfolder.
- Access
- Start coding.
This project uses the webpack server for development (started with npm start) with auto reload feature that reloads the browser automatically every time that you save some file in your editor.
You can run the dev mode on other port if you want. Just specify the env var port like this:
$ PORT=6002 npm run start
After development is done, run the command:
$ NODE_ENV=production npm run build
Now, the content of build folder will be the extension ready to be submitted to the Chrome Web Store. Just take a look at the official guide to more infos about publishing.
- Thanks to Michael Xieyang Liu (his website) for the boilerplate used in this project : Chrome-extension-boilerplate-react;
- Duck icon by Minus Icons from The Noun Project;
- Concert One font by Johan Kallas and Mihkel Virkus;
- Nunito Sans font by Vernon Adams, Jacques Le Bailly, Manvel Shmavonyan and Alexei Vanyashin.
Bruno Simard | Website