How to Edit Chrome Extensions - Step-by-Step Instructions with Examples

How to Edit Chrome Extensions - Step-by-Step Instructions with Examples

Introduction

Whether you are a site owner, a blogger, a marketer, a productivity enthusiast or just someone who has a Chrome bar filled with extensions, this tutorial is for you. Read on...

Increasingly, Chrome extensions are becoming an essential part of any web toolkit. Today, most web apps, online services and tools come with a Chrome extension and sit right on top of your browser, always a click away.

However, there are times when you wish you could modify a few things about an extension, to perfectly fit your needs. For example:

• A certain scraping extension captures emails from a page but you wish it would also capture all other URLs.

OR

• A certain conference calling extension shows dial-in numbers only for local callers, not for international ones, and you wish you could change that.

OR

• A certain extension lets you filter YouTube videos but you wish it worked on other video streaming websites as well.

OR

• You just want to customize themes in Chrome.

If you are looking to make changes like any of these, Congratulations! Because it is possible to do so without having to contact the creator of the app and requesting them.

If you are scared of the code, please don’t worry. This is a very flexible technique that you can use either to make small changes with no coding or to dive deeper into the code and make bigger changes.

Below, we will guide you through an example Chrome extension modification.

Getting Started

In our example, we will make a couple of small edits to the Uberconference Chrome Extension. This extension allows you to add a calendar invite with your own Uberconference credentials to a Google Calendar invite. However, it does not add dial-in options for countries outside the U.S. This is not a big deal, but as an example, we are going to go ahead and add dial-in options for people outside the U.S.

Step-by-Step Instructions

  1. Uninstall the extension you want to modify. If you don’t have the extension you want to modify installed, you can skip this step.

  2. Add the Chrome Extension Source Viewer extension to your Chrome browser.

  3. Find the extension you want to modify and use CRX to "Download as ZIP."

  4. Unzip it and inspect the files. They should look something like this:

  5. First, delete the _metadata folder. Chrome tries to limit extensions not downloaded directly from the Chrome Web Store and you will get a random error message if you keep the metadata folder.

  6. Find the file you want to edit. In our case, the file is a javascript file in the \js\content folder called "calendar."

  7. Open the file in whichever editor you prefer and do the edits you need. We use Sublime Text 3, and the only thing we are going to do is to add a list of countries with phone numbers people can use to dial in:

  8. Save the file and go to chrome://extensions in your browser. Choose "developer mode" and click "load unpacked extension." Choose the entire folder as shown in the image below.

That’s it. You are done!

Things to Remember

Before you go on and start transforming your extensions to supercharge your workflow, please remember that modifying extensions is only recommended for your personal use.

These modified apps are strictly not meant for distribution without the consent of the original creator.

Run your business with Konsus