Chrome 插件：将选中文本发送到上下文菜单

在 Chrome 插件开发中，我们常常需要处理用户选中的文本。本文将介绍如何将选中文本发送到 Chrome 插件的上下文菜单，并展示实现步骤。

1. 配置 manifest.json

首先，我们需要在 manifest.json 文件中声明相应的权限和背景脚本：

{
  "permissions": ["contextMenus"],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  }
}
  • "permissions": ["contextMenus"]：声明插件需要访问上下文菜单权限。
  • "background"：配置背景脚本，包括脚本文件路径和是否持久化运行。

2. 创建上下文菜单项

在 background.js 文件中，使用 chrome.contextMenus API 创建一个上下文菜单项：

chrome.runtime.onInstalled.addListener(() => {
  chrome.contextMenus.create({
    id: "sendSelectedText",
    title: "发送选中文本",
    contexts: ["selection"]
  });
});
  • id：上下文菜单项的唯一标识符。
  • title：上下文菜单项的显示名称。
  • contexts：指定上下文菜单项在哪些情况下显示，这里设置为 "selection"，表示仅在用户选中文本时显示。

3. 添加上下文菜单点击事件监听器

使用 chrome.contextMenus.onClicked.addListener() 监听上下文菜单项被点击事件：

chrome.contextMenus.onClicked.addListener((info, tab) => {
  if (info.menuItemId === "sendSelectedText") {
    const selectedText = info.selectionText;
    // 在这里处理选中的文本
    console.log("选中的文本:", selectedText);
    // 可以在这里发送文本到你的服务器或进行其他操作
  }
});
  • info：包含上下文菜单点击事件信息的变量。
  • tab：包含当前激活标签页信息的变量。
  • info.menuItemId：上下文菜单项的 ID。
  • info.selectionText：用户选中的文本内容。

总结

通过以上步骤，我们可以实现将用户选中的文本发送到 Chrome 插件的上下文菜单，并根据需要进行进一步处理。