init commit

BoundaryML · Jun 6, 2024 · 62e539c · 62e539c
1 parent a4643f4
commit 62e539c
Show file tree

Hide file tree

Showing 9 changed files with 163 additions and 47 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/public/manifest.json b/public/manifest.json
@@ -15,21 +15,21 @@
   },
 
   "content_scripts": [
-      {
-          "matches": ["<all_urls>"],
-          "js": ["js/vendor.js", "js/content_script.js"]
-      }
+    {
+      "matches": ["<all_urls>"],
+      "js": ["js/vendor.js", "js/content_script.js"]
+    }
   ],
 
   "background": {
     "service_worker": "js/background.js"
   },
 
-  "permissions": [
-    "storage"
-  ],
+  "side_panel": {
+    "default_path": "side_panel.html"
+  },
+
+  "permissions": ["storage", "sidePanel", "tabs", ""],
 
-  "host_permissions": [
-    "<all_urls>"
-  ]
+  "host_permissions": ["<all_urls>"]
 }
diff --git a/public/side_panel.html b/public/side_panel.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Getting Started Extension's Popup</title>
+    <script src="js/vendor.js"></script>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script src="js/side_panel.js"></script>
+  </body>
+</html>
diff --git a/src/background.ts b/src/background.ts
@@ -4,3 +4,9 @@ function polling() {
 }
 
 polling();
+
+chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
+  if (changeInfo.status === "complete") {
+    chrome.tabs.sendMessage(tabId, { type: "onUpdated" });
+  }
+});
diff --git a/src/content_script.tsx b/src/content_script.tsx
@@ -7,3 +7,16 @@ chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
     sendResponse("Color message is none.");
   }
 });
+
+chrome.permissions.request(
+  {
+    permissions: ["tabs"],
+  },
+  function (granted) {
+    if (granted) {
+      console.log("granted");
+    } else {
+      console.log("not granted");
+    }
+  }
+);
diff --git a/src/popup.tsx b/src/popup.tsx
@@ -44,6 +44,17 @@ const Popup = () => {
       >
         count up
       </button>
+      <button
+        onClick={() => {
+          chrome.notifications.create("baml", {
+            type: "basic",
+            title: "Instagram notification!",
+            message: "You have a new follower!",
+          });
+        }}
+      >
+        Notify
+      </button>
       <button onClick={changeBackground}>change background</button>
     </>
   );

diff --git a/src/side_panel.tsx b/src/side_panel.tsx
@@ -0,0 +1,76 @@
+import React, { useEffect, useState } from "react";
+import { createRoot } from "react-dom/client";
+
+const Popup = () => {
+  const [count, setCount] = useState(0);
+  const [currentURL, setCurrentURL] = useState<string>();
+
+  useEffect(() => {
+    chrome.action.setBadgeText({ text: count.toString() });
+  }, [count]);
+
+  useEffect(() => {
+    chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
+      setCurrentURL(tabs[0].url);
+    });
+  }, []);
+
+  const changeBackground = () => {
+    chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
+      const tab = tabs[0];
+      if (tab.id) {
+        chrome.tabs.sendMessage(
+          tab.id,
+          {
+            color: "#555555",
+          },
+          (msg) => {
+            console.log("result message:", msg);
+          }
+        );
+      }
+    });
+  };
+
+  return (
+    <>
+      <ul style={{ minWidth: "700px" }}>
+        <li>Current URL: {currentURL}</li>
+        <li>Current Time: {new Date().toLocaleTimeString()}</li>
+      </ul>
+      <button
+        onClick={() => setCount(count + 1)}
+        style={{ marginRight: "5px" }}
+      >
+        count up
+      </button>
+      <button
+        onClick={() => {
+          chrome.notifications.create("baml", {
+            type: "basic",
+            title: "Instagram notification!",
+            message: "You have a new follower!",
+          });
+        }}
+      >
+        Notify
+      </button>
+      <button onClick={changeBackground}>change background</button>
+    </>
+  );
+};
+
+const root = createRoot(document.getElementById("root")!);
+
+root.render(
+  <React.StrictMode>
+    <div
+      style={{
+        width: "300px",
+        height: "100%",
+      }}
+    >
+      Sidepanel!
+    </div>
+  </React.StrictMode>
+);
diff --git a/src/sum.ts b/src/sum.ts
diff --git a/webpack/webpack.common.js b/webpack/webpack.common.js
@@ -4,40 +4,41 @@ const CopyPlugin = require("copy-webpack-plugin");
 const srcDir = path.join(__dirname, "..", "src");
 
 module.exports = {
-    entry: {
-      popup: path.join(srcDir, 'popup.tsx'),
-      options: path.join(srcDir, 'options.tsx'),
-      background: path.join(srcDir, 'background.ts'),
-      content_script: path.join(srcDir, 'content_script.tsx'),
+  entry: {
+    popup: path.join(srcDir, "popup.tsx"),
+    options: path.join(srcDir, "options.tsx"),
+    background: path.join(srcDir, "background.ts"),
+    content_script: path.join(srcDir, "content_script.tsx"),
+    side_panel: path.join(srcDir, "side_panel.tsx"),
+  },
+  output: {
+    path: path.join(__dirname, "../dist/js"),
+    filename: "[name].js",
+  },
+  optimization: {
+    splitChunks: {
+      name: "vendor",
+      chunks(chunk) {
+        return chunk.name !== "background";
+      },
     },
-    output: {
-        path: path.join(__dirname, "../dist/js"),
-        filename: "[name].js",
-    },
-    optimization: {
-        splitChunks: {
-            name: "vendor",
-            chunks(chunk) {
-              return chunk.name !== 'background';
-            }
-        },
-    },
-    module: {
-        rules: [
-            {
-                test: /\.tsx?$/,
-                use: "ts-loader",
-                exclude: /node_modules/,
-            },
-        ],
-    },
-    resolve: {
-        extensions: [".ts", ".tsx", ".js"],
-    },
-    plugins: [
-        new CopyPlugin({
-            patterns: [{ from: ".", to: "../", context: "public" }],
-            options: {},
-        }),
+  },
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: "ts-loader",
+        exclude: /node_modules/,
+      },
     ],
+  },
+  resolve: {
+    extensions: [".ts", ".tsx", ".js"],
+  },
+  plugins: [
+    new CopyPlugin({
+      patterns: [{ from: ".", to: "../", context: "public" }],
+      options: {},
+    }),
+  ],
 };