- A Chrome Extension
Some preface first, My exams had ended so I’d been browsing the web for the next interesting thing to learn and I stumbled upon Crio’s IBD. Well what did I had to lose, so I participated. The theme was Work From Home, and there were quite a few options on which technology to choose starting from Chrome, Slack Extensions, Bots to App and AWS Lambda. I had only 3 days (or so I thought at that point of time) so I figured not to choose a complicated topic, so I went ahead with building a chrome extension. At the same time I wanted it to be a challenge to myself so that I had something to add to my skill-set. I decided to use an unfamiliar API, i.e. native Messaging.
The idea that chrome could launch external apps on PC has always intrigued me, I saw this first in the IDM extension (internet download manager) where it grabs the video link and launches the desktop app. I researched how it was possible and found the answer ‘native Messaging’. Now what could I build with this?
I considered the process of copy-pasting text from the browser or more specifically code from stack-overflow was very cumbersome for me. See I always keep chrome maximized so to copy-paste I had to select the text, maximize my editor or launch it if it wasn’t already open then paste it. So why not shortcut the process? My extension opened the copied text in the VS Code with just two clicks. I named it Edit with VS Code (because I use VS Code, lol) as it supported only that and submitted my PR.
That was the start of it, then came the reviewers and I really have to thank them because they gave me a lot of push to make it an usable extension.
- The first suggested change was make it support multiple editors, pretty reasonable so I added that functionality with a popup where user can select which editor to open.
- Next was what if users wanted to access old copied content? So I used chrome’s local storage to save data whenever my extensions context menu was clicked. I also added editing and deleting options for them and arranged them in a beautiful (presentable) grid.
- The last feature suggested by another reviewer was what if user wanted to append multiple blocks of text in one textbox and not separate ones? I wanted to do this but didn’t want to lose the previous functionality, so I thought hmm why not just add a toggle option? Did that.
What started as a simple editor launcher became a lightweight in-browser editor in a matter of days thanks to excellent feedback. Therefore I added a toggle option whether to open the editor or not.
Now the theme was WFH, and who doesn’t use GitHub? If you do, you know of the clipboard icon inside the greed `Code` button for cloning. For cloning, you copy the link then browse to your directory path, open your terminal and then type git clone and paste the link. Why not shortcut this process too? I added an additional option to specify the directory path in the popup and overrides the copy-link button in GitHub, and voila cloning is automatically happening in your directory without leaving your browser. Of course, this is a toggle option too. Sometimes, you just need the repo link 😉.
PS: This was actually pretty mind boggling, see launching the editor was a simple task but passing data via chrome extension to an app wasn’t so easy this required an script on the local machine that parsing that data turned out to be struggle for me as there isn’t much documentation available whatever is, it’s in C/C++ and I wasn’t able to make it work with them, thankfully the python script worked like a charm.
So I present to you Quick Edits — A chrome extension.
Here’s a link to the GitHub repo: https://github.com/Apprentice76/Chrome-extensions/tree/main/Edit%20with%20VS%20Code
Connect with me on LinkedIn: https://www.linkedin.com/in/hritwik-som-793538198