首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Chrome扩展-如何捕获文档vanillaJS上的点击事件

Chrome扩展是一种可以增强Chrome浏览器功能的插件。捕获文档vanillaJS上的点击事件可以通过以下步骤实现:

  1. 首先,在Chrome浏览器中创建一个新的扩展项目。可以在Chrome浏览器的地址栏中输入chrome://extensions/,然后点击"开发者模式",再点击"加载已解压的扩展程序"来选择一个文件夹作为扩展项目的根目录。
  2. 在扩展项目的根目录下创建一个manifest.json文件,并在其中添加必要的配置信息,包括扩展的名称、版本号、描述等。
  3. 在扩展项目的根目录下创建一个content.js文件,用于编写捕获点击事件的代码。
  4. content.js文件中,使用vanillaJS的方式获取文档对象,并为其添加点击事件监听器。可以使用document.addEventListener('click', function(event) { ... })来捕获点击事件,并在回调函数中处理事件。
  5. 在回调函数中,可以通过event.target来获取被点击的元素,进而进行相应的操作。

以下是一个示例的content.js文件的代码:

代码语言:javascript
复制
document.addEventListener('click', function(event) {
  // 获取被点击的元素
  var target = event.target;

  // 在控制台输出被点击元素的标签名
  console.log('Clicked element:', target.tagName);
});
  1. 保存content.js文件,并刷新Chrome浏览器中的扩展项目。
  2. 在Chrome浏览器中点击扩展图标,启用刚刚创建的扩展。

现在,当你在Chrome浏览器中点击任意网页上的元素时,被点击的元素的标签名将会在控制台中输出。

对于这个问题,腾讯云没有直接相关的产品或链接。但是,腾讯云提供了一系列云计算服务,如云服务器、云数据库、云存储等,可以帮助开发者构建和部署各种应用。你可以访问腾讯云的官方网站(https://cloud.tencent.com/)了解更多信息。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

【实践】Chrome浏览器客户端调试从入门到奔溃

,在你项目环境页面内,该片段可执行项目内方法) image 自己书写片段 Content scripts 是 Chrome 一种扩展程序,它是按照扩展ID来组织,这些文件也是嵌入在页面中资源...Sources资源页面的断点调试 1.如何调试: 调试js代码,肯定是我们常用功能,那么如何打断点,找到要调试文件,然后在内容源代码左侧代码标记行处点击即可打上一个断点 image 2.断点与 js...以捕获屏幕为例,点击摄像机按钮(捕获屏幕),重新加载页面即可捕获屏幕。 双击其中截屏可以放大显示,在放大图下方可以点击跳转到上一帧或者下一帧。...DOMContentLoaded事件在Overview用一条蓝色竖线标记,并且在Summary以蓝色文字显示确切时间。...load事件同样会在Overview和Requests Table用一条红色竖线标记,在Summary也会以红色文字显示确切时间。

3.6K30

再谈BOM和DOM(4):DOM0DOM2事件处理分析

JavaScript加冕历史》、《浏览器史话中chrome霸主地位奠定与国产浏览器割据混战》 DOM2级 事件处理程序 DOM2开始推崇三层分离: DOM视图(DOM Views):定义了跟踪不同文档...DOM3级则进一步扩展了DOM,引入了以统一方式加载和保存文档方法–在DOM加载和保存(DOM Load and Save)模块中定义;新增了验证文档方法–在DOM验证(DOM Validation...DOM3级也对DOM核心进行了扩展,开始支持XML 1.0规范,涉及XML Infoset、XPath和XML Base。 DOM 2级事件定义了两个方法,用于指定和删除事件处理程序操作。...事件流 什么是事件流:大白话说就比如我在页面上点击鼠标右键,这个右键如何反应到页面上,这就是一个事件过程 在浏览器相对标准化之前,各个浏览器厂商都是自己实现事件模型,有的用了冒泡,有的用了捕获,...DOM3 事件监听 DOM3级事件模块在DOM2级事件基础重新定义了这些事件也添加了一些新事件

77910

JS 逆向之 Hook,吃着火锅唱着歌,突然就被麻匪劫了!

Hook 中文译为钩子,Hook 实际是 Windows 中提供一种用以替换 DOS 下“中断”系统机制,Hook 概念在 Windows 桌面软件开发很常见,特别是各种事件触发机制,在对特定系统事件进行...安装完成后如下图所示,打开抓包,点击开启注入 Hook: [03.png] 浏览器清除 cookie 后重新进入某奇艺页面,可以看到成功断下,在 console 控制台可以看到捕获一些 cookie...我们依旧以某奇艺 cookie 为例来演示如何编写 TamperMonkey 脚本,首先去应用商店安装 TamperMonkey,安装过程不再赘述,然后点击图标,添加新脚本,或者点击管理面板,再点击加号新建脚本...需要注意是,火狐浏览器插件不一定能在其他浏览器运行,而 Chrome 插件除了能运行在 Chrome 浏览器之外,还可以运行在所有 webkit 内核国产浏览器,比如 360 极速浏览器、360...我们还是以某奇艺 cookie 来演示如何编写一个 Chrome 浏览器 Hook 插件。

1.4K10

Rust web 前端库框架评测,以及和 js 前端库框架比较

添加行到大容量表格:在 10000 行表格添加 1000 行消耗时间(无预热)。 行替换:替换表格中 1000 行全部内容消耗时间(5 次预热)。...部分更新:对于有 10000 行表格,每 10行 更新一次文本消耗时间(5 次预热)。 行选择:点击某行,让其突出显示,计算响应消耗时间(5 次预热)。...主线程工成本:MainThreadWorkCost 度量指标,执行在主线程工作所消耗总时间。包括样式、布局等。...所以除非前端技术有什么超级大变革,否则 wasm-bindgen 最好性能估计也就是总体和原生 vanillajs 总体持平吧。...根据对官方 API 文档理解,个人认为当前版本(yew 0.18)用于生产环境,是一个不小挑战(包括开发和维护)。

5.8K20

JS事件

事件事件流需要从事件讲起。 JavaScript 与 HTML 之间交互是通过事件实现。 “事件就是文档或者浏览器窗口中发生一些特定交互瞬间。...事件冒泡 “IE事件流叫做事件冒泡,即时间最开始由最具体元素接收,然后逐级向上传播到较为不具体节点(文档)。 例: <!...事件传播顺序如下: div body html document 也就是说,click 事件首先在元素 div 发生,然后 click 事件沿 DOM 树向上传播,每一级节点都会发生,直至传播到...事件捕获 提示 虽然事件捕获是 Netscape Communicator 唯一支持事件流模型,但是 IE9、Safari、Chrome、Opera 和 Firefox 等目前也都支持这种事件流模型。...下一阶段是处于目标阶段,于是事件在 div 发生,并在事件处理中被看成冒泡一部分。最后,冒泡阶段发生,事件传播回文档。 回顾问题 开篇提出问题,仿佛在此可以得出结论: ?

5.7K10

今天聊聊DOM事件传播机制

事件冒泡流 IE 事件流叫做事件冒泡(event bubbling),即事件开始时由最具体元素(文档中嵌套层次最深那个节点)接收,然后逐级向上传播到较为不具体节点(文档)。...IE9、Firefox、Chrome、Safari 将事件一直冒泡到 window 对象。...Chrome、Safari 等现代浏览器都支持事件捕获,但是也是从 window 对象开始捕获。...处于目标阶段:事件在 div 发生并处理,但是本次事件处理会被看成是冒泡阶段一部分。 冒泡阶段:事件又传播回文档事件委托 上面介绍了事件冒泡流,事件冒泡一个最大好处就是可以实现事件委托。...事件冒泡(event bubbling),是指事件开始时由最具体元素(文档中嵌套层次最深那个节点)接收,然后逐级向上传播到较为不具体节点(文档)。

96120

网页截长图 截屏Google Chrom 插件 FireShot 分享 3000万人使用网页截图插件

捕获和编辑屏幕截图 FireShot是一款出色免费工具,可用于在Windows PC捕获网页。其易于使用界面让您可以捕获页面的一部分、整个浏览器窗口,甚至是所有打开选项卡内容。...2.在打开谷歌浏览器扩展管理器最左侧选择扩展程序或直接输入:chrome://extensions/       3.找到自己已经下载好Chrome离线安装文件xxx.crx,然后将其从资源管理器中拖动到...Chrome扩展管理界面中,这时候用户会发现在扩展管理器中央部分中会多出一个”拖动以安装“插件按钮。       ...5.用户这时候只需要点击添加按钮就可以把该离线Chrome插件安装到谷歌浏览器中去,安装成功以后该插件会立即显示在浏览器右上角(如果有插件按钮的话),如果没有插件按钮的话,用户还可以通过Chrome扩展管理器找到已经安装插件...3.勾选开发者模式,点击加载已解压扩展程序,将文件夹选择即可安装插件 使用  1.使用FireShot截图。

3.8K20

Chrome 89 更新事件触发顺序,导致99%文章都错了(包括MDN)

果然是版本问题,但是事情追踪依然很难,由于搜索了规范以及查了谷歌一些资料,并没有很好地帮助我解决这个疑惑,我不确定是因为 Chrome 引入 bug 还是出现了什么问题。...id=174288 中,有人指出,在 webkit 中当前事件模型,会导致含有 Shadow DOM 情况下,子元素捕获事件会优先于父元素捕获事件触发。 ?...1.按照旧版本事件触发机制 表现 目标元素触发事件顺序和注册事件顺序有关 2.新事件触发机制 表现 目标元素触发事件顺序按照先捕获再冒泡顺序触发 而这个版本分界线是在 Chrome 89.0.4363.0...在 Chrome 89.0.4363.0 以及之后版本中,目标元素触发事件顺序不再按照注册顺序触发!而是按照先捕获再冒泡形式依次执行! 然后我们再来看看这样修改会给我们带来怎么样影响。...我们只需要将所有目标元素代码顺序都按照先书写捕获事件代码,再书写冒泡事件代码,就可以兼容本次更新。

52950

CreatorPrimer|触摸事件冒泡

第三话 结果是OK,于是将测试场景发给了「悦雨」同学,但ScrollView不是想要,继续聊这个问题: ? 第四话 不想用ScrollView,还有什么方案呢?触摸事件捕获!继续对话: ?...以cc.ScrollView组件为例,看如何定位组件源码: 使用Chrome浏览器启动游戏预览 打开Chrome DevTools工具 键盘快捷键:ctrl + p 或 cmd + p 输入:ccscrollview...通过上面的分析,再通过断点跟踪,在ScrollView和Button组件中分别打上断点,我们在Button组件点击,ScrollView组件_onTouchEnded居然先被断下来,它是怎么做到呢...true //是否捕获子节点Touch事件 ); 为了帮助大家更好地理解,我做了个简单小组件,请看代码: cc.Class({ extends...,在父节点开启捕获,看下面截图: ?

1.3K30

浏览器插件开发-manifest文件解读「建议收藏」

Chrome Extension API 360浏览器插件文档 中文, 虽然内核差不多但是不一定与 Chrome api 一致, 可以作为参考 Chrome 官方案例库 案例 如何实现网页和Chrome...扩展页图标 (16 * 16) 最好是 png 格式 6. browser_action 可以用来定义点击图标后展示窗口,对应接口 chrome.browserAction,这项配置与 page_action...扩展在他们后台脚本中监视这些事件,然后用指定指令进行响应 关于后台脚本状态 首次下载后或者更新后被加载 后台脚本下载后会处于休眠状态,直到它侦听某个事件被触发, 侦听到事件后,会使用指定指令响应...(怎么相应自定义) 以下情况会需要调用到后台脚本 扩展首次下载或者版本更新 后台脚本中正在监听事件,并且这事件被触发了 content_script 或者其他扩展中调用了 sendMessage...一般为 false, 某些特殊情况需要参考文档 } } 事件过滤器,有些事件支持事件过滤,比如选项卡切换可以监听 // background.js chrome.webNavigation.onCompleted.addListener

2.2K20

【准备篇】js逆向分析破解之学习准备

打开Chrome 开发者工具方式: 在Chrome菜单中选择 更多工具 > 开发者工具 在页面元素右键点击,选择 “检查” 使用 快捷键 F12 或 Ctrl+Shift+I (Windows) 或...Performance(性能面板) 如何查看性能 分析运行时性能 诊断强制同步布局 Note: 在 Chrome 57 之后时间线面板更名为性能面板。...[推荐一个链接Chrome DevTools — Network] 捕获屏幕 Controls窗格包括功能有网络日志录制、日志清理、捕获屏幕、过滤器,视图切换、保留日志开关、Cache开关、网络连接开关...以捕获屏幕为例,点击摄像机按钮(捕获屏幕),重新加载页面即可捕获屏幕。 双击其中截屏可以放大显示,在放大图下方可以点击跳转到上一帧或者下一帧。...DOMContentLoaded事件在Overview用一条蓝色竖线标记,并且在Summary以蓝色文字显示确切时间。

4.7K62

是时候为各式设备适配完善输入支持了

那么每位开发者都有必要花些时间去思考,如何使应用为尽可能多用户带来愉快使用体验?...您只需在 Android 文档中找到正确 键代码,并监听这些按键即可。...△ 鼠标 右键点击支持 右键点击是最常见疏漏之一。触控一个常见范例是在屏幕长按以执行基于上下文操作,但长按鼠标点击并不直观。如果要支持右键点击,此处有几种方案可供选择。...应用能够通过指针捕获功能捕获鼠标光标,使光标不出现在屏幕,这样无需将光标移动到屏幕边缘就可以接收相对指针事件。像 Minecraft: 教育版等第一人称视角游戏就是很好案例。...回顾 大屏幕 Android 设备已经出现而且愈发普及,在 Android 提供出色输入支持一直很重要,而对于可折叠设备、平板电脑和 Chrome 操作系统来说尤为重要。

1.1K20

前端开发必备之Chrome开发者工具(上篇)

ChromeWeb开发和调试工具,可用来对网站进行迭代、调试和分析 打开 Chrome 开发者工具方式有: 在Chrome菜单中选择 更多工具 > 开发者工具 在页面元素右键点击,选择 “检查...其他框架和扩展程序在其自身环境中运行。要使用这些其他环境,您需要从下拉菜单中选中它们。...点击左边行号,这样一个蓝色图标就显示在行号,表明该代码行设置好断点了。 ?...异常断点 当您想暂停引发捕获或未捕获异常代码行时,使用异常断点 设置异常断点: 点击 Sources 选项卡。 点击暂停 ? ,启用后变成蓝色。...(可选)如果除了未捕获异常外,还想暂停捕获异常,请选中 “Pause on caught exceptions” 复选框。 ?

8.2K111

JavaScript事件

javascript与HTML之间交互是通过事件实现事件就是文档或浏览器窗口中发生一些特定交互瞬间。...是从外往里逐个触发 当点击了元素,按照如下方式触发click事件 document->html->body->div 注意:IE9,Safari,Chrome,Opera,Firefox...目前也都支持事件捕获,但是由于老版本浏览器不支持事件捕获,因此很少有人使用事件捕获。...缺点: 1)时差问题,用户可能会在HTML元素一出现在页面上就触发相应事件,但当时事件处理程序有可能尚不具备执行条件。 2)这种扩展事件处理程序作用域链在不同浏览器中会导致不同结果。...鼠标与滚轮事件 click 点击主鼠标按钮或者按下回车按键时候触发。

1.4K30

一次关于js事件出发机制反常解决记录

,先看一下几个定义 先来看事件注册 // IE以外其他浏览器 // target :文档节点、document、window 或 XMLHttpRequest。...(触发事件元素)  function eventHandler(e){ //获取事件对象 e = e || window.event;//IE和Chrome下是window.event...这个阶段也被称为捕获阶段。 目标阶段:本次活动对象到达事件对象事件目标。这个阶段也被称为目标阶段。如果事件类型指示事件不起泡,则在完成此阶段后,事件对象将停止。...li时,打印 依次为 ul clicked li clicked   点击s1时,打印依次为 s1 捕获方式 s1 冒泡方式 点击s2时,打印依次为 s1 捕获方式 s2 捕获方式 s2 冒泡方式...比如容器为#a,动态插入元素为#b,在#a监听click事件,判断event.target.id是不是等于b即可,如果.bclass这种,以此类推。

1.4K50

微信小程序继续入坑指南

bindtap 进行事件绑定 冒泡和非冒泡 ps 发现知晓程序 https://minapp.com/miniapp/ 好滴,写完后继续。肯定要写插件喽 bind和catch后面跟上事件类型。...,该栗子是进行在移动设备绘图,额,暂时不想看,目前该方案只有chrome实现 catch事件绑定可以阻止冒泡事件向上传播。...捕获 换了一个名词而已。约等于网页开发中传播 即事件先传播到顶层,在往下捕获,到底部以后在往上进行冒泡。事件一共经历了先往上,在往下,再次往上过程。来源于网景和ie那一场战争。战争遗留内容。...capture-bind 以及 capture-catch 使用这两个关键字可以完成对事件捕获。...} }) 点击按钮触发事件 即,触发事件 引用 wxml提供两种方式引用。

62980

如何在十分钟内创建一个Chrome 插件

在接下来几分钟里,我们不仅将为你详解Chrome扩展基础知识,还将手把手教你如何用五个简单步骤创建自己扩展。 我们将构建什么? 近年来,我们见证了人工智能能力飞速发展。...注:对于那些渴望更深入了解Chrome扩展的人,Google官方文档是一份极其宝贵资源。 值得注意是,Google Chrome 扩展可以根据其预期功能采取多种形式。...如果存在,它会禁用发送按钮并向聊天框父 div 添加一个 CSS 类(forbidden-div)。 脚本最后注册了两个事件监听器: 第一个触发在 keyup 事件。...打开 Chrome 浏览器,然后在地址栏中导航到 chrome://extensions/。 在页面右上角打开“开发者模式”开关。 点击现在可见“加载未打包扩展”按钮。...导航到并选择您扩展目录(在我们例子中是 chatgpt-molly-guard),然后点击“选择”。我们扩展现在应该出现在已安装扩展列表中。

42051

深入理解事件

IE9+/FF/Chrome这2种模型都支持,可以通过addEventListener第三个参数来设定,false代表事件冒泡,true代表事件捕获。...这就是上面我们说,在目标对象(outC)绑定函数是采用捕获,还是采用冒泡,都没有什么关系,因为冒泡和捕获只是对父元素函数执行顺序有影响,对自己没有什么影响。...阻止事件冒泡和捕获 默认情况下,多个事件处理函数会按照DOM事件流模型中顺序执行。如果子元素发生某个事件,不需要执行父元素注册事件处理函数,那么我们可以停止捕获和冒泡,避免没有意义函数调用。...7.4 事件委托如何实现: 终于到了本文核心部分了。...,则不管是哪个li被点击————由于冒泡原理,事件最终都会冒泡到ul,触发ul点击事件,弹出123。

81040
领券