Chrome extensions are one of the best ways to alter your browser’s functionality according to your requirements. There are various kinds of extension that help you block ads, get coupon codes for shopping websites and much more. But the major concerns with extensions are security and privacy. You must be very cautious while installing an extension and the permissions they are requesting. The best way to make sure it is safe and secure is by viewing the source code of Chrome extensions.
Chrome extensions include a lot of HTML, CSS and JavaScript files along with one manifest file. Reading the manifest and background file of an extension will give you a clear idea of permissions and scripts it is loading. All these files of Chrome extension are distributed as a CRX file but technically they are standard .zip files which can be extracted using WinZip software.
Here are the reasons why you should see the source code of Chrome extensions.
- If you are a developer, you need to view the source codes to know how popular extensions are coded. It also helps you in reusing the code if their license permits.
- A lot of useful extensions are abandoned for various reasons and you might need to make changes yourself to add new features or to modify the user interface. Recently I have modified the CSS file of Motivation extension to add a dark black background to the new tab.
- If an extension is from an untrusted or unknown developer, viewing the source code will help you to ensure it is not spying your browsing activities.
By now, you know why you should consider viewing the source code of an extension and here are the couple of ways to do it. For this tutorial, I’ll show you how you can view the source code of Geek Dashboard Chrome extension.
Method 1: Finding Extension Source Code On Your Hard Drive
Locating the Chrome extension source code on your device is pretty simple. When you install any extension or theme from Chrome Web Store, a CRX file is downloaded and the contents of the file are extracted and saved locally on your hard drive. Navigating to the extracted path and searching the ID of extension is what we need to do for getting the source code. The downside of this method is, you need to first install the extension on Google Chrome to view the code.
Here is how you can find the source code of installed Chrome extension in your hard drive:Â
Step 1: Open extensions tab in Google Chrome
To view all installed extensions, click on three vertical dots on the top right of Chrome browser and hover your mouse on More Tools and click on Extensions. Alternatively, you can directly open the extensions page by typing chrome://extensions in the address bar.
After opening the extensions page, you need to enable the “Developer mode” to view hidden details like ID and index page of extensions.
Step 2: Copy ID of the extension
After enabling the Developer mode, you will be able to see the ID of every extension installed on your browser. Copy the ID of extension for which you need to view the source code.
You can also find the extension ID from Chrome Web Store URLs. For instance, the ID of Geek Dashboard extension is present at the end of its URL chrome.google.com/webstore/detail/geek-dashboard/kkkleklpjdfciehffamcdchifedpihih
Step 3: Open Google Chrome User Data directory
After copying the extension ID, if you are a Windows user, navigate to C: - Users - {YOUR USER NAME} - AppData - Local - Google - Chrome - User Data - Default - Extensions directory on your computer.
If you are a Mac user, navigate to /Users/{YOUR USER NAME}/Library/Application Support/Google/Chrome/Default/Extensions
Here you will find plenty of folders and each folder represents each extension installed on your browser.
Step 4: View or copy the source code of Chrome extension
To view the Chome extension source code, paste the ID of extension at search bar inside Extensions directory and open the first result to get the complete source code. You can either modify the code to makes changes directly on installed extension or copy it to your Desktop for code reusability.
Method 2: Using Another Extension to View the Source Code
For modern problems, there is a modern solution and in a similar way, there is an extension to see the source codes of other Chrome extensions. “Chrome extension source viewer”, developed by Rob W. helps you literally see the source code of any extension or theme available on Chrome Web Store.
If you feel, opening extensions tab, copying extension ID, searching for the correct folder in Chrome User Data is a heavy work or time consuming, then this second method will be the simplest and best solution for you.
Step 1. Install Chrome extension source viewer
First, you need to download and install “Chrome extension source viewer” on your Chrome browser which is available for free on Chrome Web Store.
Step 2. Viewing the Source Code
To view the source code of any Chrome extension, visit the extension page on Chrome Web Store, click on “CRX” icon and select “View source” button to see the complete source code in the new tab.
Chrome extension source viewer also allows you to download the entire source code in a zip file. To download the Chrome extension source code, just click on the “CRX” icon and choose Download as zip button. This will instantly download the source code as a zip file and you can extract it using any unzip utilities like WinRAR or WinZip.
Choosing the best method to see Chrome extensions source codes
I have shown you two simple ways to view the source code of any chrome extension. Both methods have their own pros/cons and I’m listing down the points to understand how these both methods are different.
| Hard Drive Method | Extension Method |
|---|---|
| You must first install the extension to see the source code | No need to install extension to view the source code |
| Can see the source codes of any extension installed on your Chrome browser | Can show the source codes of extensions which are only available in Chrome Web Store. |
| Time-consuming and manual process | Instant process |
| Moderate risk – Since you need to first install the extension | Moderate risk – ‘Chrome extension source viewer’ extension can read your browsing history |
| Suitable for casual users | Suitable for developers |
To sum it up, if you wanted to frequently check the source codes of extensions and themes on Chrome Web Store, go with third party “Chrome extension source viewer” method which can save you a lot of time. For occasional and casual users, I recommend the first method of checking the source from directly in your hard drive.
Don’t forget to try the Geek Dashboard extension and if you have any other ways to view source codes, please let us know in the comments below.
Leave a Reply