“Within our current life, we are more eager to use social media apps and the Google Search engine for our entertainment and search purposes, i.e., research some educational topic via the “Google” search engine and gain general knowledge as well. To use the Google search engine to search for something, we must have some browser already installed on our mobile phones, laptops, or personal computers. One of the most used and efficient browsers of today’s century is the “Google Chrome” browser which came up with many good functionalities along with the utility of extension. The “Extension” is the plugin found in any browser to restrict or allow websites and different functions. These extensions do not usually come inbuilt; you have to add each extension to your browser separately whenever required. If you are a little expert in technology, then you may know the use of manifest JSON files to create and add an extension in a few steps. Hence, this article will cover all those steps to create a new extension on the Google Chrome browser.
Before taking a look at the method to create an extension, you need to ensure that your Google Chrome browser is already launched and the “Google” Search Engine doesn’t contain any background. You can see that the image attached below has no background for the search engine “Google.com,” i.e., white background only.”
Add Extension Folder
Open your Visual Studio Code tool quickly from the apps of your Windows system. It might take up to 1 minute to properly open the Visual Studio Code and enable it for our use. After it has been launched properly and is ready for utilization, we have added the already generated folder “Extension” in it via the “File” menu list at the top taskbar shown below. After creating the “Extension” folder, we have added another folder named “image” in it that contains the images to be used as an icon for the extension on the browser. Along with that, we have added one “manifest.json” file and one javascript file named “script.js” to create a new extension and add it to the browser. Let’s start from the manifest.json file by double clicking on it to start working in JSON to create and use an extension to change the background of “Google”.
Create Manifest File
Within the manifest.json file, you should add the shown-below “JSON” code. This code is the actual configuration script to create and add an extension to our Google Chrome Browser. This JSON code has been started with the initialization for the variable manifest version as “2” and the name of an extension to be created, i.e., “Change Background”. After this, we added the short description for our extension within the “description” variable.
Along with that, we have added the version of an extension as “1.0”. After all the basic configurations for the “extension” are created, we need to add the path to the image icon to be used as an icon for the extensions. The variable “browser” has been defined to set the extension icon for the top taskbar of the Google Chrome browser, i.e., where all the extensions are displayed after enabling them for future use for particular or all sites. After this, we have added the path to three image files of different sizes so that the browser can use different files each time.
Along with that, the “page_action” variable has been used to display what image is to be displayed after clicking on the “extensions” icon from the top taskbar of Google Chrome. The “Default_icon” variable has been used within it, along with its three different path values for the images to be used as icons on each reload. Three different image files are utilized for this purpose. The last content_scripts variable takes a total of 2 new variables in it, i.e., matches and CSS. The “matches” variable contains the path to the website to be altered after the use of this new extension is created. Along with that, the variable “CSS” contains the name of a CSS file to be used for the styling of Google.com after applying for the extension, i.e., styling Google.com after each reload on enabling the extension. Now that this code is complete and ready for use, just save it quickly and move toward the “main.css” file.
Within the main.css CSS file, we have been adding styling for our manifest file extension to be created. The styling would be applied using the html “body” tag, i.e., to be applied on the full “body” area of the manifest file. We have been setting the new background for Google.com using the “URL” of an image file from the search engine. Now, save your code before anything.
After completing the required codes, i.e., manifest.json and main.css file, we have to open the Extensions utility on the Google Chrome browser via the URL chrome://extensions” in the new tab. The Extensions utility area is opened. From its developer mode, you need to load the unpacked “Extension” folder from your local system to make it an extension via the button “load unpackaged” displayed in the image below. The extension has been efficaciously added to the Chrome browser, as exhibited. Remove the errors to make it work fully.
From the “extension” icon, choose the “Change Background” extension to display it on the taskbar, i.e., the “C” icon extension.
After reloading Google.com, its background got updated using this extension.
Conclusion
Starting from the explanation of using the browsers in the Windows system, we have also discussed the importance of the extensions in any browser. After the brief explanation of extensions, we have explained the method to use the manifest JSON file to create an extension for the Google Chrome browser and how to use it to change of background for the “Google.com” search engine. After loading the extension on Google chrome, we have been using it on Google.com to change its background.
