从油猴脚本管理器的角度审视Chrome扩展 在之前一段时间,我需要借助Chrome扩展来完成一个需求,当时还在使用油猴脚本与浏览器扩展之间调研了一波,而此时恰好我又有一些做的还可以的油猴脚本 TKScript...": { // 单击浏览器工具栏按钮时的行为 "default_popup": "popup.html", // 单击按钮时打开的默认弹出窗口..."default_icon": { // 弹出窗口按钮图标 // 可以直接配置为`string` "16": "icon16.png",...扩展无法从v2平滑过渡到v3,所以这个能力后续还有可能会被改善。...popup: 这个模块是扩展的弹出层界面,可以通过点击扩展图标在浏览器中弹出,用于显示扩展的一些信息或操作界面。
重新认识 message 在Chrome扩展开发中,message 通信机制是核心技术之一,它允许扩展的不同组件(如内容脚本、后台脚本、弹出页面、选项页面等)通过发送和接收消息来进行互动和协作。...弹出页面与后台脚本的通信 场景描述: 弹出页面是用户与扩展互动的入口,通常需要根据用户的操作触发后台脚本执行某些任务。...后台脚本与多个内容脚本的通 场景描述: 当扩展需要在多个标签页或窗口中的内容脚本之间同步信息时,后台脚本可以充当消息中心,接收一个内容脚本的消息并将其转发给其他内容脚本。...后台脚本接收到消息后可以执行相应的操作,如记录日志或更新扩展的状态。 弹出页面通知后台脚本执行操作: 用户在弹出页面中进行的操作(如点击某个按钮)可能需要触发后台脚本执行某些任务。...内容脚本 (content.js) 内容脚本从页面脚本接收消息,并可以通过 chrome.runtime.sendMessage 将其转发给后台脚本。
我已经在实践项目中抄了3个别人插件的源码,其中复活了一个由于未及时适配 Manifest V3 而被下架的插件,功能就是防止浏览器窗口关闭最后一个标签时会关闭整个窗口,有兴趣的可以私聊发源码交流。...后台脚本: background:定义后台脚本,在 manifest_version 3 中使用 service_worker。后台脚本在浏览器启动时运行,管理扩展的生命周期和处理事件。...常用功能 popup 页面 在 Chrome 扩展中,popup 页面是指当用户点击扩展图标时弹出的界面。这个界面通常用于提供用户交互或展示信息。...; }); }); background background.js 文件是 Chrome 扩展的后台脚本,用于处理长期运行的任务、事件和状态管理。它在浏览器的后台运行,并且在浏览器启动时加载。...消息传递:与扩展的其他部分(如后台脚本 background.js、弹出页面 popup.js)进行消息传递和通信。 数据采集和分析:收集页面上的数据,进行分析或发送到后台进行处理。
无论是在后台脚本、内容脚本、开发者工具、弹出窗口、选项页还是窗口上下文之间,WebExt-Bridge 都能提供一个高效且一致的方式来发送和接收消息。...三、快速示例 接下来,让我们看一个从弹出窗口向后台脚本发送消息的快速示例: 1、弹出窗口 在你的弹出窗口中,添加以下代码: import { sendMessage } from "webext-bridge...1、通信上下文 WebExt-Bridge支持以下几种通信上下文: content-script - 注入到页面的脚本 popup - 扩展的弹出窗口 options - 选项页面 background...: string }> } } 八、示例 以下是一些常见的使用示例: 1、弹出窗口 -> 后台脚本 从弹出窗口向后台脚本发送消息 // 弹出窗口脚本 import { sendMessage...-> 后台脚本 从内容脚本向后台脚本发送消息 // 内容脚本 import { sendMessage } from "webext-bridge/content-script"; const
| string 一个或者一组图标的路径 default_title 设置 tooltip default_popup 指定弹出的窗口,可以是任意 html badges “徽章” 就是小图标上的一个标记...扩展是基于事件的程序,这些事件包括导航到新页面、删除书签、或者关闭选项卡,扩展在他们的后台脚本中监视这些事件,然后用指定的指令进行响应 关于后台脚本的状态 首次下载后或者更新后被加载...后台脚本下载后会处于休眠状态,直到它侦听的某个事件被触发, 侦听到事件后,会使用指定的指令响应(怎么相应自定义) 以下情况会需要调用到后台脚本 扩展首次下载或者版本更新 后台脚本中正在监听事件,并且这事件被触发了...content_script 或者其他扩展中调用了 sendMessage 当前扩展中的其他部分,例如弹窗中调用了 runtime.getBackgroundPage 后台脚本定义选项 {...\ _execute_page_action 这两个命令不会被监听,他们是触发 popup 弹出的,要监听 窗口弹出事件可以使用 popup_page 的onDomReady 11. content_scripts
事实上任何的按键、按钮或组合键都可以被设置为热键;● 可以对Windows各类型窗口进行匹配以及相关属性调整(例如:透明、隐藏、置顶、改变大小等);● 当键入您自定义的缩写时可以 扩展缩写。...可以调用COM和DLL对象进行功能扩展;● 可以创建机器码地址,当它被调用时会重定向到脚本中的函数;● 可以复制字符串到内存地址或来自内存地址,并可以对其在指定代码页间进行转换;● 文件、目录和磁盘管理...、隐藏、关闭、强制关闭、等待等相关操作;● 其他: 可以获取系统环境(如幕分辨率、多显示器信息、系统对象的尺寸和其他系统属性)相关信息并执行预定操作;● 监控您的系统。...例如,当您不希望见到的窗口出现时自动关闭它们;● 可以设置定时器并启用、停用该项目;● 检测系统空闲时间。例如,在系统空闲的时候执行高CPU负荷的任务;● 你只要有想像力,它可以完成更多工作。...● 响应信号从手持遥控器通过WinLIRC的客户端脚本。● 运行现有的AutoIt v2的脚本,并加强他们与新的功能。● 任何脚本转换成EXE文件,可以运行在没有安装AutoHotkey的计算机上。
通过本文将拥有一个功能齐全的扩展,并具备扩展它的知识。 设置开发环境 安装 Node.js 和 npm 首先,从官方网站下载并安装 Node.js。这也会安装 npm,你将使用它来管理项目依赖项。...这个文件包含关于扩展的元数据,包括其名称、版本、权限和将使用的后台脚本。 Chrome 插件的关键组件 一个典型的 Chrome 插件包括: 后台脚本:在后台运行并处理事件。...内容脚本:注入到网页中以与 DOM 交互。 弹出 UI:点击扩展图标时出现的界面。...默认情况下,当你点击扩展时应该会看到一个弹出窗口。该弹出窗口的内容来自 App.tsx 组件中的 Popup.tsx 组件。...你可以通过右键点击扩展弹出窗口并选择 检查 来访问控制台。 发布你的扩展 准备提交 在发布之前,确保你的扩展符合 Chrome 网上应用店的政策。你可能需要创建一个宣传图片并撰写详细的描述。
> 现在,当用户点击的操作图标(工具栏图标)时,该扩展程序会显示一个弹出式窗口。...Worker 是 内容脚本 是(以及托管网页) 弹出式窗口 否 选项页面 否 其他扩展程序 HTML 网页 否 查找控制台日志和错误 控制台日志 在开发过程中,您可以通过访问浏览器控制台日志来调试代码...在本示例中,我们 可找到该弹出式窗口的日志。首先,在 hello.html 中添加脚本标记。...要查看控制台中记录的消息,请执行以下操作: 打开弹出式窗口。 右键点击弹出式窗口。 选择检查。 检查弹出式窗口。...// ❌ broken code 转到“扩展程序”页面并打开弹出式窗口。系统会显示错误按钮。
HTML文件,点击扩展图标,弹出的面板页面(如果在manifest.json中配置了default_popup为该文件的话) ├ demo.js //一个或多个js文件,popup面板加载的js脚本文件...background 后台(姑且这么翻译吧), 是一个常驻的页面,它的生命周期是插件中所有类型页面中最长的, 它随着浏览器的打开而打开,随着浏览器的关闭而关闭, 所以通常把需要一直运行的、启动就运行的、...比如第一次安装、插件更新、有content-script向它发送消息,等等 popup opup是点击browseraction或者pageaction图标时打开的一个小窗口网页,焦点离开网页就立即关闭...获取扩展图标、标题、文字、弹出页等 commands 给扩展添加快捷键 contextMenus 添加选项到右键弹出菜单 cookies 控制cookies desktopCapture 捕获屏幕、个人窗口或标签内容...}); 扩展调试 chrome的菜单里打开扩展程序(打开开发者模式) ? 调试通普通页面一样 如何优雅的调试 右键Chrome工具栏的小图标会弹出一个窗口,选择审查弹出内容即可调试。
、弹出窗口以及权限。...: Chrome没有提供浏览器关闭的直接事件,但是可以使用chrome.windows.onRemoved事件在最后一个浏览器窗口关闭时执行操作。...你可以通过监听 chrome.windows.onRemoved 事件来知道窗口关闭。...('self')和https://example.com加载脚本,只允许从扩展包自身加载插件。...在某些情况下,如果可能,最好使用插件的后台脚本(background script)来加载和处理远程数据,而不是直接在前台页面(例如弹出页面或选项页面)加载远程脚本或样式。
答:要访问国外网站找官网资料(受限于学习环境),同时Firefox 与 Google Chrome、Opera 和 W3C 草案社区组织 所支持的 扩展(Extensions) API 在很大程度上兼容...为浏览器添加特性与功能,和在网页里编码相比他能帮助您处理页面上的数据按照开发者的流程进行,实际上扩展是用来提升或补充网站功能; 让用户展现他们的个性:浏览器扩展可以操控网页的内容; 从网页中添加或删除内容...(background scripts)的职责,由于扩展常常需要独立于任何浏览器窗口或特定网页来维持一种长期的状态或者执行长期的操作, // 可以添加多个后台脚本或者你也可以先引入一个后台页面,再在后台页面中引入脚本优势是...//#支持多个脚本和引入一个后台页面,再在后台页面中引入脚本这样做的优势是ES6 模块的支持; // manifest.json "background": { "page": "background-page.html...*显示弹出窗口的错误信息,隐藏正常UI。
答:要找官网资料(受限于学习环境),同时Firefox 与 Google Chrome、Opera 和 W3C 草案社区组织 所支持的 扩展(Extensions) API 在很大程度上兼容。...为浏览器添加特性与功能,和在网页里编码相比他能帮助您处理页面上的数据按照开发者的流程进行,实际上扩展是用来提升或补充网站功能; 让用户展现他们的个性:浏览器扩展可以操控网页的内容; 从网页中添加或删除内容...(background scripts)的职责,由于扩展常常需要独立于任何浏览器窗口或特定网页来维持一种长期的状态或者执行长期的操作, // 可以添加多个后台脚本或者你也可以先引入一个后台页面,再在后台页面中引入脚本优势是...//#支持多个脚本和引入一个后台页面,再在后台页面中引入脚本这样做的优势是ES6 模块的支持; // manifest.json "background": { "page": "background-page.html...*显示弹出窗口的错误信息,隐藏正常UI。
在这种背景下,Chrome Ext的安全问题也应该受到应有的关注,《从0开始入门Chrome Ext安全》就会从最基础的插件开发开始,逐步研究插件本身的恶意安全问题,恶意网页如何利用插件漏洞攻击浏览器等各种视角下的安全问题...首先是比较重要的几个字段 browser_action 这个字段主要负责扩展图标点击后的弹出内容,一般为popup.html content_scripts matches 代表scripts插入的时机...这个字段定义插件的后台页面,这个页面在默认设置下是在后台持续运行的,只随浏览器的开启和关闭 persistent 定义了后台页面对应的路径 page 定义了后台的html页面 scripts 当值为false...插件中关于devtools的生命周期和F12打开的窗口时一致的,当F12关闭时,插件也会自动结束。...来执行脚本,从而实现对页面DOM的操作。
从右上角菜单->更多工具->扩展程序可以进入 插件管理页面,也可以直接在地址栏输入 chrome://extensions 访问。 ?...需要特别说明的是早些版本的Chrome是将pageAction放在地址栏的最右边,左键单击弹出popup,右键单击则弹出相关默认的选项菜单: ?...扩展可以替代如下页面: 历史记录:从工具菜单上点击历史记录时访问的页面,或者从地址栏直接输入 chrome://history 新标签页:当创建新标签的时候访问的页面,或者从地址栏直接输入 chrome...每打开一个开发者工具窗口,都会创建devtools页面的实例,F12窗口关闭,页面也随着关闭,所以devtools页面的生命周期和devtools窗口是一致的。...如何让popup页面不关闭 在对popup页面审查元素的时候popup会被强制打开无法关闭,只有控制台关闭了才可以关闭popup,原因很简单:如果popup关闭了控制台就没用了。
今天将谷歌浏览器升级到了最新的版本,在安装拓展应用的时候,却发现无法添加应用、拓展程序和用户脚本,让我很是郁闷,现整理解决方法如下: 1.在Google Chrome浏览器的桌面快捷方式上鼠标右键...进入谷歌浏览器的 “拓展程序” 页面(即在谷歌浏览器地址栏输入:chrome://extensions/) 4....右上角有个开发者模式,点击启用就可以添加应用、拓展程序和用户脚本了 谷歌拓展 谷歌浏览器常用的几个插件 1.修改谷歌浏览器默认编码插件 Charset 链接:Charset_v0.4.1...百度网盘-分享无限制 5.浏览器分屏切割排列插件 Split Tabs 链接:split-tabs(gugeapps.com).crx_免费高速下载|百度网盘-分享无限制 6.高颜值、高效率的 Chrome
4.3.3 后台脚本 Chrome 扩展中的后台脚本具有最长的生命周期,并且在浏览器打开时连续运行。它拥有广泛的权限,允许访问大多数 Chrome 扩展 API 和跨源请求,而不受 CORS 限制。...在 Manifest V3中,后台页被具有较短生命周期和基于事件的执行的服务工作者所替代,这使得它们不适合存储全局变量。 4.3.4 弹窗 弹出窗口是一个小窗口的网页,出现在点击右上角的图标。...当用户在网页之外进行互动时,它会迅速关闭。通常用于临时交互,其权限级别类似于背景,但具有较短的生命周期。 4.3.5 注入脚本 开发者在 Chrome 插件开发过程中创造了“注入脚本”这个术语。...弹窗脚本,与插件的弹出式界面相关联,通常使用 chrome.tabs.sendMessage 和 chrome.tabs.connect 进行通信。...后台脚本,在后台独立运行的脚本,涉及多种方法,例如 chrome.tabs.sendMessage、 chrome.tabs.connect、 chrome.tension.getBackoundPage
: # 获取弹出框对象(切换到弹出框) alert = driver.switch_to.alert # 调用方法进行处理(返回alert/confirm/prompt...: 在浏览器的一个生命周期内(开启到关闭),任意一个窗口都有唯一的一个句柄值,可以通过句柄值完成窗口切换操作。...注意:如果还想重新操作原始页面,务必要完成窗口切换,回到原始页面才可以继续操作(即使是切换到新的窗口已经关闭,也要切换回原始页面) 方法: 步骤: # 获取所有窗口句柄(包括新窗口...').send_keys('admin1') sleep(2) # 关闭新窗口(close()方法作用是:关闭当前页面) driver.close() # 切换回原始窗口进行操作...窗口截图的方法: 扩展 方式一: # 导包 import time # 设置时间戳 now_time = time.strftime('%Y%m%
一个扩展就是一个压缩的包,里面有HTML、CSS、JavaScript、图片或者任何你需要的资源。从本质上来讲,扩展就是一个web页面,它也可以使用浏览器为web页面提供的API。...,//扩展描述 //浏览器小窗口 "browser_action": { "default_icon": "icon.png",//小窗口图标 "default_popup":...区别是前者啥地方都能用后者是特定页面才能用 (3)default_popup 在用户点解扩展图标时可以设置弹出一个popup页面这个页面可以说是一个简单的网页也可以有自己的js脚本点击图标时运行此脚本...Backgropund包括(page,scripts,persistent) Page是后台网站的主页(不一定要求有) Scripts就是后台引入的脚本文件 Persistent就是后台程序是否持久运行...所以还不能为其添加后台脚本,并且无法实现前端后台脚本之间的信息交流。总的来说,我能实现的只有插件的安装与小图标的设置与工具栏页面的简单显示。 END
所以打算把 Chrome Extension 作为一个方向,打算深入学习,并如实记录。 今天我们从 Tabs 操作的开始,一点点揭开 Chrome Extension 的面纱。...无论是创建新标签、更新现有标签,还是关闭标签页,Chrome 的 chrome.tabs API 提供了一系列简单而强大的方法。接下来,我们从最基本的操作入手,逐步学习如何使用这类操作。...chrome.tabs.remove(),可以指定一个或多个标签页 ID 来执行关闭操作: chrome.tabs.remove(tabId); 这在扩展程序需要自动管理标签页时非常有用。...在我自己的实践当中,就是关闭所有相同域名的标签页,或者一键清空打开的标签页功能。 跨窗口管理 Chrome 的 Tabs API 允许你在不同窗口之间移动标签页。...: -1 }); 这对需要在多个窗口之间进行高效管理的扩展来说非常实用。
领取专属 10元无门槛券
手把手带您无忧上云