Upgrade to Manifest V3 (#1714)

* Update Chrome manifest.json

* Remove use of window in background

* Test devpanel

* Inject pageScript using new API

* Keep connection from devpanel to background alive

* Keep connection from content script to background alive

* Replace page action with action

* Cleanup syncOptions

* Update options to not rely on background page access

* Start work on updating popup

* Updates

* Remove window

* Get opening in a separate window working

* Remove pageScriptWrap

* Add socket to panelStore

* Fix tests

* Try to use MV3 for Firefox

* Fix path

* Fix Chrome E2E tests

* Revert unintentional change

* Skip Electron tests for now

Looks like they're still working through stuff in electron/electron#41613

* Better image centering

The Firefox popup did not like the old CSS. This is still not perfect, but it's better than it was.

* Create shaggy-taxis-cross.md

Author: Methuselah96

.changeset/shaggy-taxis-cross.md

@@ -0,0 +1,5 @@
+---
+'remotedev-redux-devtools-extension': minor
+---
+
+Upgrade to Manifest V3

extension/build.mjs

@@ -5,7 +5,7 @@ import pug from 'pug';
 const args = process.argv.slice(2);
 const prod = !args.includes('--dev');
 
-const commonEsbuildOptions = {
+await esbuild.build({
   bundle: true,
   logLevel: 'info',
   outdir: 'dist',
@@ -15,40 +15,24 @@ const commonEsbuildOptions = {
     'process.env.NODE_ENV': prod ? '"production"' : '"development"',
     'process.env.BABEL_ENV': prod ? '"production"' : '"development"',
   },
-};
-
-await esbuild.build({
-  ...commonEsbuildOptions,
   entryPoints: [
     { out: 'background.bundle', in: 'src/background/index.ts' },
     { out: 'options.bundle', in: 'src/options/index.tsx' },
-    { out: 'window.bundle', in: 'src/window/index.tsx' },
     { out: 'remote.bundle', in: 'src/remote/index.tsx' },
     { out: 'devpanel.bundle', in: 'src/devpanel/index.tsx' },
     { out: 'devtools.bundle', in: 'src/devtools/index.ts' },
     { out: 'content.bundle', in: 'src/contentScript/index.ts' },
     { out: 'page.bundle', in: 'src/pageScript/index.ts' },
-    ...(prod ? [] : [{ out: 'pagewrap.bundle', in: 'src/pageScriptWrap.ts' }]),
   ],
   loader: {
     '.woff2': 'file',
   },
 });
 
-if (prod) {
-  await esbuild.build({
-    ...commonEsbuildOptions,
-    entryPoints: [{ out: 'pagewrap.bundle', in: 'src/pageScriptWrap.ts' }],
-    loader: {
-      '.js': 'text',
-    },
-  });
-}
-
 console.log();
 
 console.log('Creating HTML files...');
-const htmlFiles = ['devpanel', 'devtools', 'options', 'remote', 'window'];
+const htmlFiles = ['devpanel', 'devtools', 'options', 'remote'];
 for (const htmlFile of htmlFiles) {
   fs.writeFileSync(
     `dist/${htmlFile}.html`,

extension/chrome/manifest.json

@@ -3,26 +3,20 @@
   "name": "Redux DevTools",
   "description": "Redux DevTools for debugging application's state changes.",
   "homepage_url": "https://github.com/reduxjs/redux-devtools",
-  "manifest_version": 2,
-  "page_action": {
+  "manifest_version": 3,
+  "action": {
     "default_icon": "img/logo/gray.png",
     "default_title": "Redux DevTools",
-    "default_popup": "window.html#popup"
+    "default_popup": "devpanel.html#popup"
   },
   "commands": {
-    "devtools-left": {
-      "description": "DevTools window to left"
-    },
-    "devtools-right": {
-      "description": "DevTools window to right"
-    },
-    "devtools-bottom": {
-      "description": "DevTools window to bottom"
+    "devtools-window": {
+      "description": "DevTools window"
     },
     "devtools-remote": {
       "description": "Remote DevTools"
     },
-    "_execute_page_action": {
+    "_execute_action": {
       "suggested_key": {
         "default": "Ctrl+Shift+E"
       }
@@ -34,36 +28,37 @@
     "128": "img/logo/128x128.png"
   },
   "options_ui": {
-    "page": "options.html",
-    "chrome_style": true
+    "page": "options.html"
   },
   "background": {
-    "scripts": ["background.bundle.js"],
-    "persistent": false
+    "service_worker": "background.bundle.js"
   },
   "content_scripts": [
     {
       "matches": ["<all_urls>"],
       "exclude_globs": ["https://www.google*"],
-      "js": ["content.bundle.js", "pagewrap.bundle.js"],
+      "js": ["content.bundle.js"],
       "run_at": "document_start",
       "all_frames": true
+    },
+    {
+      "matches": ["<all_urls>"],
+      "exclude_globs": ["https://www.google*"],
+      "js": ["page.bundle.js"],
+      "run_at": "document_start",
+      "all_frames": true,
+      "world": "MAIN"
     }
   ],
   "devtools_page": "devtools.html",
-  "web_accessible_resources": ["page.bundle.js"],
   "externally_connectable": {
     "ids": ["*"]
   },
-  "permissions": [
-    "notifications",
-    "contextMenus",
-    "storage",
-    "file:///*",
-    "http://*/*",
-    "https://*/*"
-  ],
-  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'; style-src * 'unsafe-inline'; img-src 'self' data:;",
+  "permissions": ["notifications", "contextMenus", "storage"],
+  "host_permissions": ["file:///*", "http://*/*", "https://*/*"],
+  "content_security_policy": {
+    "extension_pages": "script-src 'self'; object-src 'self'; style-src * 'unsafe-inline'; img-src 'self' data:;"
+  },
   "update_url": "https://clients2.google.com/service/update2/crx",
   "key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAsdJEPwY92xUACA9CcDBDBmbdbp8Ap3cKQ0DJTUuVQvqb4FQAv8RtKY3iUjGvdwuAcSJQIZwHXcP2aNDH3TiFik/NhRK2GRW8X3OZyTdkuDueABGP2KEX8q1WQDgjX/rPIinGYztUrvoICw/UerMPwNW62jwGoVU3YhAGf+15CgX2Y6a4tppnf/+1mPedKPidh0RsM+aJY98rX+r1SPAHPcGzMjocLkqcT75DZBXer8VQN14tOOzRCd6T6oy7qm7eWru8lJwcY66qMQvhk0osqEod2G3nA7aTWpmqPFS66VEiecP9PgZlp8gQdgZ3dFhA62exydlD55JuRhiMIR63yQIDAQAB"
 }

extension/firefox/manifest.json

@@ -1,28 +1,22 @@
 {
   "version": "3.1.10",
   "name": "Redux DevTools",
-  "manifest_version": 2,
+  "manifest_version": 3,
   "description": "Redux Developer Tools for debugging application state changes.",
   "homepage_url": "https://github.com/reduxjs/redux-devtools",
-  "applications": {
+  "browser_specific_settings": {
     "gecko": {
       "id": "[email protected]"
     }
   },
-  "page_action": {
+  "action": {
     "default_icon": "img/logo/38x38.png",
     "default_title": "Redux DevTools",
-    "default_popup": "window.html#popup"
+    "default_popup": "devpanel.html#popup"
   },
   "commands": {
-    "devtools-left": {
-      "description": "DevTools window to left"
-    },
-    "devtools-right": {
-      "description": "DevTools window to right"
-    },
-    "devtools-bottom": {
-      "description": "DevTools window to bottom"
+    "devtools-window": {
+      "description": "DevTools window"
     },
     "devtools-remote": {
       "description": "Remote DevTools"
@@ -42,21 +36,22 @@
   "content_scripts": [
     {
       "matches": ["<all_urls>"],
-      "js": ["content.bundle.js", "pagewrap.bundle.js"],
+      "js": ["content.bundle.js"],
       "run_at": "document_start",
       "all_frames": true
+    },
+    {
+      "matches": ["<all_urls>"],
+      "js": ["page.bundle.js"],
+      "run_at": "document_start",
+      "all_frames": true,
+      "world": "MAIN"
     }
   ],
   "devtools_page": "devtools.html",
-  "web_accessible_resources": ["page.bundle.js"],
-  "permissions": [
-    "notifications",
-    "contextMenus",
-    "tabs",
-    "storage",
-    "file:///*",
-    "http://*/*",
-    "https://*/*"
-  ],
-  "content_security_policy": "script-src 'self'; object-src 'self'; img-src 'self' data:;"
+  "permissions": ["notifications", "contextMenus", "tabs", "storage"],
+  "host_permissions": ["file:///*", "http://*/*", "https://*/*"],
+  "content_security_policy": {
+    "extension_pages": "script-src 'self'; object-src 'self'; img-src 'self' data:;"
+  }
 }

extension/src/app/Actions.tsx

@@ -18,7 +18,7 @@ import {
   TopButtons,
 } from '@redux-devtools/app';
 import { GoBroadcast } from 'react-icons/go';
-import { MdBorderBottom, MdBorderLeft, MdBorderRight } from 'react-icons/md';
+import { MdOutlineWindow } from 'react-icons/md';
 import type { Position } from '../pageScript/api/openWindow';
 import type { SingleMessage } from '../background/store/apiMiddleware';
 
@@ -98,31 +98,13 @@ class Actions extends Component<Props> {
             <DispatcherButton dispatcherIsOpen={this.props.dispatcherIsOpen} />
           )}
           <Divider />
-          {!window.isElectron && position !== '#left' && (
-            <Button
-              onClick={() => {
-                this.openWindow('left');
-              }}
-            >
-              <MdBorderLeft />
-            </Button>
-          )}
-          {!window.isElectron && position !== '#right' && (
-            <Button
-              onClick={() => {
-                this.openWindow('right');
-              }}
-            >
-              <MdBorderRight />
-            </Button>
-          )}
-          {!window.isElectron && position !== '#bottom' && (
+          {!window.isElectron && (
             <Button
               onClick={() => {
-                this.openWindow('bottom');
+                this.openWindow('window');
               }}
             >
-              <MdBorderBottom />
+              <MdOutlineWindow />
             </Button>
           )}
           {!window.isElectron && (

extension/src/background/contextMenus.ts

@@ -2,29 +2,23 @@ import openDevToolsWindow, { DevToolsPosition } from './openWindow';
 
 export function createMenu() {
   const menus = [
-    { id: 'devtools-left', title: 'To left' },
-    { id: 'devtools-right', title: 'To right' },
-    { id: 'devtools-bottom', title: 'To bottom' },
-    {
-      id: 'devtools-panel',
-      title: 'Open in a panel (enable in browser settings)',
-    },
+    { id: 'devtools-window', title: 'Open in a window' },
     { id: 'devtools-remote', title: 'Open Remote DevTools' },
   ];
 
   let shortcuts: { [commandName: string]: string | undefined } = {};
   chrome.commands.getAll((commands) => {
-    commands.forEach(({ name, shortcut }) => {
+    for (const { name, shortcut } of commands) {
       shortcuts[name!] = shortcut;
-    });
+    }
 
-    menus.forEach(({ id, title }) => {
+    for (const { id, title } of menus) {
       chrome.contextMenus.create({
         id: id,
         title: title + (shortcuts[id] ? ' (' + shortcuts[id] + ')' : ''),
         contexts: ['all'],
       });
-    });
+    }
   });
 }
 

extension/src/background/index.ts

@@ -1,29 +1,22 @@
-import '../chromeApiMock';
-import { Store } from 'redux';
-import configureStore, { BackgroundAction } from './store/backgroundStore';
+import configureStore from './store/backgroundStore';
 import openDevToolsWindow, { DevToolsPosition } from './openWindow';
 import { createMenu, removeMenu } from './contextMenus';
-import syncOptions from '../options/syncOptions';
-import { BackgroundState } from './store/backgroundReducer';
-
-declare global {
-  interface Window {
-    store: Store<BackgroundState, BackgroundAction>;
-  }
-}
+import { getOptions } from '../options/syncOptions';
 
 // Expose the extension's store globally to access it from the windows
 // via chrome.runtime.getBackgroundPage
-window.store = configureStore();
+export const store = configureStore();
 
 // Listen for keyboard shortcuts
 chrome.commands.onCommand.addListener((shortcut) => {
   openDevToolsWindow(shortcut as DevToolsPosition);
 });
 
-// Create the context menu when installed
+// Disable the action by default and create the context menu when installed
 chrome.runtime.onInstalled.addListener(() => {
-  syncOptions().get((option) => {
+  chrome.action.disable();
+
+  getOptions((option) => {
     if (option.showContextMenus) createMenu();
   });
 });

extension/src/background/logging.ts

@@ -1,4 +1,5 @@
 import { LIFTED_ACTION } from '@redux-devtools/app';
+import { store } from './index';
 
 export function getReport(
   reportId: string,
@@ -24,7 +25,7 @@ export function getReport(
       .then((json) => {
         const { payload, preloadedState } = json;
         if (!payload) return;
-        window.store.dispatch({
+        store.dispatch({
           type: LIFTED_ACTION,
           message: 'IMPORT',
           state: JSON.stringify({ payload, preloadedState }),