How to Create Your Own Google Chrome Extension

0

Have you ever found yourself dissatisfied with the features that come with your web browser? Even with hours spent browsing the Google Web Store under your belt, it’s not always easy to click “download” to improve your web browsing experience.

This is where browser extensions come in. In this article, we’ll explore the process of creating your own DIY Google Chrome extension from scratch.

What is a Google Chrome extension?

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. However, extending these stock features can have many different benefits. This is why browser developers usually allow extensions, add-ons and plug-ins to be created for them.

Google Chrome offers this feature, making it easy for anyone with web development experience to create their own Chrome extensions. You can create an extension using HTML, JavaScript, and CSS, like many websites.

Unlike a website, extensions can run in the background while you browse, sometimes even interacting with the sites you visit.

What will our Google Chrome extension do?

We are going to create a simple Chrome extension that will allow you to visit the Make Use Of website and perform a random search based on the categories of items found on the site. It’s a quick and easy project, but you’ll still learn a lot.

You will learn to

  • Create a Google Chrome Extension
  • Insert custom code into web pages using a Chrome extension
  • Create event listeners and simulate clicks
  • Generate random numbers
  • Working with Arrays and Variables

USE VIDEO OF THE DAY

Build Your Own DIY Chrome Extension

Google has made it surprisingly easy to create your own Chrome extensions, so it won’t be long before something works. Following the steps below will only take 10-15 minutes, but we encourage you to experiment with your own code as well.

Step 1: Creating files

You can store your extension on your own local machine when you don’t plan 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 whatever names you want, as long as you modify your code accordingly.

You must place these files in the same root folder.

Step 2: Create the manifest file

The manifest file comes with every Google Chrome extension. It provides information about the Chrome extension while setting up some basic settings. This file should contain a name, version number, description, and version of the manifest. We’ve also included permissions and an action that loads index.html like the popup that appears for the extension.

{
"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: Build HTML and CSS

Before we can start writing our script, we need to create a basic user interface using HTML and CSS. You can use a CSS library like Bootstrap to avoid building your own, but we only need a few rules for our extension.

Our index.html file contains html, head and body tags. The head tag contains a page title and a link to our stylesheet, while the body contains an h1 tag, a button that takes you to MakeUseOf.com, and another button that we’ll use as a trigger for a script. A script tag right at the end of the document includes the script.js case.

<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, changing the style of just five elements. We have rules for our html and body tags, as well as h1 tags and our two 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: Build the JavaScript

As the last step in this process, it’s time to create our script.js file.

The first function in this file, called insertScript()is in place to insert the other function (autosearch()) in the current page. This allows us to manipulate the page and use the search features already present on the MakeUseOf.com site.

This is followed by an event listener that waits for the Start Random Search button to be clicked before calling the function we explored above.

the autosearch() the function is a bit more complicated. It starts with a table containing 20 of the categories on the MUO website, which gives us a good sample from which to draw our random searches. Following this, we use the Math.random() function to generate a random number between 0 and 19 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 search button ID, then we add it to our JavaScript code with the Click on() a function.

Like the search button, we also need to find the ID of the search bar that appears, allowing us to insert the random search term we have selected. With this complete, just submit the form to perform 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: Add your files to Chrome://extensions

Next, it’s time to add the files you just created to the Chrome Extensions page. Once you’ve done this, the extension will be accessible in Chrome and will update whenever you make changes to your files.

Open Google Chrome, navigate to chrome://extensions and make sure the developer mode slider in the top right corner is enabled.

Click on Load unpacked in the top left corner, then choose the folder where you saved your expansion files and click Select Folder.

Now that your extension is loaded, you can click on the puzzle piece icon in the upper right corner and pin your extension to the main taskbar for easier access.

You should now be able to access the completed extension in your browser. It should be kept in mind that this extension will only work on the MUO website or on websites with the same id for their button and search bar.

Build a Google Chrome Extension

This article only scratches the surface of possible features you could incorporate into your own Google Chrome extension. It’s worth exploring your own ideas once you’ve learned the basics.

Chrome extensions can help improve your browsing, but try to stay away from some of the known shady Chrome extensions for safe and secure browsing.


uninstall chrome extensions

6 Shady Google Chrome Extensions You Should Uninstall ASAP

Read more


Share.

Comments are closed.