Merge branch 'main' into main

extension/CHANGELOG.md

@@ -1,5 +1,11 @@
 # remotedev-redux-devtools-extension
 
+## 3.2.4
+
+### Patch Changes
+
+- f1d6158: Fix mocking Chrome API for Electron
+
 ## 3.2.3
 
 ### Patch Changes

extension/chrome/manifest.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.2.3",
+  "version": "3.2.4",
   "name": "Redux DevTools",
   "description": "Redux DevTools for debugging application's state changes.",
   "homepage_url": "https://github.com/reduxjs/redux-devtools",

extension/edge/manifest.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.2.3",
+  "version": "3.2.4",
   "name": "Redux DevTools",
   "description": "Redux DevTools for debugging application's state changes.",
   "homepage_url": "https://github.com/reduxjs/redux-devtools",

extension/firefox/manifest.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.2.3",
+  "version": "3.2.4",
   "name": "Redux DevTools",
   "manifest_version": 3,
   "description": "Redux Developer Tools for debugging application state changes.",

extension/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "remotedev-redux-devtools-extension",
-  "version": "3.2.3",
+  "version": "3.2.4",
   "description": "Redux Developer Tools for debugging application state changes.",
   "homepage": "https://github.com/reduxjs/redux-devtools/tree/master/extension",
   "license": "MIT",

extension/src/app/Actions.tsx

@@ -29,11 +29,7 @@ interface OwnProps {
 }
 type Props = StateProps & DispatchProps & OwnProps;
 
-declare global {
+const isElectron = navigator.userAgent.includes('Electron');
-  interface Window {
-    isElectron?: boolean;
-  }
-}
 
 function sendMessage(message: SingleMessage) {
   chrome.runtime.sendMessage(message);
@@ -98,7 +94,7 @@ class Actions extends Component<Props> {
             <DispatcherButton dispatcherIsOpen={this.props.dispatcherIsOpen} />
           )}
           <Divider />
-          {!window.isElectron && (
+          {!isElectron && (
             <Button
               onClick={() => {
                 this.openWindow('window');
@@ -107,7 +103,7 @@ class Actions extends Component<Props> {
               <MdOutlineWindow />
             </Button>
           )}
-          {!window.isElectron && (
+          {!isElectron && (
             <Button
               onClick={() => {
                 this.openWindow('remote');

extension/src/background/index.ts

@@ -1,3 +1,4 @@
+import '../chromeApiMock';
 import configureStore from './store/backgroundStore';
 import openDevToolsWindow, { DevToolsPosition } from './openWindow';
 import { createMenu, removeMenu } from './contextMenus';

extension/src/chromeApiMock.ts

@@ -1,14 +1,11 @@
 // Mock not supported chrome.* API for Firefox and Electron
 
-window.isElectron =
+const isElectron = navigator.userAgent.includes('Electron');
-  window.navigator && window.navigator.userAgent.indexOf('Electron') !== -1;
+const isFirefox = navigator.userAgent.includes('Firefox');
-
-const isFirefox = navigator.userAgent.indexOf('Firefox') !== -1;
 
 // Background page only
 if (
-  (window.isElectron &&
+  (isElectron && location.pathname === '/background.bundle.js') ||
-    location.pathname === '/_generated_background_page.html') ||
   isFirefox
 ) {
   (chrome.runtime as any).onConnectExternal = {
@@ -18,7 +15,7 @@ if (
     addListener() {},
   };
 
-  if (window.isElectron) {
+  if (isElectron) {
     (chrome.notifications as any) = {
       onClicked: {
         addListener() {},
@@ -31,6 +28,11 @@ if (
         addListener() {},
       },
     };
+    (chrome.commands as any) = {
+      onCommand: {
+        addListener() {},
+      },
+    };
   } else {
     (chrome.storage as any).sync = chrome.storage.local;
     (chrome.runtime as any).onInstalled = {
@@ -39,7 +41,7 @@ if (
   }
 }
 
-if (window.isElectron) {
+if (isElectron) {
   if (!chrome.storage.local || !chrome.storage.local.remove) {
     (chrome.storage as any).local = {
       set(obj: any, callback: any) {
@@ -87,6 +89,6 @@ if (window.isElectron) {
   };
 }
 
-if (isFirefox || window.isElectron) {
+if (isFirefox || isElectron) {
   (chrome.storage as any).sync = chrome.storage.local;
 }

extension/test/electron/devpanel.spec.js

@@ -6,7 +6,7 @@ import chromedriver from 'chromedriver';
 import { switchMonitorTests, delay } from '../utils/e2e';
 
 const devPanelPath =
-  'chrome-extension://lmhkpmbekcpmknklioeibfkpmmfibljd/window.html';
+  'chrome-extension://lmhkpmbekcpmknklioeibfkpmmfibljd/devpanel.html';
 
 describe('DevTools panel for Electron', function () {
   let driver;
@@ -76,7 +76,7 @@ describe('DevTools panel for Electron', function () {
     expect(className).not.toMatch(/hidden/); // not hidden
   });
 
-  it.skip('should have Redux DevTools UI on current tab', async () => {
+  it('should have Redux DevTools UI on current tab', async () => {
     await driver
       .switchTo()
       .frame(
@@ -87,7 +87,7 @@ describe('DevTools panel for Electron', function () {
     await delay(1000);
   });
 
-  it.skip('should contain INIT action', async () => {
+  it('should contain INIT action', async () => {
     const element = await driver.wait(
       webdriver.until.elementLocated(
         webdriver.By.xpath('//div[@data-testid="actionListRows"]'),
@@ -99,7 +99,7 @@ describe('DevTools panel for Electron', function () {
     expect(val).toMatch(/@@INIT/);
   });
 
-  it.skip("should contain Inspector monitor's component", async () => {
+  it("should contain Inspector monitor's component", async () => {
     const val = await driver
       .findElement(webdriver.By.xpath('//div[@data-testid="inspector"]'))
       .getText();
@@ -107,7 +107,7 @@ describe('DevTools panel for Electron', function () {
   });
 
   Object.keys(switchMonitorTests).forEach((description) =>
-    it.skip(description, () => switchMonitorTests[description](driver)),
+    it(description, () => switchMonitorTests[description](driver)),
   );
 
   /*  it('should be no logs in console of main window', async () => {