浏览器扩展V3开发系列之 chrome.commands 快捷键的用法和案例

【作者主页】:小鱼神1024

【擅长领域】:JS逆向、小程序逆向、AST还原、验证码突防、Python开发、浏览器插件开发、React前端开发、NestJS后端开发等等

chrome.commands API 允许开发者使用快捷键来执行特定的命令。

在使用 chrome.commands API 之前必须在 manifest.json 文件中声明:
image.png

{"manifest_version": 3,"name": "chrome.commands","description": "chrome.commands API 基础用法","version": "1.0","action": {"default_popup": "popup.html","default_icon": "icons/icon128.png"},"background": {"service_worker": "background.js"},"permissions": ["commands"],"commands": {"_execute_action": {"suggested_key": {"default": "Alt+Shift+O","mac": "Command+Shift+O","windows": "Alt+Shift+O"}},"print-logger": {"suggested_key": {"default": "Alt+Shift+P","mac": "Command+Shift+P","windows": "Alt+Shift+P"},"description": "打开日志的命令"}}
}

其中,要声明权限:commands

在 commands 对象中
_execute_action :是一个特殊的Commands API命令,用于触发您的扩展中的action,相当于用快捷键的方式点击扩展图标。这个特殊命令不需要在后台服务工作线程(Service Worker)中设置任何监听器来响应chrome.commands.onCommand,它会自动触发与扩展图标的关联操作。

当多次使用快捷键:Alt+Shift+O 时,效果如下:
5.gif

print-logger:为自定义操作,名称可以随意定义,设置快捷键后。可以在后台服务工作线程(Service Worker)中 chrome.commands.onCommand 来监听快捷键,测试代码如下:
image.png

chrome.commands.onCommand.addListener(function (command) {if (command == "print-logger") {// 执行一些操作console.log("Logger 被打印了!");}
});

当多次使用快捷键:Alt+Shift+P 时,效果如下:
5.gif

suggested_key对象中有:default、chromeos、linux、mac 和 windows
分别标识了不同操作系统下建议的默认快捷键设置,其中default表示:其他特定平台的键未指定时,该平台将使用通用的默认键设置。

description:快捷键的描述

当然,我们也可以访问:chrome://extensions/shortcuts,来查看和修改扩展的快捷键。
image.png

代码地址:传送门

总结
  • 使用快捷键要声明权限:commands
  • _execute_action:用于触发您的扩展中的action
  • suggested_key对象中有:default、chromeos、linux、mac 和 windows
  • 查看或修改扩展快捷键:chrome://extensions/shortcuts

创作不易,动动您发财的小手,点赞关注一波,支持我创作更多对您有帮助的文章!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/35888.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Vue 学习之 axios

目录 执行安装命令:npm install axios 使用的时候导入 axios以data,params,headers传参方式的区别 axios封装 是一个基于 promise 的 网络请求库,作用于浏览器和 node.js 中。使用Axios可以在前端项目中发送各种方式的HTTP请求…

如何查看websocket连接信息

Chrome 浏览器中查看 webSocket 连接信息_谷歌浏览器看不到 websocket-CSDN博客 Getting Started — Flask-SocketIO documentation 运作原理 | Socket.IO

VS Code准备JAVA环境

背景 由于IntelliJ IDEA是需要激活码的,简单的java demo测试,除了可以直接使用命令行java和javac进行执行, 推荐使用VS code, 其功能比较强大,扩展插件也比丰富,对阅读和书写代码都是比较友好的. JDK环境准备 Linux JDK可以使用Open JDK 11. sudo apt-get install openjdk-1…

UE引擎实现ShadowMap、体积光(C++)

前言 整体上参考了YivanLee大佬的这两篇文: 虚幻4渲染编程(灯光篇)【第一卷:各种ShadowMap】 虚幻4渲染编程(灯光篇)【第二卷:体积光】 正文 1、ShadowMap (1)创建工…

【浦语开源】深入探索:大模型全链路开源组件 InternLM Lagent,打造灵笔Demo实战指南

一、准备工作: 1、环境配置: pip、conda换源: pip临时换源: pip install -i https://mirrors.cernet.edu.cn/pypi/web/simple some-package# 这里的“https://mirrors.cernet.edu.cn/pypi/web/simple”是所换的源,…

AI绘画Stable Diffusion人物背景替换实操教程,让创意无限延伸

大家好,我是画画的小强 Stable Diffusion以其强大的能力可以实现人物背景的更换。本文将带你深入了解如何利用Stable Diffusion中的Inpaint Anything插件快速且精准地实现人物背景的替换,从而让你的图片焕发新生。 前期准备 本文会使用到Inpaint Anyt…

观星观景大屏呈现 实时拍摄长焦定格 当当狸智能天文望远镜TW2来啦

《宇宙的奇迹》中有这样一句话:“我们与那些遥远星系息息相关,无论它们是如何与我们天各一方,那些经过数十亿年旅行到达地球的光线,终究会把我们联系在一起”。 想象一下—— 等到繁星低垂,月光皎洁之时,…

Linux系统安装和卸载nginx

📖Linux系统安装和卸载nginx ✅下载✅安装✅启动nginx✅安装成系统服务✅常见问题:80端口被占用了✅卸载✅目录结构 以下介绍的是以源码编译安装方式: ✅下载 官方地址:https://nginx.org/en/download.html 123云盘地址&#x…

基于springboot、vue影院管理系统

设计技术: 开发语言:Java数据库:MySQL技术:SpringbootMybatisvue 工具:IDEA、Maven、Navicat 主要功能: 影城管理系统的主要使用者分为管理员和用户, 实现功能包括管理员: 首页…

ELK集群设置密码

一、软件安装清单 elasticsearch7.17.22logstash7.17.22kibana:7.17.22filebeat7.17.22elasticsearch-head:5 二、配置 生成证书 进入elasticsearch容器 bin/elasticsearch-certutil cert -out /usr/share/elasticsearch/config/elastic-certificates.p12 -pass将证书拷贝…

qt for android 工程添加AndroidManifest.xml 文件

1.选择左边图形栏目中的Projects,在Build steps下的Build Android APK中Details 2.点击Create Templates,并勾选 此时在工程下面会多出一个文件夹android 3.将这个android的中所有文件加入工程中,编辑.pro 4.通过QT 图形化编辑设置属性&#…

JAVA【案例5-5】二月天

【二月天】 1、案例描述 二月是一个有趣的月份,平年的二月有28天,闰年的二月由29天。闰年每四年一次,在判断闰年时,可以使用年份除于4,如果能够整除,则该年是闰年。 本案例要求编写一个程序,…

python e怎么表示

exp()方法返回x的指数,ex。 语法 以下是 exp() 方法的语法: import math math.exp( x ) 注意:exp()是不能直接访问的,需要导入 math 模块,通过静态对象调用该方法。 参数 x -- 数值表达式。 返回值 返回x的指数,…

01背包问题求解

来源于 https://kamacoder.com/problempage.php?pid1046 使用动态规划,五步走 1.定义状态数组和具体状态含义: dp是个二维数组,第一维代表物品索引,第二维代表背包空间状态。 dp[i][j]是指物品i 在背包空间j 的情况下所能放的…

【redis】redis安装

1、安装前准备 1.1环境准备 VMware安装 参考博文:【VMware】VMware虚拟机安装_配置_使用教程_选择虚拟机配置选项,设置dvd镜像为 点击启动虚拟机-CSDN博客 安装centOS的linux操作系统 xshell xftp 参考博文:【Linux】Xshell和Xftp简介_安装_VMwar…

最新版Git安装指南使用指南

首先,访问Git的官方网站https://git-scm.com下载适用于您操作系统的安装包。您也可以选择使用阿里云镜像来加速下载过程。 也可以用国内地址下载https://pan.quark.cn/s/0293d76e58bchttps://pan.quark.cn/s/0293d76e58bc安装过程 在这里插入图片描述 2、点击“…

vue3 Cesium 离线地图

源码:cesium-demo: Cesium示例工程,基于vue3 1、vite-plugin-cesium 是一个专门为 Vite 构建工具定制的插件,用于在 Vite 项目中轻松使用 Cesium 库。它简化了在 Vite 项目中集成 Cesium 的过程。 npm i cesium vite-plugin-cesium vite -D…

[leetcode]k-th-smallest-in-lexicographical-order 字典序的第K小数字

. - 力扣&#xff08;LeetCode&#xff09; class Solution { public:int getSteps(int curr, long n) {int steps 0;long first curr;long last curr;while (first < n) {steps min(last, n) - first 1;first first * 10;last last * 10 9;}return steps;}int find…

WEB界面上使用ChatGPT

&#xff08;作者&#xff1a;陈玓玏&#xff09; 开源项目&#xff0c;欢迎star哦&#xff0c;https://github.com/tencentmusic/cube-studio 随着大模型不断发展&#xff0c;现在无论写代码&#xff0c;做设计&#xff0c;甚至老师备课、评卷都可以通过AI大模型来实现了&…

开发小技巧Tips-----在Idea中配置nacos/redis等

背景&#xff1a; 进入了一个新的项目开发&#xff0c;领导为了加快开发速度&#xff08;加快调试的速度&#xff09;&#xff0c;让我们在本地启动服务&#xff0c;然后给了我一堆数据就走了。坏了坏了&#xff0c;啥意思啊&#xff0c;自己开发的时候本地就是直接点击一下run…