My first chrome extension (Dynamic Bookmarks)

After obtaining my full stack certificate on freeCodeCamp this year, i decided to use knowledge gained to create something which solved a real life problem that i had.

What is this about?

Lately i found myself wondering too much: “On what episode was i last on?”, “What video in a playlist was i last watching?” and similar. So i decided to solve this problem by creating extension where bookmarks can update themselves if a certain condition is met.

This allows us to track:

  • anime / TV shows
  • videos in a youtube playlist
  • last read blog / documentation page
  • etc. (basically ANYTHING with URL!)

It also comes with it’s own bookmark manager which lets you easily find tracked / untracked bookmarks, edit regular expression, etc.
You can also view history of 10 most recent links for each individual dynamic(tracked) bookmark.

How to install?

  1. Click here.
  2. Select Add to chrome
  3. Enjoy!

How does it work?

In regExp (short for regular expression) field you type a rule by which you want to update your bookmark.

Below i’m gonna post few examples which shows the thought process when deciding what your regExp should be:


Examples

Crunchyroll:

Let’s say you wanted to watch Gintama on Crunchyroll.
First let’s see what part of the url stays the same. As example let’s click a few episodes and see the URL of these episodes:

http://www.crunchyroll.com/gintama/episode-182-screw-popularity-votes-534414 
http://www.crunchyroll.com/gintama/episode-187-its-goodbye-once-a-flag-is-set-537056 
http://www.crunchyroll.com/gintama/episode-186-beware-of-foreshadows-535984

So ask yourself, which part of these urls stays the same?
Well it is crunchyroll.com/gintama/ , so we would enter this as our regExp .
Now every time you clicked on link containing crunchyroll.com/gintama , our bookmark would automatically update to point to that new URL.
But if we were to go to, let’s say http://www.crunchyroll.com/mushi-shi, then our bookmark would NOT update because crunchyroll.com/gintama is not contained in that link.

Kissanime:

Now what if we wanted to watch Naruto on kissanime?
Again, let’s try clicking on few episodes and check the links:

https://kissanime.ac/Anime/Naruto-Dub.21820/Episode-186-Laughing-Shino?id=104053 
https://kissanime.ac/Anime/Naruto-Dub.21820/Episode-197-Crisis-The-Hidden-Leaf-11-Gather?id=104064

Ok so what part stays the same?
It’s kissanime.ac/Anime/Naruto-Dub.21820 , so this would be our regExp


Youtube playlist:

Say we wanted to watch regular expression tutorial by netNinja on youtube: https://www.youtube.com/playlist?list=PL4cUxeGkcC9g6m_6Sld9Q4jzqdqHd2HiD

Again, let’s click on few videos inside playlist:

https://www.youtube.com/watch?v=r6I-Ahc0HB4&list=PL4cUxeGkcC9g6m_6Sld9Q4jzqdqHd2HiD&index=2&t=0s
https://www.youtube.com/watch?v=DC-zzUrg0Ws&list=PL4cUxeGkcC9g6m_6Sld9Q4jzqdqHd2HiD&index=3

What stays the same?
It’s list=PL4cUxeGkcC9g6m_6Sld9Q4jzqdqHd2HiD, so that would be our regExp


Hopefully by now you understood how to use this extension.
Of course you can do MUCH more with regular expressions (topic is covered in freeCodeCamp if you wanna find out more), but most of the time this would be enough.

I would really appreciate a feedback (what you liked / disliked) and if you have ideas on how to improve it.

If you have any additional questions you can check out this readme for extended tutorial and FAQ.