开发Chrome扩展实现Enter键触发发送按钮点击功能问询

Absolutely! A Chrome extension is the perfect solution here—no need to mess with the site’s source code, and it’ll work reliably on your specific chat service. Let’s walk through exactly how to build it, plus a lighter alternative if you prefer.

1. Chrome Extension Solution #

Step 1: Set up the extension files #

Create a new folder for your extension (name it something like enter-to-send-chat), and add these two files:

• manifest.json (controls the extension’s settings)
• content.js (the script that runs directly on your chat site)

Step 2: Configure manifest.json #

Paste this code in, replacing https://your-chat-site.com/* with the actual URL of your chat service:

{
  "manifest_version": 3,
  "name": "Enter to Send Chat",
  "version": "1.0",
  "description": "Press Enter to send messages and auto-refocus the input box",
  "content_scripts": [
    {
      "matches": ["https://your-chat-site.com/*"],
      "js": ["content.js"],
      "run_at": "document_idle"
    }
  ],
  "permissions": []
}

Step 3: Write the content.js script #

This script listens for Enter presses in the chat input, triggers the send button, and refocuses the input. We’ll use the send icon from your provided HTML to target the button reliably:

// Wait for the page to fully load before running
document.addEventListener('DOMContentLoaded', () => {
  // Update this selector to match your chat input field (inspect the input to find it)
  const chatInputSelector = 'textarea, input[type="text"]'; // Example—adjust as needed
  
  document.addEventListener('keydown', (event) => {
    // Only trigger if Enter is pressed (and no Shift/Ctrl to allow new lines if needed)
    if (event.key === 'Enter' && !event.shiftKey && !event.ctrlKey) {
      const activeInput = document.activeElement;
      
      // Make sure we're actually in the chat input
      if (activeInput.matches(chatInputSelector)) {
        event.preventDefault(); // Stop Enter from creating a new line
        
        // Find the send button using the ion-icon with name "send" (from your HTML)
        const sendButton = document.querySelector('button:has(ion-icon[name="send"])');
        
        if (sendButton) {
          sendButton.click(); // Click the native send button
          
          // Refocus the input after a small delay (lets the send action complete first)
          setTimeout(() => {
            activeInput.focus();
          }, 100);
        }
      }
    }
  });
});

Quick note: You’ll need to tweak chatInputSelector to match your chat service’s actual input field. Right-click the input box, select "Inspect", and copy a unique selector (like textarea.chat-message-input or input[ng-reflect-model="message"]).

Step 4: Install the extension in Chrome #

• Open Chrome and go to chrome://extensions/
• Toggle on "Developer mode" (top-right corner)
• Click "Load unpacked" and select your extension folder
• Head to your chat site—press Enter in the input box, and it should send the message and refocus automatically!

2. Lighter Alternative: Tampermonkey Userscript #

If you don’t want to build a full extension, a Tampermonkey script is even quicker:

1. Install the Tampermonkey extension from the Chrome Web Store
2. Click the Tampermonkey icon and select "Create a new script"
3. Replace the default code with this (update the @match URL and input selector as before):

// ==UserScript==
// @name         Enter to Send Chat
// @version      1.0
// @description  Press Enter to send messages and refocus input
// @author       You
// @match        https://your-chat-site.com/*
// @grant        none
// ==/UserScript==

document.addEventListener('DOMContentLoaded', () => {
  const chatInputSelector = 'textarea, input[type="text"]'; // Adjust this
  
  document.addEventListener('keydown', (event) => {
    if (event.key === 'Enter' && !event.shiftKey && !event.ctrlKey) {
      const activeInput = document.activeElement;
      if (activeInput.matches(chatInputSelector)) {
        event.preventDefault();
        const sendButton = document.querySelector('button:has(ion-icon[name="send"])');
        
        if (sendButton) {
          sendButton.click();
          setTimeout(() => activeInput.focus(), 100);
        }
      }
    }
  });
});

4. Save the script—it’ll start working on your chat site immediately.

Troubleshooting Tips #

• Send button not triggering? If the icon selector doesn’t work, use one of the button’s classes from your HTML: document.querySelector('button.button-clear-md')
• Input not refocusing? Increase the setTimeout delay to 200ms—some sites need a little extra time after sending.
• Enter creates new lines anyway? Double-check that event.preventDefault() is running—make sure your chatInputSelector is correctly targeting the right field.

内容的提问来源于stack exchange，提问作者Liran Revivo