wafflestudio · minkyu97 · Nov 1, 2024 · Nov 5, 2024 · Nov 13, 2024 · Nov 13, 2024
diff --git a/package.json b/package.json
@@ -5,6 +5,7 @@
     "paper": "yarn workspace paper",
     "disk-on": "yarn workspace disk-on",
     "waffle-sans": "yarn workspace waffle-sans",
+    "web-filter": "yarn workspace web-filter",
     "archive": "yarn workspace archive",
     "lib:leon-sans-react": "yarn workspace leon-sans-react",
     "prettier:all": "yarn prettier . --write"

diff --git a/projects/web-filter/.gitignore b/projects/web-filter/.gitignore
@@ -0,0 +1,28 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# Config files
+.webextrc
+.webextrc.*
diff --git a/projects/web-filter/package.json b/projects/web-filter/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "web-filter",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "dev:web": "vite --config vite-web.config.ts",
+    "build": "tsc && vite build"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.9",
+    "@types/webextension-polyfill": "^0.10.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "typescript": "^5.3.2",
+    "vite": "^5.4.10",
+    "vite-plugin-web-extension": "^4.0.0",
+    "webextension-polyfill": "^0.10.0"
+  }
+}
diff --git a/projects/web-filter/public/coffee-filter.png b/projects/web-filter/public/coffee-filter.png
diff --git a/projects/web-filter/public/icon/128.png b/projects/web-filter/public/icon/128.png
diff --git a/projects/web-filter/public/icon/16.png b/projects/web-filter/public/icon/16.png
diff --git a/projects/web-filter/public/icon/32.png b/projects/web-filter/public/icon/32.png
diff --git a/projects/web-filter/public/icon/48.png b/projects/web-filter/public/icon/48.png
diff --git a/projects/web-filter/public/icon/96.png b/projects/web-filter/public/icon/96.png
diff --git a/projects/web-filter/src-web/App.css b/projects/web-filter/src-web/App.css
diff --git a/projects/web-filter/src-web/App.tsx b/projects/web-filter/src-web/App.tsx
@@ -0,0 +1,10 @@
+import './App.css';
+
+export default function App() {
+  return (
+    <div>
+      <h1>Team SEOEE</h1>
+      <img src="/coffee-filter.png" />
+    </div>
+  );
+}
diff --git a/projects/web-filter/src-web/index.html b/projects/web-filter/src-web/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>sample-web</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="main.tsx"></script>
+  </body>
+</html>
diff --git a/projects/web-filter/src-web/main.tsx b/projects/web-filter/src-web/main.tsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+
+import App from './App';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);
diff --git a/projects/web-filter/src-web/public/coffee-filter.png b/projects/web-filter/src-web/public/coffee-filter.png
diff --git a/projects/web-filter/src/background.ts b/projects/web-filter/src/background.ts
@@ -0,0 +1,7 @@
+import browser from 'webextension-polyfill';
+
+console.log('Hello from the background!');
+
+browser.runtime.onInstalled.addListener((details) => {
+  console.log('Extension installed:', details);
+});
diff --git a/projects/web-filter/src/content.tsx b/projects/web-filter/src/content.tsx
@@ -0,0 +1,20 @@
+import { createRoot } from 'react-dom/client';
+
+import { WaveFilter } from './filters/WaveFilter';
+
+const app = document.createElement('div');
+
+app.id = 'web-filter-app';
+app.style.display = 'none';
+
+document.body.appendChild(app);
+
+createRoot(app).render(
+  <svg>
+    <defs>
+      <WaveFilter />
+    </defs>
+  </svg>,
+);
+
+document.body.style.filter = 'url(#filter)';
diff --git a/projects/web-filter/src/filters/WaveFilter.tsx b/projects/web-filter/src/filters/WaveFilter.tsx
@@ -0,0 +1,31 @@
+export function WaveFilter() {
+  return (
+    <filter
+      id="filter"
+      x="-20%"
+      y="-20%"
+      width="140%"
+      height="140%"
+      filterUnits="objectBoundingBox"
+      primitiveUnits="userSpaceOnUse"
+      color-interpolation-filters="linearRGB"
+    >
+      <feTurbulence
+        type="turbulence"
+        baseFrequency="0.01 0.05"
+        numOctaves="2"
+        seed="2"
+        stitchTiles="noStitch"
+        result="turbulence"
+      />
+      <feDisplacementMap
+        in="SourceGraphic"
+        in2="turbulence"
+        scale="20"
+        xChannelSelector="G"
+        yChannelSelector="A"
+        result="displacementMap"
+      />
+    </filter>
+  );
+}
diff --git a/projects/web-filter/src/manifest.json b/projects/web-filter/src/manifest.json
@@ -0,0 +1,27 @@
+{
+  "{{chrome}}.manifest_version": 3,
+  "{{firefox}}.manifest_version": 2,
+  "icons": {
+    "16": "icon/16.png",
+    "32": "icon/32.png",
+    "48": "icon/48.png",
+    "96": "icon/96.png",
+    "128": "icon/128.png"
+  },
+  "{{chrome}}.action": {
+    "default_popup": "src/popup.html"
+  },
+  "{{firefox}}.browser_action": {
+    "default_popup": "src/popup.html"
+  },
+  "background": {
+    "{{chrome}}.service_worker": "src/background.ts",
+    "{{firefox}}.scripts": ["src/background.ts"]
+  },
+  "content_scripts": [
+    {
+      "matches": ["<all_urls>"],
+      "js": ["src/content.tsx"]
+    }
+  ]
+}
diff --git a/projects/web-filter/src/pages/Popup.css b/projects/web-filter/src/pages/Popup.css
@@ -0,0 +1,33 @@
+div {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    align-items: center;
+    justify-content: center;
+}
+
+img {
+    width: 200px;
+    height: 200px;
+}
+
+h1 {
+    font-size: 18px;
+    color: white;
+    font-weight: bold;
+    margin: 0;
+}
+
+p {
+    color: white;
+    opacity: 0.7;
+    margin: 0;
+}
+
+code {
+    font-size: 12px;
+    padding: 2px 4px;
+    background-color: #ffffff24;
+    border-radius: 2px;
+}
diff --git a/projects/web-filter/src/pages/Popup.tsx b/projects/web-filter/src/pages/Popup.tsx
@@ -0,0 +1,17 @@
+import { useEffect } from 'react';
+
+import './Popup.css';
+
+export default function () {
+  useEffect(() => {
+    console.log('Hello from the popup!');
+  }, []);
+
+  return (
+    <div>
+      <img src="/coffee-filter.png" />
+      <h1>Web Filter</h1>
+      <p>by. Team Seoee - Interactive Study</p>
+    </div>
+  );
+}
diff --git a/projects/web-filter/src/popup.css b/projects/web-filter/src/popup.css
@@ -0,0 +1,11 @@
+html,
+body {
+  width: 300px;
+  height: 400px;
+  padding: 0;
+  margin: 0;
+}
+
+body {
+  background-color: rgb(36, 36, 36);
+}
diff --git a/projects/web-filter/src/popup.html b/projects/web-filter/src/popup.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./popup.css" />
+    <title>Popup</title>
+  </head>
+
+  <body></body>
+
+  <script type="module" src="./popup.tsx"></script>
+</html>
diff --git a/projects/web-filter/src/popup.tsx b/projects/web-filter/src/popup.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+
+import Popup from './pages/Popup';
+
+createRoot(document.body).render(
+  <React.StrictMode>
+    <Popup />
+  </React.StrictMode>,
+);
diff --git a/projects/web-filter/src/vite-env.d.ts b/projects/web-filter/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/projects/web-filter/tsconfig.json b/projects/web-filter/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src", "src-web"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/projects/web-filter/tsconfig.node.json b/projects/web-filter/tsconfig.node.json
@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts", "vite-web.config.ts"]
+}
diff --git a/projects/web-filter/vite-web.config.ts b/projects/web-filter/vite-web.config.ts
@@ -0,0 +1,9 @@
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  root: './src-web',
+  plugins: [react()],
+  server: { port: 5174 },
+});
diff --git a/projects/web-filter/vite.config.ts b/projects/web-filter/vite.config.ts
@@ -0,0 +1,24 @@
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
+import webExtension, { readJsonFile } from 'vite-plugin-web-extension';
+
+function generateManifest() {
+  const manifest = readJsonFile('src/manifest.json');
+  const pkg = readJsonFile('package.json');
+  return {
+    name: pkg.name,
+    description: pkg.description,
+    version: pkg.version,
+    ...manifest,
+  };
+}
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    react(),
+    webExtension({
+      manifest: generateManifest,
+    }),
+  ],
+});