How to View the Source Code of a Chrome Extension
Every Chrome extension that you install on your computer is actually constructed out of a special zip file that contains files and folders of Javascript code and other resources. The great thing is that you can actually look into the source code of an extension and see what it is really doing.
The problem with browser extensions is that so many of them are spying on you, inserting ads into your browser, or doing all sorts of other nefarious things. So if you want to check into the source code yourself, these are the two easy ways to do that.
Luckily there’s even a way to see the source code of an extension before you install it, although sadly that way requires installing an extension. Keep reading for all the details.
Find a Chrome Extension Source Code on Your Hard Drive
The first method is used to view the source code of extensions that are currently installed in your Google Chrome Browser. Begin by navigating to the “chrome://extensions/” page. Alternatively, you can click on the three horizontal bars on the top right of the Chrome window and then click on the “More tools” option then click on “Extensions”.
Now that you are on your extensions page, you will need to tick the checkbox on the top right of the page that says “Developer mode” and find the ID for the extension you want the source code for. For the purposes of this demonstration, we will use the ID for “AdBlock” which is “ID: gighmmpiobklfepjocnamgkkbiglidom”
Now that you know the ID of the extension, you will need to open Windows explorer by opening any folder or pressing the “Windows button” and “E” at the same time.
Once there, type in the following into the location bar:
Now you’ll need to navigate down through the folders like this: Google -> Chrome -> User Data -> Profile -> Extensions. In some cases your Profile folder might be called something different like Profile 1, so just keep that in mind as you browse down.
Once you are there, you should be able to see a bunch of folders with really long names, and one of them will match the extension ID you are looking for.
Once you enter this folder, you should see another folder titled with the version of the extension. Simply double click on that icon again to see all the files and folders associated with your extension’s source code.
Using the Chrome Extension Source Code Viewer
In this method, you will need to download this extension that allows you to view the source code or CRX file for any extension in the Google Web Store.
Once the extension has been installed, you should see a popup confirmation dialog like the one below.
Now that it is installed, you can go into the Google Chrome Web Store and view the source code of any app. Just click on the yellow icon in the location bar and you’ll be given a choice to either download the file as a zip file or view it online.
If you download as a zip file, you can just unzip the file and view it using any regular text file viewer. Alternatively, if you decide to view the source code online, you will see something more along these lines in a new Chrome Tab.
That’s all there is to it.
