用 Manifest V3 做一个简单 Chrome 页面右键菜单搜索扩展
2023-09-16 11:41:04
前言
油猴脚本是一种用户脚本，可以修改网页的外观和行为，但它不能像扩展程序那样访问浏览器更多的 API 和功能。如果你想做一些复杂的功能，比如修改页面的内容，或者在页面上显示通知，就需要使用 Chrome 扩展程序。
Chrome 扩展程序是用 HTML、JavaScript 和 CSS 等 Web 技术构建的。你可以在 Chrome 网上应用店中找到许多有用的扩展程序，但你也可以自己开发扩展程序来满足你的特定需求。
创建 Manifest 文件
要创建一个 Chrome 扩展程序，首先需要创建一个 manifest.json 文件。这个文件了扩展程序的基本信息，比如扩展程序的名称、版本、、权限和脚本。
{
"manifest_version": 3,
"name": "Page Right-Click Menu Search",
"version": "1.0",
"description": "Adds a search option to the page right-click menu.",
"permissions": [
"contextMenus"
],
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content_script.js"]
}
]
}
在 manifest.json 文件中，我们指定了扩展程序的版本、名称、描述和权限。我们还指定了一个 content_scripts 对象，其中包含了一个匹配所有网页的脚本。
编写脚本代码
接下来，我们需要编写脚本代码来实现扩展程序的功能。在我们的例子中，我们要在页面的右键菜单中添加一个搜索选项。
function createContextMenu() {
chrome.contextMenus.create({
title: "Search for \"%s\"",
contexts: ["selection"],
onclick: function(info, tab) {
var selection = info.selectionText;
var url = "https://www.google.com/search?q=" + encodeURIComponent(selection);
chrome.tabs.create({url: url});
}
});
}
createContextMenu();
在脚本代码中，我们首先定义了一个 createContextMenu() 函数，该函数用于创建右键菜单选项。然后，我们调用 chrome.contextMenus.create() 函数来创建右键菜单选项。
在 createContextMenu() 函数中，我们指定了右键菜单选项的标题、上下文和点击事件处理程序。
- 标题是 "Search for "%s""，其中 "%s" 是一个占位符，它将被选中的文本替换。
- 上下文是 ["selection"]，这意味着右键菜单选项只会在用户选中了一些文本时才显示。
- 点击事件处理程序是 function(info, tab) {...}。当用户点击右键菜单选项时，这个函数将被调用。
在点击事件处理程序中，我们首先获取选中的文本，然后将选中的文本编码为 URL 编码格式，最后使用 chrome.tabs.create() 函数创建一个新的标签页，并在新标签页中打开 Google 搜索结果。
创建用户界面
如果你的扩展程序需要一个用户界面，你可以使用 HTML、JavaScript 和 CSS 来创建它。在我们的例子中，我们不需要创建一个用户界面，因为我们只是在页面的右键菜单中添加了一个搜索选项。
测试扩展程序
要测试扩展程序，你可以将它加载到 Chrome 浏览器中。你可以通过以下步骤加载扩展程序：
- 打开 Chrome 浏览器。
- 点击地址栏旁边的三个点。
- 选择 "更多工具" > "扩展程序"。
- 点击 "加载已解压的扩展程序"。
- 选择你刚创建的扩展程序的文件夹。
加载扩展程序后，你就可以在页面的右键菜单中看到 "Search for "%s"" 选项了。当你选中一些文本并点击右键菜单中的 "Search for "%s"" 选项时，一个新的标签页将被打开，并在新标签页中打开 Google 搜索结果。
总结
本文介绍了如何使用 Manifest V3 为 Chrome 浏览器创建一个简单的页面右键菜单搜索扩展。我们逐步讲解了扩展开发过程，包括构建 manifest.json 文件、编写脚本代码、创建用户界面以及测试扩展程序。通过阅读本文，你掌握了使用 Manifest V3 开发 Chrome 扩展程序的基本技能。
