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

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

① 核心代码演示

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'});
}

② 效果展示

演示视频：

鼠标右键效果图：

③ 详细参数文档

帮助文档：

create -helpinteger 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/",

② 演示效果图

喜欢的点个赞❤吧！

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

微信小程序开发——以简单易懂的浏览器页面栈理解小程序的页面路由
前言: 对于小程序的页面路由,如果没有一定开发经验的话,理解起来还是会有些困难的.哪怕是有一定小程序开发经验的开发者,能够完全理解掌握的恐怕也不多. 这里就以另外一种方式来详细的介绍小程序的页面栈及路 ...
Chrome插件开发、脚本开发笔记
文章目录一.manifest.json 1.1 name 插件的名字 1.2 version 插件的版本 1.3 manifest_version 清单文件的版本 1.4 description 插 ...
.NET Core开发实战（第16课：选项数据热更新：让服务感知配置的变化）--学习笔记...
16 | 选项数据热更新:让服务感知配置的变化选项框架还有两个关键类型: 1.IOptionsMonitor 2.IOptionsSnapshot 场景: 1.范围作用域类型使用 IOptinsSn ...
.NET Core开发实战（第15课：选项框架：服务组件集成配置的最佳实践）--学习笔记...
15 | 选项框架:服务组件集成配置的最佳实践这一节讲解如何使用选项框架来处理服务和配置的关系选项框架的特性: 1.支持单例模式读取配置 2.支持快照 3.支持配置变更通知 4.支持运行时动态修改 ...
禁用Chrome缓存进行网站开发
我正在修改网站的外观(修改CSS),但是由于烦人的持久性缓存,在Chrome上看不到结果. 我尝试了Shift +刷新,但是没有用. 如何临时禁用缓存或以可以看到更改的某种方式刷新页面? #1楼当您 ...
《HTML5移动Web开发实战》—— 1.6　在移动网站中使用HTML5
本节书摘来异步社区<HTML5移动Web开发实战>一书中的第1章,第1.6节,作者:石川,更多章节内容可以访问云栖社区"异步社区"公众号查看. 1.6 在移动网站中使用 ...
微信小游戏开发实战教程13-随机生成形状功能的实现
微信小游戏开发实战系列的第13篇. 本节内容包括:通过使用列表来实现可以设置权重的随机功能,以及游戏中的随机生成形状功能的具体实现. 如果你没有任何的游戏开发经验,欢迎阅读我的"人人都能做游 ...
flutter页面布局HTML,Flutter开发实战初级（2）页面布局详解
初级根底系列 Flutter开发实战初级(1)ListView详解 Flutter开发实战初级(2)布局详解项目实战系列 Flutter开发实战高仿微信(1)主页 Flutter开发实战高仿微信 ...
浏览器页面操作——实时监控网页变化，读取网页内容
浏览器页面操作功能介绍浏览器页面操作是集简云的一款免费内置应用,它可以定时监控网页变化,精准捕捉所需信息.一键设置指定网页与元素,全自动监测并即时推送通知,助您在第一时间了解网页最新情况,让您更高效 ...

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

Chrome 插件开发 - 菜单选项

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

① 核心代码演示

② 效果展示

③ 详细参数文档

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

① 核心代码演示

② 演示效果图

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

最新文章

热门文章