How to display the source code of a Chrome extension

Chrome extensions ship in a state that it is possible to view the source code of them. That's interesting for a number of reasons even though it may not be something that you may want to do if you are not proficient in JavaScript or know someone who is.

Probably the most obvious reason why you may want to go through the source of Chrome extensions is to audit them before you install them in the browser.

This is especially true if you do not know the author of the extension, or if the extension is offered on a third-party site and not the official Chrome Web Store.

Another reason is to check out how something was done. Maybe you develop extensions as well for the browser and just want to find out how the author of an extension implemented a certain feature that you are interested in. Since you can access the source code, you can use it for learning.

And access to the source is also useful if you want to modify the extension, for instance by making it efficient, or by removing features of it.

Getting the Chrome Extension file

Now, the first and biggest hurdle is getting your hands on the Chrome crx file. While you can install the extension in Google Chrome to download it that way, it is not always an option, especially not if you want to audit it first before you install it.

If that is not a problem, check out the official extension locations:

• Linux: ~/.config/google-chrome/Default/Extensions/
• Mac:  ~/Library/Application Support/Google/Chrome/Default/Extensions
• Windows: C:\Users\[username]\AppData\Local\Google\Chrome\User Data\Profile 1\Extensions

Note that the name of the application may be different depending on which version of Google Chrome you are using. It may be chromium or chrome-sxs instead for example.

Here you find all installed extensions as folders. You find the ID on the chrome://extensions/ page. Compare the ID listed on that page to the directory structure.

Alternative without installation

You can download any Chrome extension from the store without installing it first in the browser. The method works in all web browsers, not only in Google Chrome. Here it is:

• Open the store page of the extension that you want to download.
• Note that the address contains its ID, e.g. aknpkdffaafgjchaibgeefbgmgeghloj on this page: https://chrome.google.com/webstore/detail/angry-birds/aknpkdffaafgjchaibgeefbgmgeghloj
• Paste https://clients2.google.com/service/update2/crx?response=redirect&x=id%3D---%26uc into another browser window but do not load it yet.
• Replace --- with the ID of the extension which in the case of the example extension above leads to https://clients2.google.com/service/update2/crx?response=redirect&x=id%3Daknpkdffaafgjchaibgeefbgmgeghloj%26uc
• Load that address and the crx file of the extension will be downloaded to your system.

Unzipping

If you download the extension instead of installing it, you need to unzip it first before you can view the source code of it. You can use a program such as 7-Zip for that for example.

Just right-click the downloaded extension file and select 7-zip > Extract To from the menu that opens up.

This extracts the extension into a folder in the same directory it is stored in.

From here, you can browse the various files it ships with in plain text editors or specialized editors.