Test webpack (#30)

* webpack seems functioning

* Remove node_modules from the repository and update .gitignore

* small fix

* automatic zip creation added

* icons fix  and start new version

* v0.3.3 fix bug with chat.
need to finish hot-reload

* hot reload (to be finished)

package.json

@@ -1,8 +1,10 @@
-{ "name": "GPT-Prompter-project",
+{
+  "name": "GPT-Prompter project",
   "version": "1.0.0",
   "description": "",
   "scripts": {
-    "build": "webpack",
+    "build": "webpack --mode production",
+    "watch": "webpack --mode development --watch",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "dependencies": {
@@ -13,6 +15,7 @@
   },
   "devDependencies": {
     "copy-webpack-plugin": "^11.0.0",
+    "crx-hotreload": "^1.0.6",
     "css-loader": "^6.7.3",
     "html-webpack-plugin": "^5.5.0",
     "style-loader": "^3.3.2",

src/background.js

@@ -204,6 +204,7 @@ chrome.runtime.onMessage.addListener((message, sender) => {
   else if (message.text === "launchGPT") {
     // Get the tab from the sender
     const { tab } = sender; // this line is equivalent to const tab = sender.tab;
+    console.log(typeof message.prompt.prompt, message.prompt);
     // Launch GPT
     chrome.storage.sync.get("APIKEY", function (items) {
       (async () => {

src/gpt3.js

@@ -77,6 +77,7 @@ async function promptGPT3Prompting(prompt, items, tabs) {
   var model = prompt["model"];
   // if the model is gpt-4 or gpt-3.5-turbo, we need to check that the text is a valid json
   if (model == "gpt-4" || model == "gpt-3.5-turbo") {
+    console.log('Check',typeof text)
     if (typeof text !== "object") 
      {text = [{"role": "user", "content": text}];}
   }

src/history.html

@@ -15,7 +15,7 @@
     <div class="container-fluid">
         <div class="row">
             <div class="logoimage" style="display:flex; padding: 40px;">
-                <img src="../icons/NewiconA128.png">
+                <img src="icons/NewiconA128.png">
             </div>
             <div class="typewriter">
                 <h1 style="margin-bottom: -1rem;" >

src/hot-reload.js

@@ -0,0 +1,6 @@
+const crxHotreload = require('crx-hotreload');
+
+if (module.hot) {
+  module.hot.accept();
+  crxHotreload();
+}

src/manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "GPT-Prompter",
-  "version": "0.0.3.2",
-  "description": "Fast custom prompts to GPT-3 and ChatGPT API",
+  "version": "0.0.3.3",
+  "description": "Fast custom prompts to GPT-3, GPT-4 and ChatGPT API",
   "manifest_version": 3,
   "icons": {
     "16": "icons/iconA16.png",

src/popup.html

@@ -26,7 +26,7 @@
       >
         <div class="card-body">
           <h5>
-            <img src="../icons/NewiconA48.png" alt="logo" class="logoimage" />
+            <img src="icons/NewiconA48.png" alt="logo" class="logoimage" />
             GPT-Prompter<br />
           </h5>
           <!-- <p class="card-text">Here are the instructions to configure the plugin to work properly</p> -->
@@ -93,7 +93,7 @@ <h5>
         style="border-radius: 0px"
       >
         <div class="card-header" style="border: 0" id="advancedSettingsHeader">
-          <img src="../icons/NewiconA16.png" alt="logo" class="logo" />
+          <img src="icons/NewiconA16.png" alt="logo" class="logo" />
           <b style="display: inline-block; line-height: 40px">
             Advanced Settings</b
           >
@@ -133,7 +133,7 @@ <h5>
       >
         <div class="card-header" id="promptDesignHeader">
           <div style="display: inline-block; vertical-align: middle">
-            <img src="../icons/NewiconA16.png" alt="logo" class="logo" />
+            <img src="icons/NewiconA16.png" alt="logo" class="logo" />
             <b style="display: inline-block; line-height: 40px"
               >Prompt Design</b
             >
@@ -384,7 +384,7 @@ <h5>
       <div class="card text-bg-light" style="border-radius: 0px">
         <div class="card-header" id="yourPromptsHeader">
           <div style="display: inline-block; vertical-align: middle">
-            <img src="../icons/NewiconA16.png" alt="logo" class="logo" />
+            <img src="icons/NewiconA16.png" alt="logo" class="logo" />
             <b style="display: inline-block; line-height: 40px">Your Prompts</b>
           </div>
           <button

src/popup_world.js

@@ -762,7 +762,7 @@ class popUpClass extends HTMLElement {
         let modelToUse = this.getBodyData(targetId, "model");
         let textPrompt = this.getTextareaValue(targetId)
         if (modelToUse === "gpt-3.5-turbo" || modelToUse === "gpt-4") {
-          textPrompt = JSON.stringify([{"role": "user", "content": textPrompt}])
+          textPrompt = [{"role": "user", "content": textPrompt}]
         }
 
         const promptObj = {
@@ -840,7 +840,7 @@ class popUpClass extends HTMLElement {
 
         // append the user text to the previous messages
         previousmessages.push({"role":"user", "content": userTextPrompt});
-        let textPrompt = JSON.stringify(previousmessages);
+        let textPrompt = previousmessages;
         const promptObj = {
           prompt: textPrompt,
           model: modelToUse,

webpack.config.js

@@ -8,42 +8,47 @@ const extensionName = 'GPT-Prompter';
 const extensionVersion = manifestJson.version;
 
 
+module.exports = (env, argv) => {
+  const isDevelopment = argv.mode === 'development';
 
-module.exports = {
-  mode: 'production',
-  entry: {
-    markdown: './src/markdown.js',
-    content: './src/content.js',
-    background: './src/background.js',
-    popup_world: './src/popup_world.js',
-    popup: './src/popup.js',
-    history: './src/history.js',
-  },
-  output: {
-    filename: '[name].bundle.js',
-    path: path.resolve(__dirname, 'dist'),
-  },
-  plugins: [
-    new HtmlWebpackPlugin({
-      template: './src/popup.html',
-      filename: 'popup.html',
-      chunks: ['popup'],
-    }),
-    new HtmlWebpackPlugin({
-      template: './src/history.html',
-      filename: 'history.html',
-      chunks: ['history'],
-    }),
-    new CopyWebpackPlugin({
-      patterns: [
-        { from: 'src/style.css', to: 'style.css' },
-        { from: 'src/manifest.json', to: 'manifest.json' },
-        { from: 'src/icons', to: 'icons' }, 
-      ],
-    }),
-    new ZipWebpackPlugin({
-      path: path.resolve(__dirname, 'zips'),
-      filename: `${extensionName}-${extensionVersion}.zip`,
-    }),// Add the zip-webpack-plugin instance
-  ],
+  return {
+    mode: argv.mode,
+    entry: {
+      markdown: './src/markdown.js',
+      content: './src/content.js',
+      background: isDevelopment
+        ? ['./src/background.js', './src/hot-reload.js']
+        : './src/background.js',
+      popup_world: './src/popup_world.js',
+      popup: './src/popup.js',
+      history: './src/history.js',
+    },
+    output: {
+      filename: '[name].bundle.js',
+      path: path.resolve(__dirname, 'dist'),
+    },
+    plugins: [
+      new HtmlWebpackPlugin({
+        template: './src/popup.html',
+        filename: 'popup.html',
+        chunks: ['popup'],
+      }),
+      new HtmlWebpackPlugin({
+        template: './src/history.html',
+        filename: 'history.html',
+        chunks: ['history'],
+      }),
+      new CopyWebpackPlugin({
+        patterns: [
+          { from: 'src/style.css', to: 'style.css' },
+          { from: 'src/manifest.json', to: 'manifest.json' },
+          { from: 'src/icons', to: 'icons' },
+        ],
+      }),
+      new ZipWebpackPlugin({
+        path: path.resolve(__dirname, 'zips'),
+        filename: `${extensionName}-${extensionVersion}.zip`,
+      }), // Add the zip-webpack-plugin instance
+    ],
+  };
 };