fix(ui): Only show info popups in the main frame of a tab (#948)

- This includes the enable/help message as well as the copied to clipboard message.
- Adds a test for the clipboard message.
- Also removes a commented out piece of unused code from an visual screenshot test.

* test(visual): Update baselines with new screenshots

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>

extension/rikaichan.ts

@@ -147,10 +147,7 @@ class RcxMain {
     document.addEventListener('copy', copyFunction);
     document.execCommand('Copy');
     document.removeEventListener('copy', copyFunction);
-    chrome.tabs.sendMessage(tab.id, {
-      type: 'showPopup',
-      text: 'Copied to clipboard.',
-    });
+    this.showPopupInTab(tab.id, 'Copied to clipboard.');
   }
 
   miniHelp =
@@ -180,15 +177,9 @@ class RcxMain {
 
     if (mode === 1) {
       if (this.config.minihelp) {
-        chrome.tabs.sendMessage(tabId, {
-          type: 'showPopup',
-          text: this.miniHelp,
-        });
+        this.showPopupInTab(tabId, this.miniHelp);
       } else {
-        chrome.tabs.sendMessage(tabId, {
-          type: 'showPopup',
-          text: 'Rikaikun enabled!',
-        });
+        this.showPopupInTab(tabId, 'Rikaikun enabled!');
       }
     }
     void chrome.browserAction.setBadgeBackgroundColor({
@@ -197,6 +188,19 @@ class RcxMain {
     void chrome.browserAction.setBadgeText({ text: 'On' });
   }
 
+  private showPopupInTab(tabId: number, text: string) {
+    chrome.tabs.sendMessage(
+      tabId,
+      {
+        type: 'showPopup',
+        text: text,
+      },
+      {
+        frameId: 0,
+      }
+    );
+  }
+
   // This function disables rikaikun in all tabs.
   inlineDisable() {
     this.enabled = 0;

extension/test/e2e_visual_test.ts

@@ -198,7 +198,6 @@ describe('Visual Regression Tests', function () {
     // eslint-disable-next-line mocha/no-setup-in-describe
     ['blue', 'black', 'lightblue', 'yellow'].forEach((color) => {
       it(`should render correctly with ${color} theme`, async function () {
-        //initializeRcxContent({ popupcolor: color });
         await updateConfiguration({ popupcolor: color });
         // Turn rikaikun off.
         await toggleRikaikun();
@@ -211,6 +210,46 @@ describe('Visual Regression Tests', function () {
       });
     });
   });
+
+  describe('enable no help', function () {
+    // Disable ban on logic in describe in order to dynamically generate color tests
+    // eslint-disable-next-line mocha/no-setup-in-describe
+    ['blue', 'black', 'lightblue', 'yellow'].forEach((color) => {
+      it(`should render correctly with ${color} theme`, async function () {
+        await updateConfiguration({ popupcolor: color, minihelp: false });
+        // Turn rikaikun off.
+        await toggleRikaikun();
+
+        // Turn rikaikun on to see the help popup.
+        await toggleRikaikun();
+        await waitForVisiblePopup();
+
+        await takeSnapshot(`enable-no-help-${color}`);
+      });
+    });
+  });
+
+  describe('copy to clipboard', function () {
+    // Disable ban on logic in describe in order to dynamically generate color tests
+    // eslint-disable-next-line mocha/no-setup-in-describe
+    ['blue', 'black', 'lightblue', 'yellow'].forEach((color) => {
+      it(`should render correctly with ${color} theme`, async function () {
+        await updateConfiguration({ popupcolor: color });
+        const clock = sinon.useFakeTimers();
+        const span = insertHtmlIntoDomAndReturnFirstTextNode(
+          '<span>森</span>'
+        ) as HTMLSpanElement;
+
+        await triggerMousemoveAtElementStart(span);
+        // Tick the clock forward to account for the popup delay.
+        clock.tick(150);
+        await waitForVisiblePopup();
+        await sendKeys({ press: 'c' });
+
+        await takeSnapshot(`enable-copy-to-clipboard-${color}`);
+      });
+    });
+  });
 });
 
 async function toggleRikaikun() {