chrome如何编写插件将任意图片或选择的文字发送给localhost的http api?

可以通过创建一个 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: ...

点击查看剩余70%