Navigate through modules, classes, and declarations in GitHub like an IDE

gayankuruppu/GitHubClicks

The Chrome extension is written in Javascript and based on JQuery to handle HTTP requests with Github API. The extension supports the Android projects written in Java and Kotlin. The extension is still under the experimental stage.

Install

1. Get the extension as Download ZIP

2. Extract the ZIP to a folder

3. Open Extensions in the Google Chrome browser

4. Enable Developer mode

5. Load the extension using Load unpacked and select the root folder

6. Refresh the extension after the changes

Contribute

The extension is not stable and needs some more contribution to integrating this into other languages. The potential limitations of this extension work only on the master branch only support primary data types, and can not detect dependencies from other libraries.

Source

root/
├── LICENSE
├── README.md
├── github128.png
├── github64.png
├── github16.png
├── manifest.json
├── js/
│   └── github.js
│   └── util.js
│   └── worker.js
│   ├── vendor/
│   |   └── jquery-3.4.1.js.js
│   ├── lang/
│   |   └── Java.js
│   |   └── Kotlin.js

manifest.json

The extension has a JSON-formatted manifest file, named manifest.json, that provides important information about name, version, description, content_scripts, background, icons, permissions, and version.

content_scripts

The values in the content_scripts contains js which stores the order of javascript source files in the extension. The content_scripts JSONObject injects the javascript source into the content page of a specific tab in orderjs/vendor/jquery-3.4.1.js, js/github.js, js/util.js and language files js/lang/Java.js, js/lang/Kotlin.js

background

The values in the background contain scripts which stores the order of javascript source files in the extension. The scripts JSONObject injects the javascript source in the browser. The js/worker.js execute the script into the browser.

github.js

The github.js file loads into the content to check if the page is a github page, and check if the page is a file by using the extension. If the content is a file then text highlight when mouseover on the span tags. If the user clicks on the text, separate javascript classes in the lang folder will load into the container depends on the extension of the file.

util.js

consists of some common functions to share with other classes and mostly with github.js.

Now you can navigate through modules, classes, and declarations in GitHub

Github https://github.com/gayankuruppu/GitHubClicks

If you enjoyed this story, please click 👏 and share to help others find it!