feat: Bump manifest version to 3

background.js

@@ -1,17 +1,20 @@
-const twitchClicker = (tabID) => {
-  chrome.tabs.executeScript(tabID, {
-    file: "clicker.js",
-  })
-}
+const twitchTabs = []
 
-const twitchWatcher = () => {
-  chrome.tabs.query({}, (results) => {
-    results.forEach((x) => {
-      if (x.url.startsWith("https://www.twitch.tv")) {
-        twitchClicker(x.id)
-      }
-    })
-  })
-}
+chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
+  if (changeInfo.status === "complete") {
+    if (tab.url.includes("twitch.tv") && !twitchTabs.includes(tabId)) {
+      chrome.scripting.executeScript({
+        target: { tabId: tabId },
+        files: ["clicker.js"],
+      })
 
-setInterval(twitchWatcher, 2000)
+      twitchTabs.push(tabId)
+    }
+  }
+})
+
+chrome.tabs.onRemoved.addListener((tabId, removeInfo) => {
+  if (twitchTabs.includes(tabId)) {
+    twitchTabs.splice(twitchTabs.indexOf(tabId), 1)
+  }
+})

clicker.js

@@ -1,17 +1,46 @@
-function addPonintCount() {
-  chrome.storage.local.get("channelPointCount", (res) => {
-    let x = res.channelPointCount
-    if (x == undefined) {
-      x = 0
+function clickPoint() {
+  let button = document.getElementsByClassName("claimable-bonus__icon")
+
+  if (button.length > 0) {
+    button[0].click()
+    addPointCount()
+  }
+}
+
+async function addPointCount() {
+  let x = await getFromStorage("channelPointCount")
+  if (x == undefined) {
+    x = 0
+  }
+  await setStorageKey("channelPointCount", x + 1)
+}
+
+function getFromStorage(key) {
+  return new Promise((resolve, reject) => {
+    try {
+      chrome.storage.local.get(key, (res) => {
+        if (res[key] == undefined) {
+          resolve(0)
+        } else {
+          resolve(res[key])
+        }
+      })
+    } catch (e) {
+      reject(e)
     }
-    chrome.storage.local.set({ channelPointCount: x + 1 })
   })
 }
-function getButton() {
-  return document.getElementsByClassName("claimable-bonus__icon")
-}
 
-if (getButton().length > 0) {
-  getButton()[0].click()
-  addPonintCount()
+function setStorageKey(key, value) {
+  return new Promise((resolve, reject) => {
+    try {
+      chrome.storage.local.set({ [key]: value }, () => {
+        resolve()
+      })
+    } catch (e) {
+      reject(e)
+    }
+  })
 }
+
+setInterval(clickPoint, 1000)

manifest.json

@@ -1,25 +1,20 @@
 {
-    "manifest_version": 2,
-    "name": "ChannelPointCollector",
-    "description": "Automatically collects Twitch channel points.",
-    "version": "0.2",
-    "browser_action": {
-        "default_popup": "popup/popup.html",
-        "default_title": "ChannelPointCollector"
-    },
-    "permissions": [
-        "tabs",
-        "storage",
-        "https://www.twitch.tv/*"
-    ],
-    "background": {
-        "scripts": [
-            "background.js"
-        ]
-    },
-    "icons": {
-        "128": "128x128.png",
-        "48": "48x48.png",
-        "16": "16x16.png"
-    }
-}
+  "manifest_version": 3,
+  "name": "ChannelPointCollector",
+  "description": "Automatically collects Twitch channel points.",
+  "version": "0.3",
+  "action": {
+    "default_popup": "popup/popup.html",
+    "default_title": "ChannelPointCollector"
+  },
+  "permissions": ["tabs", "storage", "scripting"],
+  "host_permissions": ["https://www.twitch.tv/*"],
+  "background": {
+    "service_worker": "./background.js"
+  },
+  "icons": {
+    "128": "128x128.png",
+    "48": "48x48.png",
+    "16": "16x16.png"
+  }
+}

popup/script.js

@@ -1,28 +1,39 @@
-function getPointCountFromStorage() {
+function getFromStorage(key) {
   return new Promise((resolve, reject) => {
     try {
-      chrome.storage.local.get("channelPointCount", (res) => {
-        if (res.channelPointCount == undefined) {
+      chrome.storage.local.get(key, (res) => {
+        if (res[key] == undefined) {
           resolve(0)
         } else {
-          resolve(res.channelPointCount)
+          resolve(res[key])
         }
       })
     } catch (e) {
-      reject()
+      reject(e)
     }
   })
 }
 
-function updateCount() {
-  getPointCountFromStorage().then((n) => {
-    document.getElementById("count").innerHTML = n.toLocaleString("ko-KR")
-    document.getElementById("point").innerHTML = (n * 50).toLocaleString(
-      "ko-KR"
-    )
+function setStorageKey(key, value) {
+  return new Promise((resolve, reject) => {
+    try {
+      chrome.storage.local.set({ [key]: value }, () => {
+        resolve()
+      })
+    } catch (e) {
+      reject(e)
+    }
   })
 }
 
+async function updateCount() {
+  let n = await getFromStorage("channelPointCount")
+  console.log(n)
+
+  document.getElementById("count").innerHTML = n.toLocaleString("ko-KR")
+  document.getElementById("point").innerHTML = (n * 50).toLocaleString("ko-KR")
+}
+
 window.onload = () => {
   chrome.storage.onChanged.addListener(updateCount)
   updateCount()