HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Chat Plugin</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div id="chat-container">
      <div id="chat-header">
        <span id="chat-title">Chat Plugin</span>
        <span id="chat-close">X</span>
      </div>
      <div id="chat-messages">
      </div>
      <form id="chat-form">
        <input type="text" id="chat-input" placeholder="Type your message here...">
        <button type="submit" id="chat-send">Send</button>
      </form>
    </div>
    <script src="script.js"></script>
  </body>
</html>

CSS:

#chat-container {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  height: 400px;
  border: 1px solid black;
  overflow-y: auto;
  background-color: white;
  display: none;
}

#chat-header {
  background-color: gray;
  color: white;
  padding: 5px;
  display: flex;
  justify-content: space-between;
}

#chat-title {
  font-weight: bold;
}

#chat-close {
  cursor: pointer;
}

#chat-messages {
  padding: 5px;
}

#chat-form {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px;
}

#chat-input {
  flex-grow: 1;
  margin-right: 5px;
}

#chat-send {
  cursor: pointer;
}

JavaScript:

let chatContainer = document.getElementById("chat-container");
let chatClose = document.getElementById("chat-close");
let chatForm = document.getElementById("chat-form");
let chatInput = document.getElementById("chat-input");
let chatMessages = document.getElementById("chat-messages");

function toggleChat() {
  chatContainer.style.display = chatContainer.style.display === "none" ? "block" : "none";
}

function addMessage(message) {
  let messageElem = document.createElement("div");
  messageElem.innerText = message;
  chatMessages.appendChild(messageElem);
}

function sendMessage() {
  let message = chatInput.value;
  addMessage(message);
  chatInput.value = "";
}

chatClose.addEventListener("click", toggleChat);
chatForm.addEventListener("submit", (event) => {
  event.preventDefault();
  sendMessage();
});

// Add this line to your browser extension code to show the chat plugin:
// browser.browserAction.onClicked.addListener(toggleChat);
Напиши примерный скрипт html js и css плагина для Firefox который можно закрепить в панели инструментов При нажатии на плагин будет открываться окошко переписки с тобой

原文地址: https://www.cveoy.top/t/topic/bWPC 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录