However, that should not stop you from viewing the source code of an extension. Using the following two methods, you should be able to view the source code of a Chrome extension on your computer. The following methods are demonstrated using a Mac.
View the Source Code of a Chrome Extension in the File Explorer
While the files for the extensions you install in Chrome are saved on your computer, they are not very easy to find as their folder names are something scientific. However, with the method below you should be able to reveal those folders where the extension source files are located.
Open Chrome on your computer and type chrome://extensions into the address bar and press Enter. It will open the extensions list in the browser.
When the extensions page opens, select the box labeled as “Developer mode” in the top-right corner. It should let you see more details about the extensions on the page.
You should now be able to see the IDs of the extensions shown on the screen. What you need to do here is note the ID of the extension whose source code files you wish to see. In the following example I have highlighted the ID for the “Adblock for Youtube” extension. I will be revealing the source code of this extension in the following steps.
Now that you have the ID for the extension, type chrome://version into the address bar of your browser and press Enter. It should help you locate the folder where extension files exist.
On the Chrome version page highlight and copy the value of “Profile Path” to your clipboard. It is shown in the following screenshot.
Open Finder (or the File Manager of your OS). Click on “Go” on the top and select “Go to Folder…” It will let you access the extensions folder on your Mac.
Paste the profile path you have copied to your clipboard onto the Go to Folder panel, and click on “Go” to open that folder in a Finder window.
Double-click on the “Extensions” folder on the following screen to open the folder where all of your extensions are available. What you will see here is a number of folders with some confusing names. Although these folders are for the extensions that you have installed in Chrome, they do not have the same name as the extension name, and therefore it is difficult to find the folder for your extension. Now look for the folder that has the same name as the extension ID that you noted down in one of the steps above. That is the folder for your extension.
All of the extension files should be there in the folder, and you can open them with your favorite editor to see their codes. That was how you can view the source code of a Chrome extension without using a third-party tool. If you do not mind installing an extension, then the following section is for you.
View the Source Code of a Chrome Extension Using an Extension
Open Chrome on your computer, head to the Chrome extension source viewer page on the Chrome Web Store and click on “Add to Chrome.”
Click on “Add extension” on the following screen.
After the extension is added to your browser, open an extension’s page on the Chrome Web Store, such as the Markdown Preview extension page. When the page loads, click on the CRX icon in the extensions bar in Chrome and select “View source.”
You should be able to see the selected extension’s source code in the Chrome window.
Conclusion
If you are curious to see the source codes of the extensions that you install in your browser, the guide above should help you do just that using two easy ways. Image credit: Source code Clef
