Our WorkWhy Us
Summit

Momentum: Virtual Summit | November 30th, 2022

An interactive 4 hour virtual summit with 10 sessions on scaling during a downturn, featuring 14+ expert speakers from Jasper, Chili Piper, Instacart, Adobe, and more.
View event
Gather & Grow

Gather & Grow - Nov 21st - B2B Goes UGC

Join us live for our interactive session, where we explore how to scale using user-generated content (UGC) with expert Elif Hiz!
View event
Gather & Grow

Scaling Content for Maximum Impact | On-Demand Recording

Tune in to our full-length session on scaling content for maximum impact, with our friend, Tracey Wallace.
View event
Events & Summits

Explore all the content inside Events & Summits!

See all
BlogPricingBook a DemoSign In

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

Team Superside
Team Superside3 min read
How to Edit & Customize Chrome Extensions? Instruction & 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 and learn how to optimize your Chrome extension editor.

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 need it to 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 similar changes and edit your extensions in Chrome, congratulations, you're in the right place! It is possible to do so without having to contact the app creator and request their assistance. If code scares you, please don’t worry, as there is a very flexible technique that you can utilize either to make small changes with no coding or to dive deeper into the code and make more significant changes. Below, we guide you through the process of modifying a Google Chrome extension and present you a detailed example of how to edit Chrome extensions.

The Future of Design Operations

Great design doesn’t come easy, especially when it needs to be delivered at scale. In this guide we demonstrate, by example, how DesignOps can help streamline the creative process for overstretched marketing, creative and agency teams.

Get the eBook

Getting Started with the Chrome Extension Editor

In the following example, we perform a couple of small edits to the Uberconference Chrome Extension. This Chrome 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. It may not be a big deal, but as an example, we are going to add dial-in options for people outside the U.S.

Step-by-Step Instructions on How to Edit a Chrome Extension

  1. Uninstall the extension you're looking to modify or skip this step if the extension is not already installed.
  2. Add the Chrome Extension Source Viewer extension to your Chrome browser.

mPGVFLZuiO9N_ziu7uDIVxYzQ9rRVhV5xYiEr

  1. Find the extension you are looking to modify and use CRX to "Download as ZIP."
  2. Unzip it and inspect the files. They should look something like this:

mPGVFLZuiO9N_jhZkAERhFTugSLfZ3CrEpxpJ

  1. First, delete the _metadata folder, as 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.
  2. Find the file you want to edit, in our case, the javascript file in the \js\content folder called "calendar."
  3. Open the file in whichever editor you prefer and do the edits you need; we’re going to use Sublime Text 3, and only add a list of countries with phone numbers people can use to dial in:

mPGVFLZuiO9N_SdZxrRUR6hpEv98ReuftE7QK

  1. 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.

mPGVFLZuiO9N_6JESv9kEmJRnWUocNUfqm488

That’s it, you are done!

Get Frictionless, Delightful Design

Superside delivers design at scale to over 400 businesses. Let's find the right solution for you.

Book a call

Things to Remember

Before you proceed with transforming your Chrome 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.

Published: Jun 5, 2017
Team Superside
Written by
Team Superside
Team Superside is comprised of writers from all over the globe. We love making stuff, telling stories and sharing fun, nerdy ideas with the world.

Join our community of 15,000 strong and receive the best design and marketing content, biweekly

No charge. Unsubscribe anytime

Continue reading

Hassle-free design starts here

Superside is an always-on design company that makes design frictionless and hassle-free for marketing, sales, creative and product design teams. This means top-quality designs at lightning-fast speeds, improved velocity and go-to-market and completely secure and confidential file sharing and collaboration.

In this one-on-one live demo, you’ll see:
- How Superside works
- A first look at the Superside platform
- The most suitable subscription plan for you

Get ready to join 450+ scale-ups and enterprise teams doing good design at scale with Superside’s dedicated team model.
Ready to get started?Book a demo now

Book a call with us

Loading...
We need your phone number for the demo. We'll never use it for any other purposes.
Superside is a revolutionary way for businesses to get good design done at scale.Trusted by 450+ ambitious companies, Superside makes design hassle-free for marketing and creative teams. By combining the top 1% of creative talent from around the world with purpose-built technology and the rigor of design ops, Superside helps ambitious brands grow faster. Since inception, Superside has been a fully remote company, with more than 700 team members working across 57 countries and 13 timezones.
© 2022 Superside. All rights reserved.