chore: setup webpack (#149)

Signed-off-by: koyashiro <[email protected]>

Author: koyashiro

Diff for: .eslintrc

@@ -2,7 +2,7 @@
   "env": {
     "browser": true,
     "webextensions": true,
-    "node": false
+    "node": true
   },
   "extends": [
     "eslint:recommended",

Diff for: package-lock.json

@@ -4,7 +4,8 @@
   "description": "One click URL to VRChat",
   "main": "send.js",
   "scripts": {
-    "build": "tsc && cp ./static/* ./dist",
+    "build": "tsc --noEmit && webpack --mode production",
+    "dev": "webpack --watch",
     "lint": "eslint .",
     "fix": "eslint --fix .",
     "format": "prettier --write .",
@@ -24,9 +25,13 @@
     "@types/chrome": "0.0.213",
     "@typescript-eslint/eslint-plugin": "5.52.0",
     "@typescript-eslint/parser": "5.52.0",
+    "copy-webpack-plugin": "11.0.0",
     "eslint": "8.34.0",
     "eslint-config-prettier": "8.6.0",
     "prettier": "2.8.4",
-    "typescript": "4.9.5"
+    "ts-loader": "9.4.2",
+    "typescript": "4.9.5",
+    "webpack": "5.75.0",
+    "webpack-cli": "5.0.1"
   }
 }

Diff for: package.json

@@ -0,0 +1,114 @@
+const CONTEXT_MENUS = {
+  SEND_THIS_PAGE: "send_this_page",
+  SEND_WITH_CLIPBOARD: "send_with_clipboard",
+};
+
+const defaultMethod = "POST";
+const toVRC = (url: string, method: string = defaultMethod) => {
+  fetch("http://localhost:11400/url", {
+    method: method,
+    mode: "cors",
+    credentials: "omit",
+    cache: "no-cache",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ url: url }),
+  })
+    .then((res) => {
+      if (!res.ok && method !== "PUT") {
+        toVRC(url, "PUT");
+      }
+
+      if (!res.ok && method === "PUT") {
+        chrome.notifications.create({
+          type: "basic",
+          iconUrl: "./icon.png",
+          title: "send_vrc",
+          message: "please start send_vrc_desktop.",
+        });
+      }
+    })
+    .catch((e) => {
+      console.log(e, method);
+      // old version compatible.
+      if (method !== "PUT") {
+        toVRC(url, "PUT");
+      }
+      if (method === "PUT") {
+        chrome.notifications.create({
+          type: "basic",
+          iconUrl: "./icon.png",
+          title: "send_vrc",
+          message: "please start send_vrc_desktop.",
+        });
+      }
+    });
+};
+
+const getClipboard = async (tabId: number) => {
+  const result = await chrome.scripting.executeScript({
+    target: { tabId: tabId },
+    func: () => navigator.clipboard.readText(),
+  });
+  return result[0].result;
+};
+
+const canonicalizeUrl = (url: string) => {
+  const u = new URL(url);
+  switch (u.hostname) {
+    case "youtube.com":
+    case "www.youtube.com":
+    case "m.youtube.com": {
+      const v = u.searchParams.get("v");
+      const allowURL = new URL("https://www.youtube.com/watch");
+      if (v) {
+        allowURL.searchParams.append("v", v);
+      }
+      return allowURL.toString();
+    }
+    default:
+      return u.toString();
+  }
+};
+
+chrome.contextMenus.create({
+  id: CONTEXT_MENUS.SEND_THIS_PAGE,
+  title: "SendVRC this page",
+  type: "normal",
+  contexts: ["page"],
+});
+
+chrome.contextMenus.create({
+  id: CONTEXT_MENUS.SEND_WITH_CLIPBOARD,
+  title: "SendVRC with clipboard",
+  type: "normal",
+  contexts: ["action"],
+});
+
+chrome.contextMenus.onClicked.addListener(async (info, tab) => {
+  switch (info.menuItemId) {
+    case CONTEXT_MENUS.SEND_THIS_PAGE: {
+      if (!info || !info["pageUrl"]) {
+        return;
+      }
+      const pageURL = info["pageUrl"];
+      toVRC(pageURL);
+      break;
+    }
+    case CONTEXT_MENUS.SEND_WITH_CLIPBOARD: {
+      if (!tab || tab.id === undefined) {
+        return;
+      }
+      const clipboardText = await getClipboard(tab.id);
+      toVRC(clipboardText);
+      break;
+    }
+  }
+});
+
+chrome.action.onClicked.addListener((e) => {
+  if (!e || !e["url"]) {
+    return;
+  }
+  const url = canonicalizeUrl(e["url"]);
+  toVRC(url);
+});

Diff for: send.ts

@@ -11,7 +11,7 @@
     "128": "icon.png"
   },
   "background": {
-    "service_worker": "send.js"
+    "service_worker": "background.js"
   },
   "permissions": [
     "activeTab",

Diff for: send_test.ts

@@ -0,0 +1,32 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const path = require("path");
+const CopyPlugin = require("copy-webpack-plugin");
+
+/** @type {import('webpack').Configuration} */
+module.exports = {
+  mode: process.env.NODE_ENV || "development",
+  entry: {
+    background: path.join(__dirname, "src/background.ts"),
+  },
+  output: {
+    path: path.join(__dirname, "dist"),
+    filename: "[name].js",
+    clean: true,
+  },
+  module: {
+    rules: [
+      {
+        test: /\.ts$/,
+        use: "ts-loader",
+        exclude: /node_modules/,
+      },
+    ],
+  },
+  resolve: {
+    extensions: [".ts", ".js"],
+  },
+  plugins: [
+    new CopyPlugin({ patterns: [{ from: ".", to: ".", context: "static" }] }),
+  ],
+  devtool: "cheap-module-source-map",
+};