手把手教你做“划词搜索”浏览器插件,照着做 100% 成功!

🚀 手把手教你做“划词搜索”浏览器插件,照着做 100% 成功！

你天天都在用浏览器插件，有没有想过自己也亲手做一个？

其实开发一个插件远没有想象中那么难！今天就带大家不装复杂工具，使用记事本就可以做，仅用 3个文件、几行代码，打造一款超实用的“极速划词搜索”插件。

在网页上看到不懂的词，鼠标选中词句，右键菜单直接搜索，行云流水！再也不用复制粘贴的繁琐操作。

📂 第一步：建立你的工坊

在电脑任意地方新建一个文件夹，如：D:\我的插件包\划词搜索\。(目录可以随心所欲地命名，至于存放在哪，也是看个人习惯。)

在这个文件夹里，我们要创建 3 个文件：

manifest.json （插件的身份证）
background.js （后台大脑）
icon.png （准备一张 128x128 像素 的正方形彩色图片作为图标）。

📝 第二步：编写核心代码

用记事本或任意代码编辑器打开文件，直接复制以下代码：

1. 插件的身份证：`manifest.json`

这是插件的配置文件，用来告诉浏览器插件的名字、图标和权限。

JSON文件：manifest.json

{  // 必须使用最新的 Manifest V3 标准  "manifest_version": 3,  "name": "极速划词搜索",  "version": "1.0",  "description": "选中网页文字，右键一键搜索。",  // 申请“右键菜单”的权限  "permissions": ["contextMenus"],  // 配置管理页面（chrome://extensions）中显示的彩色大图标  "icons": {    "128": "icon.png"  },  // 核心：配置浏览器右上角工具栏的图标  // 只有配置了 action，右上角的图标才能保持原本的彩色，不会被浏览器强制变灰！  "action": {    "default_icon": {      "16": "icon.png",      "32": "icon.png"    }  },  // 指定后台运行的脚本文件  "background": {    "service_worker": "background.js"  }}

2. 后台大脑：`background.js`

负责监听你的鼠标右键点击，并自动帮你打开搜索引擎。

JavaScript文件：background.js

// 监听插件安装事件：当插件第一次被加载时，初始化右键菜单chrome.runtime.onInstalled.addListener(() => {  chrome.contextMenus.create({    id: "quickSearch",    title: "使用百度搜索 '%s'", // %s 是一个占位符，浏览器会自动把它替换成你选中的文字    contexts: ["selection"]    // 限制这个菜单只有在“选中文字”时才显示  });});// 监听右键菜单的点击事件chrome.contextMenus.onClicked.addListener((info, tab) => {  // 判断用户点击的是不是我们创建的“极速搜索”菜单，并且确保确实选中了文字  if (info.menuItemId === "quickSearch" && info.selectionText) {    // 将用户选中的文字进行编码（防止中文乱码），拼接到百度搜索的 URL 后面    const searchUrl = `https://www.baidu.com/s?wd=${encodeURIComponent(info.selectionText)}`;    // 调用浏览器 API，自动开一个新标签页并跳转到搜索结果    chrome.tabs.create({ url: searchUrl });  }});

🛠️ 第三步：见证奇迹的时刻（安装测试）

代码写完了！接下来把它塞进浏览器里：

打开 Chrome 浏览器（Edge 也可以），在地址栏输入：chrome://extensions/ 并回车。
找到右上角的 “开发者模式” 开关，果断打开它。
谷歌浏览器右上角：
------------分隔线---------------
Edge浏览器左侧：
点击左上角的 “加载已解压的扩展程序” 按钮。
Edge浏览器：
------------分隔线---------------
谷歌浏览器：
选择你刚刚新建的文件夹，如：D:\我的插件包\划词搜索\。

恭喜你！你的第一个浏览器插件已经成功运行了！ 赶紧去任意网页上划选一段文字，敲击右键试试看吧！

选中网页想搜索的内容，右键鼠标弹出菜单出现插件功能，点击实现一键搜索。

💡 课后作业

框架已经帮你搭好了，功能可以无限延伸：

想换成【有道(中->英)翻译】？把 background.js 里的链接换成 https://www.youdao.com/result?lang=en&word= 即可。

附：360搜索：https://www.so.com/s?q=搜狗：https://www.sogou.com/web?query=有道(中->英)翻译：https://www.youdao.com/result?lang=en&word=

想做成划词翻译？可以尝试接入有道或翻译 API。

如果你在开发过程中遇到了任何问题，欢迎在评论区留言！承接插件开发业务！