feat: popup and options data

src/background/rss.ts

@@ -32,8 +32,7 @@ export const getRSS = async (tabId, url) => {
 
     report({
       url,
-      name: "get-rss"
-    })  
+    })
     const html = await sendToContentScript({
       name: "requestHTML",
       tabId

src/lib/report.ts

@@ -1,6 +1,9 @@
 function report({
-  url,
+  url = "https://radar.rsshub",
   name,
+}: {
+  url?: string
+  name?: string
 }) {
   if (process.env.PLASMO_PUBLIC_UMAMI_ID && process.env.PLASMO_PUBLIC_UMAMI_URL) {
     let hostname = ""
@@ -25,7 +28,8 @@ function report({
       headers: {
         "content-type": "application/json",
       },
-      body: JSON.stringify(umamiData)
+      body: JSON.stringify(umamiData),
+      keepalive: true
     })
   }
 }

src/options/routes/About.tsx

@@ -1,9 +1,17 @@
+import { useEffect } from "react"
 import {
   Card,
   CardContent,
 } from "~/lib/components/Card"
+import report from "~/lib/report"
 
 function About() {
+  useEffect(() => {
+    report({
+      name: "options-about"
+    })
+  }, [])
+
   return (
     <div>
       <h1 className="text-3xl font-medium leading-10 mb-6 text-orange-500 border-b pb-4">{chrome.i18n.getMessage("about")}</h1>

src/options/routes/General.tsx

@@ -18,6 +18,7 @@ import type { Rules as IRules } from "~/lib/types"
 import { sendToBackground } from "@plasmohq/messaging"
 import { Loader2 } from "lucide-react"
 import toast from "react-hot-toast"
+import report from "~/lib/report"
 
 function General() {
   let [config] = useStorage("config")
@@ -27,6 +28,9 @@ function General() {
     sendToBackground({
       name: "requestDisplayedRules"
     }).then((res) => setRules(parseRules(res, true)))
+    report({
+      name: "options-general"
+    })
   }, [])
 
   const [count, setCount] = useState(0)

src/options/routes/Rules.tsx

@@ -12,6 +12,7 @@ import {
 import { Card, CardContent } from "~/lib/components/Card"
 import { parseRules, getRulesCount } from "~/lib/rules"
 import type { Rules as IRules } from "~/lib/types"
+import report from "~/lib/report"
 
 function Rules() {
   const [rules, setRules] = useState<IRules>({})
@@ -19,6 +20,9 @@ function Rules() {
     sendToBackground({
       name: "requestDisplayedRules"
     }).then((res) => setRules(parseRules(res, true)))
+    report({
+      name: "options-rules"
+    })
   }, [])
 
   const [count, setCount] = useState(0)

src/popup/RSSItem.tsx

@@ -7,6 +7,7 @@ import RSSHubIcon from "data-base64:~/assets/icon.png"
 import { useCopyToClipboard } from 'usehooks-ts'
 import MD5 from 'md5.js';
 import { quickSubscriptions } from "~/lib/quick-subscriptions"
+import report from "~/lib/report"
 
 function RSSItem({
   item,
@@ -52,7 +53,15 @@ function RSSItem({
         </span>
       </a>
       {item.isDocs && (
-        <Button variant="rss" size="sm">
+        <Button
+          variant="rss"
+          size="sm"
+          onClickCapture={() => {
+            report({
+              name: "popup-docs"
+            })
+          }}
+        >
           <a target="_blank" href={url}>
             {chrome.i18n.getMessage("document")}
           </a>
@@ -62,12 +71,19 @@ function RSSItem({
         <Button variant="rss" size="sm" className="w-[60px]" onClick={() => {
           copy(url)
           setCopied(true)
+          report({
+            name: "popup-copy"
+          })
         }}>
           {chrome.i18n.getMessage(copied ? "copied" : "copy")}
         </Button>
       )}
       {!item.isDocs && !hidePreview && (
-        <Button variant="rss" size="sm" className="border-[#0ea5e9] text-[#0ea5e9] hover:bg-[#0ea5e9]">
+        <Button
+          variant="rss"
+          size="sm"
+          className="border-[#0ea5e9] text-[#0ea5e9] hover:bg-[#0ea5e9]"
+        >
           <a
             target="_blank"
             href={`/tabs/preview.html?url=${encodedUrl}`}
@@ -92,7 +108,16 @@ function RSSItem({
         subscriptionDomain = subscriptionDomain.replace(/(?<!\/)\/$/, "")
 
         return (
-          <Button variant="rss" size="sm" className={`border-[${quickSubscription.themeColor}] text-[${quickSubscription.themeColor}] hover:bg-[${quickSubscription.themeColor}]`}>
+          <Button
+            variant="rss"
+            size="sm"
+            className={`border-[${quickSubscription.themeColor}] text-[${quickSubscription.themeColor}] hover:bg-[${quickSubscription.themeColor}]`}
+            onClickCapture={() => {
+              report({
+                name: `popup-subscribe-${quickSubscription.key}`
+              })
+            }}
+          >
             <a
               target="_blank"
               href={`${subscriptionDomain}${quickSubscription.getSubscribePath({

src/popup/index.tsx

@@ -26,8 +26,8 @@ function IndexPopup() {
     }, ([tab]) => {
       report({
         url: tab.url,
-        name: "open-popup"
-      })  
+        name: "popup"
+      })
     });
   }, [])