WIP: Extended extension.config.js (#188)

Author: cezaraugusto

.env.example

@@ -0,0 +1,3 @@
+EXTENSION_ENV=
+EXPERIMENTAL_ERRORS_PLUGIN=
+EXPERIMENTAL_EXTENSION_RESOLVER_PLUGIN=

examples/config-babel/extension.config.js

@@ -1,4 +1,4 @@
-/** @type {import('extension-develop').FileConfig} */
+/** @type {import('extension').FileConfig} */
 module.exports = {
   config: (config) => {
     config.module.rules.push(

examples/content-extension-config/content/ContentApp.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import ReactLogo from '../images/logo.svg'
+import reactLogo from '../images/react.png'
 import tailwindBg from '../images/tailwind_bg.png'
 import typescriptLogo from '../images/typescript.png'
 import tailwindLogo from '../images/tailwind.png'
@@ -38,7 +38,11 @@ export default function ContentApp() {
         </div>
         <div className="mx-auto max-w-md text-center lg:py-12 lg:mx-0 lg:flex-auto lg:text-left">
           <div className="flex items-center justify-center space-x-4 my-4 mx-auto">
-            <ReactLogo className="relative inline-block w-12" />
+            <img
+              alt="React logo"
+              src={reactLogo}
+              className="relative inline-block w-12"
+            />
             <div className="text-3xl text-white">+</div>
             <img
               alt="TypeScript logo"

examples/content-extension-config/extension.config.js

@@ -1,22 +1,36 @@
-/** @type {import('extension-develop').FileConfig} */
+/** @type {import('extension').FileConfig} */
 module.exports = {
-  config: (config) => {
-    config.module.rules.push(
-      {
-        test: /\.svg$/i,
-        type: 'asset',
-        // *.svg?url
-        resourceQuery: /url/
-      },
-      {
-        test: /\.svg$/i,
-        issuer: /\.[jt]sx?$/,
-        // exclude react component if *.svg?url
-        resourceQuery: {not: [/url/]},
-        use: ['@svgr/webpack']
-      }
-    )
-
-    return config
-  }
+  browsers: {
+    chrome: {
+      // noOpen?: boolean
+      // userDataDir?: string
+      // profile?: string
+      // preferences?: Record<string, any>
+      // browserFlags?: string[]
+      // startingUrl?: string
+      // chromiumBinary?: string
+      startingUrl: 'https://extension.js.org'
+    },
+    firefox: {
+      // noOpen?: boolean
+      // userDataDir?: string
+      // profile?: string
+      // preferences?: Record<string, any>
+      // browserFlags?: string[]
+      // startingUrl?: string
+      // geckoBinary?: string
+      startingUrl: 'about:debugging#/runtime/this-firefox'
+    }
+  },
+  development: {
+    // TBD
+    // browser: DevOptions['browser']
+    // port?: number
+    // browser: 'firefox', // can be an array
+    // zipFilename?: string
+    // zip?: boolean
+    // zipSource?: boolean
+    // polyfill?: boolean
+  },
+  deployment: {}
 }

examples/content-extension-config/images/logo.svg

@@ -15,7 +15,6 @@
     "url": "https://cezaraugusto.com"
   },
   "dependencies": {
-    "@svgr/webpack": "^8.1.0",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "tailwindcss": "^3.4.1"

examples/content-extension-config/images/react.png

@@ -1,4 +1,4 @@
-/** @type {import('extension-develop').FileConfig} */
+/** @type {import('extension').FileConfig} */
 module.exports = {
   config: (config) => {
     config.output.publicPath =

examples/content-extension-config/package.json

@@ -1,4 +1,4 @@
-/** @type {import('extension-develop').FileConfig} */
+/** @type {import('extension').FileConfig} */
 module.exports = {
   config: (config) => {
     config.module.rules.push(

examples/content-main-world/extension.config.js

@@ -1,6 +1,6 @@
 const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')
 
-/** @type {import('extension-develop').FileConfig} */
+/** @type {import('extension').FileConfig} */
 module.exports = {
   config: (config) => {
     config.plugins = [