GitLab Repo: Link

Project Name: GitGlow

Extension Download Link: Click me (Published 😉)

Demo Video 👇

I request you to refer this page in order to know about the project and the technologies used in it. The video link is also provided above, so please do watch it to get a better understanding of the project. The reason why the video is not there on the Devpost page is because of the fact that YOUTUBE took it down for some privacy reasons. The GitLab repo is: https://gitlab.com/vishalvats/gitglow but I did not noticed that I made that repo in my GROUP, not inside the users. And that made the repository PRIVATE, thus I made a new repo that can be found here: https://gitlab.com/VersatileVats/gitglow


Do watch the video and read this page 🙏


While I was drafting the project I faced many roadblocks. The biggest of them all was that I mistakenly deleted all of my project files from my local machine. I was in a state of shock and was not able to understand what to do. But then I thought of a solution and somehow recovered the files using the VS Code's Timeline feature. But even with that I was able to get code back stored till a certain timestamp. I used it and was able to get all of my project files back. I was so happy that I was able to get all of my files back and then I was able to complete the project on time.

And due to this fact itself, I was not able to rectify the text of the devpost submission. So, you will see that most of the text in devpost submission is not much right, but the video and the project files are the real deal. So, please do watch the video and download the project files to get a better understanding of the project.

Languages Used: HTML, CSS, JavaScript for extension and Python for making the native messaging application

Installation Steps

You can just use the Extension Download Link at the top to install the extension directy to your browser and thus use the project. In case, you need to have the abitlity to use the GIT CLONE functionality, you could follow the below image

Steps 4 & 5 are for using the Native-Messaging feature of the extension that let the users use the auto-clone feature. If you are on a Windows device that has GIT and Python installed, then you can follow these steps. Without these steps too, you can use the extension without any problem.


Let's dive into this amazing documentation 🥽

This is a project that is an EXTENSION and works best on a Google Chrome browser. So, it will be great of you can test out the same on that specific configuration. You can download the project files from the DOWNLOAD button at the top of this page or from the GitLab repository. I am using the extension for 3 important things:





Git Clone @via extension

PROBLEM: If you want to download a repository (any public repo, or your own public/private repo), you have to first copy the command from the gitlab repo page and then paste it in the terminal and then the repo will be downloaded. But this is a bit of a hassle and I wanted to make this process a bit easier.

SOLUTION: You can use the CLONE repository feature via the extension or from any Gitlab repo page. Let's talk about the Extension way first. You have to provide a DOWNLOAD FOLDER location and then any downloaded repo will be downloaded into that folder. Apart from that you have to provide gitlab USERNAME and the REPOSITORY name so that the auto-cloning process can be done. According to the size of the repo, the download will take time and with that you can clone the repo in a much easier way. (even when using the download repo icon from the Gitlab page itself, you have to provide the DOWNLOAD PATH in the extension)

How is it happening? 🙃: Whenver you clone a repository, then you basically run the Git Clone command in the git-bash terminal, so my extension sends the trigger to the native-messaging app whenever the user send a command (via the icon/extension) and then according to the data sent from the extension to the python script, the checks are done and at the end, git clone command is run magically 🪄 in the background and you literally experience magic with a click.

For the GitLab repo pages, you can always use the ICON to download the current repository. And without you writing any command, the repo will be downloaded in the folder that you have provided in the extension settings.

So, this is a great feature that I have implemented in the extension and it will help the users to download the repo in a much easier way.

NOTE: For your own private repos, you must have configured the SSH key beforehand and then for the first time you will be prompted to login via Git. In there, make sure you login and then you can work with the private repos too 😉 Also, you must have Git and Python installed on your Windows machine so that the native-app can communicate with the extension easily





PROBLEM: If you have ever bookmarked a page using the browser's native fucntionality, then you might be aware of tha fact how painful it is to search for a bookmarked page in that hell. Suppose you are working with a project and you are spending almost 4 hours daily on a particular project file. So, you have bookmarked that page and now you want to access that page. But the problem is that you have almost 1000 bookmarks and now you have to search for that particular page.

SOLUTION: So, I thought of a solution to this problem and implemented a feature that will help the user to search for the bookmarked page (only GitLab pages) in a much easier way via the extension. You can add a total of 5 pages as the bookmark and then you can access them in a much easier way. You can also delete the bookmarked page if you want to. You can bookmark the file by pressing Ctrl+S on the page and accordingly, it would be bookmarked.

The great functionality of this project is that it remains with the user at the time of entering the browser and thus takes care of the user at every time and prompts the user about the various fucntionalities that can be used in specific pages. Either it is a success/failure, user can always be notified in the best manner possible

Bookmark Feature





GitPods Close Alert Feature

PROBLEM: As GitPods are privileged pods and runs for a fized amount of hours on an account. So, assume you are in the last hour of the pods and are working on one of the most important files of your project and accidently you close the pod window by Ctrl+W or clicking on the cross icon.
Oh my god!! You just lost all of your work and now there is no way to retrieve them 🤯

SOLUTION: By default, for all the gitpod pages that the user will work on, this feature will be ENABLED and if you try to close the tab either by clicking the cross button or by pressing Ctrl+W, then a modal will be shown to the user prompting them about the unsaved chanegs that they had and it works as an extra-layer of protection so that the code is always saved no matter how that click happened

When user is using WEB IDE/Edit Single Page option, then tehe user is always prompted to SAVE THE CHANGES whenever teh cross icon ins clicked, but the same is not true with GitPods page. So, I have implemented this feature in the GitPods page and it works like a charm.