Chrome 插件开发-右键菜单开发实战演示,浏览器页面右键菜单选项设置,插件右键菜单点击插件名跳转主页设置

简介: Chrome 插件开发-右键菜单开发实战演示,浏览器页面右键菜单选项设置,插件右键菜单点击插件名跳转主页设置

Chrome 插件开发 - 菜单选项

浏览器页面右键菜单选项设置

右键菜单指的是我们在浏览器页面里鼠标弹出来的菜单,我们可以在这个菜单里加入我们插件的功能选项,高端大气上档次,主要是方便我们进行设置哈哈。

image.png

① 核心代码演示

manifest.json 文件需要声明下权限。

   "permissions": [
    "contextMenus"
   ],

我在 background.js 里添加了两个菜单。

// 右键菜单管理
chrome.contextMenus.create({
  "type" : "radio",
  "title" : "切换绝对路径抓取",
  "checked" : false,
  "onclick" : switch_absolute_xpath   // 点击时调用方法
});
chrome.contextMenus.create({
  "type" : "radio",
  "title" : "切换NCC路径抓取",
  "checked" : true,
  "onclick" : switch_ncc_xpath
});
// 参数会传递 tab 信息,通过 tab.id 可以获取用户是在到那个页面里点击我们菜单选项的
function switch_absolute_xpath(info, tab){
  ...
  // 然后我通过 tab.id 给对应页面传递消息
  chrome.tabs.sendMessage(tab.id, {type: 'switch_absolute_xpath'});
}
function switch_ncc_xpath(info, tab){
  ...
  chrome.tabs.sendMessage(tab.id, {type: 'switch_ncc_xpath'});
}

② 效果展示

演示视频:

2.gif

鼠标右键效果图:

image.png

③ 详细参数文档

帮助文档:

create -help
integer Chrome.contextMenus.create(object createProperties, function callback)
创建一个新的右键菜单项。注意:如果在创建的过程中出现错误,会在回调函数触发后才能捕获到,错误详细信息保存在Chrome.extension.lastError中。
【参数】
createProperties ( object )
  type ( optional enumerated string ["normal", "checkbox", "radio", "separator"] )
    右键菜单项的类型。默认为“normal”。
  title ( optional string )
    右键菜单项的显示文字;除非为“separator”类型,否则此参数是必须的。如果类型为“selection”,您可以在字符串中使用%s显示选定的文本。例如,如果参数的值为 "Translate '%s' to Pig Latin",而用户还选中了文本“cool”,那么显示在菜单中的将会是 "Translate 'cool' to Pig Latin"。
  checked ( optional boolean )
    Checkbox或者radio的初始状态:true代表选中,false代表未选中。在给定的radio中只能有一个处于选中状态。
  contexts ( optional array of string ["all", "page", "frame", "selection", "link", "editable", "image", "video", "audio"] )
    右键菜单项将会在这个列表指定的上下文类型中显示。默认为“page”。
  onclick ( optional function )
    当菜单项被点击时触发的函数。
    【参数】
    info ( OnClickData )
      右键菜单项被点击时相关的上下文信息。
    tab ( Tab )
      右键菜单项被点击时,当前标签的详细信息。
  parentId ( optional integer )
    右键菜单项的父菜单项ID。指定父菜单项将会使此菜单项成为父菜单项的子菜单。
  documentUrlPatterns ( optional array of string )
    这使得右键菜单只在匹配此模式的url页面上生效(这个对框架也适用)。详细的匹配格式见:模式匹配页面。
  targetUrlPatterns ( optional array of string )
    类似于documentUrlPatterns,但是您可以针对img/audio/video标签的src属性和anchor标签的href做过滤。
  enabled ( optional boolean )
    启用或者禁用此菜单项,启用为true,禁用为false。默认为true。
callback ( optional function )
  在创建完菜单项后触发。如果创建过程中有错误产生,其详细信息在Chrome.extension.lastError中。

插件右键菜单点击插件名跳转主页设置

① 核心代码演示

manifest.json 文件加上 homepage_url,当点击 name 时就会跳转到我们指定的地址了。

   "name": "Xpath Robot",   
   "homepage_url": "https://lanzao.blog.csdn.net/",

② 演示效果图

image.png

喜欢的点个赞❤吧!

   


目录
相关文章
|
2月前
|
Web App开发 JavaScript 前端开发
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念,包括事件驱动、单线程模型和模块系统;探讨其安装配置、核心模块使用、实战应用如搭建 Web 服务器、文件操作及实时通信;分析项目结构与开发流程,讨论其优势与挑战,并通过案例展示 Node.js 在实际项目中的应用,旨在帮助开发者更好地掌握这一强大工具。
55 1
|
6天前
|
Web App开发 安全 前端开发
一个接口4个步骤轻松搞定最新版Chrome、Edge、Firefox浏览器集成ActiveX控件
目前的浏览器市场,谷歌浏览器占据了半壁江山,因此,谷歌也是最有话语权的,2015年开始取消支持 NPAPI 插件,2022 年10月停止支持 PPAPI 插件;而曾经老大哥IE浏览器也已停止服务,退出历史舞台,导致大量曾经安全、便捷的ActiveX控件无法使用。为了解决这个难题,本人特研发出allWebPlugin中间件,重新让所有ActiveX控件能在谷歌、火狐等浏览器使用。
|
1月前
|
Linux Go iOS开发
怎么禁用 vscode 中点击 go 包名时自动打开浏览器跳转到 pkg.go.dev
本文介绍了如何在 VSCode 中禁用点击 Go 包名时自动打开浏览器跳转到 pkg.go.dev 的功能。通过将 gopls 的 `ui.navigation.importShortcut` 设置为 "Definition",可以实现仅跳转到定义处而不打开链接。具体操作步骤包括:打开设置、搜索 gopls、编辑 settings.json 文件并保存更改,最后重启 VSCode 使设置生效。
49 7
怎么禁用 vscode 中点击 go 包名时自动打开浏览器跳转到 pkg.go.dev
|
8天前
|
Web App开发 数据采集 JavaScript
Chrome浏览器实例的TypeScript自动化脚本
Chrome浏览器实例的TypeScript自动化脚本
|
2月前
|
Web App开发 缓存 安全
WIN11 Chrome 双击打不开闪退及Chrome浏览器不能拖拽文件crx
【11月更文挑战第6天】本文介绍了 WIN11 系统中 Chrome 浏览器双击打不开闪退及不能拖拽文件 crx 的原因和解决方法。包括浏览器版本过旧、扩展程序冲突、硬件加速问题、缓存过多、安全软件冲突、系统文件损坏、用户配置文件损坏等问题的解决方案,以及 crx 文件的屏蔽、权限问题和文件格式问题的处理方法。
200 2
|
2月前
|
Web App开发 Linux iOS开发
Chrome浏览器如何导出所有书签并导入书签
【11月更文挑战第4天】本文介绍了如何在 Chrome 浏览器中导出和导入书签。导出时,打开书签管理器,点击“整理”按钮选择“导出书签”,保存为 HTML 文件。导入时,同样打开书签管理器,点击“整理”按钮选择“导入书签”,选择之前导出的 HTML 文件即可。其他主流浏览器也支持导入这种格式的书签文件。
1160 2
|
2月前
|
Web App开发 JavaScript 前端开发
使用 Chrome 浏览器的内存分析工具来检测 JavaScript 中的内存泄漏
【10月更文挑战第25天】利用 Chrome 浏览器的内存分析工具,可以较为准确地检测 JavaScript 中的内存泄漏问题,并帮助我们找出潜在的泄漏点,以便采取相应的解决措施。
391 9
|
2月前
|
Web App开发 人工智能 自然语言处理
WebChat:开源的网页内容增强问答 AI 助手,基于 Chrome 扩展的最佳实践开发,支持自定义 API 和本地大模型
WebChat 是一个基于 Chrome 扩展开发的 AI 助手,能够帮助用户理解和分析当前网页的内容,支持自定义 API 和本地大模型。
139 0
|
3月前
|
Web App开发 开发者
|
3月前
|
Web App开发 Windows
win 快捷键大全,虚拟窗口、桌面等操作细节,可以使界面整洁,分类工作;Chrome快捷键,都是一些开发的骚操作
这篇文章提供了Windows操作系统和Chrome浏览器的快捷键大全,以及Xshell的快捷键操作,旨在帮助用户提高工作效率和界面管理。
187 2