feat: set badge and content ready message

src/background/index.ts

@@ -1,30 +1,76 @@
 import { sendToContentScript } from "@plasmohq/messaging"
 import { setupOffscreenDocument } from "~/utils/offscreen"
+import type { RSSData } from "~/utils/types";
 
 export {}
 console.log("HELLO WORLD FROM BGSCRIPTS")
 
-const getRSS = async (tabId, url) => {
+const savedRSS: {
+  [tabId: number]: {
+    pageRSS: RSSData[],
+    pageRSSHub: RSSData[],
+    websiteRSSHub: RSSData[],
+  }
+} = {}
+
+chrome.action.setBadgeBackgroundColor({
+  color: '#F62800',
+});
+
+chrome.action.setBadgeTextColor({
+    color: '#fff',
+});
+
+export const getRSS = async (tabId, url) => {
   console.debug("Get RSS", tabId, url)
-  await setupOffscreenDocument("tabs/offscreen.html")
 
-  console.debug("Send to content script requestHTML")
-  const html = await sendToContentScript({
-    name: "requestHTML"
-  })
+  if (savedRSS[tabId]) {
+    console.debug("Already have RSS", savedRSS[tabId])
+    setRSS(tabId, savedRSS[tabId])
+    return
+  } else {
+    await setupOffscreenDocument("tabs/offscreen.html")
 
-  console.debug("Get html", html)
-  console.debug("Send to offscreen")
-  chrome.runtime.sendMessage({
-    target: "offscreen",
-    data: {
-      name: "requestRSS",
-      body: {
-        html,
-        url,
+    console.debug("Send to content script requestHTML")
+    const html = await sendToContentScript({
+      name: "requestHTML"
+    })
+  
+    console.debug("Get html", html)
+    console.debug("Send to offscreen")
+    chrome.runtime.sendMessage({
+      target: "offscreen",
+      data: {
+        name: "requestRSS",
+        body: {
+          tabId,
+          html,
+          url,
+        }
       }
-    }
-  })
+    })
+  }
+}
+
+export const setRSS = (tabId, data: {
+  pageRSS: RSSData[],
+  pageRSSHub: RSSData[],
+  websiteRSSHub: RSSData[],
+}) => {
+  console.debug("Set RSS", tabId, data)
+
+  savedRSS[tabId] = data
+
+  let text = ''
+  if (data.pageRSS.length || data.pageRSSHub.length) {
+    text = (data.pageRSS.length + data.pageRSSHub.length) + ''
+  } else if (data.websiteRSSHub.length) {
+    text = ' '
+  }
+  chrome.action.setBadgeText({
+    text,
+    tabId,
+  });
 }
 
 chrome.tabs.onActivated.addListener((tab) => {
@@ -42,6 +88,10 @@ chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
   }
 })
 
+chrome.tabs.onRemoved.addListener((tabId) => {
+  delete savedRSS[tabId]
+});
+
 // chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
 //     if (sender.tab && sender.tab.active) {
 //         if (msg.text === 'setPageRSS') {
@@ -55,10 +105,6 @@ chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
 //     }
 // });
 
-// chrome.tabs.onRemoved.addListener((tabId) => {
-//     removeRSS(tabId);
-// });
-
 // getConfig((config) => {
 //     if (!config.version) {
 //         config.version = VERSION;

src/background/messages/contentReady.ts

@@ -0,0 +1,10 @@
+import type { PlasmoMessaging } from "@plasmohq/messaging"
+import { getRSS } from "~/background"
+ 
+const handler: PlasmoMessaging.MessageHandler = async (req, res) => {
+  console.log("content ready", req)
+
+  getRSS(req.sender.tab.id, req.sender.tab.url)
+}
+
+export default handler

src/background/messages/responseRSS.ts

@@ -1,7 +1,10 @@
 import type { PlasmoMessaging } from "@plasmohq/messaging"
+import { setRSS } from "~/background"
  
 const handler: PlasmoMessaging.MessageHandler = async (req, res) => {
- console.log("response RSS", req)
+  console.log("response RSS", req)
+  
+  setRSS(req.body.tabId, req.body.rss)
 }
- 
+
 export default handler

src/contents/messages.tsx

@@ -1,12 +1,21 @@
 import { useMessage } from "@plasmohq/messaging/hook"
+import { sendToBackground } from "@plasmohq/messaging"
+import { useEffect } from "react"
 
-const RequestHTML = () => {
+const Messages = () => {
   useMessage<string, string>(async (req, res) => {
     if (req.name === "requestHTML") {
       res.send(document.documentElement.outerHTML)
     }
   })
+
+  useEffect(() => {
+    sendToBackground({
+      name: "contentReady",
+    })
+  })
+
   return <></>
 }
 
-export default RequestHTML
+export default Messages

src/sandboxes/index.ts

@@ -12,6 +12,7 @@ window.addEventListener("message", async (event: MessageEvent<{
     html: string
     url: string
     rules: Rules
+    tabId: number
   }
 }>) => {
   if (event.data?.name === "requestRSS") {
@@ -33,6 +34,7 @@ window.addEventListener("message", async (event: MessageEvent<{
       name: "responseRSS",
       body: {
         url: event.data.body.url,
+        tabId: event.data.body.tabId,
         rss: {
           pageRSS,
           pageRSSHub,

src/utils/rss.ts

@@ -1,4 +1,5 @@
 import RSSParser from "rss-parser"
+import type { RSSData } from "./types"
 
 const rssParser = new RSSParser()
 const parser = new DOMParser()
@@ -28,7 +29,7 @@ export async function getPageRSS(data: {
     return new URL(url, location.href).toString()
   }
 
-  let pageRSS = []
+  let pageRSS: RSSData[] = []
   const unique = {
     data: {},
     save: function (url) {

src/utils/rsshub.ts

@@ -2,7 +2,7 @@ import psl from 'psl';
 import RouteRecognizer from 'route-recognizer';
 import _ from 'lodash';
 import { parseRules } from './rules';
-import { type Rule, type Rules } from './types';
+import type { Rule, Rules, RSSData } from './types';
 
 function ruleHandler(rule: Rule, params, url, html, success, fail) {
     const run = () => {
@@ -135,7 +135,7 @@ export function getPageRSSHub(data: {
                         }
                     });
                 });
-                const result = [];
+                const result: RSSData[] = [];
                 Promise.all(
                     recognized.map(
                         (recog) =>
@@ -205,7 +205,7 @@ export function getWebsiteRSSHub(data: {
                 title: formatBlank(rules[domain]._name, rule.title),
                 url: rule.docs,
                 isDocs: true,
-            }));
+            }) as RSSData);
         } else {
             return [];
         }

src/utils/types.ts

@@ -11,3 +11,11 @@ export type Rules = {
     [subdomain: string]: Rule[] | string;
   };
 };
+
+export type RSSData = {
+  url: string;
+  title: string;
+  image?: string;
+  path?: string;
+  isDocs?: boolean;
+}