Ever thought of what are the codes behind a Chrome extension? Basically Chrome extension and apps are written in plain HTML, JSON and JavaScript codes that remain unchanged when you install them on your Chrome browser. However, Chrome extensions are distributed as a *.crx file which is actually zipped package of the codes. Chrome automatically unzips and puts them on your local machine when you install them. Thus it leaves the possibility to look into the source code of extensions you installed on your Chrome. Or if you have the CRX file, you can use an unzip tool to extract the files inside it. Use a CRX downloader service to directly download CRX files from Chrome store.

Edit any Chrome extension or app

Reasons you would want to View/Edit a Chrome Extension

  • View the source codes of an app/extension.
  • You are learning to make Chrome extensions and need some examples.
  • You are building a Chrome app for your web app and need a sample.
  • Analyze an extension for security or privacy purpose.
  • Search for malicious codes.

Whatever the reason you want to view the source code or modify any third-party Chrome extension, you need to have access to the files of the extension. The easiest way is to first install the app/extension from Chrome web store and locate the extension installation files on your local machine.

Chrome Extension Installation Location

On Windows 7 or later:

C:\Users\<username>\AppData\Local\Google\Chrome\User Data\Default\Extensions\

On Windows XP

C:\Documents and Settings\<username>\Local Settings\Application Data\Google\Chrome\User Data\Default\

On Mac:

/Users/<username>/Library/Application Support/Google/Chrome/Default/Extensions/

On Ubuntu:

~/.config/google-chrome/Default/Extensions/

After you have located the Chrome extension directory on your computer, you will find all extension and apps sitting there with folder with name of extension ID. To find a specific extension, search with the extension ID which is shown in chrome://extensions page and extension URL on Chrome store.

Chrome extension installation location

You can then enter into a folder to find individual codes and files of an extension.

Chrome extension source files

You may need to restart Chrome to see the effects of your edits. You can also copy the folder of an extension to a separate place to start a new project. Then head to chrome://extensions/, enable “Developer mode”, and use “Load unpacked extension” button to test the extension. Check the guide to creating a simple Chrome app from scratch and publish it to Chrome store.

Note: If you are editing an extension to make a new one and redistribute, you need to remove the like ““key”: ….” from manifest.json file. Also make sure the author/publisher of the extension lets you change or redistribute their extension.

Author: 

Jaber is a Programmer and Tech Enthusiast Geek from Dhaka, Bangladesh. He is the founder and Chief-Editor of TechGainer. While he is away from his keyboard, either he's fishing or messing with wildlife. In case, you can contact him at rijans[at]techgainer[dot]com.