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

喜欢的点个赞❤吧!

   


目录
相关文章
|
1月前
|
Web App开发 存储 开发者
Chrome 插件上架发布全流程指南
浏览器插件开发完以后,要发布到 Chrome Web Store上,也是需要颇费一番周折的,本文就从注册账号开始,一直到最后发布上架的全流程进行指导,希望帮助你提供一些经验,避免踩坑,耗时耗力。
243 8
|
3月前
|
Web App开发 缓存 UED
如何设置浏览器的缓存策略?
【10月更文挑战第23天】通过合理地设置浏览器的缓存策略,可以在提高网页性能、减少网络流量的同时,确保用户能够获取到最新的内容,从而提升用户体验和网站的性能优化效果。
223 4
|
3月前
|
存储 缓存 网络协议
计算机网络常见面试题(二):浏览器中输入URL返回页面过程、HTTP协议特点,GET、POST的区别,Cookie与Session
计算机网络常见面试题(二):浏览器中输入URL返回页面过程、HTTP协议特点、状态码、报文格式,GET、POST的区别,DNS的解析过程、数字证书、Cookie与Session,对称加密和非对称加密
|
3月前
|
Web App开发 定位技术 iOS开发
Playwright 是一个强大的工具,用于在各种浏览器上测试应用,并模拟真实设备如手机和平板。通过配置 `playwright.devices`,可以轻松模拟不同设备的用户代理、屏幕尺寸、视口等特性。此外,Playwright 还支持模拟地理位置、区域设置、时区、权限(如通知)和配色方案,使测试更加全面和真实。例如,可以在配置文件中设置全局的区域设置和时区,然后在特定测试中进行覆盖。同时,还可以动态更改地理位置和媒体类型,以适应不同的测试需求。
Playwright 是一个强大的工具,用于在各种浏览器上测试应用,并模拟真实设备如手机和平板。通过配置 `playwright.devices`,可以轻松模拟不同设备的用户代理、屏幕尺寸、视口等特性。此外,Playwright 还支持模拟地理位置、区域设置、时区、权限(如通知)和配色方案,使测试更加全面和真实。例如,可以在配置文件中设置全局的区域设置和时区,然后在特定测试中进行覆盖。同时,还可以动态更改地理位置和媒体类型,以适应不同的测试需求。
237 1
|
3月前
|
域名解析 缓存 网络协议
浏览器中输入URL返回页面过程(超级详细)、DNS域名解析服务,TCP三次握手、四次挥手
浏览器中输入URL返回页面过程(超级详细)、DNS域名解析服务,TCP三次握手、四次挥手
|
4月前
|
Web App开发 JSON JavaScript
vue学习:chrome 中 vuetools 开发插件 的下载、安装
这篇文章介绍了如何在Chrome浏览器中下载、安装并测试Vue.js开发插件——vue-devtools。
705 0
vue学习:chrome 中 vuetools 开发插件 的下载、安装
|
6月前
|
Web App开发 存储 前端开发
《Chrome谷歌插件Top10》开发最好用的谷歌插件
本文介绍了多个实用的浏览器插件及其安装方法。包括CSDN浏览器助手,提供高效开发工具;FeHelper,前端必备工具,支持格式化、压缩等功能;uBlock Origin,有效屏蔽广告和弹窗;PageLiner,网页标尺工具,便于前端设计;Fatkun,批量下载图片;Smallpdf,文件转换工具;Octotree,GitHub代码树插件;Awesome Screenshot,截图与录屏工具;ColorZilla,颜色拾取器;Dark Reader,暗黑模式阅读插件。安装方式有通过Chrome商店搜索或下载crx插件本地安装。
124 11
|
6月前
|
网络协议 前端开发 JavaScript
浏览器加载网页的幕后之旅:从URL到页面展示详解
【8月更文挑战第31天】当在浏览器地址栏输入URL并回车后,一系列复杂过程随即启动,包括DNS解析、TCP连接建立、HTTP请求发送、服务器请求处理及响应返回,最后是浏览器页面渲染。这一流程涉及网络通信、服务器处理和客户端渲染等多个环节。通过示例代码,本文详细解释了每个步骤,帮助读者深入理解Web应用程序的工作机制,从而在开发过程中作出更优决策。
120 5
|
28天前
|
Web App开发 人工智能 JSON
AutoMouser:AI Chrome扩展程序,实时跟踪用户的浏览器操作,自动生成自动化操作脚本
AutoMouser是一款Chrome扩展程序,能够实时跟踪用户交互行为,并基于OpenAI的GPT模型自动生成Selenium测试代码,简化自动化测试流程。
135 17
AutoMouser:AI Chrome扩展程序,实时跟踪用户的浏览器操作,自动生成自动化操作脚本
|
5月前
|
Web App开发 数据采集 存储
WebDriver与Chrome DevTools Protocol:如何在浏览器自动化中提升效率
本文探讨了如何利用Chrome DevTools Protocol (CDP) 与 Selenium WebDriver 提升浏览器自动化效率,结合代理IP技术高效采集微博数据。通过CDP,开发者可直接操作浏览器底层功能,如网络拦截、性能分析等,增强控制精度。示例代码展示了如何设置代理IP、cookie及user-agent来模拟真实用户行为,提高数据抓取成功率与稳定性。适用于需要频繁抓取互联网数据的应用场景。
708 3
WebDriver与Chrome DevTools Protocol:如何在浏览器自动化中提升效率

热门文章

最新文章