谷歌浏览器自定义js标签,实现页面匹配大小写搜索功能

       用过谷歌浏览器页面内容查询功能的人都知道,在搜索英文字符串的时候是不区分大小写的(被这个坑过了~哎~),对于经常检索代码关键字的人来说这是非常不方便的。比如搜索“Hello”的时候会把“hello”等相关无用的字符串都给标记高亮了

 下面给大家来介绍一种自定义js标签的方式来实现匹配大小写搜索功能:

1、打开谷歌浏览器,新增一个标签页,点击【五角星】符号,自定义一个新标签页:

2、填写标签名称,点击【更多】:

3、在修改书签页的【网址】栏输入以下js代码

javascript:(function(){var text=prompt('Search for:','');if(text==null || text.length==0)return;var spans=document.getElementsByClassName('labnol');if(spans){for(var i=0;i < spans.length;i++){spans[i].style.backgroundColor='transparent';}}function searchWithinNode(node,te,len){var pos,skip,spannode,middlebit,endbit,middleclone;skip=0;if(node.nodeType==3){pos=node.data.indexOf(te);if(pos>=0){spannode=document.createElement('span');spannode.setAttribute('class','labnol');spannode.style.backgroundColor='yellow';middlebit=node.splitText(pos);endbit=middlebit.splitText(len);middleclone=middlebit.cloneNode(true);spannode.appendChild(middleclone);middlebit.parentNode.replaceChild(spannode,middlebit);skip=1;}}else if(node.nodeType==1 && node.childNodes && node.tagName.toUpperCase()!='SCRIPT' && node.tagName.toUpperCase !='STYLE'){for(var child=0;child < node.childNodes.length;++child){child=child+searchWithinNode(node.childNodes[child],te,len);}}return skip;}searchWithinNode(document.body,text,text.length);})();

4、点击【保存】后,书签栏会出现搜索标签,使用的时候就比较简单了,点击下该书签,会弹出个输入框,试试输入字符串,然后确定,有没有发现页面里高亮出来的是大小写完全匹配的字符串了=..=!!!

  • 3
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
好的,作为 CSDN 开发的 C知道,我会为您提供详细的回答。 要设置一个谷歌浏览器插件注入右键功能,您需要在您的插件清单文件中进行配置。下面是一个例子,说明如何在某个页面注入右键功能。 ``` { "manifest_version": 2, "name": "My Chrome Extension", "version": "1.0", "description": "This extension adds right-click functionality to specific pages.", "permissions": ["contextMenus","tabs"], "background": { "scripts": ["background.js"], "persistent": false }, "content_scripts": [{ "matches": ["https://www.example.com/*"], "js": ["content.js"] }] } ``` 在这个例子中,我们指定了两个文件:一个是 background.js,它是后台脚本,另一个是 content.js,它是注入到页面中的脚本。 我们使用 "matches" 来匹配特定的页面,在这个例子中,我们仅匹配了 "https://www.example.com/*"。这意味着我们只在这个网站的所有页面中注入右键功能。如果您想针对不同的页面添加不同的注入功能,可以添加多个 "content_scripts" ,每个匹配一个不同的页面。例如: ``` "content_scripts": [{ "matches": ["https://www.example.com/page1"], "js": ["content1.js"] },{ "matches": ["https://www.example.com/page2"], "js": ["content2.js"] }] ``` 不过,请注意,Chrome的限制是每个插件只能有一个 "content_scripts" 项。 如果您需要在页面上右键单击时显示特定的菜单项或执行操作,必须在 "background.js" 中注册上下文菜单。例如: ``` chrome.contextMenus.onClicked.addListener(function(info, tab) { if (info.menuItemId == "myMenuItem") { // do something } }); chrome.contextMenus.create({ id: "myMenuItem", title: "My Menu Item", contexts: ["all"] }); ``` 在这个例子中,我们首先在 "background.js" 中添加菜单项的监听器函数。当用户单击菜单项时,我们将检查菜单项的 ID 是否为 "myMenuItem",如果是,则执行我们想要执行的操作。 然后,我们使用 "chrome.contextMenus.create" 方法来创建一个新的菜单项。在这里,我们指定了菜单项的 ID 和标题,并指定了上下文 "all",表示它可以在所有上下文中使用。 希望这个例子可以帮助您设置您的谷歌浏览器插件注入右键功能

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

奋斗的小小鱼

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值