initial commit

entrypoints/content/App.vue

@@ -0,0 +1,42 @@
+<script lang="ts" setup>
+import stopImage from "~/assets/stop.png";
+import Todo from "@/components/Todo.vue";
+</script>
+
+<template>
+    <div class="main">
+        <img class="logo" :src="stopImage" />
+        <h1 class="message">[go back to your work]</h1>
+        <Todo />
+    </div>
+</template>
+
+<style>
+body {
+    margin: 0;
+}
+
+.main {
+    font-family: monospace;
+    position: fixed;
+    align-items: center;
+    text-align: center;
+    width: 100%;
+    height: 100%;
+    background: #222222;
+    color: #ffffff;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    z-index: 99999;
+}
+
+img.logo {
+    width: 25%;
+}
+
+h1.message,
+img.logo {
+    filter: drop-shadow(0 0 1em #ffffff);
+}
+</style>

entrypoints/content/index.ts

@@ -0,0 +1,56 @@
+import { ContentScriptContext } from "#imports";
+import App from "./App.vue";
+import { featureEnableBlock } from "@/utils/storage";
+import { createApp } from "vue";
+import { createProxyService } from '@webext-core/proxy-service';
+import { BlockedSite } from "@/utils/types";
+const blockedSitesRepo = createProxyService(BLOCKED_SITES_REPO_KEY);
+
+export default defineContentScript({
+  matches: ["*://*/*"],
+  cssInjectionMode: "ui",
+
+  async main(ctx) {
+    const ui = await defineOverlay(ctx);
+    const isBlockEnabled = await featureEnableBlock.getValue();
+    const currentDomain = window.location.hostname;
+    const blockedSites = await blockedSitesRepo.getAll()
+
+    function isOnBlockList() {
+      return (
+        blockedSites.filter(function (blockedSite: BlockedSite) {
+          return (blockedSite.url == currentDomain || "www." + blockedSite.url == currentDomain) && blockedSite.blocked;
+        }).length > 0
+      );
+    }
+
+    function injectToWebsite() {
+      if (!isBlockEnabled || !isOnBlockList()) return;
+      console.log("[ba-ka] site blocked! please go back to your work lol");
+      ui.mount();
+    }
+
+    injectToWebsite();
+
+    ctx.addEventListener(window, "wxt:locationchange", (event) => {
+      injectToWebsite();
+    });
+  },
+});
+
+function defineOverlay(ctx: ContentScriptContext) {
+  return createShadowRootUi(ctx, {
+    name: "let-me-focus-block",
+    position: "overlay",
+    zIndex: 9999,
+    onMount(container, _shadow, shadowHost) {
+      const app = createApp(App);
+      app.mount(container);
+      shadowHost.style.pointerEvents = "none";
+      return app;
+    },
+    onRemove(app) {
+      app?.unmount();
+    },
+  });
+}