Refactor extension builds (#1265)

* Update for Edge build

* Refactor builds

* Update permissions

* Update tests

Author: Methuselah96

.github/workflows/release.yml

@@ -38,3 +38,21 @@ jobs:
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+      - name: Archive Chrome Extension
+        uses: actions/upload-artifact@v3
+        with:
+          name: Chrome extension
+          path: extension/chrome/dist/chrome.zip
+
+      - name: Archive Edge Extension
+        uses: actions/upload-artifact@v3
+        with:
+          name: Edge extension
+          path: extension/edge/dist/edge.zip
+
+      - name: Archive Firefox Extension
+        uses: actions/upload-artifact@v3
+        with:
+          name: Edge extension
+          path: extension/firefox/dist/firefox.zip

extension/.eslintignore

@@ -1,7 +1,3 @@
-node_modules
-build
-dev
-webpack/replace
-examples
-npm-package
-_book
+node_modules
+dist
+examples

extension/.gitignore

@@ -1,9 +1,2 @@
 node_modules
-npm-debug.log
-.DS_Store
-.idea/
-dist/
-build/
-dev/
-tmp/
-_book
+dist

extension/chrome/manifest.json

@@ -1,7 +1,6 @@
 {
   "version": "3.0.11",
   "name": "Redux DevTools",
-  "short_name": "Redux DevTools",
   "description": "Redux DevTools for debugging application's state changes.",
   "homepage_url": "https://github.com/reduxjs/redux-devtools",
   "manifest_version": 2,

extension/edge/manifest.json

@@ -0,0 +1,67 @@
+{
+  "version": "3.0.11",
+  "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": {
+    "default_icon": "img/logo/gray.png",
+    "default_title": "Redux DevTools",
+    "default_popup": "window.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-remote": {
+      "description": "Remote DevTools"
+    },
+    "_execute_page_action": {
+      "suggested_key": {
+        "default": "Ctrl+Shift+E"
+      }
+    }
+  },
+  "icons": {
+    "16": "img/logo/16x16.png",
+    "48": "img/logo/48x48.png",
+    "128": "img/logo/128x128.png"
+  },
+  "options_ui": {
+    "page": "options.html",
+    "chrome_style": true
+  },
+  "background": {
+    "scripts": ["background.bundle.js"],
+    "persistent": false
+  },
+  "content_scripts": [
+    {
+      "matches": ["<all_urls>"],
+      "exclude_globs": ["https://www.google*"],
+      "js": ["content.bundle.js", "pagewrap.bundle.js"],
+      "run_at": "document_start",
+      "all_frames": true
+    }
+  ],
+  "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:;"
+}

extension/package.json

@@ -11,16 +11,14 @@
     "url": "https://github.com/reduxjs/redux-devtools.git"
   },
   "scripts": {
-    "start": "webpack --config webpack/dev.config.babel.js",
-    "build": "pnpm run build:extension && pnpm run build:firefox",
-    "build:extension": "rimraf build/extension && webpack --config webpack/wrap.config.babel.js && webpack --config webpack/prod.config.babel.js",
-    "build:firefox": "webpack --config webpack/prod.firefox.config.babel.js",
+    "start": "webpack --env development --watch",
+    "build": "pnpm run build:extension && pnpm run build:chrome && pnpm run build:edge && pnpm run build:firefox",
+    "build:extension": "webpack --env production && webpack --config wrap.webpack.config.js",
+    "build:chrome": "cpy dist/** chrome/dist/unpacked && cpy manifest.json dist/unpacked --cwd chrome && bestzip chrome/dist/chrome.zip chrome/dist/unpacked",
+    "build:edge": "cpy dist/** edge/dist/unpacked && cpy manifest.json dist/unpacked --cwd edge && bestzip edge/dist/edge.zip edge/dist/unpacked",
+    "build:firefox": "cpy dist/** firefox/dist/unpacked && cpy manifest.json dist/unpacked --cwd firefox && bestzip firefox/dist/firefox.zip firefox/dist/unpacked",
     "build:examples": "babel-node examples/buildAll.js",
-    "precompress:extension": "pnpm run lint && pnpm run test:app && pnpm run build:extension && pnpm run test:chrome && pnpm run test:electron",
-    "precompress:firefox": "pnpm run lint && pnpm run build:firefox && pnpm run test:app",
-    "compress:extension": "bestzip build/extension.zip build/extension",
-    "compress:firefox": "bestzip build/extension.zip build/extension",
-    "clean": "rimraf build && rimraf dev",
+    "clean": "rimraf dist && rimraf chrome/dist && rimraf edge/dist && rimraf firefox/dist",
     "test:app": "cross-env BABEL_ENV=test jest test/app",
     "test:chrome": "jest test/chrome",
     "test:electron": "pnpm run build:test:electron:fixture && jest test/electron",
@@ -68,6 +66,7 @@
     "bestzip": "^2.2.1",
     "chromedriver": "^106.0.1",
     "copy-webpack-plugin": "^11.0.0",
+    "cpy-cli": "^4.2.0",
     "cross-env": "^7.0.3",
     "css-loader": "^6.7.1",
     "electron": "^21.1.1",
@@ -82,7 +81,6 @@
     "immutable": "^4.1.0",
     "jest": "^29.2.2",
     "jest-environment-jsdom": "^29.2.2",
-    "path-browserify": "^1.0.1",
     "pug-html-loader": "^1.1.5",
     "raw-loader": "^4.0.2",
     "react-transform-catch-errors": "^1.0.2",

extension/src/options/EditorGroup.tsx

@@ -23,7 +23,7 @@ export default ({ options, saveOption }: OptionsProps) => {
         <label className="option__label" htmlFor="editor-browser">
           {navigator.userAgent.indexOf('Firefox') !== -1
             ? "Don't open in external editor"
-            : "Use browser's debugger (from Chrome devpanel only)"}
+            : "Use browser's debugger (from browser devpanel only)"}
         </label>
       </div>
 

extension/src/options/MiscellaneousGroup.tsx

@@ -2,10 +2,6 @@ import React from 'react';
 import { OptionsProps } from './Options';
 
 export default ({ options, saveOption }: OptionsProps) => {
-  const browserName = navigator.userAgent.includes('Firefox')
-    ? 'Firefox'
-    : 'Chrome';
-
   return (
     <fieldset className="option-group">
       <legend className="option-group__title">Miscellaneous</legend>
@@ -46,7 +42,7 @@ export default ({ options, saveOption }: OptionsProps) => {
           Show errors
         </label>
         <div className="option__hint">
-          Show the {browserName} notifications when errors occur in the app
+          Show the browser notifications when errors occur in the app
         </div>
       </div>
     </fieldset>

extension/src/pageScriptWrap.ts

@@ -2,7 +2,7 @@ let s = document.createElement('script');
 s.type = 'text/javascript';
 
 if (process.env.NODE_ENV === 'production') {
-  const { default: script } = require('raw-loader!tmp/page.bundle.js');
+  const { default: script } = require('raw-loader!../dist/page.bundle.js');
   s.appendChild(document.createTextNode(script));
   (document.head || document.documentElement).appendChild(s);
   s.parentNode!.removeChild(s);

extension/test/chrome/extension.spec.js

@@ -5,7 +5,7 @@ import chromedriver from 'chromedriver';
 import { switchMonitorTests, delay } from '../utils/e2e';
 
 const port = 9515;
-const path = resolve(__dirname, '..', '..', 'build', 'extension');
+const path = resolve(__dirname, '..', '..', 'dist');
 const extensionId = 'lmhkpmbekcpmknklioeibfkpmmfibljd';
 const actionsPattern =
   /^@@INIT(.|\n)+@@reduxReactRouter\/routerDidChange(.|\n)+@@reduxReactRouter\/initRoutes(.|\n)+$/;