Geek Dashboard

How-To's, Smartphones, News and Reviews

  • Phone Finder
    Phone
    Finder
  • Compare Phones
    Compare
    Phones
  • Viwe All Phone Comparisons
    View All
    Comparisons
  • Home
  • News
  • Smartphones
    • Android
    • iOS
  • Computers
    • Windows
    • macOS
  • Internet
  • Reviews
  • Phone Finder
    • Brands
You are at Home » Computer

2 Ways To View And Download Source Code of Any Chrome Extension

Last Updated on March 27, 2020 by Mannatjot Singh Leave a Comment

Chrome extensions are one of the best ways to alter your browser’s functionality according to your requirements. There are various kinds of extension that help you block ads, get coupon codes for shopping websites and much more. But the major concerns with extensions are security and privacy. You must be very cautious while installing an extension and the permissions they are requesting. The best way to make sure it is safe and secure is by viewing the source code of Chrome extensions.

Chrome extensions include a lot of HTML, CSS and JavaScript files along with one manifest file. Reading the manifest and background file of an extension will give you a clear idea of permissions and scripts it is loading. All these files of Chrome extension are distributed as a CRX file but technically they are standard .zip files which can be extracted using WinZip software.

Here are the reasons why you should see the source code of Chrome extensions.

  1. If you are a developer, you need to view the source codes to know how popular extensions are coded. It also helps you in reusing the code if their license permits.
  2. A lot of useful extensions are abandoned for various reasons and you might need to make changes yourself to add new features or to modify the user interface. Recently I have modified the CSS file of Motivation extension to add a dark black background to the new tab.
  3. If an extension is from an untrusted or unknown developer, viewing the source code will help you to ensure it is not spying your browsing activities.

Also Read: 10 Best Download Manager Extensions for Google Chrome

By now, you know why you should consider viewing the source code of an extension and here are the couple of ways to do it. For this tutorial, I’ll show you how you can view the source code of Geek Dashboard Chrome extension.

get source code to any Chrome extension

Method 1: Finding Extension Source Code On Your Hard Drive

Locating the Chrome extension source code on your device is pretty simple. When you install any extension or theme from Chrome Web Store, a CRX file is downloaded and the contents of the file are extracted and saved locally on your hard drive. Navigating to the extracted path and searching the ID of extension is what we need to do for getting the source code. The downside of this method is, you need to first install the extension on Google Chrome to view the code.

Here is how you can find the source code of installed Chrome extension in your hard drive: 

Step 1: Open extensions tab in Google Chrome

To view all installed extensions, click on three vertical dots on the top right of Chrome browser and hover your mouse on More Tools and click on Extensions. Alternatively, you can directly open the extensions page by typing chrome://extensions in the address bar.

After opening the extensions page, you need to enable the “Developer mode” to view hidden details like ID and index page of extensions.

Google Chrome Extensions Tab

Step 2: Copy ID of the extension

After enabling the Developer mode, you will be able to see the ID of every extension installed on your browser. Copy the ID of extension for which you need to view the source code.

You can also find the extension ID from Chrome Web Store URLs. For instance, the ID of Geek Dashboard extension is present at the end of its URL chrome.google.com/webstore/detail/geek-dashboard/kkkleklpjdfciehffamcdchifedpihih

Copy the ID of Extension

Step 3: Open Google Chrome User Data directory

After copying the extension ID, if you are a Windows user, navigate to C: - Users - {YOUR USER NAME} - AppData - Local - Google - Chrome - User Data - Default - Extensions directory on your computer.

If you are a Mac user, navigate to /Users/{YOUR USER NAME}/Library/Application Support/Google/Chrome/Default/Extensions

Here you will find plenty of folders and each folder represents each extension installed on your browser.

Locating the Extensions Folder in File Explorer

Step 4: View or copy the source code of Chrome extension

To view the Chome extension source code, paste the ID of extension at search bar inside Extensions directory and open the first result to get the complete source code. You can either modify the code to makes changes directly on installed extension or copy it to your Desktop for code reusability.

Locating the ID of Extension in the Extensions Folder

Method 2: Using Another Extension to View the Source Code

For modern problems, there is a modern solution and in a similar way, there is an extension to see the source codes of other Chrome extensions. “Chrome extension source viewer”, developed by Rob W. helps you literally see the source code of any extension or theme available on Chrome Web Store.

If you feel, opening extensions tab, copying extension ID, searching for the correct folder in Chrome User Data is a heavy work or time consuming, then this second method will be the simplest and best solution for you.

Step 1. Install Chrome extension source viewer

First, you need to download and install “Chrome extension source viewer” on your Chrome browser which is available for free on Chrome Web Store.

Download on Chrome Web Store

Step 2. Viewing the Source Code

To view the source code of any Chrome extension, visit the extension page on Chrome Web Store, click on “CRX” icon and select “View source” button to see the complete source code in the new tab.

Viewing Source Code of Chrome Extension

Chrome extension source viewer also allows you to download the entire source code in a zip file. To download the Chrome extension source code, just click on the “CRX” icon and choose Download as zip button. This will instantly download the source code as a zip file and you can extract it using any unzip utilities like WinRAR or WinZip.

Click CRX extension icon to download source code of Chrome extension

Chrome extension source code downloaded as zip file

Choosing the best method to see Chrome extensions source codes

I have shown you two simple ways to view the source code of any chrome extension. Both methods have their own pros/cons and I’m listing down the points to understand how these both methods are different.

Hard Drive Method Extension Method
You must first install the extension to see the source code No need to install extension to view the source code
Can see the source codes of any extension installed on your Chrome browser Can show the source codes of extensions which are only available in Chrome Web Store.
Time-consuming and manual process Instant process
Moderate risk – Since you need to first install the extension Moderate risk – ‘Chrome extension source viewer’ extension can read your browsing history
Suitable for casual users Suitable for developers

To sum it up, if you wanted to frequently check the source codes of extensions and themes on Chrome Web Store, go with third party “Chrome extension source viewer” method which can save you a lot of time. For occasional and casual users, I recommend the first method of checking the source from directly in your hard drive.

Don’t forget to try the Geek Dashboard extension and if you have any other ways to view source codes, please let us know in the comments below.

#Chrome Web Store#Extensions#Google Chrome#Programming
Posted inComputer

Spread the Word!

Mannatjot Singh Facebook Twitter LinkedIn Instagram

Mannatjot has an immense love and passion for technology and writing. Combining both of these and it becomes a way for him to express his love of tech to all the people on the Internet by providing tech-savvy articles.

Related articles

News

Chrome DevTools Allows Developers to Make Websites More Colour Blind Friendly

DevTools New feature
Mobiles

Top 6 Tools To Develop Android Apps For Your Blog Without Coding Knowledge

Appinstitute app builder
Internet

How to Switch Back to Old Facebook Layout

Facebook Desktop Version

Comment Policy:

The comments section is aimed to help our readers in case of any questions or you can even appreciate us for our hard work. Every comment is strictly moderated before approving it.

Your name and comment will be visible to the public. Never share your personal information in the comments section.

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Phone Finder

Brands

  • Samsung 43
  • Xiaomi 38
  • Nokia 33
  • Motorola 33
  • Huawei 28
  • Asus 25
  • Oppo 25
  • Apple 19
  • Meizu 18
  • Vivo 17
  • Microsoft 12
  • BlackBerry 12
  • OnePlus 9
  • Google 4
  • Acer 2
  • Realme 1

Latest Phones

  • Asus Zenfone 6 (2019) Asus Zenfone 6 (2019) ₹39,999.00
  • Samsung Galaxy A70 Samsung Galaxy A70 ₹28,500.00
Notification History Log for Android

Trending Topics

  1. Realme GT 5G Listed on GeekBench Revealing Key Specification Details

  2. Sony PlayStation 5 Mext Firmware Update Grants Expandable Storage

  3. Realme Narzo Series and Buds Air 2 TWS Officially Launched in India

  4. Lenovo ThinkPad Series Updated with 16:10 displays and Latest Intel, AMD Chipsets

  5. Huawei Mate X2 Announced with Folding Display and Kirin 9000 in China

Geek Dashboard Placeholder

Download the apps and never miss a story from us

We put a lot effort and resources in writing our articles and we believe it is our responsibility to satisfy your tech hunger. We will keep you filled forever!

  • Get Geek Dashboard App from Google Play
  • Get Geek Dashboard App from Chrome Web Store
Geek Dashboard Logo

Geek Dashboard, a technology blog strives to produce high-quality tech for our readers. Here you will find the latest updates on trending tech news, unbiased product reviews, and how-to guides on various gadgets.

Got a Tip? Write In [email protected]

© 2012 - 2020 · Geek Dashboard, product of ikva eSolutions

Blog Advertise About Jobs Contact Privacy Policy Write For Us T&C Office Setup

No dogs were injured while working on this website because we love them