Building a Google Chrome Extension Using JavaScript, HTML, And CSS
GitHub repository: https://github.com/Fernandocgomez/google-app
What are Google Chrome Extensions?
Google chrome extensions are simple apps that add extra functionalities to the google chrome browser. They are building using web technologies such as HTML, CSS, and JavaScript. In this short blog post will be going through the basic structure of a simple Google chrome extension that will display a hello world and a button on a popup, once we click the button the popup should change the text to Spanish in a different color, and lastly how to install the app on our Google browser.
Structure of a Very Basic Google Extension
Manifest
The manifest.json is a very important file that all extensions need to have. This tells Google Chrome what exactly the app does. As a very minimum the manifest needs to have: name, version, and manifest version. On this tutorial, we will be also adding: description, icons, browser action, default popup, and permissions.
· Name: The name of the app
· Version: Your app version (This is up to you)
· Manifest version: We will use 2 which is the newest version. If you want to use another version, please refer to this link for more information https://developer.chrome.com/extensions/manifestVersion
· Description: A quick description of the app
· Icons: We can add up to 3 icons to show on the browser and Google extension page, but for this example, we will only use one image. Google automatically will resize it to fit all sizes.
· Browser Action: Where the action will be taking place. In our case, we want the action to take place on the popup.
· Default title: The title of the app.
· Default popup: Here we need to select our HTML file.
· Permissions: Some apps are built to only work for some specific web sites. In our case, we want our app to work on all websites that start with http or https.
Manifest.json
{"manifest_version": 2,
"name": "Hello world extention","version": "1.0","description": "A hello wolrd app","icons": {"128": "icon.png"},
"browser_action": {"default_title": "A hello wolrd app","default_popup": "popup.html"},
"permissions": ["http://*/*","https://*/*"]}
Popup.html
On the popup.html, we will be writing our HTML and connecting our CSS and JavaScript files.
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="/style-sheet.css"></head><body id="body"><h1>Hello World!</h1><button id="btn">Show it in Spanish!</button><script src="/popup.js"></script></body></html>
Popup.js
On this file, we will be writing a JavaScript function and event listener attached to the button.
document.getElementById('btn').addEventListener("click", function(){document.getElementById('body').innerHTML = "<h1 class='h1'>Hola Mundo! 🌎</h1>";});
Style.css
On this file, we will style the elements on the HTML file.
h1 {color: red}.h1 {color: blue;}
Icon
This is just a PNG file.
Install Our Extension On Google Chrome
On our Google Chrome browser, type chrome://extensions/
On the right top corner, turn on the Developer mode.
Click on Load unpacked and select the folder where your project is.
After that, the app should appear on the browser showing the icon you picked.
Now, go to any website and click on the extension to see what you just built.
