CODEWITHSUNDEEP

cssgoogle-chrome-extensionbrowserblur

Kartik

Reputation: 1

Is it possible to change background opacity of a custom browser extension and add blur filter?

I am building a simple browser extension and I want make its background blur, I tried the usual way with CSS, but it doesn't seem to work.
It currently looks like this: Image of browser extension
HTML:

<html>
    <head>
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <input type="text" id="input-el">
        <button id="input-btn">SAVE INPUT</button>
        <button id="tab-btn">SAVE TAB</button>
        <button id="delete-btn">DELETE ALL</button>
        <ul id="ul-el">
        </ul>
        <script src="index.js"></script>
    </body>
</html>

CSS of body :

body {
    margin: 0;
    padding: 10px;
    font-family: Arial, Helvetica, sans-serif;
    min-width: 400px;
    border-radius: 10px;
    backdrop-filter: blur(5px);
    background-color: rgba(0,0,0,0.2);
}

manifest file :

{
    "manifest_version": 3,
    "version": "1.0",
    "name": "Leads tracker",
    "action": {
        "default_popup": "index.html",
        "default_icon": "icon.png"
    },
    "permissions": [
        "tabs"
    ]
}

Upvotes: 0

Views: 23

Answers (0)

Related Questions