Chrome 插件简单开发之添加 ITDog IP Ping 右键菜单

布洛妮娅总裁

2025 年 01 月 08 日

159 次浏览

3 条评论

4268字数

技术分享

引言

最近经常使用 ITDog 网站来测试域名或者 IP 的延迟，但是每次都要打开网站，输入域名或者 IP，然后等待测试结果，感觉有点麻烦，所以想到了使用 Chrome 插件来简化这个过程。

PS: 本教程不含恰饭内容，属于个人分享，如有侵权请联系删除。

ITDog介绍：ITDog 是一个专业的网络工具网站，提供了多种网络工具，如：Ping、Traceroute、DNS等。

本文中所用到的Ping工具可以帮助我们快速测试网络的各地连通性，下面两张图分别是本站和谷歌的测试结果。

最终效果

最终效果如下图所示，当我们右键单击选中文本时，会出现 ITDog Ping 菜单，点击菜单后会自动打开 ITDog 网站并进行 Ping 测试。

同时在没有选中文本的情况下，右键单击链接时，也会出现 ITDog Ping 菜单，点击后同样会打开 ITDog 并进行测试。

知识点

在本帖中你将会学到

简单上手 Chrome 插件开发
Chrome 插件右键菜单的添加

首先，我们要知道 Chrome 插件的基本结构，Chrome 插件主要由以下几个部分组成：

manifest.json：插件的配置文件，包含了插件的名称、版本、权限等信息。
background.js：插件的后台脚本，用于处理插件的逻辑（可以不使用）。
popup.html：插件的弹出页面，用于显示插件的界面（可以不使用）。
content.js：插件的内容脚本，用于处理页面的逻辑（可以不使用）。

其中 content.js 和 background.js 主要区别是 content.js 是用于操作网页内容，与页面交互，而 background.js 是用于处理插件的逻辑，调用 Chrome 的 API。如果你用过油猴插件的话，content.js 就相当于油猴插件的脚本，background.js 就相当于油猴插件的元数据。因此这也是为什么我们需要用 Chrome 插件来开发这个功能，而不是使用油猴插件，因为油猴插件只支持网页内容的操作，而不能调用 Chrome 的 API，从而无法为 Chrome 添加右键菜单。

实现本教程的插件，我们只需要使用到 manifest.json 和 background.js 这两个文件。manifest.json 是插件的配置文件，background.js 是插件的后台脚本。

同时，我们还需要一个 png 格式的图标，用于插件的图标（为了美观）。

整个插件的基本逻辑是：

当用户右键单击选中文本或者链接时，插件会调用 Chrome 的 API 来添加右键菜单。
当用户点击右键菜单时，插件会调用 Chrome 的 API 来打开 ITDog 网站并进行 Ping 测试。

实现步骤

了解完插件的基本逻辑后，我们就可以开始实现插件了。

代码实现

首先，我们需要创建一个插件目录，用于存放插件的文件。
我们的目录由以下几个文件组成：

icon48.png：插件的图标，大小为 48x48。
manifest.json：插件的配置文件。
background.js：插件的后台脚本。

我们从 https://www.itdog.cn/favicon.ico 获得了插件的图标，由于其大小为 48x48，因此我们将其命名为 icon48.png。

接下来创建 manifest.json 文件，并添加以下内容：

此处内容需要评论回复后（审核通过）方可阅读。

重要的配置项是 permissions 和 background，permissions 是插件的权限，我们添加了 contextMenus 和 activeTab 两个权限，contextMenus 是用于添加右键菜单，activeTab 是用于获取当前页面的信息。background 是插件的后台脚本，我们使用 service_worker 来指定 background.js 作为插件的后台脚本。很好理解对吧~

接下来，我们创建 background.js 文件，并添加以下内容：

此处内容需要评论回复后（审核通过）方可阅读。

代码应该很简单，我们首先在 onInstalled 事件中创建了两个菜单，ping 和 tcping，分别对应在线 Ping 和在线 TCPing。然后我们在 onClicked 事件中处理了菜单点击事件，根据点击的菜单项，我们分别打开不同的 ITDog 页面。