Table of Contents
Many people may not realize how easy it is to Make Chrome Extension. It’s also quite fun. We may let our imaginations run wild and change each website to make it seem the way we want. Before we start, let’s make two subfolders in our repository: extension and react-chrome-app.
The files for our Chrome extension will be in the extension folder, and a react app will be made in the react-chrome-app folder. You can use your coding talents to make something that will help you execute repetitive tasks with only a few clicks by making a browser extension. You can also go to the official Chrome support site to know more information.
If you want to do that, it’s a good idea to understand how to develop a Chrome extension. But you have to do a lot of Googling and Stack Overflow to use the more advanced capabilities. Let’s develop an interim Chrome extension that interacts with the page: it will look for the first external link on the page and open it in a new tab.
Ways to Make Chrome Extension
Building the Manifest File
Every Google Chrome Extension has a manifest file. It gives Chrome information about the extension and also sets up some basic settings. This file needs a name, a version number, a description, and a version of the manifest. We’ve also added permissions and an action that loads index.html as the extension’s popup.
Building the JavaScript
As the last stage in this procedure, we need to build our script.js file. The other code, autoSearch(), will be added to the current page by the second function in this file, which is named insertScript(). This is followed by an event listener that waits till the Start Random Search button is hit before invoking the method we looked at previously.
The autoSearch() function is a bit more difficult to understand. It starts with an array that has 20 of the MUO website’s categories. This gives us a fair sample from which to choose when we run our random searches. Then, we use the Math.random() function to produce a random number between 0 and 19 so we may pick an element from our array.
Now that we have our search word, we need to pretend to click a button to open the MUO search box. First, we utilize the Chrome developer console to obtain the ID of the search button. Then, we use the click() function to add this ID to our JavaScript code.
Just like we need to identify the ID of the search button, we need to find the ID of the search bar that displays. This will let us type in the random search word we chose. Once this is done, all we have to do to start our search is send the form.
Building the HTML & CSS
We need to make a basic user interface (UI) using HTML and CSS before we can start coding our script. You can use a CSS library like Bootstrap instead of making your own, but our addon only needs a few rules.
There are html tags, head tags, and body tags in our index.html file. The page title and a link to our stylesheet are in the head tag. In the body, there is a h1 tag, a button that brings you, and another button that will start a script.
The script.js file is linked to by a script tag at the very end of the content. Even though our HTML file is simple, our CSS file is even simpler. It just changes the style of five elements. There are guidelines for our html tags, body tags, h1 tags, and both buttons.
Adding Your Files to Chrome://extensions
Next, you need to add the files you just made to the Chrome extensions page. Once you’ve done this, you’ll be able to use the extension in Chrome, and it will automatically update itself whenever you edit your files.
- Open Google Chrome, navigate to chrome://extensions, and make sure the slider in the top right corner that says “Developer Mode” is set to “on.”
- In the top left corner, click Load Unpacked. Then, choose the folder where you saved your extension files and click Select Folder.
- Now that your extension is loaded, you can click the puzzle piece icon in the top right corner to pin it to the main taskbar so it’s simpler to find.
- Now that the extension is done, you should be able to use it in your browser. It’s important to remember that this extension will only work on the MUO website or other websites whose search button and bar have the same ID.
Creating the Files
When you’re not going to share your extension, you can keep it on your own computer. To make our extension, we only need to make four separate files: an HTML page, a CSS file, a JavaScript file, and a JSON file.
We gave our files the names index.html, style.css, script.js, and manifest.json. This name must be on the manifest file for it to operate right, but you can give the others any name you want as long as you change your code to match. These files should go in the same root folder.