{"id":13623815,"url":"https://github.com/DaniloNovakovic/chrome-dynamic-bookmarks","last_synced_at":"2025-04-15T20:32:35.662Z","repository":{"id":39334275,"uuid":"149652663","full_name":"DaniloNovakovic/chrome-dynamic-bookmarks","owner":"DaniloNovakovic","description":"Chrome extension which dynamically updates bookmarks according to given regular expressions (w/ bookmark manager) 📚","archived":false,"fork":false,"pushed_at":"2023-07-19T03:37:36.000Z","size":5331,"stargazers_count":20,"open_issues_count":11,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-08-01T21:57:46.247Z","etag":null,"topics":["automatically-updated-bookmarks","bookmark-manager","bookmarks","browser-extension","chrome-api","chrome-extension","clsx","denque","dynamic-bookmarks","formik","javascript","jest","live-bookmarks","material-ui","notistack","react","redux","regular-expressions","reselect","webpack"],"latest_commit_sha":null,"homepage":"https://chrome.google.com/webstore/detail/dynamic-bookmarks/ilhojkjlfkppedidhpecepohnmlndopb","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DaniloNovakovic.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-09-20T18:26:17.000Z","updated_at":"2024-04-27T11:38:24.000Z","dependencies_parsed_at":"2024-01-29T08:10:35.634Z","dependency_job_id":"39769787-1440-4b9a-9937-dd7e4880b87e","html_url":"https://github.com/DaniloNovakovic/chrome-dynamic-bookmarks","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DaniloNovakovic%2Fchrome-dynamic-bookmarks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DaniloNovakovic%2Fchrome-dynamic-bookmarks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DaniloNovakovic%2Fchrome-dynamic-bookmarks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DaniloNovakovic%2Fchrome-dynamic-bookmarks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DaniloNovakovic","download_url":"https://codeload.github.com/DaniloNovakovic/chrome-dynamic-bookmarks/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223684812,"owners_count":17185715,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["automatically-updated-bookmarks","bookmark-manager","bookmarks","browser-extension","chrome-api","chrome-extension","clsx","denque","dynamic-bookmarks","formik","javascript","jest","live-bookmarks","material-ui","notistack","react","redux","regular-expressions","reselect","webpack"],"created_at":"2024-08-01T21:01:35.977Z","updated_at":"2024-11-08T12:30:23.225Z","avatar_url":"https://github.com/DaniloNovakovic.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","chrome-extension"],"sub_categories":[],"readme":"# Chrome Dynamic Bookmarks Extension\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n\nGoogle Chrome extension which dynamically updates bookmarks based on the specified regular expression\n\n## Demo\n\n![Usage demo](doc/usage-demo.gif)\n\n## Table of Contents\n\n- [Installation](#installation)\n- [Introduction](#introduction)\n- [Overcoming Custom URL Notation](#overcoming-custom-url-notation)\n- [Bookmark manager](#bookmark-manager)\n  - [Search bar](#search-bar)\n  - [Folder browser](#folder-browser)\n  - [Bookmark information](#bookmark-information)\n  - [Action buttons](#action-buttons)\n    - [Delete](#delete-button)\n    - [Edit](#edit-button)\n    - [Add](#add-button)\n  - [Changing parent folder](#changing-parent-folder)\n- [What next?](#what-next)\n- [FAQ](#faq)\n- [Support](#support)\n- [License](#license)\n\n## Getting started\n\n## Installation\n\n### For users (recommended)\n\n1. Click [here](https://chrome.google.com/webstore/detail/dynamic-bookmarks/ilhojkjlfkppedidhpecepohnmlndopb)\n1. Select **Add to chrome**\n1. Enjoy!\n\n### To install locally (for developers)\n\n1. [Download](https://github.com/DaniloNovakovic/chrome-dynamic-bookmarks/archive/master.zip) or clone current repository\n1. Navigate to the downloaded folder and run `npm init` in console (ex. cmd/terminal/PowerShell)\n   (Note: you will need to have [node.js](https://nodejs.org/en/) installed on your computer)\n1. Once node_modules is installed run `npm run build` to create production build (or `npm run dev` for development one)\n1. On your browser search page type in (navigate to) `chrome://extensions/`\n1. In the now opened `chrome://extensions/` page turn on the developer mode\n1. Expand the Developer dropdown menu (if needed) and press `Load unpacked` button\n1. Navigate to the downloaded/cloned local folder of this repository, select `build` folder and click Ok\n1. Assuming there are no errors, the extension should load into your browser\n\n## Introduction\n\nLet's start by clicking on the extension icon on the top right. \u003cbr\u003e\n\n![Extension Location](./doc/bookmark-popup-location.JPG)\n\nUpon clicking a button, form with automatically filled input form will be shown. \u003cbr /\u003e\n\n![Empty Form](./doc/popup-opened-form.PNG)\n\nWhile *Bookmark name*, and *Url* fields are self-explanatory, you might be wondering what does `RegExp` (short for *regular expression*) field represent?\n\nIt simply **is a sequence of characters that define a search pattern**. Ever did CTRL+F to find something on the page? Well, it's pretty much the same thing, but with extra special characters that let your search be more flexible.\n\nOnce the form is submitted a dynamic bookmark will be created inside `Other bookmarks` folder.\n\n![Form Submitted](./doc/formSubmitted.PNG)\n\nCongrats! You have successfully created your first dynamic bookmark!\n\n---\n\n## Overcoming Custom URL Notation\n\nIn most cases, you won't even have to worry about the `RegExp` field since the automatically generated value will be good enough, but you might run into rare occasions where the site will be using unique URL notation which would require manual entry of this field.\n\nAn example of such a site is `animekisa.tv`. Let's see how we can generate regular expressions using a very simple tactic.\n\nFirst, let's **click on few episodes**:\n\n- `https://animekisa.tv/mo-dao-zu-shi-season-2-episode-3`\n- `https://animekisa.tv/mo-dao-zu-shi-season-2-episode-4`\n\nNow ask yourself, **what part stays the same?** - `animekisa.tv/mo-dao-zu-shi-season-2`\n\nAnd that would be our value for the `RegExp` field!\n\n---\n\n## Bookmark manager\n\nSo we created our bookmark, but what if we had a lot of bookmarks.\nHow will we know which ones are tracked / dynamic and which ones aren't? What if we wanted to stop tracking? What if we wanted to maybe change our regular expression? Etc.\nFor these reasons a new extended bookmark manager which focused on these problems had to be made.\n\nYou open it by pressing on the `Open Manager` tab inside a popup window\n\n![Open Bookmark Manager](./doc/open-manager.PNG)\n\nOnce you open the bookmark manager, on the right, all of the bookmark files will be shown. For easier navigation **dynamic bookmarks** are shown in **red color**.\n\n![Bookmark Manager Page](./doc/manager-page.PNG)\n\nOn the left side (side nav) you can see two main elements.\n\n![Search Bar](./doc/searchBar.png)\n\nSo let's take a closer look at each...\n\n---\n\n### Search bar\n\nIt might look naive, but this search bar is using regular expressions, allowing you to do **ALOT** of cool stuff.\nHere I will just list a few snippets/examples that you can use\n\n- `https` - lists all https links\n- `http[^s]` - all http links (without https)\n- `http[s]?://w{3}` - http or https links that start with _www_\n- `http[s]?://[^w]` - http/https links that DON'T start with _www_\n- `http[s]?://.*?\\.com/` - http/https links whose domain name ends with _.com_\n- `^n` - all bookmarks with bookmark name starting with letter _n_ (or _N_, by default it is not case sensitive)\n\n\u003e To learn more about regular expression watch [theNetNinja tutorial](https://www.youtube.com/watch?v=r6I-Ahc0HB4\u0026list=PL4cUxeGkcC9g6m_6Sld9Q4jzqdqHd2HiD)\n\n---\n\n### Folder browser\n\n![Folder browser](./doc/folderBrowser.PNG)\n\nThis part should be pretty intuitive. It works exactly like Windows Explorer. **By clicking on arrow or double-clicking on folder you open/close it**, and if you click once on a folder you will see its content without toggling it, which is all of the bookmarks that are located inside it (no matter how deep, in my case it will also display children of _WebDesignSites_ folder).\n\nTo help guide you visually, folders with **purple** color will contain dynamic / tracked bookmarks which are, as we saw previously filled with **red** color.\n\nClicking on the folder also selects it, which lets you add/edit/delete it as we will see later, same goes for clicking on a bookmark.\n\n\u003e note: you can't edit or delete _Bookmark bar_ and _Other bookmarks_ folders because they are special folders created by chrome\n\n---\n\n### Bookmark information\n\nThere are two ways to select bookmark:\n\n1. Clicking on it through side nav\n1. By pressing on right most icon from the main section\n\n![displaying bookmark info](./doc/displayingBookmarkInfo.PNG)\n\nSelecting a bookmark will display the following:\n\n- _title_ - the name of the bookmark\n- _url_ - URL of the page that bookmark is currently pointing to (clickable)\n- _parent_ - the name of the parent folder. (clickable)\n- _regExp_ - regular expression (will be hidden if it is not a dynamic bookmark)\n- _history_ - history of 10 most recent links that bookmark was pointing to (for dynamic bookmarks only)\n\n![bookmark info section](./doc/bookmarkInfoSection.PNG)\n\n---\n\n### Action buttons\n\nYou might have noticed that edit and delete buttons have become available once you clicked on a bookmark. Let's have a look at what they do...\n\n#### Delete button\n\n![Delete button](./doc/deleteButton.PNG)\n\nThis one is most straightforward out of them all. **It deletes currently selected element** whether if it is folder or bookmark. If you cannot delete a folder (_ex. Other bookmarks and Bookmarks bar_) it will be greyed out and you won't be able to click it.\n\n#### Edit button\n\n![Edit button](./doc/editButton.PNG)\n\nThere are two different scenarios upon pressing the edit button:\n\n- _Folder is selected_ - it will prompt you with a form to change its name\n- _Bookmark is selected_ - it will prompt you with a form to change name, URL or regular expression\n\n\u003e **Deleting regular expression will UNTRACK the bookmark!**\n\n#### Add button\n\nTo open this one hover over it.\n\n![Add button](./doc/addButton.PNG)\n\nHere you are offered two options:\n\n1. Add folder (topmost icon)\n1. Add bookmark\n\nBoth will prompt a modal form for you to fill.\n\n\u003e New bookmark/folder will be created inside the currently selected directory.\n\n---\n\n### Changing parent folder\n\nThere is one more thing left to cover. By now you may be wondering: _How do I move bookmark/folder?_\nWell, it's super easy. Simply **click on it, and while holding the left mouse button, drag it over to the parent folder and release.** That's it! :)\n\n\u003e Reminder: You can't move _Other bookmarks_ and _Bookmarks bar_ because they are special chrome folders which can't be changed\n\n---\n\n## What next\n\nIt would be good to learn regular expressions because knowing them will let you take full advantage of this extension.\n\nMy recommendations are [The Coding Train](https://www.youtube.com/watch?v=7DG3kCDx53c) and [theNetNinja](https://www.youtube.com/watch?v=r6I-Ahc0HB4\u0026list=PL4cUxeGkcC9g6m_6Sld9Q4jzqdqHd2HiD). You can also use the search bar to experiment with regular expressions.\n\nIf you have questions that aren't answered in [FAQ](#faq) you can contact me at [Linkedin](https://www.linkedin.com/in/danilo-novakovi%C4%87-821934167/) or by (preferably) posting an issue on GitHub.\nThe same goes for if you have an additional idea on how to improve this extension.\n\n---\n\n## FAQ\n\n- **What is *regExp*?**\n  - `regExp` (short for the regular expression) is a rule upon which it is determined if the URL that you are currently on should be updated.\n  - For example, let's say that your `regExp` was `crunchyroll.com/gintama`.\n  - If you were on a `http://www.crunchyroll.com/gintama/episode-182-screw-popularity-votes-534414`, then that link would match our `regExp` because `crunchyroll.com/gintama` is contained in this URL, and in turn, our bookmark would be updated.\n  - But if you were on, let's say, `https://github.com/DaniloNovakovic/chrome-dynamic-bookmarks`, then it would NOT match our `regExp`, hence our bookmark would not be updated.\n\n---\n\n## Support\n\nReach out to me at one of the following places!\n\n- Website at \u003ca href=\"https://danilonovakovic.github.io/index.html\" target=\"_blank\"\u003e`danilonovakovic.github.io`\u003c/a\u003e\n- Linkedin at \u003ca href=\"https://www.linkedin.com/in/danilo-novakovi%C4%87-821934167/\" target=\"_blank\"\u003e`DaniloNovakovic`\u003c/a\u003e\n\n---\n\n## License\n\n- **[MIT license](http://opensource.org/licenses/mit-license.php)**\n- Copyright 2018 © [DaniloNovakovic](https://github.com/DaniloNovakovic)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FDaniloNovakovic%2Fchrome-dynamic-bookmarks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FDaniloNovakovic%2Fchrome-dynamic-bookmarks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FDaniloNovakovic%2Fchrome-dynamic-bookmarks/lists"}