This tutorial explains how to view the source code of any extension of Google Chrome.
To find out the source code of a Chrome extension, I have covered some extensions and manual method in this tutorial. You will also be able to see CSS, HTML, images, etc., that can be of your use. You can choose whether you should choose any of the extensions or the manual method explained in this tutorial to find the source code of a Chrome extension.
Let’s start with the first method given in this tutorial.
1. Chrome extension source viewer
This is my favorite extension in this tutorial to view the source code of any Chrome extension. You can check the source code of any extension without installation. Thus, it will help you to remain protected from an extension developed by an unknown developer. Even if you have installed an extension, you can open the homepage of that extension to find out the source code.
Apart from viewing the source code, it also lets you view the images, HTML, CSS, and other files associated with a particular extension. Another fantastic feature is that you can grab the CRX file and ZIP file of any Chrome extension.
Once you have installed this extension, you can use CRX button (available in the Omnibox) to find the source code of any extension available in Chrome web store. If there is homepage link of any Chrome extension in a webpage, you can also use its right-clicking context menu option to view the source code.
2. View Source Code of any Chrome Extension Installed by You:
Here is the manual method using which you can find the source code of any extension installed on your Chrome browser. Steps are as follows:
Step 1: Access Extensions page (type chrome://extensions in the omnibox and press Enter). In that page, you need to enable Developer mode. By doing so, you can see the ID of any extension installed on your Chrome browser.
Step 2: Now you have to access Extensions folder of Chrome browser stored in your PC. Default location of that folder is: “C:\Users\Your PC Name\AppData\Local\Google\Chrome\User Data\Default (or Profile)\Extensions“. Under that folder, you will find multiple other folders with the long names. The names of those folders are the IDs of extensions.
Step 3: Now you need to match the ID of a particular extension with the folder name of that extension. After matching the name, explore that folder. After this, you will be able to get the source code file, images, and other files of that extension.
In the same way, you can find the source code of any other extension that you have installed.
3. Extension Source Locator
If you find the above method a bit lengthy, then use this extension to quickly find the source code and other details of installed extensions. All you need to do is install this extension and open a new tab. It will change the default tab of your Chrome browser and show you the list of all installed extensions.
For every single extension, a button to Copy to clipboard is available. Clicking on a particular button will copy the source path of the associated extension. After this, you can open Windows Explorer and paste the extension path. It will open the folder of that particular extension and you can easily find the source code and other files of that extension.
Conclusion:
For me, “Chrome extension source viewer” is perfect as I can view source code of extensions before installing them. And as this extension can show source code of installed plugins as well, this makes it much better than other extension and manual method mentioned in this tutorial. However, I left the choice with you to choose the method that best fits for you.
