Приложения Google Chrome: как сделать прозрачный округленный фон, например, приложение Google для видеовстречи?

Как показано на следующем скриншоте, приложение для видеовстречи полностью прозрачно, и к нему также применяется теневая тень.

Я попробовал несколько подходов без везения, применяя стиль CSS для тегов "html" и "body" на странице и используя параметр "frame: none" при создании нового окна, но он не работает.

Как сделать приложение для Chrome chrome, как это сделать?

У кого-нибудь есть идея?

Вот код, на котором я экспериментирую.

mainfest.json:

{
  "manifest_version" : 2,
  "name" : "Demo App",
  "version" : "0.1",

  "description" : "Demo Purpose",
  "app" : {
    "background" : {
      "scripts" : ["background.js"]
    }
  },
  "permissions" : ["experimental"]
}

background.js:

chrome.app.runtime.onLaunched.addListener(function() {
    chrome.app.window.create("index.html", {
        frame: "none",
        id: "DemoWindow",
        resizable : false,
        innerBounds : {
            left: 600,
            maxWidth: 150,
            maxHeight: 150
        }
    });
});

index.html:

<!DOCTYPE html>
<html>
<head>

    <style type="text/css">
        .title-area {
            -webkit-app-region: drag;
        }
        html, body {
            margin: 0;
            padding: 0;
            border: none;
            outline: none;
            overflow: hidden;
            background-color: transparent;

        }
    </style>
</head>
<body>
<div class="title-area">Hello World</div>

</body>
</html>

Ответ 1