Google Chrome extensions aim to add extra functionality to the browser and/or separate pages. The example below demonstrates how to create a simple extension from scratch. The functionality will be implemented - navigation back and forward with mouse gestures.
The core component of every Chrome extension is the manifest.json file. So let's create the base version of the file:
{
"name": "Mouse Gestures",
"version": "1.0",
"manifest_version": 2,
"browser_action": {
"default_popup": "index.html"
},
"content_security_policy": "script-src 'self' 'sha256-GgRxrVOKNdB4LrRsVPDSbzvfdV4UqglmviH9GoBJ5jk='; object-src 'self'"
}
As declared in the manifest.json file, we have to add the index.html file. It could be any simple 'hello-world' html file like this:
<!DOCTYPE html>
<html lang="en">
<body>
Hello, I am an awesome chrome extension!!
</body>
</html>
So, the first version of the extension is ready, let's install it. Open chrome://extensions/ page, turn on the 'Developer mode' toggle on the top panel, then press the 'Load unpacked' button and select the folder with the extension we just created. The new extension appeared on the list and the 'M' icon appeared on the top panel too. If we click it we can see the popup:
