Sync GeeksForGeeks solutions to GitHub
How I contributed to LeetHub, and added a GFG sync script to it
Intro 👋
While I was preparing for my placements, I used to practice on Leetcode and GeeksForGeeks. I found LeetHub to be trending one fine day, while browsing through GitHub. Tried it out, it worked wonderfully.
Naturally, I looked at the opened issues, and I found that people were requesting more sites to be added:
So I thought, why not add this myself? 😆
LeetHub 👩💻
For those of you who don’t know, LeetHub is a wonderful extension that can help you sync your Leetcode submissions to GitHub. When i wrote this blog, it had around 870 stars on GitHub.
It basically connects to a repository on GitHub and syncs your code solutions along with the question as a README file.
Ah yes, Inspect-Element 🚧
I added a very simple script, which extended it’s functionality to work on GeeksForGeeks as well. I personally use GeeksForGeeks for practicing more so than I use Leetcode. The content, editorial and solutions discussed are really high quality.
Writing the script was super fun, inspect-element to the rescue!
I got the class names for the problem and it’s difficulty. Made functions for both:
Similarly, made another function to get the problem content. This content gets appended to a README (markdown) along with the title and difficulty:
The Mighty Editor 🔨
Now, comes the interesting part. How do I get the entire code, including the driver code that’s mostly present on GeeksForGeeks?
I thought about it a lot. I inspected the this or the global object to find any references to something I could use. Finally, I stumbled upon the info that GeeksForGeeks uses the ace editor for code editing.
So, I went through the editor object to find that it has a getValue function which can give the entire content at once.
However, I stumbled upon another problem: How do we get the content from an extension, which does not have direct access to the variables created by the website?
No, this is not possible directly. Extension scripts run in an isolated environment, with a different execution context. I thought of something, which actually worked!
So, the method I came up with, injects a script, which gets the content from the editor object, since scripts on the web page execute in the same context and thus have access to the objects in window. It adds the content to a pre tag, and deletes the appended content along with the tag from the document after the submission has been fetched.
Since we have the content on the pre tag, we can easily get it, since extension scripts can access the DOM. That’s how I pull the code (text) from the pre tag and return it if it’s not null.
However, I feel there is a scope of improvement to this script. Instead of injecting this script to the DOM again and again, we can inject it once and add an onClick event listener, which can append a pre tag to the page with content every time user presses submit.
After this, I followed up with Qasim’s logic of adding an onClick listener on the submit button, and used some utility functions to create the filename, get the language of submission and upload to GitHub.
It basically checks if a container (which I get by className) contains the string “Problem Solved Successfully” to detect there was a successful submission which can be synced.
You can check the entire script here. You can also check the repo I contribute my submssions to here: BRO3886/450dsa
There ya go, with some basic knowledge of DOM, and JavaScript, I was able to contribute a feature to a useful extension!
I would highly recommend everyone to check out GeeksForGeeks, if you’ve not done yet. I personally find it to be very helpful a lot of times.
Sidenote: If you liked this blog, do follow me on twitter (sidv_22), where I occasionally tweet about stuff I’m learning and doing, would really appreciate it 🙋
