当我点击 chrome 扩展时，它应该运行 server.js

Question

我已经制作了使用 chatGPT 回复邮件的网站，现在我想对其进行扩展，当用户粘贴他们的邮件时，它会在弹出窗口中生成回复，然后用户可以从中复制。现在，当我为客户端运行 npm 命令时，服务器 我的网站运行良好，但我不知道当用户点击扩展程序时如何运行它？

这里是 manifest.json

{
    "manifest_version": 2,
    "name": "ChatGPT Email Assistant",
    "version": "1.0",
    "description": "An email assistant that uses the ChatGPT language model",
    "permissions": [
      "activeTab",
      "storage",
      "http://localhost:5000"
    ],
    "browser_action": {
      "default_popup": "./client/index.html"
    }

  }

这里是 server.js

import express from 'express';
import * as dotenv from 'dotenv';
import cors from 'cors';
import { Configuration, OpenAIApi } from 'openai';
dotenv.config();
const configuration = new Configuration({
  apiKey: process.env.OPENAI_API_KEY
  
});
const openai = new OpenAIApi(configuration);
const app = express();
app.use(cors());
app.use(express.json());
app.get('/', async (req, res) => {
  res.status(200).send({
    message: 'Hello From Codex!'
  })
})
app.post('/', async (req, res) => {
    try {
      const prompt = req.body.prompt;
      const response = await openai.createCompletion({
        model: "text-davinci-003",
        prompt: `Reply this email +${prompt}`,
        temperature: 0, 
        max_tokens: 3000, 
        top_p: 1,
        frequency_penalty: 0.5,
        presence_penalty: 0,
      });
      res.status(200).send({
        bot: response.data.choices[0].text,
      });
    } catch (error) {
      console.error(error)
      res.status(500).send(error || 'Something went wrong');
    }
  })
  app.listen(5000, () => console.log('AI server started on http://localhost:5000'))

脚本.js

import bot from "./assets/bot.svg";
import user from "./assets/user.svg";

const form = document.querySelector("form");
const chatContainer = document.querySelector("#chat_container");
let loadInterval;
function loader(element) {
  element.textContent = "";
  loadInterval = setInterval(() => {
    element.textContent += ".";
    if (element.textContent === "....") {
      element.textContent = "";
    }
  }, 300);
}
function typeText(element, text) {
  let index = 0;
  let interval = setInterval(() => {
    if (index < text.length) {
      element.innerHTML += text.charAt(index);
      index++;
    } else {
      clearInterval(interval);
    }
  }, 20);
}
function generateUniqueId() {
  const timestamp = Date.now();
  const randomNumber = Math.random();
  const hexadecimalString = randomNumber.toString(16);
  return `id-${timestamp}-${hexadecimalString}`;
}
function chatStripe(isAi, value, uniqueId) {
  return `
      <div class="wrapper ${isAi && "ai"}">
          <div class="chat">
              <div class="profile">
                  <img 
                    src=${isAi ? bot : user} 
                    alt="${isAi ? "bot" : "user"}" 
                  />
              </div>
              <div class="message" id=${uniqueId}>${value}</div>
          </div>
      </div>
  `;
}
const handleSubmit = async (e) => {
  e.preventDefault();
  const data = new FormData(form);
  // to clear the textarea input
  form.reset();
  form.classList.add('formdisplay');
  // bot's chatstripe
  const uniqueId = generateUniqueId();
  chatContainer.innerHTML += chatStripe(true, " ", uniqueId);
  // to focus scroll to the bottom
  chatContainer.scrollTop = chatContainer.scrollHeight;
  const messageDiv = document.getElementById(uniqueId);
  // messageDiv.innerHTML = "..."
  loader(messageDiv);
  //here we are going to fetch data
  const response = await fetch("http://localhost:5000", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      prompt: data.get("prompt"),
    }),
  });
  clearInterval(loadInterval);
  messageDiv.innerHTML = "";
  if (response.ok) {
    const data = await response.json();
    const parsedData = data.bot.trim();
    // console.log(parsedData);
    typeText(messageDiv, parsedData);
  } else {
    const err = await response.text();
    messageDiv.innerHTML = " Oops! Something went wrong.";
    alert(err);
  }
};

form.addEventListener("submit", handleSubmit);
form.addEventListener("keyup", (e) => {
  if (e.keyCode === 13) {
    handleSubmit(e);
  }
});
chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.tabs.executeScript(null, {file: "script.js"});
});

现在当点击扩展时，一个弹出窗口应该打开然后当用户粘贴他们的邮件文本后我输入它应该给 AI 生成的回复