While writing my previous article about How to Create a Google Chrome Extension, I wanted to make my example easy, so people could learn from it. A Google Chrome extension that isn’t complex, but it has a little bit of everything.
If you’ve ever downloaded a .CRX file locally on your browser and then attempted to open it via a text-editor like [Atom by Github][3], you would notice that you can only see gibberish.
There’s a really simple way to View the Source Code of a Google Chrome Extension.
After I picked the extension for my previous tutorial, I wanted to know what code was used for the audio to play. This is how the hunt began to learn how to view google chrome extension source code. It turned out to be too easy.
It only takes an extension, a couple of steps and you’ll be able to View the Source Code of a Google Chrome Extension
# Step 1:
Install and activate the Chrome extension source viewer by Rob W
# Step 2:
Open the Google Chrome Web Store page of any extension that you want to see the source code of let’s say uBlock Origin by Raymond Hill (gorhill)
# Step 3:
Next to the Omnibox, you should see a new yellow icon Click it, you should see a popup panel
Which allows you to:
- Download as Zip (Download a zip file of the source code)
- View Source (View source code of the extension inside Google Chrome)
That’s it. I don’t think there is a need to have more steps.
Clicking on View source like we discussed allows you to View the Source Code of a Google Chrome Extension inside the Google Chrome browser in a very easy to use and understandable window.
As you can see, you can search through all the files and filter the content based on what it is;
- Images
- Code
- Markup
- Locales
- Misc
Other notable features such as:
- Automatic beautification (formatting) of code
- Syntax highlighting
- Image preview
- Show hashes (md5, sha1, sha256, sha384, sha512) of the file content.
- Download Chrome Web Store extensions for a different platform (e.g. Chrome OS or NaCl).
That wasn’t difficult after all, right? Just an extension, a click and you will be able to View the Source Code of a Google Chrome Extension.
Hopefully, this will help you understand how an extension works or maybe find a code that you needed but didn’t know how to write. Good luck!