How to create a Webview bar on wlroots (Hyprland).

wayland-bar.py

import gi

gi.require_version("Gtk", "3.0")
gi.require_version("Gdk", "3.0")
from gi.repository import Gdk, Gtk

gi.require_version("WebKit2", "4.0")

try:
    gi.require_version("GtkLayerShell", "0.1")
except ValueError:
    import sys

    raise RuntimeError(
        "\n\n"
        + "If you haven't installed GTK Layer Shell, you need to point Python to the\n"
        + "library by setting GI_TYPELIB_PATH and LD_LIBRARY_PATH to <build-dir>/src/.\n"
        + "For example you might need to run:\n\n"
        + "GI_TYPELIB_PATH=build/src LD_LIBRARY_PATH=build/src python3 "
        + " ".join(sys.argv)
    )

from gi.repository import GtkLayerShell, WebKit2
import os


def absolute_filepath(filepath):
    root = os.path.dirname(os.path.realpath(__file__))
    return os.path.join(root, filepath)


settings = WebKit2.Settings()
# self.settings.set_enable_page_cache(True)
# self.settings.set_enable_offline_web_application_cache(True)
# settings.set_property("javascript-can-access-clipboard", True)
# self.settings.set_property('javascript-can-open-windows-automatically', True)
settings.set_property("enable-developer-extras", True)

manager = WebKit2.UserContentManager()
webview = WebKit2.WebView.new_with_user_content_manager(manager)
webview.set_settings(settings)

webview.set_background_color(
    Gdk.RGBA(
        red=0,
        green=0,
        blue=0,
        alpha=0.5,
    )
)

stylesheet = b"""
window {
  background-color: transparent;
}
"""
style_provider = Gtk.CssProvider()
style_provider.load_from_data(stylesheet)
Gtk.StyleContext.add_provider_for_screen(
    Gdk.Screen.get_default(),
    style_provider,
    Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION,
)


window = Gtk.Window()
window.set_name("webBar")

label = Gtk.Label(label="GTK Layer Shell with Python!")
window.add(webview)


start_url = "file://" + absolute_filepath("index.html")
webview.load_uri(start_url)


# the screen contains all monitors
screen = window.get_screen()
width = screen.width()  # width = Gdk.Screen.width()
print("width: %d" % width)
window.set_size_request(width - 24, 40)

GtkLayerShell.init_for_window(window)
# treat it like a dock
GtkLayerShell.auto_exclusive_zone_enable(window)
GtkLayerShell.set_margin(window, GtkLayerShell.Edge.BOTTOM, 10)
GtkLayerShell.set_anchor(window, GtkLayerShell.Edge.BOTTOM, 1)


window.show_all()
window.connect("destroy", Gtk.main_quit)
Gtk.main()