浏览器自定义右键菜单插件

案例二：自定义右键菜单插件

功能描述

在浏览器右键菜单中添加“搜索选中文字”自定义选项，当用户选中网页文本并右键点击该选项时，会在新标签页通过 Google 搜索引擎搜索选中的文本内容。

核心技术

1. 使用chrome.contextMenus API 创建自定义右键菜单项、监听菜单点击事件；
2. 结合chrome.tabs API 实现新标签页的创建与搜索链接跳转；
3. 在manifest.json中声明contextMenus核心权限，配置后台脚本。

完整代码实现

1. 核心配置文件：manifest.json（Manifest V3 版本）

{
  "manifest_version": 3,
  "name": "自定义右键搜索",
  "version": "1.0",
  "description": "右键选中文字，快速Google搜索",
  "icons": {
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  },
  "permissions": ["contextMenus", "tabs"],
  "background": {
    "service_worker": "background.js"
  }
}

关键配置说明：

• permissions：必须声明contextMenus（右键菜单权限）和tabs（标签页操作权限）；
• background：指定后台脚本background.js，用于创建和监听右键菜单，V3 版本需用service_worker声明。

2. 后台脚本：background.js（核心逻辑）

// 插件安装/更新时创建右键菜单项，避免重复创建
chrome.runtime.onInstalled.addListener(() => {
  chrome.contextMenus.create({
    id: "search-selected-text", // 菜单项唯一ID，用于后续判断点击事件
    title: "Google搜索“%s”", // %s会自动替换为用户选中的文本
    contexts: ["selection"] // 仅当用户选中文本时，右键才显示该选项
  });
});

// 监听右键菜单项的点击事件
chrome.contextMenus.onClicked.addListener((info, tab) => {
  // 判断是否点击了“搜索选中文字”菜单项
  if (info.menuItemId === "search-selected-text") {
    // 拼接Google搜索链接，对选中的文本进行URL编码
    const searchUrl = `https://www.google.com/search?q=${encodeURIComponent(info.selectionText)}`;
    // 在新标签页打开搜索链接
    chrome.tabs.create({ url: searchUrl, active: true });
  }
});

关键 API 说明：

• chrome.runtime.onInstalled：插件安装 / 更新时触发，确保菜单项仅创建一次；
• chrome.contextMenus.create：创建右键菜单项，contexts: ["selection"]限制仅选中文本时显示；
• info.selectionText：获取用户选中的文本内容；
• chrome.tabs.create：创建新标签页并打开搜索链接，active: true表示新标签页自动激活。

3. 图标文件

准备 3 种尺寸的图标文件（icon16.png/icon48.png/icon128.png），放在插件根目录，与manifest.json同级，用于插件在浏览器扩展页、工具栏的展示。

插件目录结构

自定义右键搜索插件/
├─ icon16.png
├─ icon48.png
├─ icon128.png
├─ manifest.json
└─ background.js

测试与运行步骤

1. 打开 Chrome 浏览器，进入更多工具 > 扩展程序，开启右上角开发者模式；
2. 点击加载已解压的扩展程序，选择插件根目录，完成加载；
3. 打开任意网页，选中一段文本，右键点击，即可看到“Google 搜索‘选中的文本’”选项；
4. 点击该选项，浏览器会自动打开新标签页并展示 Google 搜索结果。

扩展优化方向

1. 支持多搜索引擎切换（如百度、必应），可在后台脚本中配置多个搜索链接；
2. 添加快捷键触发搜索，结合chrome.commands API 实现；
3. 对选中的特殊文本（如链接、数字）做针对性搜索优化；
4. 增加右键菜单图标，通过chrome.contextMenus.create的icons字段配置。