initial commit

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();
+    },
+  });
+}