Merge pull request #2 from CCU-Class/oauth

New feature: Oauth

Author: syzygy608

.gitignore

@@ -4,4 +4,5 @@ src/css/output.css
 dist/
 *.zip
 *.crx
-*.pem
+*.pem
+.env

example.env

@@ -0,0 +1 @@
+VITE_NOT_CHROME_CLIENT_ID=

package-lock.json

@@ -1,6 +1,7 @@
 {
   "dependencies": {
     "@tailwindcss/cli": "^4.0.17",
+    "dotenv": "^16.4.7",
     "jsonpath-plus": "^10.3.0",
     "rollup": "^4.38.0",
     "tailwindcss": "^4.0.17"

package.json

@@ -6,8 +6,20 @@ function initializeInputs() {
   // set year max to year + 1
   document.getElementById("yearInput").max = year + 1;
   document.getElementById("monthInput").value = month;
+  // add browser to session storage
+  const ua = navigator.userAgent;
+  const isChrome = ua.includes("Chrome") && !ua.includes("Edg");
+  sessionStorage.setItem("isChrome", isChrome ? "true" : "false");
+  if (isChrome) {
+    // show checkbox if auto import is enabled
+    const autoImportCheckbox = document.getElementById("autoImportContainer");
+    autoImportCheckbox.classList.remove("invisible");
+    autoImportCheckbox.querySelector("input").checked = true; // default checked
+  } else {
+    // remove checkbox if not chrome
+    document.getElementById("autoImportContainer").remove();
+  }
 }
-
 async function fetchCalendarData(sesskey) {
   const year = parseInt(document.getElementById("yearInput").value);
   const month = parseInt(document.getElementById("monthInput").value);
@@ -73,6 +85,159 @@ function setupEventListeners() {
       });
     });
   });
+
+  document.getElementById("importBtn").addEventListener("click", async () => {
+    chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
+      chrome.tabs.sendMessage(tabs[0].id, { action: "get_sesskey" }, async (res) => {
+        const sesskey = res?.sesskey;
+        if (!sesskey) {
+          console.log("no touch sesskey");
+          document.getElementById("result").textContent = "無法獲取 sesskey，請先登入 Moodle";
+          return;
+        }
+
+        try {
+          const events = await fetchCalendarData(sesskey);
+          insertEventsToGCal(events);
+          document.getElementById("result").textContent = `成功匯入 ${events.length} 個行事曆事件`;
+        } catch (error) {
+          console.error(error);
+          document.getElementById("result").textContent = "發生錯誤，請稍後再試";
+        }
+      });
+    });
+  });
+}
+
+async function insertEventsToGCal(events) {
+  // Google OAuth token
+  const token = await getGoogleAuthToken();
+
+  // add event Google Calendar
+  for (const event of events) {
+    try {
+      await addEventToCalendar(token, event);
+      console.log("add Event Success", event.title);
+    } catch (err) {
+      console.error("add Event error：", event.title, err);
+    }
+  }
+
+  // batch API，done after...
+}
+
+async function launchWebAuthFlowForGoogle() {
+  return new Promise((resolve, reject) => {
+    // Except Chrome Client ID
+    const clientId = import.meta.env.VITE_NOT_CHROME_CLIENT_ID;
+    const scope = "https://www.googleapis.com/auth/calendar.events";
+
+    const redirectUri = `https://${chrome.runtime.id}.chromiumapp.org/`;
+
+    const authUrl =
+      "https://accounts.google.com/o/oauth2/v2/auth" +
+      `?response_type=token` +
+      `&client_id=${encodeURIComponent(clientId)}` +
+      `&redirect_uri=${encodeURIComponent(redirectUri)}` +
+      `&scope=${encodeURIComponent(scope)}` +
+      `&prompt=consent`;
+
+    chrome.identity.launchWebAuthFlow(
+      {
+        url: authUrl,
+        interactive: true,
+      },
+      (responseUrl) => {
+        if (chrome.runtime.lastError) {
+          console.error("launchWebAuthFlow error:", chrome.runtime.lastError);
+          return reject(chrome.runtime.lastError);
+        }
+        if (!responseUrl) {
+          return reject("Unable to obtain authorization result");
+        }
+
+        const urlFragment = responseUrl.split("#")[1];
+        if (!urlFragment) {
+          return reject("Unable to retrieve token from callback URL");
+        }
+        const params = new URLSearchParams(urlFragment);
+        const token = params.get("access_token");
+        if (!token) {
+          return reject("Postback URL has no access_token");
+        }
+
+        resolve(token);
+      }
+    );
+  });
+}
+
+// get token
+function getGoogleAuthToken() {
+  return new Promise((resolve, reject) => {
+    const ua = navigator.userAgent;
+    const isChrome = ua.includes("Chrome") && !ua.includes("Edg");
+    console.log("ischrome", isChrome);
+
+    // 1. First check if getAuthToken is available (most common in Chrome)
+    if (isChrome && chrome.identity && chrome.identity.getAuthToken) {
+      console.log("Trying chrome.identity.getAuthToken...");
+      chrome.identity.getAuthToken({ interactive: false }, (token) => {
+        if (chrome.runtime.lastError || !token) {
+          chrome.identity.getAuthToken({ interactive: true }, (token2) => {
+            if (chrome.runtime.lastError || !token2) {
+              console.error("lastError:", chrome.runtime.lastError);
+              return reject("User denied authorization or an error occurred");
+            }
+            resolve(token2);
+          });
+        } else {
+          resolve(token);
+        }
+      });
+
+      // 2. Otherwise try launchWebAuthFlow (Edge may support it)
+    } else if (chrome.identity && chrome.identity.launchWebAuthFlow) {
+      console.log("Trying chrome.identity.launchWebAuthFlow...");
+      launchWebAuthFlowForGoogle()
+        .then((token) => resolve(token))
+        .catch((err) => reject(err));
+    } else {
+      reject("This browser does not support the chrome.identity API");
+    }
+  });
+}
+
+// Google Calendar API add Event
+async function addEventToCalendar(token, event) {
+  // Google Calendar API call
+  // Docs: https://developers.google.com/calendar/api/v3/reference/events/insert
+  const res = await fetch("https://www.googleapis.com/calendar/v3/calendars/primary/events", {
+    method: "POST",
+    headers: {
+      Authorization: `Bearer ${token}`,
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({
+      summary: event.title,
+      description: event.description,
+      start: {
+        dateTime: event.startDate.toISOString(),
+        timeZone: "Asia/Taipei",
+      },
+      end: {
+        dateTime: event.endDate.toISOString(),
+        timeZone: "Asia/Taipei",
+      },
+    }),
+  });
+
+  if (!res.ok) {
+    const errText = await res.text();
+    throw new Error(`API Error: ${res.status}, ${errText}`);
+  }
+
+  return res.json();
 }
 
 // Initialize when DOM is fully loaded

src/js/popup.js

@@ -18,9 +18,16 @@
     "128": "public/ccuclass_icon.png"
   },
   "permissions": [
-    "cookies"
+    "cookies",
+    "identity"
   ],
   "host_permissions": [
     "https://ecourse2.ccu.edu.tw/*"
-  ]
-}
+  ],
+  "oauth2": {
+    "client_id": "529259850785-eg40qfiu14k4806pocqtgoqprs4v5njn.apps.googleusercontent.com",
+    "scopes": [
+      "https://www.googleapis.com/auth/calendar.events"
+    ]
+  }
+}

src/manifest.json

@@ -32,6 +32,21 @@ <h1 class="text-xl font-bold">Moodle Calendar</h1>
     >
       取得行事曆
     </button>
+    <button
+      id="importBtn"
+      class="bg-gray-400 text-white px-4 py-2 my-2 rounded cursor-pointer hover:bg-gray-700"
+    >
+      匯入行事曆
+    </button>
+    <div class="flex items-center my-2 invisible" id="autoImportContainer">
+      <label for="autoImportToggle" class="mr-2 text-sm text-gray-700">自動匯入</label>
+      <input
+        type="checkbox"
+        id="autoImportToggle"
+        class="w-5 h-5 text-violet-500 border-gray-300 rounded focus:ring-violet-500"
+        checked
+      />
+    </div>
     <pre id="result" class="text-sm whitespace-pre-wrap"></pre>
     <div class="text-gray-600 text-sm text-center">
       This tool helps you export your Moodle calendar events to a .ics file.