mwATcdM_6+yWIO
z*ZRH~uXE@#p$XTbCt5j7j2=86e{9>HIB6xDzV+vAo&B?KUiMP|ttOElepnl%|DPqL
b{|{}U^kRn2wo}j7|0ATu<;8xA7zX}7|B6mN
literal 0
HcmV?d00001
diff --git a/public/manifest.json b/public/manifest.json
new file mode 100644
index 0000000..080d6c7
--- /dev/null
+++ b/public/manifest.json
@@ -0,0 +1,25 @@
+{
+ "short_name": "React App",
+ "name": "Create React App Sample",
+ "icons": [
+ {
+ "src": "favicon.ico",
+ "sizes": "64x64 32x32 24x24 16x16",
+ "type": "image/x-icon"
+ },
+ {
+ "src": "logo192.png",
+ "type": "image/png",
+ "sizes": "192x192"
+ },
+ {
+ "src": "logo512.png",
+ "type": "image/png",
+ "sizes": "512x512"
+ }
+ ],
+ "start_url": ".",
+ "display": "standalone",
+ "theme_color": "#000000",
+ "background_color": "#ffffff"
+}
diff --git a/public/robots.txt b/public/robots.txt
new file mode 100644
index 0000000..e9e57dc
--- /dev/null
+++ b/public/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
diff --git a/src/App.css b/src/App.css
new file mode 100644
index 0000000..bd6213e
--- /dev/null
+++ b/src/App.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
\ No newline at end of file
diff --git a/src/App.test.tsx b/src/App.test.tsx
new file mode 100644
index 0000000..2a68616
--- /dev/null
+++ b/src/App.test.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+ render();
+ const linkElement = screen.getByText(/learn react/i);
+ expect(linkElement).toBeInTheDocument();
+});
diff --git a/src/App.tsx b/src/App.tsx
new file mode 100644
index 0000000..2f349fd
--- /dev/null
+++ b/src/App.tsx
@@ -0,0 +1,5 @@
+function App() {
+ return Hello World
;
+}
+
+export default App;
diff --git a/src/app/background.ts b/src/app/background.ts
new file mode 100644
index 0000000..6263e18
--- /dev/null
+++ b/src/app/background.ts
@@ -0,0 +1,5 @@
+chrome.runtime.onInstalled.addListener(() => {
+ chrome.sidePanel.setPanelBehavior({ openPanelOnActionClick: true });
+});
+
+export {}
\ No newline at end of file
diff --git a/src/features/options/Options.tsx b/src/features/options/Options.tsx
new file mode 100644
index 0000000..07557d1
--- /dev/null
+++ b/src/features/options/Options.tsx
@@ -0,0 +1,19 @@
+function Options() {
+ const sendMessage = () => {
+ chrome.runtime.sendMessage(
+ { type: "UPDATE_FROM_OPTIONS", payload: "Hello SidePanel" },
+ (response) => {
+ console.log("Response from SidePanel:", response);
+ }
+ );
+ };
+
+ return (
+
+ Options
+
+
+ );
+}
+
+export default Options;
diff --git a/src/features/options/index.tsx b/src/features/options/index.tsx
new file mode 100644
index 0000000..e521ab4
--- /dev/null
+++ b/src/features/options/index.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import "../../App.css";
+import Options from './Options';
+
+const root = document.createElement("div")
+root.className = "container"
+document.body.appendChild(root)
+const rootDiv = ReactDOM.createRoot(root);
+rootDiv.render(
+
+
+
+);
diff --git a/src/features/popup/PopUp.tsx b/src/features/popup/PopUp.tsx
new file mode 100644
index 0000000..1842204
--- /dev/null
+++ b/src/features/popup/PopUp.tsx
@@ -0,0 +1,6 @@
+function PopUp() {
+ return Pop Up
;
+ }
+
+ export default PopUp;
+
\ No newline at end of file
diff --git a/src/features/popup/index.tsx b/src/features/popup/index.tsx
new file mode 100644
index 0000000..a388e6d
--- /dev/null
+++ b/src/features/popup/index.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import "../../App.css";
+import PopUp from './PopUp';
+
+const root = document.createElement("div")
+root.className = "container"
+document.body.appendChild(root)
+const rootDiv = ReactDOM.createRoot(root);
+rootDiv.render(
+
+
+
+);
diff --git a/src/features/side_panel/SidePanel.tsx b/src/features/side_panel/SidePanel.tsx
new file mode 100644
index 0000000..4bfe3f0
--- /dev/null
+++ b/src/features/side_panel/SidePanel.tsx
@@ -0,0 +1,17 @@
+import { useEffect } from "react";
+
+function SidePanel() {
+ useEffect(() => {
+ chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
+ if (message.type === "UPDATE_FROM_OPTIONS") {
+ // Handle the message
+ console.log("Received message in SidePanel:", message.payload);
+ sendResponse({ status: "Received by SidePanel" });
+ }
+ });
+ }, []);
+
+ return Side Panel
;
+}
+
+export default SidePanel;
diff --git a/src/features/side_panel/index.tsx b/src/features/side_panel/index.tsx
new file mode 100644
index 0000000..8d6daf5
--- /dev/null
+++ b/src/features/side_panel/index.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import SidePanel from './SidePanel';
+import "../../App.css";
+
+const root = document.createElement("div")
+root.className = "container"
+document.body.appendChild(root)
+const rootDiv = ReactDOM.createRoot(root);
+rootDiv.render(
+
+
+
+);
diff --git a/src/index.tsx b/src/index.tsx
new file mode 100644
index 0000000..30b24df
--- /dev/null
+++ b/src/index.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import "./App.css";
+
+const root = document.createElement("div")
+root.className = "container"
+document.body.appendChild(root)
+const rootDiv = ReactDOM.createRoot(root);
+rootDiv.render(
+
+
+
+);
\ No newline at end of file
diff --git a/src/setupTests.ts b/src/setupTests.ts
new file mode 100644
index 0000000..8f2609b
--- /dev/null
+++ b/src/setupTests.ts
@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..9b5bf07
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,10 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+ content: [
+ "./src/**/*.{js,jsx,ts,tsx,html}", // Adjust this path based on your project structure
+ ],
+ theme: {
+ extend: {},
+ },
+ plugins: [],
+};
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..a273b0c
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,26 @@
+{
+ "compilerOptions": {
+ "target": "es5",
+ "lib": [
+ "dom",
+ "dom.iterable",
+ "esnext"
+ ],
+ "allowJs": true,
+ "skipLibCheck": true,
+ "esModuleInterop": true,
+ "allowSyntheticDefaultImports": true,
+ "strict": true,
+ "forceConsistentCasingInFileNames": true,
+ "noFallthroughCasesInSwitch": true,
+ "module": "esnext",
+ "moduleResolution": "node",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "noEmit": true,
+ "jsx": "react-jsx"
+ },
+ "include": [
+ "src"
+ ]
+}
diff --git a/webpack.config.js b/webpack.config.js
new file mode 100644
index 0000000..a58bc05
--- /dev/null
+++ b/webpack.config.js
@@ -0,0 +1,60 @@
+const path = require("path");
+const HTMLPlugin = require("html-webpack-plugin");
+const CopyPlugin = require("copy-webpack-plugin");
+
+module.exports = {
+ entry: {
+ index: "./src/index.tsx",
+ background: "./src/app/background.ts",
+ sidepanel: "./src/features/side_panel/index.tsx",
+ options: "./src/features/options/index.tsx",
+ popup: "./src/features/popup/index.tsx",
+ },
+ mode: "production",
+ module: {
+ rules: [
+ {
+ test: /\.tsx?$/,
+ use: [
+ {
+ loader: "ts-loader",
+ options: {
+ compilerOptions: { noEmit: false },
+ },
+ },
+ ],
+ exclude: /node_modules/,
+ },
+ {
+ exclude: /node_modules/,
+ test: /\.css$/i,
+ use: ["style-loader", "css-loader", "postcss-loader"],
+ },
+ ],
+ },
+ plugins: [
+ new CopyPlugin({
+ patterns: [{ from: "manifest.json", to: "manifest.json" }], // Adjusted path
+ }),
+ ...getHtmlPlugins(["index", "sidepanel", "options", "popup"]),
+ ],
+ resolve: {
+ extensions: [".tsx", ".ts", ".js"],
+ },
+ output: {
+ path: path.join(__dirname, "dist"),
+ filename: "js/[name].js",
+ publicPath: "/",
+ },
+};
+
+function getHtmlPlugins(chunks) {
+ return chunks.map(
+ (chunk) =>
+ new HTMLPlugin({
+ title: "React extension",
+ filename: `${chunk}.html`,
+ chunks: [chunk],
+ })
+ );
+}