How to Create Your Own Google Chrome Extension

Rate this post
How to Create Your Own Google Chrome Extension

Have you ever been dissatisfied with the functions that come with your web browser? Even if you’ve spent hours exploring the Google Online Store, it’s not always as easy as clicking “download” to improve your web browsing experience.

Browser addons may help with this. In this tutorial, we will look at how to create your own DIY Google Chrome Extension from scratch.

What Is a Google Chrome Extension?

Modern modern browsers, such as Google Chrome, provide a plethora of capabilities that make them simple to use and capable of meeting the demands of the majority of users. Extending these standard features, on the other hand, might have a variety of advantages. This is why browser makers often allow for the creation of extensions, add-ons, and plug-ins for them.

This capability is available in Google Chrome, making it simple for anybody with web programming knowledge to build their own Chrome Extensions. Like many websites, you can create an extension using HTML, JavaScript, and CSS.

Extensions, unlike websites, may operate in the background as you browse, sometimes even interacting with the sites you visit.

What Will Our Google Chrome Extension Do?

We’ll create a basic Chrome extension that will enable you to visit the Make Use Of website and do a random search based on the article categories available there. Although this is a simple project, you will learn a lot.

You Will Learn How To

  • Develop a Google Chrome Extension
  • Using a Chrome Extension, insert custom code into websites.
  • Simulate clicks by creating event listeners.
  • Generate random numbers
  • Use arrays and variables.

Building Your Own DIY Chrome Extension

Google has made it shockingly simple to develop your own Chrome Extensions, so you’ll be up and running in no time. The instructions below will only take 10 to 15 minutes to complete, but we invite you to experiment with your own code as well.

  How to Solve the ”Err Connection Reset” Error in Google Chrome

Step 1: Creating the Files

When you don’t want to share your extension, you may keep it on your local system. To construct our extension, we simply need four files: an HTML page, a CSS file, a JavaScript file, and a JSON file.

Index.html, style.css, script.js, and manifest.json were the names we gave our files. The manifest file must have this name in order to function correctly, but the others may have whatever name you choose as long as you modify your code appropriately.

You should place these files in the same root folder.

Step 2: Building the Manifest File

Every Google Chrome Extension includes a manifest file. It informs Chrome about the extension while also implementing some basic settings. A name, version number, description, and manifest version must all be included in this file. We’ve also provided permissions and an action that loads index.html as the extension’s popup.

{
"name": "MakeUseOf.com Automated Search",
"version": "1.0.0",
"description": "A search tool to find interesting articles",
"manifest_version": 3,
"author": "Samuel Garbett",
"permissions": ["storage", "declarativeContent", "activeTab", "scripting"],
"host_permissions": [""],
"action":{
"default_popup": "index.html",
"default_title": "MUO Auto Search"
}
}

Step 3: Building the HTML & CSS

Before we begin coding our script, we must first design a simple user interface (UI) using HTML and CSS. You may use a CSS library like Bootstrap to avoid writing your own, but our addon only requires a few rules.

The html, head, and body tags are all present in our index.html file. The head element has the page title and a link to our stylesheet, while the body contains a h1 tag, a link to MakeUseOf.com, and another button that will be used as a trigger for a script. The script.js file is included in a script tag at the end of the page.

<html>
<head>
<title>MUO Auto Search</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>MUO Auto Search</h1>
<a href="https://www.makeuseof.com/" target="_blank"><button id="buttonOne">Go to MakeUseOf.com</button></a>
<button id="buttonTwo">Start Random Search</button>
</body>
<script src="script.js"></script>
</html>

Our CSS file is even simpler than our HTML file, since it only changes the style of five components. We have guidelines for html and body tags, as well as h1 tags and both buttons.

html {
width: 400px;
}
body {
font-family: Helvetica, sans-serif;
}
h1 {
text-align: center;
}

border-radius: 0px;
width: 100%;
padding: 10px 0px;
}

border-radius: 0px;
width: 100%;
padding: 10px 0px;
margin-top: 10px;
}

Step 4: Building the JavaScript

The last step in this procedure is to create our script.js file.

  How to Set Up a Chrome Incognito Context Menu Shortcut in Windows 11 

The insertScript() function in this file is used to insert the other function (autoSearch()) onto the current page. This enables us to edit the page and utilize the search options currently available on the MakeUseOf.com website.

This is followed by an event listener that waits till the Start Random Search button is hit before running the previously discussed function.

The autoSearch() method is a bit trickier. It starts with an array containing 20 of the MUO website’s categories, providing us a decent sample to pull from for doing random searches. After that, we use the Math.random() method to produce a random integer between 0 and 19 to choose an element from our array.

We now need to imitate a button click to open the MUO search box with our search word in hand. We first utilize the Chrome developer console to get the ID of the search button, which we then add to our JavaScript code using the click() method.

We must also determine the ID of the search box that opens, allowing us to enter the random search word we have picked. Once everything is completed, we can simply submit the form to begin our search.


function insertScript() {

chrome.tabs.query({active: true, currentWindow: true}, tabs => {
chrome.scripting.executeScript({target: {tabId: tabs[0].id}, function: autoSearch})
})


window.close();
}

// This is an event listener that detects clicks on our "Start Random Search" button
document.getElementById('buttonTwo').addEventListener('click', insertScript)


function autoSearch() {

const searchTerms = ["PC and Mobile", "Lifestyle", "Hardware", "Windows", "Mac",
"Linux", "Android", "Apple", "Internet", "Security",
"Programming", "Entertainment", "Productivity", "Career", "Creative",
"Gaming", "Social Media", "Smart Home", "DIY", "Review"];


let selectorNumber = Math.floor(Math.random() * 20);


let selection = searchTerms[selectorNumber];


document.getElementById("js-search").click();


var searchBar = document.getElementById("js-search-input");


searchBar.value = searchBar.value + selection;


document.getElementById("searchform2").submit();
}

Step 5: Adding Your Files to Chrome://extensions

The files you just produced should now be added to the Chrome extensions page. After that, the extension will be available in Chrome and will automatically update anytime you make changes to your files.

  How to Add a Printer to a Chromebook

Open Google Chrome, go to chrome:/extensions, and ensure that the Developer Mode slider in the upper right corner is turned on.

Click Load Unpacked in the upper left corner, then choose the folder containing your extension files and click Select Folder.

Once your extension has been loaded, click the puzzle piece icon in the upper right corner to pin it to the main taskbar for quicker access.

You should now be able to see the finished extension in your browser. It is important to note that this extension will only function on the MUO website or websites that use the same ID for their search button and bar.

Building a Google Chrome Extension

This post merely touches the surface of the functionalities that you may include into your own Google Chrome extension. Once you’ve mastered the fundamentals, it’s definitely worth your time to experiment with your own ideas.

Chrome extensions may help you improve your surfing experience, but avoid some of the known sketchy Chrome extensions for safe and secure online.

You are looking for information, articles, knowledge about the topic How to Create Your Own Google Chrome Extension on internet, you do not find the information you need! Here are the best content compiled and compiled by the achindutemple.org team, along with other related topics such as: Chrome.

Similar Posts