fix(webext): get the right channel id in contextual menus

public/content.js

@@ -1,22 +1,31 @@
-/* global browser, chrome */
+/* global browser */
 
 (function () {
-  function handleMessage(request, sender) {
-    switch (request.message) {
-      default:
-        // ToDo: add commands to control the youtube player (play/stop video, update video link, etc...)
-        break;
-    }
-  }
+  // listen to background page messages
+  const port = browser.runtime.connect({ name: 'youtube-viewer-cs' });
+  port.onMessage.addListener(function (request) {
+    window.postMessage({ from: 'content_script', request });
+  });
+
+  // inject window listener script
+  const script = document.createElement('script');
+  script.src = browser.runtime.getURL('listener.js');
+  script.onload = function () {
+    this.remove();
+  };
+  (document.head || document.documentElement).appendChild(script);
+
+  // listen to window messages
+  window.addEventListener('message', function (event) {
+    const { from, request, response } = event.data;
 
-  const browserAPI = (function () {
-    try {
-      return browser;
-    } catch (e) {
-      return chrome;
+    if (from !== 'page') {
+      return;
     }
-  })();
 
-  const port = browserAPI.runtime.connect({ name: 'youtube-viewer-cs' });
-  port.onMessage.addListener(handleMessage);
+    port.postMessage({
+      request,
+      response,
+    });
+  });
 })();

public/listener.js

@@ -0,0 +1,68 @@
+(function () {
+  function getChannelId(url) {
+    if (url.includes('youtube.com/watch?v=') || url.includes('youtu.be/')) {
+      return ytInitialPlayerResponse.microformat.playerMicroformatRenderer
+        .externalChannelId;
+    } else if (
+      url.includes('youtube.com/channel/') ||
+      url.includes('youtube.com/c/')
+    ) {
+      return ytInitialData.metadata.channelMetadataRenderer.externalId;
+    } else {
+      return null;
+    }
+  }
+
+  function sendChannelId(data, delay = 0) {
+    setTimeout(() => {
+      const channelId = getChannelId(window.location.href);
+      window.postMessage({
+        from: 'page',
+        response: {
+          channelId,
+        },
+        ...data,
+      });
+    }, delay);
+  }
+
+  // listen to content script messages
+  window.addEventListener('message', function (event) {
+    const { from, request } = event.data;
+
+    if (from !== 'content_script') {
+      return;
+    }
+
+    switch (request.message) {
+      case 'getChannelId':
+        sendChannelId({ request });
+        break;
+      default:
+        // ToDo: add commands to control the youtube player (play/stop video, update video link, etc...)
+        break;
+    }
+  });
+
+  // send channel id to content script on page load
+  sendChannelId();
+
+  // observe window location changes
+  // Note: this doesn't work properly since getChannelId() only gets the initial channel id
+  // & not the channel id of the currently played video
+  let prevLocation = window.location.href;
+  const observer = new MutationObserver(function (mutations) {
+    mutations.forEach(function (mutation) {
+      if (prevLocation !== window.location.href) {
+        prevLocation = window.location.href;
+        sendChannelId();
+      }
+    });
+  });
+
+  const body = document.querySelector('body');
+  observer.observe(body, {
+    childList: true,
+    subtree: true,
+  });
+})();

public/manifest.firefox.json

@@ -18,7 +18,10 @@
     "256": "icons/256.png"
   },
 
-  "web_accessible_resources": ["icons/*.png"],
+  "web_accessible_resources": [
+    "icons/*.png",
+    "listener.js"
+  ],
 
   "browser_action": {
     "default_icon": "icons/128.png"
@@ -36,7 +39,10 @@
   "content_scripts": [
     {
       "matches": ["*://*.youtube.com/*"],
-      "js": ["content.js"]
+      "js": [
+        "static/js/browser-polyfill.min.js",
+        "content.js"
+      ]
     }
   ],
 

public/manifest.json

@@ -11,7 +11,10 @@
     "256": "icons/256.png"
   },
 
-  "web_accessible_resources": ["icons/*.png"],
+  "web_accessible_resources": [
+    "icons/*.png",
+    "listener.js"
+  ],
 
   "browser_action": {
     "default_icon": "icons/128.png"
@@ -29,7 +32,10 @@
   "content_scripts": [
     {
       "matches": ["*://*.youtube.com/*"],
-      "js": ["content.js"]
+      "js": [
+        "static/js/browser-polyfill.min.js",
+        "content.js"
+      ]
     }
   ],
 

src/store/thunks/channels.ts

@@ -10,7 +10,7 @@ export const fetchChannelById = createAsyncThunk<
   { state: RootState }
 >('channels/fetchChannelById', async ({ id }, { dispatch }) => {
   const result = dispatch(
-    extendedApi.endpoints.findChannelById.initiate({ id }),
+    extendedApi.endpoints.findChannelById.initiate({ id, maxResults: 1 }),
   );
   result.unsubscribe();
   const response = await result;