Added functionality in popup.html using React, also converted content…

….js code to react.

.github/workflows/build-and-publish.yml

@@ -14,14 +14,14 @@ jobs:
       - id: packExtensionDir
         uses: cardinalby/webext-buildtools-pack-extension-dir-action@v1
         with:
-          extensionDir: 'extension'
-          zipFilePath: 'build/extension.zip'
+          extensionDir: 'build'
+          zipFilePath: 'compressed/extension.zip'
 
       - uses: cardinalby/webext-buildtools-chrome-crx-action@v2
         with:
           # zip file made at the packExtensionDir step
-          zipFilePath: 'build/extension.zip'
-          crxFilePath: 'build/extension.crx'
+          zipFilePath: 'compressed/extension.zip'
+          crxFilePath: 'compressed/extension.crx'
           privateKey: ${{ secrets.CHROME_CRX_PRIVATE_KEY }}
 
       # Get version from manifest file (replace with your file name and parsing)
@@ -49,7 +49,7 @@ jobs:
         uses: actions/upload-release-asset@v1
         with:
           upload_url: ${{ steps.create_release.outputs.upload_url }}
-          asset_path: ./build/extension.zip  # Replace with your ZIP file path
+          asset_path: ./compressed/extension.zip  # Replace with your ZIP file path
           asset_name: extension-${{ steps.get_version.outputs.version }}.zip
           asset_content_type: application/zip
         env:
@@ -59,7 +59,7 @@ jobs:
         uses: actions/upload-release-asset@v1
         with:
           upload_url: ${{ steps.create_release.outputs.upload_url }}
-          asset_path: ./build/extension.crx  # Replace with your CRX file path
+          asset_path: ./compressed/extension.crx  # Replace with your CRX file path
           asset_name: extension-${{ steps.get_version.outputs.version }}.crx
           asset_content_type: application/octet-stream  # Adjust content type if needed
         env:

.gitignore

@@ -1,3 +1,33 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
 **/.idea
 **/node_modules/*
 *.secrets
+*.zip
+*.rar
+*.tar.gz
+*.tar
+*.gz
+*.tgz

.run/build.run.xml

@@ -0,0 +1,12 @@
+<component name="ProjectRunConfigurationManager">
+  <configuration default="false" name="build" type="js.build_tools.npm" nameIsGenerated="true">
+    <package-json value="$PROJECT_DIR$/package.json" />
+    <command value="run" />
+    <scripts>
+      <script value="build" />
+    </scripts>
+    <node-interpreter value="project" />
+    <envs />
+    <method v="2" />
+  </configuration>
+</component>

config-overrides.js

@@ -0,0 +1,57 @@
+const { override } = require('customize-cra');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+
+const overrideEntry = (config) => {
+    config.entry = {
+        main: './src/popup', // the extension UI
+        background: './src/background',
+        content: [
+            './src/content/index.js', // Include index.js
+            './src/content/index.css' // Include index.css
+        ],
+    };
+
+    return config;
+};
+
+const overrideOutput = (config) => {
+    config.output = {
+        ...config.output,
+        filename: 'static/js/[name].js',
+        chunkFilename: 'static/js/[name].js',
+    };
+
+    return config;
+};
+
+const overridePlugins = (config) => {
+    config.plugins.push(
+        new MiniCssExtractPlugin({
+            filename: 'static/css/[name].css',
+            chunkFilename: 'static/css/[id].css',
+        }),
+        new CopyWebpackPlugin({
+            patterns: [
+                {
+                    from: 'icons', // Source directory
+                    to: 'icons' // Destination directory
+                },
+                {
+                    from: 'images', // Source directory
+                    to: 'images' // Destination directory
+                }
+            ]
+        })
+    );
+
+    return config;
+};
+
+module.exports = {
+    webpack: (config) => {
+        config = override(overrideEntry, overrideOutput)(config);
+        config = overridePlugins(config);
+        return config;
+    },
+};