feat(browser-extension): enable report only on supported pages

packages/browser-extension/src/scripts/background.js

@@ -125,7 +125,16 @@ async function getData() {
 }
 
 /**
- * @description Calculate current hostname
+ * @async
+ * @description Disable report context menu option
+ * @returns {Promise<void>}
+ */
+async function disableReport() {
+  return browser.contextMenus.update(reportMenuItemId, { enabled: false });
+}
+
+/**
+ * @description Get current hostname
  * @param {string} url
  * @returns {string}
  */
@@ -133,6 +142,17 @@ function getHostname(url) {
   return new URL(url).hostname.split('.').slice(-3).join('.').replace('www.', '');
 }
 
+/**
+ * @async
+ * @description Get current active tab
+ * @returns {Promise<browser.tabs.Tab>}
+ */
+async function getTab() {
+  const tabs = await browser.tabs.query({ active: true, currentWindow: true });
+
+  return tabs[0];
+}
+
 /**
  * @async
  * @description Get state for the given hostname
@@ -222,7 +242,7 @@ async function refreshIssue(hostname) {
 
 /**
  * @async
- * @description Report active tab URL
+ * @description Report given page
  * @param {any} message
  * @param {browser.tabs.Tab} tab
  * @param {void?} callback
@@ -284,6 +304,9 @@ browser.runtime.onMessage.addListener((message, sender, callback) => {
   const tabId = sender.tab?.id;
 
   switch (message.type) {
+    case 'DISABLE_REPORT':
+      if (isPage && tabId !== undefined) disableReport();
+      break;
     case 'DISABLE_ICON':
       if (isPage && tabId !== undefined) {
         browser.action.setIcon({ path: '/assets/icons/off.png', tabId }, suppressLastError);
@@ -300,6 +323,11 @@ browser.runtime.onMessage.addListener((message, sender, callback) => {
         browser.action.setPopup({ popup: '/popup.html', tabId }, suppressLastError);
       }
       break;
+    case 'ENABLE_REPORT':
+      if (isPage && tabId !== undefined) {
+        browser.contextMenus.update(reportMenuItemId, { enabled: true });
+      }
+      break;
     case 'GET_DATA':
       getData().then(callback);
       return true;
@@ -318,9 +346,7 @@ browser.runtime.onMessage.addListener((message, sender, callback) => {
       }
       break;
     case 'GET_TAB':
-      browser.tabs.query({ active: true, currentWindow: true }, (tabs) => {
-        callback(tabs[0]);
-      });
+      getTab().then(callback);
       return true;
     case 'REFRESH_DATA':
       refreshData().then(callback);
@@ -328,6 +354,7 @@ browser.runtime.onMessage.addListener((message, sender, callback) => {
     case 'REPORT':
       report(message).then(callback);
       return true;
+
     case 'UPDATE_BADGE':
       if (isPage && tabId !== undefined) {
         browser.action.setBadgeBackgroundColor({ color: '#6b7280' });
@@ -371,6 +398,7 @@ browser.runtime.onInstalled.addListener((details) => {
     {
       contexts: ['all'],
       documentUrlPatterns,
+      enabled: false,
       id: reportMenuItemId,
       parentId: extensionMenuItemId,
       title: browser.i18n.getMessage('contextMenu_reportOption'),
@@ -397,6 +425,13 @@ browser.runtime.onStartup.addListener(() => {
   refreshData();
 });
 
+/**
+ * @description Listen to tab changes
+ */
+browser.tabs.onActivated.addListener(() => {
+  disableReport();
+});
+
 /**
  * @description Listen to the moment before a request is made to apply the rules
  * @returns {Promise<void>}

packages/browser-extension/src/scripts/content.js

@@ -425,11 +425,13 @@ async function setUp(params = {}) {
     skips = data?.skips ?? skips;
     tokens = data?.tokens ?? tokens;
 
+    dispatch({ type: 'ENABLE_REPORT' });
     dispatch({ hostname, type: 'ENABLE_ICON' });
     dispatch({ type: 'UPDATE_BADGE', value: actions.size });
     observer.observe(document.body ?? document.documentElement, options);
     if (!params.skipRunFn) run({ containers: tokens.containers });
   } else {
+    dispatch({ type: 'DISABLE_REPORT' });
     dispatch({ type: 'DISABLE_ICON' });
     dispatch({ type: 'UPDATE_BADGE', value: actions.size });
     observer.disconnect();
@@ -495,9 +497,13 @@ window.addEventListener('pageshow', async (event) => {
  * @returns {void}
  */
 window.addEventListener('visibilitychange', async () => {
-  if (document.visibilityState === 'visible' && !initiallyVisible) {
-    initiallyVisible = true;
-    await setUp();
+  if (document.visibilityState === 'visible') {
+    if (!initiallyVisible) {
+      initiallyVisible = true;
+      await setUp();
+    }
+
+    dispatch({ type: state.on ? 'ENABLE_REPORT' : 'DISABLE_REPORT' });
   }
 });