How To Make a Simple Chrome Extension

No need to upload or share with anyone else

Making a Chrome extension is a fairly straightforward process. When you’re done, you’ll be able to use it on your computer to enhance how the browser works.

There are some basic components that the browser requires before the extension can be fully operational. We’ll go over all of this below, including how to get your custom extension to work in Chrome without the need to upload it or share it with anyone else.

Building a complex Chrome extension is a process much more detailed than what you’ll see below, but the general process is the same. Keep reading to learn how to make a Chrome extension that you can start using today.

Tip: To see how awesome your own extension could be, check out these amazing Chrome extensions.

How to Make a Chrome Extension

Using this guide, you’ll make a simple Chrome extension that lists some of your favorite websites. It’s fully customizable and really easy to update.

Feel free to edit the links and link text, or if you want to make the Chrome extension exactly how we are, just keep everything the same.

{“update_url”: “https://clients2.google.com/service/update2/crx”,

“manifest_version”: 2,“name”: “Favorite Sites”,“description”: “All my favorite websites.”,“version”: “1.0”,“icons”: {“16”: “icon.png”,“32”: “icon.png”,“48”: “icon.png”,“128”: “icon.png”},

“background”: {“page”:”background.html”},

“browser_action” : {“default_icon” : “icon.png”,“default_title” : “Favorite Sites”,“default_popup”: “popup.html”}}

The edible areas of this code includename,description, anddefault_title.

#myUL {list-style-type: none;padding: 0;margin: 0;width: 300px;}#myUL li a {border: 1px solid #ddd;margin-top: -1px;background-color: #f6f6f6;padding: 12px;text-decoration: none;font-size: 18px;color: black;display: block;font-family: ‘Noto Sans’, sans-serif;}

#myUL li a:hover:not(.header) {background-color: #eee;}

There’s a lot you can change in the CSS file. Play around with these options after making your Chrome extension to customize it to your liking.

Tip:Google has more informationon creating Chrome extensions. There are other examples and advanced options that go beyond the simple steps we’ve shown here.

How to Add a Custom Extension to Chrome

Now that you’ve made the Chrome extension, it’s time to add it to the browser so that you can actually use all of the files you just made. Installing a custom extension involves a procedure that’s different thanhow you’d install a normal Chrome extension.

Editing Your Chrome Extension

Now that your Chrome extension is usable, you can make changes to make it your own.

The styles.css file controls how the extension appears, so you can adjust the overall list style and change the font color or type.W3Schoolsis one of the best resources to learn about all the different things you can do with CSS.

To switch up the order the websites are listed in, or to add or more sites or remove existing ones, edit the popup.html file. Just be sure to keep your edits to only the URL and name. All the other characters, likeand, are required and shouldn’t be changed.HTML Tutorial on W3Schoolsis a good place to learn more about that language.

Founder of Help Desk Geek and managing editor. He began blogging in 2007 and quit his job in 2010 to blog full-time. He has over 15 years of industry experience in IT and holds several technical certifications.Read Aseem’s Full Bio

Welcome to Help Desk Geek- a blog full of tech tips from trusted tech experts. We have thousands of articles and guides to help you troubleshoot any issue. Our articles have been read over 150 million times since we launched in 2008.

HomeAbout UsEditorial StandardsContact UsTerms of Use

Copyright © 2008-2024 Help Desk Geek.com, LLC All Rights Reserved