feat: enable webextension builds

Currently only supports Chrome due to no `chrome` -> `browser` polyfill

webpack.config.js

@@ -1,5 +1,6 @@
 var path = require('path');
 var CopyPlugin = require('copy-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 var webpack = require('webpack');
 var fs = require('fs');
 var package = require('./package.json');
@@ -21,32 +22,66 @@ const defines = {
 }
 
 module.exports = [
-  /*
   // WebExtension
   {
+    devtool: "source-map",
     entry: {
-      content: './src/content/content.ts'
+      content: './src/content/content.ts',
+      background: './src/background/background.ts',
+      style: './src/content/style.css'
     },
     module: {
       rules: [
         {
           test: /\.tsx?$/,
           use: 'ts-loader',
-          exclude: /node_modules/,
+          exclude: /node_modules|GM_fetch/,
         },
         {
-          test: /\.(png|jpg|gif|svg)$/i,
+          test: /\.css$/i,
           use: [
             {
-              loader: 'url-loader',
+              loader: MiniCssExtractPlugin.loader,
               options: {
-                limit: true,
+                publicPath: '/', // Adjust if needed for relative path resolution
+              },
+            },
+            {
+              loader: 'css-loader',
+              options: {
+                url: true, // Ensures url() in CSS is processed
+              },
+            },
+            {
+              loader: 'postcss-loader',
+              options: {
+                postcssOptions: {
+                  plugins: {
+                    'postcss-url': {
+                      url: (asset) => {
+                        // Transform relative URLs to extension-style URLs
+                        const relativePath = asset.url.replace(/^\.\.\//, '') // Remove leading ../resources part
+                        return `chrome-extension://__MSG_@@extension_id__/${relativePath}`;
+                      },
+                    },
+                  },
+                },
               },
             },
           ],
         },
+        {
+          test: /\.(jpe?g|png|ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
+          type: 'asset/resource',
+          generator: {
+            filename: 'resources/[name][ext]',
+          },
+        },
       ],
     },
+    externals: {
+      './src/content/GM_fetch': 'commonjs2 null'
+    },
     optimization: {
       minimize: true
     },
@@ -55,12 +90,12 @@ module.exports = [
       filename: "[name]/[name].js"
     },
     resolve: {
-      extensions: [".ts", ".tsx", ".js", ".json", ".css"]
+      extensions: [".ts", ".tsx", ".js", ".json"]
     },
     plugins: [
-      new webpack.DefinePlugin({__ENV_WEBEXTENSION: true, __ENV_USERSCRIPT: false}),
+      new webpack.DefinePlugin({ ...defines, __ENV_WEBEXTENSION: true, __ENV_USERSCRIPT: false}),
       new CopyPlugin({ patterns: [
-        { from: './src/manifest.json', to: 'manifest.json', 
+        { from: './src/manifest.json', to: 'manifest.json',
           transform(content, absoluteFrom) {
             return allReplace(content.toString(), defines)
           },
@@ -68,14 +103,17 @@ module.exports = [
       ]}),
       new CopyPlugin({ patterns: [
         { from: './src/icons', to: 'icons/[file]'},
+        { from: './src/resources/*.png', to: 'resources/[name][ext]' },
       ]}),
+      new MiniCssExtractPlugin({
+        filename: 'lib/style.css'
+      }),
     ],
   },
-  */
   // Userscript
   {
     entry: {
-      content: './src/content/content.ts'
+      content: ['./src/content/content.ts', './src/content/GM_fetch/index.js' ]
     },
     module: {
       rules: [