Chrome 扩展程序 (manifest_version=3) 右键菜单动态启用:根据文本选中状态
在 manifest_version=3 的 Chrome 扩展程序中,你可以使用 contextMenus API 来实现根据文本选中状态动态启用或禁用右键菜单的功能。
实现步骤:
- 创建 contextMenus 项: 在
background.js中创建一个contextMenus项,并将它的作用域设置为 'all' 和 'selection'。初始状态设置为禁用。 - 监听右键菜单打开事件: 使用
webNavigationAPI 中的onCreatedNavigationTarget事件监听右键菜单打开事件。 - 判断文本选中状态: 在回调函数中,使用
chrome.tabs.executeScript向当前页面发送脚本,获取当前选中的文本内容。 - 更新菜单状态: 根据文本选中状态更新
contextMenus项的enabled属性。
代码示例:
chrome.runtime.onInstalled.addListener(function() {
// 在安装或更新插件时创建 contextMenus 项
chrome.contextMenus.create({
id: 'myContextMenu',
title: 'My Context Menu',
contexts: ['all', 'selection'],
enabled: false // 初始化禁用
});
});
chrome.webNavigation.onCreatedNavigationTarget.addListener(function(details) {
// 右键菜单打开时的回调函数
// 检查是否选中了文本
chrome.tabs.executeScript(details.tabId, { code: 'window.getSelection().toString()' }, function(selection) {
if (selection && selection[0]) {
// 选中了文本,更新菜单的 enabled 属性为 true
chrome.contextMenus.update('myContextMenu', { enabled: true });
} else {
// 没有选中文本,更新菜单的 enabled 属性为 false
chrome.contextMenus.update('myContextMenu', { enabled: false });
}
});
});
使用方法:
安装并启用扩展程序后,当你右键点击页面时,菜单项会根据你是否选中了文本而自动启用或禁用。
注意:
webNavigationAPI 中的onCreatedNavigationTarget事件仅在manifest_version=3中可用。- 确保在 manifest.json 文件中声明了
webNavigationAPI 权限。 - 可以根据你的实际需求修改菜单标题和功能。
原文地址: https://www.cveoy.top/t/topic/hFRJ 著作权归作者所有。请勿转载和采集!