How To Make a Simple Chrome Extension

Building a Chrome extension is a fairly straightforward process. When you’re done, you can use it on your computer to improve your browser experience.

The browser needs some basic components before the extension is fully functional. We’ll cover all of this below, including how to make your own extension work in Chrome without having to download it or share it with anyone else.

Building a complex Chrome extension is a much more detailed process than what you’ll see below, but the process is basically the same. Keep reading to find out how to create a Chrome extension you can use today.

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

How to make a Chrome extension

Using this guide, you will create a simple Chrome extension that lists some of your favorite websites. It is fully customizable and very easy to update.

Here’s what to do:

• Create a folder to store all the files that make up the extension.
• Create the base files required for this extension: manifest .json, popup.html, background.html, styles.css.
• Open popup.html in a text editor, and then paste the following in there, remember to save it when you’re done.

DOCTYPE html>

• Support geek
• Technical tips on the Internet a >
• Backroom Technique

html>





Feel free to edit the links and link text, or if you want to make the Chrome extension exactly like us, just leave it the same.

– /

• Open manifest.json in a text editor and copy / paste the following:

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

“Manifest_version”: 2,
“name”: “Favorite sites”,
“description”: “All my favorite websites.”,
“version”: “1.0”, < br /> “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 include name, description, and default_title.

• Open the styles.css file and paste the following code. This is what decorates the popup menu to make it more attractive and easier to use.

#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;
}



You can change a lot in the CSS file. Experiment with these options after creating your Chrome extension to customize it to your liking.

• Create an icon for the extension and name it icon.png. Place it in your Chrome extension folder. As you can see from the above code, you can create a separate icon for these sizes: 16x16px, 32×32, etc.

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

How to add a custom extension to Chrome

Now that you’ve created your Chrome extension, it’s time to add it to your browser so you can use all the files you just created. The procedure for installing a native extension is different from the procedure for installing a regular Chrome extension.

• From the Chrome menu, choose More Tools> Extensions. Or enter chrome: // extensions / in the address bar.
• Click the button next to developer mode if not already selected. This will enable a special mode to import native Chrome extensions.
• Use the Download Unpacked button at the top of the page to select the folder created in step 1 above.



• Accept any requests if you see them. Otherwise, your own Chrome extension will appear along with any other extensions in the upper right corner of the browser.



Edit 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 is displayed, so you can customize the overall list style and change the color or font type. W3Schools is one of the best resources for learning about everything you can do with CSS.

To change the order in which websites are displayed in the list, add or multiple sites, or remove existing ones, edit the popup.html file. Just make sure you only edit the URL and name. All other characters such as

• and are required and should not be changed. The HTML Tutorial at W3Schools is a good place to learn more about this language.

  –

  Share this: