如何用JavaScript启动HttpListener？能否用JS搭建简易服务器与Chrome扩展通信？

当然可以用JavaScript实现收发短消息的简易服务器，但得说明一点：浏览器端的JavaScript受安全限制，没法直接创建HTTP服务器，得用Node.js（服务器端JS环境）来搞定。下面一步步给你拆解实现方法，以及和Chrome扩展通信的关键点：

一、用Node.js搭建简易HTTP服务器 #

Node.js内置了http模块，不用额外安装依赖就能快速搭建一个处理POST请求的服务器，专门用来收发短消息。

服务器代码示例 #

创建一个server.js文件，把下面的代码放进去：

const http = require('http');

// 创建服务器实例
const server = http.createServer((req, res) => {
  // 配置CORS头，解决跨域问题（因为网页/扩展和本地服务器域名不同）
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'POST, OPTIONS');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type');

  // 处理浏览器的OPTIONS预检请求
  if (req.method === 'OPTIONS') {
    res.writeHead(200);
    res.end();
    return;
  }

  // 处理POST请求，接收来自网页的消息
  if (req.method === 'POST' && req.url === '/') {
    let incomingMessage = '';
    // 接收请求体数据
    req.on('data', chunk => {
      incomingMessage += chunk.toString();
    });
    // 数据接收完成后的处理
    req.on('end', () => {
      console.log('收到消息：', incomingMessage);
      // 给网页返回响应
      res.writeHead(200, {'Content-Type': 'text/plain'});
      res.end('服务器已收到：' + incomingMessage);
    });
  } else {
    // 处理其他请求
    res.writeHead(404);
    res.end('请求路径或方法不对哦');
  }
});

// 监听31666端口，和你网页里的请求地址对应
server.listen(31666, '127.0.0.1', () => {
  console.log('服务器启动成功！监听地址：http://127.0.0.1:31666/');
});

运行服务器 #

先确保你已经安装了Node.js，然后打开终端，进入server.js所在的文件夹，运行：

node server.js

看到终端输出启动提示，就说明服务器跑起来了。

二、优化你的网页点击事件代码 #

你原来的代码可以加个响应监听，确认消息是否发送成功，同时补上请求头（避免服务器解析出错）：

$("#sendMessageToExt").click(function(){ 
  var xhttp = new XMLHttpRequest(); 
  xhttp.open("POST", "http://127.0.0.1:31666/", true);
  // 设置请求头，告诉服务器发送的是纯文本
  xhttp.setRequestHeader("Content-Type", "text/plain");
  
  // 监听服务器的响应
  xhttp.onload = function() {
    if (this.status === 200) {
      console.log('服务器回复：', this.responseText);
      alert('消息发送成功！服务器说：' + this.responseText);
    } else {
      alert('发送失败，请检查服务器是否启动');
    }
  };
  
  var data = "Message Received"; 
  xhttp.send(data); 
});

三、和Chrome扩展通信的注意事项 #

如果你的最终目标是让网页和Chrome扩展通信，其实Chrome本身提供了更直接的API（比如chrome.runtime.sendMessage），但既然你想用HTTP方式，得注意这两点：

• 扩展权限配置：在Chrome扩展的manifest.json里，必须添加对本地服务器地址的权限，否则扩展会被阻止请求：

{
  "manifest_version": 3,
  "permissions": ["http://127.0.0.1:31666/*"],
  // 其他扩展配置（比如name、version等）...
}

• CORS配置：刚才服务器代码里的CORS头是必须的，Chrome的安全机制会拦截没有正确CORS配置的跨域请求。

关于"HttpListener"的说明 #

你提到的HttpListener是.NET平台里的类，在JavaScript（Node.js）环境中，对应的就是用http.createServer()创建的服务器实例——它本质上就是监听HTTP请求的服务，和HttpListener的功能完全一致，只是命名和实现方式不同而已。

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