,在它的回调函数中再添加一个对 Cookie 的监听事件 当监听到的 Cookie 满足条件时,发送消息给 Content Script 去执行具体的动作 需要指出的是,changeInfo.cause...(sender.tab.id, { action: "debugger" }); } }); } }); 1-3 触发调试 在 Content Script 中,主动触发一次发起调试的消息给...debugger; } }); 将编写好的 Chrome 插件安装到浏览器上,打开目标网站及浏览器开发者工具 只要指定的 Cookie 变动,就会自动触发调试操作 Cookie Hook 通过上面的方式仅仅只能发现...cookie_name"; //Hook Cookie Set //注意:这种方法可能与某些网站的JavaScript代码不兼容,因为它依赖于废弃的__defineSetter__方法 function...浏览器中安装扩展后,打开浏览器开发者工具和目前网站,一旦目标 Cookie 被设定一个值后,会自动进入断点模式 在调试模式下,我们就可以在 Source 面板利用 Call Stack 调用栈一步步查询到加密参数生成的具体逻辑
插件之间的通信 消息传递 manifest.json 配置说明 manifest.json 用于描述 Chrome 插件的源数据,配置信息等,基本内容如下 { "name": "...扩展在他们的后台脚本中监视这些事件,然后用指定的指令进行响应 关于后台脚本的状态 首次下载后或者更新后被加载 后台脚本下载后会处于休眠状态,直到它侦听的某个事件被触发, 侦听到事件后,会使用指定的指令响应...(怎么相应自定义) 以下情况会需要调用到后台脚本 扩展首次下载或者版本更新 后台脚本中正在监听事件,并且这事件被触发了 content_script 或者其他扩展中调用了 sendMessage...新 tab 都可替换 10. commands 可以通过 commands 选项定义触发扩展事件的快捷键 { ..., commands: { "xxx": {...\ _execute_page_action 这两个命令不会被监听,他们是触发 popup 弹出的,要监听 窗口弹出事件可以使用 popup_page 的onDomReady 11. content_scripts
在测试小程序的时候,发现了这样的一个bug,点击子元素事件d的时候触发父元素的点击事件,从而执行父级的点击事件,跳转到了父级的点击事件的页面了。 ?...其实很简单,只需要把子级的bindtap改成catchtap,就可以了。 ? ?...因为: bind事件绑定不会阻止冒泡事件向上冒泡 catch事件绑定可以阻止冒泡事件向上冒泡 当点击子集的catchtap='navmap'事件之后阻止冒泡事件向上冒泡,所以不会触发bindtap=...'carState',成功解决bug,实现小程序中点击子元素事件而不触发父元素的点击事件。
曾经想过制作自己的Chrome扩展,却因为觉得过程太复杂而打消了念头吗? 好消息,事情并没有你想象的那么复杂!...version:一个到四个用点分隔的整数,用于标识扩展的版本。 description:一个纯文本字符串(不包含 HTML,最多 132 个字符),用于描述扩展。...content_scripts:此键静态地指定每次打开与 URL 模式(由 matches 键指定)匹配的页面时要使用的 JavaScript 或 CSS 文件。...步骤3:创建 Content Script Chrome 扩展中的 Content Script 是运行在网页上下文中的 JavaScript 文件。...如果存在,它会禁用发送按钮并向聊天框的父 div 添加一个 CSS 类(forbidden-div)。 脚本最后注册了两个事件监听器: 第一个触发在 keyup 事件上。
谷歌浏览器插件开发是指开发可以在谷歌浏览器中运行的扩展程序,可以为用户提供额外的功能和定制化的体验。谷歌浏览器插件通常由HTML、CSS和JavaScript组成,非常利于前端开发者。...清单文件是插件的配置文件,包含插件的名称、版本、描述、权限以及其他相关信息。背景脚本用于处理插件的后台逻辑,而内容脚本则用于在网页中执行JavaScript代码。...image.png 道歉信内容自己写哈,这个具体看你的诚意。下面设置2个按钮,原谅和不原谅。点击原谅,就可以关闭弹窗。点击不原谅,这个弹窗调整css布局位置继续显示。...页面之间进行数据通信 如需将单条消息发送到扩展程序的其他部分并选择性地接收响应,请调用 runtime.sendMessage()[7] 或 tabs.sendMessage()[8]。...通过这些方法,您可以从内容脚本向扩展程序发送一次性 JSON 可序列化消息,或者从扩展程序向内容脚本发送。如需处理响应,请使用返回的 promise。
脚本的载入 所有的页面(html/htm)不能直接嵌入内联JavaScript函数,都必须使用script标签引入,如果使用内联脚本,控制台会报错 三、生命周期 popup.html 可以认为它是一个网页...被激活时,如何广播消息至各tab页; 2、当激活指定的tab页时,content_scripts如何获取popup.html中存储的相关数据; 当popup.html关闭时,content_scripts...1、content_scripts 获取数据 调用chrome.extension.sendRequest方法,发送相应的数据出去。...2、popup.html 广播消息至各页面 popup.html的处理脚本,在得到数据后,调用chrome.tabs.sendRequest方法广播。...content_scripts 对应的脚本处理函数(接受消息) ? ?
说到现如今最流行的浏览器,那么一定是chrome,无论是它的速度,还是它的稳定性,还是它的简洁,都让人爱不释手,此外,更多的人选择它的理由是它有着丰富的扩展插件,这些扩展插件让你的浏览器变得异常强大,让你的浏览器不仅仅是浏览器...chrome扩展结构 chrome的扩展是以.crx结尾的安装包,如果你把它下载下来,并把它重命名为.rar压缩包文件,然后你就可以使用压缩软件对它进行解压,加压之后,就会发现其实chrome的扩展包里面就是一些...每一个扩展都有一个被浏览器运行的背景页,此外还有事件页面,背景页面是一直都是激活状态,而事件页面只是在触发事件的时候才会激活,因此为了节省内存和提高浏览器的性能,尽可能选择事件页面。...() { } ); 扩展能够做什么 扩展能够做什么主要取决于浏览器为我们提供了哪些API,庆幸的是,chrome为我们提供了足够多好用的API。...我们可以操作用户的书签和浏览记录 我们可以控制下载,管理下载内容 我们可以监听网络请求,监听事件响应 我们可以修改界面样式,可以添加自定义css 我们可以在页面添加想要的元素 总之,chrome几乎为我们提供了完整控制浏览器的扩展
Chrome插件就是一个网站类的应用,它是用html、javascript、css组成的一个webapp; 相比于通常的webapp, Chrome插件还可以调用更多浏览器层面的api,包括书签、历史记录...菜单下的扩展程序(E),进入相同的页面)。...单击加载正在开发的扩展程序…,弹出文件选择对话框。 浏览至您的扩展程序文件所在的目录,并选定。...您也可以将扩展程序文件所在的目录拖放到浏览器中的 chrome://extensions 上加载它。 如果扩展程序有效的话,它将被加载并且立刻处于活动状态!...如果无效的话,页面顶部将显示错误消息,请纠正错误再重试。 打包发布 开发插件的目的是为了贡献自己的一点技术力量,为人类的永恒与和平略尽绵力,当然这都是胡扯!
对于前端工程师而言,其最大的便利就是我们可以应用我们熟悉的 HTML、CSS 、 Javascript 等技术来制作扩展程序。...扩展(Extension) 指的是通过调用 Chrome 提供的 Chrome API 来扩展浏览器功能的一种组件,工作在浏览器层面,使用 HTML + Javascript 语言开发。...chrome扩展程序将后台网页分为两种类型: 1.持续运行的后台网页 2.事件页面 是否持久存在是事件页面与后台网页之间的根本区别。...事件页面只在需要时加载,当事件页面不活动时就会卸载,以便释放内存和其他系统资源,所以一般而言是推荐使用事件页面。 它存在的目的在于,在扩展的整个生命周期内需要长时间管理一些任务或状态。...它的主要功能及适用场景,大致如下: 1.事件页面监听的某个事件触发 2.应用或扩展程序第一次安装或者更新到新版本(为了注册事件) 3.内容脚本或其他扩展程序发送消息 4.扩展程序中的其他视图调用了
另外,background拥有的权限比较高,几乎可以调用所有的Chrome扩展API(除了devtools),同时拥有直接跨域的能力。 page:指定一个网页为后台页面。..."content_scripts": [ { // 在匹配的URL中运行,表示所有的URL都会运行。...,首先得查找要给哪个tab发消息,使用chrome.tabs.query 这个方法查找到tab,再使用chrome.tabs.sendMessage 方法给tab发消息: // {active: true...3.如果popup和background都监听了从content发来的消息,两者都能收到监听消息,但是callback只会触发一次,被谁触发取决与谁先发送。...但是,很多用户触发的事件,需要通过inject-scripts告诉content-scripts,content-scripts再给background通信并且去做一些事情,然后再发消息告诉inject-scripts
id=174288 中,有人指出,在 webkit 中当前的事件模型,会导致含有 Shadow DOM 的情况下,子元素的捕获事件会优先于父元素的捕获事件触发。 ?...而在旧模型中,一旦达到 AT_TARGET ,所有注册的监听器就将按照顺序被触发,而不管他们是否被标记为捕获。由于 Shadow DOM 会创建多个 targets ,导致了事件执行顺序的错误。...1.按照旧版本事件触发机制 表现 目标元素触发事件顺序和注册事件顺序有关 2.新的的事件触发机制 表现 目标元素触发事件顺序按照先捕获再冒泡的顺序触发 而这个版本分界线是在 Chrome 89.0.4363.0...在 Chrome 89.0.4363.0 以及之后版本中,目标元素的触发事件顺序不再按照注册顺序触发!而是按照先捕获再冒泡的形式依次执行! 然后我们再来看看这样修改会给我们带来怎么样的影响。...首先我们要明确是的,网上以前的大部分文章已经不适用于当下的 Chrome 新版本了! 如果我们业务中有依赖相关的事件触发顺序,请仔细检查! 举个?
如何实现一个谷歌浏览器插件 一、什么是Chrome插件? ★Chrome插件就是我们运行在Chrome浏览器 上的扩展程序,比如说vue-devtool。...准确的说,其实更应该叫做Chrome扩展,因为插件是更偏向于底层的技术。Chrome插件本质上来说,就是利用WEB开发技术,包括HTML、CSS和JS等开发出来的web页面,用来增强浏览器的功能。..."48": "img/icon.png", // 显示在扩展程序管理页面上 "128": "img/icon.png" // 在安装和Chrome Webstore...// document_start: html解析完毕、CSS资源加载完成,JS执行前 // document_end: DOMContentLoaded事件触发后立即执行...,对象的话可以JSON序列化 function: background接受到消息后返回的信息 (2)background向content-scripts发送消息 每个tab页面都有一个自己的content-scripts
说明 Chrome插件又称为谷歌浏览器插件,是谷歌Chrome浏览器的扩展插件,使用Chrome插件可以为Chrome浏览器带来一些功能性的扩展,进而提高Chrome的使用体验。...解释 这次做的这个插件真的很简单,不涉及什么加密解密,也不是去拦截特定的网络请求,就是用CSS的 display: none; 就可以了。 ?...,在Chrome18之后,都是2 version :插件的版本号 description:插件描述 browser_action:设置扩展信息栏的图标、图标悬浮提示、点击图标时弹出窗口,我这里设置了设置的是默认图标...如果需要所有页面都注入,就写成"matches": "", content_scripts 中的 js属性定义要注入的 JavaScript csdn.js 文件内容 var...首先,打开chrome 浏览器,点击右上角的东西,不一定是像图中的三个 · 一样的东西,总之点击最右上角,出现一个弹框就行。 ? 选择更多工具,点击 扩展程序 ?
Chrome18开始必须为2 "manifest_version": 2, // 描述。132个字符以内 "description": "", // 扩展图标。...不需要人为指定 "key": "", // 扩展所需chrome的最小版本 "minimum_chrome_version": "1.0", // 消息与本地处理模块映射...用于响应地址栏的输入事件 "omnibox": { "keyword": "myKey" }, // 选项页。.... icons 插件的图标; 6. browser_action 定义插件的图标后,点击图标时弹出的页面,以及插件的标题,建议始终保留一个,不设置这个属性图标会是灰色的,设置了后才会亮起来; 7. background...背景页,扩展进程的背景运行环境,可以拦截修改请求等等; 8. content_scripts 内容脚本,可以指定在什么时机向什么页面插入什么脚本或者css资源; 9. permissions 权限申请项
什么是Chrome插件 严格来讲,我们正在说的东西应该叫Chrome扩展(Chrome Extension),真正意义上的Chrome插件是更底层的浏览器功能扩展,可能需要对浏览器源码有一定掌握才有能力去开发...鉴于Chrome插件的叫法已经习惯,本文也全部采用这种叫法,但读者需深知本文所描述的Chrome插件实际上指的是Chrome扩展。...注册某个关键字以触发插件自己的搜索建议界面,然后可以任意发挥了。...:' + JSON.stringify(request)); }); 注意事项: content_scripts向popup主动发消息的前提是popup必须打开!...解决方法就是用JS绑定事件: $('#btn').on('click', function(){alert('测试')}); 另外,对于A标签,这样写href="javascript:;"然后用JS绑定事件虽然控制台会报错
当然有现成的扩展程序或者插件(两者概念稍有不同)可以清除页面广告,但是既然身为一名程序猿,尤其是FEDer,为什么不尝试一下自己写一个清除广告的扩展程序呢。...一个应用(扩展)其实是压缩在一起的一组文件,包括HTML,CSS,Javascript脚本,图片文件,还有其它任何需要的文件。...上面说的要向页面当中注入脚本文件,主要就是靠content_scripts,Content scripts是在Web页面内运行的javascript脚本。...如果扩展程序有效的话,它将被加载并且立刻处于活动状态!如果无效的话,页面顶部将显示错误消息,请纠正错误再重试。 后记: 感谢有读者提出指正 谷歌扩展程序 与 插件 的异同。...扩展(Extension),指的是通过调用 Chrome 提供的 Chrome API 来扩展浏览器功能的一种组件,工作在浏览器层面,使用 HTML + Javascript 语言开发。
扩展是基于 Web 技术构建的,例如 HTML、JavaScript 和 CSS。它们在单独的沙盒执行环境中运行,并与 Chrome 浏览器交互。...前端技术栈 本次 Chrome 插件选用 React 框架开发,其他开发者也可以根据自己的偏好进行技术选型。 第一版本的插件能力暂时不接入后端,数据都存在本地。...// eventInit 可选,接受以下字段: // bubbles 是否支持冒泡,cancelable:能否被取消,composed:事件是否会触发shadow DOM(阴影DOM)根节点之外的事件监听器...target.dispatchEvent(event) 向一个指定的事件目标派发一个事件,从而触发监听函数的执行。...安装扩展文件 Chrome 允许安装 Chrome 应用市场和本地文件两种来源的扩展文件。
严格来讲,我们正在说的东西应该叫Chrome扩展(Chrome Extension) 什么叫Chrome插件 Chrome插件是一个用Web技术开发、用来增强浏览器功能的软件,它其实就是一个由HTML、...CSS、JS、图片等资源组成的一个.crx后缀的压缩包 扩展程序由一些文件(包括 HTML、CSS、JavaScript、图片以及其他任何您需要的文件)经过 zip 打包得到,为 Google Chrome...cookies 控制cookies desktopCapture 捕获屏幕、个人窗口或标签内容 downloads 下载控制 events 事件相关API extension 获取扩展的各部分,也能与各部分交换信息...extensionTypes 扩展的类型声明 gcm 启用google云消息服务,收发消息 history 历史记录控制 i18n 多语言国际化支持 idle 取得机器闲置状态 management...}); 扩展调试 chrome的菜单里打开扩展程序(打开开发者模式) ? 调试通普通页面一样 如何优雅的调试 右键Chrome工具栏的小图标会弹出一个窗口,选择审查弹出内容即可调试。
对于前端工程师而言,其最大的便利就是我们可以应用我们熟悉的 HTML、CSS 、 Javascript 等技术来制作扩展程序。...扩展(Extension) 指的是通过调用 Chrome 提供的 Chrome API 来扩展浏览器功能的一种组件,工作在浏览器层面,使用 HTML + Javascript 语言开发。...chrome扩展程序将后台网页分为两种类型: 持续运行的后台网页 事件页面 是否持久存在是事件页面与后台网页之间的根本区别。...事件页面只在需要时加载,当事件页面不活动时就会卸载,以便释放内存和其他系统资源,所以一般而言是推荐使用事件页面。 它存在的目的在于,在扩展的整个生命周期内需要长时间管理一些任务或状态。...它的主要功能及适用场景,大致如下: 事件页面监听的某个事件触发 应用或扩展程序第一次安装或者更新到新版本(为了注册事件) 内容脚本或其他扩展程序发送消息 扩展程序中的其他视图调用了 runtime.getBackgroundPage
领取专属 10元无门槛券
手把手带您无忧上云