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\Default\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.

chrome extension id

chrome extension folder

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.

Summary
Article Name
How to view Chrome extension source files
Author
Description
Explains how you can download Chrome extensions from the Web Store and extract the files to view the source.
Please share this article

facebooktwittergoogle_plusredditlinkedinmail


Responses to How to display the source code of a Chrome extension

  1. steven April 13, 2014 at 12:05 am #

    "Just right-click the downloaded extension file and select 7-zip > Extract To from the menu that opens up."
    in Linux you need to rename crx to zip before you extract.

  2. Rob April 13, 2014 at 11:38 am #

    There is a Chrome extension that offers the ability to view the source code of any extension in the Chrome Web store in just two-clicks: https://chrome.google.com/webstore/detail/chrome-extension-source-v/jifpbeccnghkjeaalbbjmodiffmgedin

    (disclosure: I developed the extension, its source code is available at https://github.com/Rob--W/crxviewer)

  3. A41202813GMAIL April 13, 2014 at 3:30 pm #

    Extensions 'acpimoebmfjpfnbhjgdgiacjfebmmmci' And 'adajmnagfnjmjkljpmiglngkbgoaehgi' Allow Downloading CRX Files From The CHROME WEB STORE.

    Is There Any Extension That Allows The Creation Of CRX Files But From The Already Installed Extensions In Your Browser ? - Like The FEBE Extension Does For FIREFOX ?

    Thank You.

    ---

    • Rob April 13, 2014 at 4:04 pm #

      Chrome blocks installation of extensions outside the Chrome Web Store. So, even if you downloaded a CRX file to your computer, you cannot install it in Chrome.

      You could extract a CRX file (which is just a signed zip file) to some directory, and load the unpacked extension in developer mode. In the latest version of Chrome on Windows, you will get a nagging "Disable developer mode extensions" warning if you do that though. Another issue with using unpacked extensions is that the extension ID is different from the "official" extension. This usually does not matter, but there are a few extensions that change behavior depending on the extension ID. Finally, these extensions will not be auto-updated.

      To get back to your question: Just visit the extension directory (see blog post) and copy the folder to some other location.

      • A41202813GMAIL April 14, 2014 at 7:38 am #

        @Rob

        Thank You For Replying.

        I Have 2 News For You:

        ---

        A - Call CHROME With The Following Parameter:

        "X:\Program Files\Google\Chrome\Application\Chrome.exe" "--enable-easy-off-store-extension-install"

        ---

        B - If You Do Not Want To Use The Parameter:

        B1 - Open Windows Explorer With The Folder Where You Keep Your CRX Files,

        B2 - Open A Tab In CHROME With The Extensions Page,

        B3 - Drag And Drop Any CRX File From ( B1 ) To ( B2 ).

        Enjoy.

        ---

        PS.

        I Would Still Love A FEBE Extension For CHROME, Though.

        ---

Leave a Reply