DEV Community

It's Just Nifty
It's Just Nifty

Posted on • Originally published at niftylittleme.com on

Creating Extensions In Opera For Beginners

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!

Unsplash Image From Luca Bravo

(Image Source)

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

code -r manifest.json 
Enter fullscreen mode Exit fullscreen mode

or

touch manifest.json
Enter fullscreen mode Exit fullscreen mode

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"
    }
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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...

Showing where developer mode switch is in opera | screenshot snippet

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 ❤️

Top comments (0)