index.html

<meta charset="utf-8" />
<title>Clipboard</title>

<div id="area"></div>

<script>
  const electron = require("electron");
  const ipc = electron.ipcRenderer;

  const loop = async () => {
    const text = ipc.sendSync("clipboard", "yokose");
    document.querySelector("#area").textContent = text;
    setTimeout(() => {
      loop();
    }, 2000);
  };
  loop();
</script>

<style>
  body {
    background-color: rgba(24, 24, 24, 0.7);
    color: #fff;
    -webkit-app-region: drag;
    -webkit-user-select: none;
    font-size: small;
    margin: 0;
    overflow: hidden;
  }
</style>

main.js

const electron = require("electron");
const { clipboard } = require("electron");

const BrowserWindow = electron.BrowserWindow;
const app = electron.app;
const ipc = electron.ipcMain;

app.on("ready", () => {
  const window = new BrowserWindow({
    width: 200,
    height: 40,
    transparent: true,
    alwaysOnTop: true
    frame: false,
    hasShadow: false,
    webPreferences: {
      nodeIntegration: true,
    },
  });

  window.loadURL("file://" + __dirname + "/index.html");
  window.setMenu(null);

  ipc.on("clipboard", (e, a) => {
    const text = clipboard.readText();
    e.returnValue = text;
  });
});

package.json

{
  "name": "clip_widget",
  "version": "0.0.1",
  "main": "main.js"
}