+ 
+
+
+ );
+};
diff --git a/webapp/_webapp/src/views/extension-popup/components/StepItem.tsx b/webapp/_webapp/src/views/extension-popup/components/StepItem.tsx
new file mode 100644
index 00000000..2bf7ec68
--- /dev/null
+++ b/webapp/_webapp/src/views/extension-popup/components/StepItem.tsx
@@ -0,0 +1,13 @@
+import { ReactNode } from "react";
+
+type StepItemProps = {
+ number: number;
+ children: ReactNode;
+};
+
+export const StepItem = ({ number, children }: StepItemProps) => (
+ PaperDebugger
+How to use
+
+
+ + Self-hosted Overleaf?{" "} + { + e.preventDefault(); + openSettingsPage(); + }} + > + Allow PaperDebugger access here. + +
+
+ {number}.
+
+);
diff --git a/webapp/_webapp/src/views/extension-popup/components/Steps.tsx b/webapp/_webapp/src/views/extension-popup/components/Steps.tsx
new file mode 100644
index 00000000..df60b53f
--- /dev/null
+++ b/webapp/_webapp/src/views/extension-popup/components/Steps.tsx
@@ -0,0 +1,21 @@
+import { ReactNode } from "react";
+import { StepItem } from "./StepItem";
+
+export type Step = {
+ number: number;
+ content: ReactNode;
+};
+
+type StepsProps = {
+ steps: Step[];
+};
+
+export const Steps = ({ steps }: StepsProps) => (
+ {children}
+
+ {steps.map((step) => (
+
+ {step.content}
+
+ ))}
+
+);
diff --git a/webapp/_webapp/src/views/extension-settings/app.tsx b/webapp/_webapp/src/views/extension-settings/app.tsx
new file mode 100644
index 00000000..9deeb968
--- /dev/null
+++ b/webapp/_webapp/src/views/extension-settings/app.tsx
@@ -0,0 +1,25 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { Providers } from "../../providers";
+import { ExtensionSettings } from "./components/ExtensionSettings";
+import "../../index.css";
+
+const rootElement = document.getElementById("root");
+if (!rootElement) {
+ throw new Error("Root element not found");
+}
+
+const root = createRoot(rootElement);
+root.render(
+ import.meta.env.DEV ? (
+
+
+ );
+};
diff --git a/webapp/_webapp/src/views/extension-settings/components/HostPermissionWidget/HostPermissionInput.tsx b/webapp/_webapp/src/views/extension-settings/components/HostPermissionWidget/HostPermissionInput.tsx
new file mode 100644
index 00000000..7986d078
--- /dev/null
+++ b/webapp/_webapp/src/views/extension-settings/components/HostPermissionWidget/HostPermissionInput.tsx
@@ -0,0 +1,52 @@
+import { Button, Input } from "@heroui/react";
+import React, { useCallback } from "react";
+import { getMessageClassName, useHostPermissionStore } from "./useHostPermissionStore";
+
+export const HostPermissionInput = () => {
+ const { permissionUrl, setPermissionUrl, submitPermissionRequest, isSubmitting, message } = useHostPermissionStore();
+
+ const handleKeyPress = useCallback(
+ (e: React.KeyboardEvent
+
+ PaperDebugger Settings
+
+ setPermissionUrl(e.target.value)}
+ onKeyDown={handleKeyPress}
+ classNames={{
+ input: "font-mono",
+ }}
+ />
+
+
+
+ Example: *://*.overleaf.com/*{" "}
+
+ Example: *://sharelatex.gwdg.de/*{" "}
+
+
+
+
+ {message && (
+ {message.text}
+ )}
+
+ );
+};
diff --git a/webapp/_webapp/src/views/extension-settings/components/HostPermissionWidget/HostPermissionList.tsx b/webapp/_webapp/src/views/extension-settings/components/HostPermissionWidget/HostPermissionList.tsx
new file mode 100644
index 00000000..9a7ee55d
--- /dev/null
+++ b/webapp/_webapp/src/views/extension-settings/components/HostPermissionWidget/HostPermissionList.tsx
@@ -0,0 +1,27 @@
+import { HostPermissionListItem } from "./HostPermissionListItem";
+import { useHostPermissionStore } from "./useHostPermissionStore";
+
+export const HostPermissionList = () => {
+ const { permissions, isLoadingPermissions } = useHostPermissionStore();
+
+ if (isLoadingPermissions) {
+ return Loading permissions...
; + } + + if (permissions.length === 0) { + return ( +
+
+ );
+ }
+
+ return (
+ No permissions granted yet.
+Please request permission for the website you want to use.
+
+ {permissions.map((item) => (
+
+ );
+};
diff --git a/webapp/_webapp/src/views/extension-settings/components/HostPermissionWidget/HostPermissionListItem.tsx b/webapp/_webapp/src/views/extension-settings/components/HostPermissionWidget/HostPermissionListItem.tsx
new file mode 100644
index 00000000..c053a53f
--- /dev/null
+++ b/webapp/_webapp/src/views/extension-settings/components/HostPermissionWidget/HostPermissionListItem.tsx
@@ -0,0 +1,17 @@
+import { PermissionItem } from "./hostPermissionTypes";
+
+interface HostPermissionItemProps {
+ item: PermissionItem;
+}
+
+export const HostPermissionListItem = ({ item }: HostPermissionItemProps) => {
+ return (
+
+
+ );
+};
diff --git a/webapp/_webapp/src/views/extension-settings/components/HostPermissionWidget/HostPermissionWidget.tsx b/webapp/_webapp/src/views/extension-settings/components/HostPermissionWidget/HostPermissionWidget.tsx
new file mode 100644
index 00000000..8e962086
--- /dev/null
+++ b/webapp/_webapp/src/views/extension-settings/components/HostPermissionWidget/HostPermissionWidget.tsx
@@ -0,0 +1,32 @@
+import { useEffect } from "react";
+import { HostPermissionInput } from "./HostPermissionInput";
+import { HostPermissionList } from "./HostPermissionList";
+import { useHostPermissionStore } from "./useHostPermissionStore";
+
+export const HostPermissionWidget = () => {
+ const { message, loadPermissions, clearMessage } = useHostPermissionStore();
+
+ useEffect(() => {
+ loadPermissions();
+ }, [loadPermissions]);
+
+ useEffect(() => {
+ if (!message) return;
+ const timer = setTimeout(() => clearMessage(), 5000);
+ return () => clearTimeout(timer);
+ }, [message, clearMessage]);
+
+ return (
+
+
+ Host Permission
+ {item.origin}
+ Granted
+
+
+ );
+};
diff --git a/webapp/_webapp/src/views/extension-settings/components/HostPermissionWidget/hostPermissionTypes.ts b/webapp/_webapp/src/views/extension-settings/components/HostPermissionWidget/hostPermissionTypes.ts
new file mode 100644
index 00000000..7a9ea52c
--- /dev/null
+++ b/webapp/_webapp/src/views/extension-settings/components/HostPermissionWidget/hostPermissionTypes.ts
@@ -0,0 +1,11 @@
+export type MessageType = "success" | "error" | "info";
+
+export interface PermissionMessage {
+ text: string;
+ type: MessageType;
+}
+
+export interface PermissionItem {
+ origin: string;
+ granted: boolean;
+}
diff --git a/webapp/_webapp/src/views/extension-settings/components/HostPermissionWidget/useHostPermissionStore.ts b/webapp/_webapp/src/views/extension-settings/components/HostPermissionWidget/useHostPermissionStore.ts
new file mode 100644
index 00000000..780e91e9
--- /dev/null
+++ b/webapp/_webapp/src/views/extension-settings/components/HostPermissionWidget/useHostPermissionStore.ts
@@ -0,0 +1,139 @@
+import { create } from "zustand";
+import { requestHostPermission } from "../../../../intermediate";
+import { PermissionItem, PermissionMessage } from "./hostPermissionTypes";
+
+const normalizeWildcardPattern = (url: string) => {
+ const trimmed = url.trim();
+ if (!trimmed) {
+ return { valid: false as const, error: "Please enter a URL" };
+ }
+
+ // Chrome host permission pattern: Host Permissions
+ + Add your self-hosted Overleaf domain so PaperDebugger can interact with it. +
+
+
+