可以通过创建一个 Chrome 插件，利用其强大的 API 来实现这个功能。核心思路是：
添加右键菜单：当用户右键点击图片或选中文字时，在上下文菜单中显示我们的自定义选项。
捕获数据：
对于图片，Chrome 的上下文菜单 API 会直接提供图片的 URL (srcUrl)。
对于文字，我们需要向当前页面注入一个脚本来获取用户选中的文本。
发送数据：在后台脚本中，使用 fetch API 将捕获到的数据以 JSON 格式发送到你本地的 HTTP API。
下面是详细的步骤和代码。
第1步：创建 manifest.json
这是插件的配置文件，定义了插件的基本信息和所需的权限。
{
"manifest_version": 3,
"name": "Send to Localhost",
"version": "1.0",
"description": "Send selected text or images to a local HTTP API.",
"permissions": [
"contextMenus", // 用于创建右键菜单
"activeTab", // 用于获取当前活动标签页的权限
"scripting" // 用于向页面注入脚本（获取选中文本）
],
"host_permissions": [
"http://localhost/*", // 关键：允许插件向 localhost 发起请求
"https://localhost/*"
],
"background": {
"service_worker": "background.js"
},
"action": {
"default_popup": "popup.html",
"default_icon": "icon.png"
},
"icons": {
"48": "icon.png"
}
} 权限解释：
contextMenus: 创建和管理右键菜单。
activeTab + scripting: 这对组合是 Manifest V3 中向当前页面临时注入脚本的标准方式，用于获取选中的文字。
host_permissions: 这是最重要的权限。它明确允许你的插件向 http://localhost 或 https://localhost 下的任何端口和路径发起网络请求。没有这个，fetch 请求会被浏览器的安全策略阻止。
第2步：创建后台脚本 background.js
这是插件的核心逻辑所在，负责创建菜单、处理点击事件和发送数据。
// 在插件安装时创建右键菜单
chrome.runtime.onInstalled.addListener(() => {
// 为选中的文字创建菜单项
chrome.contextMenus.create({
id: "send-text",
title: "发送选中的文字到 Localhost",
contexts: ["selection"] // 只在用户选中文字时显示
});
// 为图片创建菜单项
chrome.contextMenus.create({
id: "send-image",
title: "发送图片到 Localhost",
contexts: ["image"] // 只在用户右键点击图片时显示
});
});
// 监听右键菜单的点击事件
chrome.contextMenus.onClicked.addListener((info, tab) => {
if (info.menuItemId === "send-text") {
// 处理发送文字
handleSendText(tab.id);
} else if (info.menuItemId === "send-image") {
// 处理发送图片
handleSendImage(info.srcUrl);
}
});
// 处理发送文字的逻辑
async function handleSendText(tabId) {
// 向当前标签页注入一个脚本来获取选中的文字
const results = await chrome.scripting.executeScript({
target: { tabId: tabId },
function: () => {
// 这个函数会在目标页面中执行
return window.getSelection().toString().trim();
}
});
// 检查是否获取到了文字
if (results && results[0] && results[0].result) {
const selectedText = results[0].result;
sendDataToApi({ type: 'text', content: selectedText });
} else {
console.log("No text selected or could not retrieve text.");
// 可以在这里添加一个通知提示用户
}
}
// 处理发送图片的逻辑
function handleSendImage(imageUrl) {
if (imageUrl) {
sendDataToApi({ type: 'image', url: imageUrl });
}
}
// 统一的发送数据到 API 的函数
async function sendDataToApi(data) {
const apiUrl = 'http://localhost:3000/receiver'; // !! 修改为你的 API 地址 !!
console.log('Sending data to API:', data);
try {
const response = await fetch(apiUrl, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const result = await response.json();
console.log('API Response:', result);
// 可以在这里添加一个成功通知
chrome.notifications.create({
type: 'basic',
iconUrl: 'icon.png',
title: '发送成功',
message: '数据已成功发送到本地 API。'
});
} catch (error) {
console.error('Failed to send data to API:', error);
// 可以在这里添加一个失败通知
chrome.notifications.create({
type: 'basic',
iconUrl: 'icon.png',
title: '发送失败',
message: `无法连接到本地 API: ${error.message}`
});
}
} 代码解释：
chrome.runtime.onInstalled: 在插件首次安装或更新时执行，我们用它来创建右键菜单。
contexts: ["selection"] 和 contexts: ["image"]: 这两个属性让菜单项只在特定上下文（选中文字或图片）时出现，非常智能。
chrome.scripting.executeScript: 这是 Manifest V3 的标准做法。我们向当前页面注入一个匿名函数 () => window.getSelection().toString().trim()，它的返回值就是用户选中的文字。
sendDataToApi: 这个函数封装了 fetch 请求，将数据以 POST 方式发送到指定的 API。它还包含了基本的错误处理和成功/失败通知。
注意：为了使用 chrome.notifications，你需要在 manifest.json 的 permissions 数组中添加 "notifications"。
第3步：创建一个简单的弹出窗口 popup.html (可选)
虽然核心功能通过右键菜单实现，但一个弹出窗口可以提供说明或状态信息。
popup.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body { width: 300px; font-family: sans-serif; padding: 10px; }
h3 { margin-top: 0; }
</style>
</head>
<body>
<h3>Send to Localhost</h3>
<p>右键点击选中的文字或图片，然后选择 "发送到 Localhost"。</p>
<p>确保你的本地 API 服务正在运行。</p>
</body>
</html> 第4步：创建一个本地测试服务器
为了测试插件，你需要一个在 localhost 运行的 HTTP 服务器。下面是一个使用 Node.js 和 Express 框架的简单示例。
安装 Node.js (如果尚未安装)。
创建一个新文件夹（例如 local-api），进入该文件夹。
在终端中运行 npm init -y。
运行 npm install express 安装 Express。
创建一个名为 server.js 的文件，内容如下：
server.js
const express = require('express');
const app = express();
const port = 3000; // 端口号，需要和 background.js 中的 apiUrl 匹配
// 这个中间件用于解析 JSON 格式的请求体
app.use(express.json());
// 定义接收数据的 POST 路由
app.post('/receiver', (req, res) => {
console.log('--- Received Data ---');
console.log(req.body);
console.log('---------------------');
// 根据数据类型做不同处理
if (req.body.type === 'text') {
console.log(`Received text: "${req.body.content}"`);
} else if (req.body.type === 'image') {
console.log(`Received image URL: ${req.body.url}`);
}
// 向插件发送一个成功响应
res.status(200).json({ status: 'success', message: 'Data received successfully!' });
});
app.listen(port, () => {
console.log(`Local API server listening at http://localhost:${port}`);
}); 如何加载和测试
启动本地服务器：在 local-api 文件夹下，打开终端并运行 node server.js。你应该会看到 "Local API server listening at http://localhost:3000"。
准备插件文件：创建一个文件夹（例如 send-to-localhost），将 manifest.json, background.js, popup.html 和一个 icon.png (48x48) 放入其中。
加载插件：
打开 Chrome，访问 chrome://extensions/。
打开右上角的 开发者模式。
点击 加载已解压的扩展程序，选择你创建的 send-to-localhost 文件夹。
测试：
测试文字：在任意网页上选中一段文字，右键点击，选择 "发送选中的文字到 Localhost"。
测试图片：在任意网页上右键点击一张图片，选择 "发送图片到 Localhost"。
查看结果：观察运行 node server.js 的终端窗口，你应该能看到打印出的 JSON 数据。同时，浏览器会弹出一个通知，告诉你发送成功或失败。
这样，你就拥有了一个功能完整、可以向本地 API 发送图片和文字的 Chrome 插件了！
网友回复
CefSharp与Electron开发桌面应用哪个更好？
在哪可以免费白嫖claude 4.5？
如何编写一个chrome插件实现多线程高速下载大文件？
cdn版本的vue在网页中出现typeerror错误无法找到错误代码位置怎么办？
pywebview能否使用webrtc远程控制共享桌面和摄像头？
pywebview6.0如何让窗体接受拖拽文件获取真实的文件路径？
如何在linux系统中同时能安装运行apk的安卓应用？
python有没有离线验证码识别ocr库？
各家的ai图生视频及文生视频的api价格谁最便宜？
openai、gemini、qwen3-vl、Doubao-Seed-1.6在ui截图视觉定位这款哪家更强更准？
