Chrome扩展V3开发求助：实现选中文本右键菜单并调用REST API

1. 配置Manifest.json #

创建manifest.json文件，声明核心配置与所需权限：

{
  "manifest_version": 3,
  "name": "文本选送工具",
  "version": "1.0",
  "description": "选中文本右键发送至指定API",
  "permissions": ["contextMenus", "activeTab", "scripting"],
  "host_permissions": ["https://your-api-domain.com/*"], // 替换为你的API实际域名
  "background": {
    "service_worker": "background.js"
  }
}

2. 背景服务工作者(background.js) #

创建background.js，实现菜单创建与点击逻辑：

// 扩展安装时初始化上下文菜单
chrome.runtime.onInstalled.addListener(() => {
  chrome.contextMenus.create({
    id: "option1",
    title: "选项1",
    contexts: ["selection"] // 仅选中文本时显示菜单
  });

  chrome.contextMenus.create({
    id: "option2",
    title: "选项2",
    contexts: ["selection"]
  });
});

// 监听菜单点击事件
chrome.contextMenus.onClicked.addListener(async (info, tab) => {
  if (!tab.id) return;

  // 注入脚本获取页面选中的文本
  const [scriptResult] = await chrome.scripting.executeScript({
    target: { tabId: tab.id },
    func: () => window.getSelection().toString().trim()
  });
  const selectedText = scriptResult.result;
  if (!selectedText) return;

  // 组装请求数据
  const requestData = {
    selectedText,
    pageUrl: tab.url,
    menuOption: info.menuItemId // 对应菜单ID：option1/option2
  };

  // 发送POST请求到API
  try {
    const response = await fetch("https://your-api-domain.com/your-endpoint", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify(requestData)
    });
    if (!response.ok) throw new Error(`请求失败：${response.status}`);
    console.log("数据发送成功");
  } catch (err) {
    console.error("发送出错:", err);
  }
});

关键细节说明 #

• 权限作用：contextMenus用于创建右键菜单，activeTab+scripting用于注入脚本获取页面选中文本，host_permissions授权API域名的跨域请求权限。
• 菜单触发限制：contexts: ["selection"]确保只有用户选中文本时，右键菜单才会显示。
• 文本获取逻辑：后台脚本无法直接访问页面DOM，必须通过scripting.executeScript注入脚本到页面上下文获取选中内容。
• API适配：替换代码中的API域名和接口路径为实际地址，可根据API要求调整请求头或数据格式。

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