Creating Extensions In Opera For Beginners

Published at

9/25/2024

Categories

4 categories in total

Opera is my favorite browser! I mean, I'm using it right now. If you don't know, now you know. Besides being awesome, Opera makes it easy to create extensions...which is pretty awesome. So, why not share this easy guide on how to do it? This is gonna be quick, so let's dive in!

(Image Source)

Create your project directory, and then a manifest.json file by running:

code -r manifest.json

touch manifest.json

BTW, code -r manifest.json is used in VSCode (Visual Studio Code). Let's continue!

Add this code to your manifest.json file:

{
    "manifest_version": 2,
    "name": "First Opera Extension",
    "description": "example extension",
    "version": "1.0",
    "browser_action": {
        "default_popup": "index.html",
        "default_icon": "icon.png",
        "default_title": "My first extension"
    }
}

Excellent!

Now, create a index.html file and add code, similar to this:

<!DOCTYPE html>
<html style="width: 357px; height: 300px; border: 1px solid #e7e9eb; border-radius: 10px;">
    <body>
        <div>
            <h1>Hello, world!</h1>
        </div>
    </body>
</html>

Make sure you grab an icon from somewhere, or you can create one. Either way, add an icon for your extension and title it icon.png .

In Opera, type into the browser's address bar opera://extensions or use the shortcut cmd/ctrl + shift + E. Then enable developer mode. You should see a switch...

Click on "Load Unpacked Extension" and select the folder of your project.

And then...you're done.

Congrats on your extension.

If you like me, and I know you do, subscribe to my newsletter!

Until next time, nerds...

Happy Coding!

Love ya ❤️

dev-resources.site

Creating Extensions In Opera For Beginners