chore(webext): enhance the behavior of the add channel context menu

public/listener.js

@@ -1,4 +1,6 @@
 (function () {
+  const channelUrlById = {};
+
   function getChannelId(url) {
     if (url.includes('youtube.com/watch?v=') || url.includes('youtu.be/')) {
       return ytInitialPlayerResponse.microformat.playerMicroformatRenderer
@@ -15,7 +17,15 @@
 
   function sendChannelId(data, delay = 0) {
     setTimeout(() => {
-      const channelId = getChannelId(window.location.href);
+      const url = window.location.href;
+      let channelId = getChannelId(url);
+      if (channelId) {
+        if (!channelUrlById[channelId]) {
+          channelUrlById[channelId] = url;
+        } else if (url !== channelUrlById[channelId]) {
+          channelId = null;
+        }
+      }
       window.postMessage({
         from: 'page',
         response: {

src/ui/components/webext/Background/ContextMenus.tsx

@@ -62,16 +62,22 @@ export default function ContextMenus(props: ContextMenusProps) {
   const channels = useAppSelector(selectChannels);
   const channelsRef = useStateRef(channels);
   const channelIdsRef = useRef<{ [key: string]: string }>({}); // tab id: channel id
-  const portsRef = useRef<{ [key: string]: any }>({});
+  const portsRef = useRef<{ [key: string]: any }>({}); // tab id: port
 
   const handleConnect = (port: any) => {
     portsRef.current[port.sender.tab.id] = port;
     port.onMessage.addListener((message: any) => {
       // const { menuItemId, checked } = message.request;
       const { channelId } = message.response;
+      const options: ContextMenuUpdateOptions = { enabled: false };
       if (channelId) {
         channelIdsRef.current[port.sender.tab.id] = channelId;
+        const found = channelsRef.current.find(
+          (channel) => channel.id === channelId,
+        );
+        options.enabled = !found;
       }
+      browser.contextMenus.update('add_channel', options);
     });
   };