The great cleanup

.changeset/config.json

@@ -8,18 +8,17 @@
   "updateInternalDependencies": "patch",
   "ignore": [
     "browser-extension-manifest-fields",
+    "webpack-browser-extension-common-errors-plugin",
     "eslint-config-extension-create",
-    "webpack-run-chrome-extension",
-    "webpack-run-edge-extension",
     "webpack-browser-extension-html-plugin",
     "webpack-browser-extension-icons-plugin",
     "webpack-browser-extension-json-plugin",
     "webpack-browser-extension-locales-plugin",
+    "webpack-browser-extension-manifest-compat-plugin",
     "webpack-browser-extension-manifest-plugin",
-    "webpack-browser-extension-polyfill-plugin",
-    "webpack-browser-extension-polyfill-loader",
-    "webpack-browser-extension-web-resouces-plugin",
-    "webpack-common-errors-plugin",
+    "webpack-browser-extension-resouces-plugin",
+    "webpack-run-chrome-extension",
+    "webpack-browser-extension-scripts-plugin",
     "tsconfig"
   ]
 }

.eslintignore

@@ -25,5 +25,5 @@ browser-extension-test-data
 __hmr-tests__
 __utils__
 reloadService.js
-
-
+__examples
+**/html-bundler-webpack-plugin/**/*

.gitignore

@@ -55,9 +55,8 @@ yarn-error.log*
 .vercel
 
 # extension-create (alpha)
-__hmr-tests__
+packages/*/demo
+packages/*/spec
 browser-extension-test-data
-__utils__
-packages/reload-plugin
-packages/web-resources-plugin
 TODO.yml
+_examples

.prettierignore

@@ -15,3 +15,4 @@ __hmr-tests__
 __utils__
 browser-extension-test-data
 dist
+packages/html-plugin/plugins/html-bundler-webpack-plugin

packages/browser-extension-manifest-fields/fields/html-fields/sandbox.ts

@@ -2,13 +2,16 @@ import path from 'path'
 import getHtmlResources from '../../helpers/getHtmlFileResources'
 import {type ManifestData} from '../../types'
 
-type SandboxType = Record<string, | {
-        css: string[]
-        js: string[]
-        static: string[]
-        html: string
-      }
-    | undefined>;
+type SandboxType = Record<
+  string,
+  | {
+      css: string[]
+      js: string[]
+      static: string[]
+      html: string
+    }
+  | undefined
+>
 
 export default function sandbox(
   manifestPath: string,

packages/browser-extension-manifest-fields/fields/scripts-fields/background.ts

@@ -19,18 +19,5 @@ export default function background(
     })
   }
 
-  const serviceWorker = manifest.background.service_worker
-
-  if (serviceWorker) {
-    const serviceWorker = manifest.background.service_worker
-
-    const serviceWorkerAbsolutePath = path.join(
-      path.dirname(manifestPath),
-      serviceWorker
-    )
-
-    return serviceWorkerAbsolutePath
-  }
-
   return undefined
 }

packages/browser-extension-manifest-fields/fields/scripts-fields/content_scripts.ts

@@ -35,6 +35,7 @@ export default function contentScript(
     const css = contentCss(content)
 
     contentScriptsData[`content_scripts-${index}`] = [
+      // contentScriptsData.content_scripts = [
       ...(js || []).filter((js) => js != null),
       ...(css || []).filter((css) => css != null)
     ]

packages/browser-extension-manifest-fields/fields/scripts-fields/index.ts

@@ -1,5 +1,6 @@
 import {type ManifestData} from '../../types'
 import backgroundScripts from './background'
+import serviceWorker from './service_worker'
 import contentScripts from './content_scripts'
 import userScripts from './user_scripts'
 
@@ -9,7 +10,8 @@ export default function getScriptFields(
 ) {
   return {
     background: backgroundScripts(manifestPath, manifest),
+    service_worker: serviceWorker(manifestPath, manifest),
     ...contentScripts(manifestPath, manifest),
-    userScripts: userScripts(manifestPath, manifest)
+    user_scripts: userScripts(manifestPath, manifest)
   }
 }

packages/browser-extension-manifest-fields/fields/scripts-fields/service_worker.ts

@@ -0,0 +1,26 @@
+import path from 'path'
+import {type ManifestData} from '../../types'
+
+export default function serviceWorker(
+  manifestPath: string,
+  manifest: ManifestData
+) {
+  if (!manifest || !manifest.background) {
+    return undefined
+  }
+
+  const serviceWorker = manifest.background.service_worker
+
+  if (serviceWorker) {
+    const serviceWorker = manifest.background.service_worker
+
+    const serviceWorkerAbsolutePath = path.join(
+      path.dirname(manifestPath),
+      serviceWorker
+    )
+
+    return serviceWorkerAbsolutePath
+  }
+
+  return undefined
+}

packages/browser-extension-manifest-fields/fields/web-resources-fields/index.ts

@@ -53,5 +53,5 @@ export default function getWebAccessibleResources(
     webAccessibleResources.push(resourcesAbsolutePath)
   }
 
-  return webAccessibleResources.flat().filter(arr => arr.length > 0)
+  return webAccessibleResources.flat().filter((arr) => arr.length > 0)
 }

packages/browser-extension-manifest-fields/module.ts

@@ -22,7 +22,10 @@ function browserExtensionManifestFields(
     json: jsonFromManifest(manifestPath, manifestContent),
     locales: localesFromManifest(manifestPath, manifestContent),
     scripts: scriptsFromManifest(manifestPath, manifestContent),
-    webResources: webResourcesFromManifest(manifestPath, manifestContent)
+    web_accessible_resources: webResourcesFromManifest(
+      manifestPath,
+      manifestContent
+    )
   }
 }
 

packages/browser-extension-manifest-fields/types.ts

@@ -15,4 +15,4 @@ export interface ManifestFields {
   webResources: any
 }
 
-export type ManifestData = Record<string, any | any[]>;
+export type ManifestData = Record<string, any | any[]>

packages/common-errors-plugin/module.ts

@@ -0,0 +1,70 @@
+import webpack from 'webpack'
+import {
+  handleMultipleAssetsError
+  // handleCantResolveError
+} from './src/compilationErrorHandlers'
+import {
+  handleInsecureCSPValue,
+  handleWrongWebResourceFormatError
+} from './src/browserRuntimeErrorHandlers'
+import {CommonErrorsPluginInterface} from './types'
+
+export default class CommonErrorsPlugin {
+  public readonly manifestPath: string
+
+  constructor(options: CommonErrorsPluginInterface) {
+    this.manifestPath = options.manifestPath
+  }
+
+  private handleCompilations(compilation: webpack.Compilation) {
+    compilation.errors.forEach((error, index) => {
+      const multipleAssetsError = handleMultipleAssetsError(error)
+      // const cantResolveError = handleCantResolveError(error)
+
+      if (multipleAssetsError) {
+        compilation.errors[index] = multipleAssetsError
+      }
+
+      // if (cantResolveError) {
+      // compilation.errors[index] = cantResolveError
+      // }
+    })
+  }
+
+  private handleBrowserRuntimeErrors(compilation: webpack.Compilation) {
+    const insecureCSPValueError = handleInsecureCSPValue(this.manifestPath)
+    const wrongWebResourceFormatError = handleWrongWebResourceFormatError(
+      this.manifestPath
+    )
+
+    if (insecureCSPValueError) {
+      compilation.errors.push(insecureCSPValueError)
+    }
+
+    if (wrongWebResourceFormatError) {
+      compilation.errors.push(wrongWebResourceFormatError)
+    }
+  }
+
+  apply(compiler: webpack.Compiler) {
+    compiler.hooks.compilation.tap(
+      'HandleCommonErrorsPlugin',
+      (compilation) => {
+        compilation.hooks.afterSeal.tapAsync(
+          'HandleCommonErrorsPlugin',
+          (done) => {
+            // Handle errors related to compilation such
+            // as multiple assets with the same name,
+            // or missing dependencies.
+            this.handleCompilations(compilation)
+
+            // Handle errors related to the browser
+            // runtime such as insecure CSP values.
+            this.handleBrowserRuntimeErrors(compilation)
+            done()
+          }
+        )
+      }
+    )
+  }
+}

packages/common-errors-plugin/package.json

@@ -0,0 +1,56 @@
+{
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/cezaraugusto/webpack-browser-extension-common-errors-plugin.git"
+  },
+  "engines": {
+    "node": ">=16"
+  },
+  "name": "webpack-browser-extension-common-errors-plugin",
+  "version": "0.0.0",
+  "description": "webpack plugin to handle common errors from browser extensions",
+  "main": "./dist/module.js",
+  "types": "./dist/module.d.ts",
+  "files": [
+    "dist"
+  ],
+  "author": {
+    "name": "Cezar Augusto",
+    "email": "boss@cezaraugusto.net",
+    "url": "https://cezaraugusto.com"
+  },
+  "scripts": {
+    "watch": "yarn compile --watch",
+    "compile": "tsup-node ./module.ts --format cjs --dts --target=node16 --minify",
+    "lint": "eslint \"./**/*.ts*\"",
+    "test": "echo \"Note: no test specified\" && exit 0"
+  },
+  "keywords": [
+    "webpack",
+    "plugin",
+    "browser",
+    "web",
+    "extension",
+    "web-ext",
+    "manifest",
+    "manifest.json"
+  ],
+  "peerDependencies": {
+    "webpack": "^5.0.0"
+  },
+  "dependencies": {
+    "browser-extension-manifest-fields": "*",
+    "content-security-policy-parser": "^0.4.1"
+  },
+  "devDependencies": {
+    "eslint": "^7.32.0",
+    "eslint-config-extension-create": "*",
+    "jasmine": "^4.0.2",
+    "rimraf": "^3.0.2",
+    "webpack": "^5.9.0",
+    "webpack-cli": "^4.2.0",
+    "tsconfig": "*",
+    "tsup": "^7.1.0"
+  }
+}

packages/common-errors-plugin/src/browserRuntimeErrorHandlers.ts

@@ -0,0 +1,67 @@
+import webpack from 'webpack'
+import parseCSP from 'content-security-policy-parser'
+
+export function handleInsecureCSPValue(
+  manifestPath: string
+): webpack.WebpackError | null {
+  const manifest = require(manifestPath)
+  const manifestCSP = manifest.content_security_policy
+  const extensionPagesCSP = manifest.content_security_policy?.extension_pages
+
+  const checkCSP = (cspString: string) => {
+    const parsedCSP = parseCSP(cspString)
+
+    if (
+      parsedCSP['script-src'] &&
+      parsedCSP['script-src'].includes("'unsafe-eval'")
+    ) {
+      return `[manifest.json]: Insecure CSP value "'unsafe-eval'" in directive 'script-src'.`
+    }
+  }
+
+  if (manifest.manifest_version === 3) {
+    const mainCSPError = manifestCSP ? checkCSP(manifestCSP) : null
+    const extensionPagesCSPError = extensionPagesCSP
+      ? checkCSP(extensionPagesCSP)
+      : null
+
+    if (mainCSPError) return new webpack.WebpackError(mainCSPError)
+    if (extensionPagesCSPError)
+      return new webpack.WebpackError(extensionPagesCSPError)
+  }
+
+  return null
+}
+
+export function handleWrongWebResourceFormatError(
+  manifestPath: string
+): webpack.WebpackError | null {
+  const manifest = require(manifestPath)
+  const webResources = manifest.web_accessible_resources
+
+  if (webResources) {
+    const mv2Format = webResources.some((resource: string) => {
+      return typeof resource === 'string'
+    })
+
+    const mv3Format = webResources.some((resource: any) => {
+      return (
+        typeof resource === 'object' || resource.resources || resource.matches
+      )
+    })
+
+    if (manifest.manifest_version === 2 && !mv2Format) {
+      return new webpack.WebpackError(
+        `[manifest.json]: web_accessible_resources must be a string array in Manifest V2`
+      )
+    }
+
+    if (manifest.manifest_version === 3 && !mv3Format) {
+      return new webpack.WebpackError(
+        `[manifest.json]: web_accessible_resources must be an array of objects in Manifest V3`
+      )
+    }
+  }
+
+  return null
+}