How to Create Your Own Google Chrome Extension – MUO – MakeUseOf


Want to level up your browsing experience? Learn how to create your own Google Chrome Extensions.
Have you ever found yourself unhappy with the features that come with your web browser? Even with hours of scouring the Google Web Store under your belt, it isn’t always a simple matter of hitting “download” to enhance your web surfing experience.
This is where browser extensions come in. In this article, we will be exploring the process of building your very own DIY Google Chrome Extension from scratch.
Modern web browsers like Google Chrome come with an array of features that make them easy to use and able to meet the needs of most users. Extending these stock features can come with loads of different benefits, though. This is why browser developers usually make it possible to create extensions, add-ons, and plug-ins for them.
Google Chrome offers this feature, making it easy for anyone with web development experience to create their own Chrome Extensions. You can make an extension using HTML, JavaScript, and CSS, just like many websites.
Unlike a website, extensions can run in the background while you browse, sometimes even interacting with the sites that you visit.
We are going to build a simple Chrome extension that will allow you to visit the Make Use Of website and make a random search based on the article categories found on the site. This is a quick and easy project, but you will still learn a lot.
Google has made it surprisingly easy to create your own Chrome Extensions, so it won’t take long before you have something working. Following the steps below will only take 10 to 15 minutes but we encourage you to experiment with your own code too.
You can store your extension on your own local machine when you aren’t planning to distribute it. We only need to create four different files to create our extension; an HTML file, a CSS file, a JavaScript file, and a JSON file.
We called our files index.html, style.css, script.js, and manifest.json. The manifest file must have this name to work properly, but you can give the others any names you like, as long as you alter your code accordingly.
You should place these files in the same root folder.
The manifest file comes with every Google Chrome Extension. It provides information about the extension to Chrome while also putting some basic settings in place. This file has to contain a name, version number, description, and a manifest version. We’ve also included permissions and an action that loads index.html as the popup that appears for the extension.
Before we can start writing our script, we need to create a basic UI using HTML and CSS. You can use a CSS library like Bootstrap to avoid creating your own, but we only need a couple of rules for our extension.
Our index.html file features html, head, and body tags. The head tag contains a page title and a link to our stylesheet, while the body is home to an h1 tag, a button that takes you to, and another button that we will be using as a trigger for a script. A script tag right at the end of the document includes the script.js file.
Our CSS file is even simpler than our HTML, changing the style of just five elements. We have rules for our html and body tags, as well as for h1 tags and both of our buttons.
As the last step in this process, it’s time to build our script.js file.
The first function in this file, called insertScript(), is in place to insert the other function (autoSearch()) into the current page. This allows us to manipulate the page and use the search features that are already present on the site.
This is followed by an event listener that waits until the Start Random Search button is clicked before calling the function we explored above.
The autoSearch() function is a little more complicated. It begins with an array containing 20 of the categories on the MUO website, giving us a good sample to draw from when making our random searches. Following this, we use the Math.random() function to generate a random number between 0 and 19 in order to select an entry from our array.
With our search term in hand, we now need to simulate a button click to open the MUO search bar. We first use the Chrome developer console to find the ID of the search button, and then we add this to our JavaScript code with the click() function.
Like the search button, we also need to find the ID of the search bar that appears, enabling us to insert the random search term we have selected. With this complete, it is a simple matter of submitting the form to make our search.
Next, it’s time to add the files you just created to the Chrome extensions page. Once you have done this, the extension will be accessible in Chrome and will update itself whenever you make changes to your files.
Open Google Chrome, go to chrome://extensions and make sure that the Developer Mode slider in the top right corner is in the on position.
Click Load Unpacked in the top left corner, then choose the folder you have saved your extension files inside and click Select Folder.
Now that your extension is loaded, you can click the puzzle piece icon in the top right corner and pin your extension to the main taskbar for easier access.
You should now be able to access the completed extension within your browser. It is worth keeping in mind that this extension will only work on the MUO website or websites with the same ID for their search button and bar.
This article only scratches the surface of the possible features you could build into your own Google Chrome extension. It’s well worth exploring your own ideas once you’ve learned the basics.
Chrome extensions can help you to level up your browsing but try to stay away from some of the known shady Chrome extensions for safe and secure browsing.
Samuel is a UK-based technology writer with a passion for all things DIY. Having started businesses in the fields of web development and 3D printing, along with working as a writer for many years, Samuel offers a unique insight into the world of technology. Focusing mainly on DIY tech projects, he loves nothing more than sharing fun and exciting ideas that you can try at home. Outside of work, Samuel can usually be found cycling, playing PC video games, or desperately attempting to communicate with his pet crab.


Leave a Reply

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