Feeling curious about finding how a Google Chrome extension is developed?
Then you’ve come to the right place. Whether you’re a developer who’s looking to learn how a certain chrome extension works or find out any unusual activity within the extension (such as data mining or crypto mining).
Or …
If you’re a newbie, and you just want to see what the heck it is all about.
Then this guide is written precisely in order to help you do that. We will show step-by-step on how you get the source code and files of any Google Chrome Extension you have using your Windows PC or your Apple Mac.
Without further ado, let’s dive right in.
How to Get Source Code of Any Chrome Extension on Windows: 2 Ways
1. Ironically, The Source Code Is Right in Your PC’s Hard Drive. 🔎
- First and foremost, you will have to install the Google Chrome extension that you want to get the source code for. Using your Google Chrome browser, once you’ve installed the Chrome extension, head over to your chrome://extensions/ page (you will have to copy-paste the link into your search bar). Alternatively, you can access this page simply by clicking on the triple-dot Menu button (top-right hand corner) > More Tools > Extensions.
- Great. Now that you’re in your Chrome Extensions page, you will need to slide the switch for Developer mode setting located in the upper-right hand corner.
- Once you’ve checked that, next, find the ID for the Chrome extension that you want to try and get the source code of. For this guide, I’ll be choosing UBlock Origin for this guide where the corresponding ID for it is “cjpalhdlnbpafiamejdnhcphjbkeiagm” (as shown below).
- You have the ID ✅. So what the heck do you do with it? Simply open up your Windows’ File Explorer (you can do this using the Search on your Windows PC). Once you’re in your File Explorer, enter the following address into the location bar (as shown below). Hit the Enter key.
%localappdata%
- Now there is some navigating here to do to access your Google Chrome Extensions folder on your hard drive: Google > Chrome > User Data > Default > Extensions.
- Next, once you’re in, you will find that there will be a list of folders that have weird long names. These names are the IDs of the Chrome extensions that you’ve installed. In fact, if you have the ID for the Chrome extension for which you’re trying to get the source code, you’ll find that the extension will have a folder of its own here. For instance, the UBlock Origin extension that I aforementioned is found here (as shown below).
- Lastly, once you enter this folder, you should find another folder with the version number of the extensions. Inside that folder, you’ll find all of the source files of the Chrome extension arranged here.
That’s pretty much it!
2. Is There A Much Faster Way? Yes, There Is.
What you’ll need is to download a Google Chrome extension called Chrome extension source viewer, which you can use directly from your tab to access any Chrome extension’s source code.
Here are the steps:
- Go ahead download the Chrome extension source viewer. Once it is installed, you will receive a pop-up confirmation message saying as shown below.
- Good. Now, in order to use the extension, simply click on the yellow icon (the extension’s icon) from your menu bar at the top. You’ll be asked whether you will want to Download as zip or View source of the extension source files.
- If you choose Download as zip, all you really have to do is just unzip the downloaded zip file using software like WinRAR or 7Zip and then view the source code files.
- If you choose View source, then you can see all of the source code of the Chrome extensions directly online (as shown below)
From there you can search and open up the Chrome extension source code that you want to view and then proceed to do what you want with it.
That’s pretty much it! 🙂 If you have a Mac, we will show you below how you can view the files on its hard drive as well.
How to Get Source Code of Any Chrome Extension on Mac
You could just download the Google Chrome extension app called Chrome extension source viewer as shown step-by-step above to access any extension’s source files on your Mac.
However, if you’re looking to locate the files on your hard drive, then here’s how you access it:
- First and foremost, you will have to install the Google Chrome extension that you want to get the source code for. Using your Google Chrome browser, once you’ve installed the Chrome extension, head over to your chrome://extensions/ page. Alternatively, you can access this page simply by clicking on the triple dot menu button (top-right hand corner) > More Tools > Extensions in your Google Chrome search browser.
- Great. Now that you’re in your Chrome Extensions page, you will need to slide the switch for Developer mode setting located in the upper-right hand corner.
- Once you’ve checked that, next, find the ID for the Chrome extension that you want to try and get the source code of. For this guide, I’ll be choosing UBlock Origin for this guide where the corresponding ID for it is “cjpalhdlnbpafiamejdnhcphjbkeiagm”.
- Now here is where the steps are different if you’re using a Mac. What you’ll need to do is, having had the ID of the Chrome extension, you will have to head over to chrome://version/ in the search bar of your Chrome browser. Why must this be done, you may ask? Well, this page will show you where to locate the folder for the Chrome extension on your Mac’s hard drive.
- On the Chrome version page, simply highlight and copy the reference path next to Profile Path. You will need this information in the next step where we go into using Finder to look up the extension’s source files.
- Once you have the reference path for the Chrome extension source code, simply open Finder on your Mac. Click on the Go tab on your top menu, and then click on Go to Folder…
- Next, paste the reference path you had copied in Step 5 into here and then hit Go to have Finder open up that folder.
- You will find that in the Finder window that has opened, an Extensions folder will be located here. Simply double-click to open the Extensions folder which will hold of all the Chrome extensions’ source code.
- On this page, you will find a number of weirdly long-named folders. These names are in fact the Chrome extension IDs. So based on the Chrome extension’s ID that you wanted to find in Step 3, simply open up the appropriately named folder. This will be the folder that holds the source code for the Chrome extension you’re looking for.
- Lastly, you should find all the source files that will be arranged here.
Annnd you’re done!
We hope that this guide helped to obtain the source code of any Google Chrome extension that you may have been looking for.
If you have other questions related to this article, please feel free to leave a comment below.
