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

带你快速走进Chrome扩展开发的大门

Chrome扩展开发技能要求同创建Web应用程序相同的Web技术编写,也就是作为前端程序员最为熟悉的前端开发三件套,HTML、CSS 和 JavaScript。 Chrome扩展API?...内容脚本只能使用 Chrome API 的一个子集,但可以通过与扩展服务工作者交换消息来间接访问其余部分 3 service worker 扩展服务工作者处理和监听浏览器事件。...有多种类型的事件,例如导航到新页面、删除书签或关闭选项卡。...Chrome扩展程序(chrome://extensions/) 打开开发者模式 加载已解压的扩展程序(包含清单文件的文件夹) PS:插件开发过程中会多次修改,在修改后需要在浏览器的扩展程序中重新刷新后生效...实现选项卡的管理 通过开发chrome expansion实现在弹窗中整合已打开的掘金文章列表 案例关键词 API:Tabs API 主机权限 期望效果 配置清单文件 沿用上一个案例 创建弹窗 先配置

82610

Perfetto 与systrace

在Android上,Perfetto是下一代系统性能的分析工具,它取代了systrace。 仍完全支持SYSTRACE....Trace Processor是一个可移植的C ++ 11库,它提供面向列的表存储,专门设计用于将数小时的跟踪数据有效地保存到内存中,并基于流行的SQLite查询引擎公开SQL查询接口。...最重要的是,Trace Processor还包括一个基于跟踪的指标子系统,该子系统由预烘焙和可扩展的查询组成,可以以JSON或protobuf消息的形式(例如,不同频率下的CPU使用率)输出有关跟踪的强类型摘要...基于WebWorkers的多线程设计使UI始终保持响应;浏览器和SQLite的分析能力可通过WebAssembly在浏览器中完全使用。 打开一次后,Perfetto UI可以完全脱机工作。...这将显示有关系统memory使用情况的总体统计信息,并扩展每个进程的统计信息。这将显示摄像机各种内存统计信息的时间表。 我们可以看到大约有2/3,内存增加了(在mem.rss.anon跟踪中)。

3.4K10
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Chrome 116:网页画中画 API 来了!

    简介 画中画 API 可以打开一个始终位于当前网页顶部的窗口,这个窗口可以填充任意的 HTML 内容。...它扩展了现有的 Picture-in-Picture API for (其只允许将 元素放入画中画窗口中)。...通过 Document Picture-in-Picture API 创建的 Picture-in-Picture 窗口其实很类似于通过 window.open() 打开的空白的同源窗口,但也存在一些差异...当前窗口关闭后会立即关闭打开的画中画窗口 无法通过地址导航到画中画窗口。 画中画窗口的位置无法由网站设置。...pipWindow.document.body.append(player); }); 画中画窗口关闭时的处理 我们可以侦听窗口的 "pagehide" 事件来了解画中画窗口的关闭时机(网站启动它或用户手动关闭它

    82150

    数栈技术干货:从0到1实现谷歌插件开发探索及应用

    ,它的生命周期是插件中所有类型页面中最长的,它随着浏览器的打开而打开,随着浏览器的关闭而关闭,所以通常把需要一直运行的、启动就运行的及全局的代码放在 background 里面。...一些同学可能不太知道开发谷歌插件的前置条件,在这里为大家简单介绍下。 首先需要打开管理扩展程序,打开开发者模式。...(一)思考 如何去做一个划词翻译插件,首先要考虑的有以下几点: 如何实现翻译效果 如何选中我们需要的元素 选中元素之后如何展示划词翻译面板 所有的浏览器 Tab 都需要支持翻译效果 思考完上面的这些点后...将开启或关闭划词翻译的状态发送后,content_script.JS 需要添加监听事件,获取到该状态后,进行关闭或开启操作。...true 是为了与 content_script 的消息通道保持打开,通过异步的方式发送请求。

    1.1K20

    实用的Chrome浏览器命令

    本文将介绍几个实用的Chrome命令,讲解它们的用途、常见问题以及如何避免错误。...5. chrome://extensions/:管理扩展程序安装、卸载、启用或禁用Chrome扩展的地方。使用技巧:定期检查扩展,确保没有占用过多资源或造成隐私泄露的插件。...易错点:高内存使用并不总是坏事,但若频繁导致系统变慢,考虑关闭不必要的标签或扩展。...34. chrome://settings/autofill: 自动填充设置管理自动填充表单的数据,如地址、信用卡信息等,提高填写表单的效率。注意:确保自动填充的数据准确无误,防止信息错误提交。...39. chrome://bookmarks/: 书签管理器整理和管理你的书签,创建文件夹,删除或移动书签。使用技巧:定期整理书签,保持井然有序,提高查找效率。

    44710

    PyAlgoTrade 0.20 中文文档(二)

    如果在会话关闭时订单尚未填充,则未填充的订单将自动取消,如果它们未设置为有效直到取消 参数: goodTillCanceled (boolean.) – 如果订单应保持有效直到取消,则为 True。...如果限价单在先前的条中激活,则使用限价填充价格(如前所述)。 注意 这是经纪人使用的默认策略。...如果为 False,则订单在交易会话结束时自动取消。 allOrNone(布尔值.) - 如果订单应完全填充或根本不填充,则为 True。...getAge() 返回处于打开状态的持续时间。 返回类型: datetime.timedelta。 注意 如果持仓是打开的,则返回进入日期和最后一根 K 线日期之间的差异。...必须在运行策略后调用。 参数: filename – 文件名。 dpi – 每英寸点数(dots per inch)的分辨率。 format – 文件扩展名。

    18210

    WebSocket协议简介

    既允许一个请求地址多个路径,也允许单个IP地址多个端口。WebSocket协议是一个独立的基于TCP的协议。它与HTTP唯一的关系是它的握手是由HTTP服务器解释为一个Upgrade请求。...如果接受到的是非零值但是扩展没有定义,则需要关闭连接。 Opcode:4bit,解释 Payload 数据,规定有以下不同的状态,如果是未知的,接收方必须马上关闭连接。...如果不分片发送,即一帧,就需要缓存整个消息,计算其长度,构建frame并发送;使用分片的话,可使用一个大小合适的buffer,用消息内容填充buffer,填满即发送出去。...在Chrome浏览器中抓取WebSocket包 打开开发人员工具 在过滤栏选择WS 点击一条请求,可以看到如上图看到的内容 Chrome最终展示了每次请求的三个纬度: Data:消息内容; Length...这样就可以保证业务服务的可扩展性。 总之引入WebSocket会给系统带来复杂性。系统架构的设计,如何保证服务的无状态,广播消息的实现等等。

    1K10

    ViewModel:持久化、onSaveInstanceState()、UI 状态恢复和 Loader

    下面是 activity 类文档中的一个手册表,它描述了在 activity 的哪个生命周期状态时你的应用是可被终止的: ?...如果用户将一个 activity 从 recents screen 中滑出或者导航出去或退出一个 activity 就可以彻底关闭它。...对我们的音乐应用来说,如果用户完全关闭了音乐搜索的 activity 然后重新打开它,音乐搜索框和搜索结果都将被清除。...创建 ViewModel 时,你传入一个空查询,ViewModel 会意识到还没有数据可以加载。这个 activity 以一种全新的状态启动起来。...例如,有些 activity 在被用户关闭后不会以一个全新的状态打开。一般地,当我在 Android 手机上关闭然后重新打开 Chrome 时,返回到了关闭 Chrome 之前正在浏览的页面。

    3.9K30

    新型浏览器挖矿技术可在浏览器窗口关闭的情况下持续挖矿

    但是,我们近期发现了一种新型浏览器挖矿技术,而这种技术可在浏览器窗口关闭的情况下持续挖门罗币。我们对多款浏览器进行了测试,其中包括最新版本的Chrome。...用户浏览完毕,关闭Chrome窗口。 CPU活动仍保持高占用率,因为挖矿活动仍在进行。...在这种技术中,虽然浏览器窗口已经被关闭,但还有一个隐藏窗口仍处于打开状态,因为恶意代码会创建一个浏览器窗口,并将其隐藏在任务栏右下角的时间后面,隐藏窗口会基于用户屏幕的分辨率来进行调整,适配规则如下:...除此之外,右键点击任务栏的浏览器图标并选择“关闭窗口”也没办法彻底终止它的运行。...可能某些懂技术的用户会打开任务管理器并终止所有的浏览器进程运行,但终止之后任务栏的浏览器图标仍然会存在,这表明该恶意软件仍处于运行状态。

    1.7K90

    优化谷歌浏览器让它更好用

    我们打开谷歌的任务管理器可以看到如下内容: 通过图片可以看到,就截图中的几个插件就占用了几百兆的内存。所以有些插件暂时不用他就把它关闭掉,需要使用时再打开即可。...如下图所示: 当然,你也可以打开谷歌的任务管理器将你想关闭的进程关闭。...设置方法:在Chrome浏览器「设置」 → 「高级」,找到「借助联想查询访问,帮你在地址栏中自动填充未输完的搜索字词和网址」和「使用联想查服务更快速加载网页」关闭就可以了。...需要指出的是,这里的”舍弃”并不是关闭,而是始终保持开启状态,当用户点击时会重新加载。...在Chrome地址栏中输入:chrome://flags/#automatic-tab-discarding,回车后打开Automatic tab discarding功能设置,选择”Enabled”,

    2.5K21

    Chrome 新特性:文档画中画介绍

    Hi,大家好我 ssh,今天在逛推的时候,发现咱们的 Anthony Fu 大佬分享了一个让人亢奋的消息! Google Chrome 推出了文档画中画(不光是视频)的一系列支持。...它扩展了现有的视频画中画(Picture-in-Picture)API,后者仅允许将 HTML 的元素放入画中画窗口中。...画中画窗口不会超过打开它的窗口的生命周期。 无法导航画中画窗口。 网站无法设置画中画窗口的位置。 使用文档画中画 API 创建的画中画窗口(示例)。 当前状态 步骤 状态 1....视频会议 在视频会议期间,用户通常出于各种原因(例如展示另一个选项卡以进行通话或多任务处理)而离开浏览器标签,但仍希望保持通话的可见性,因此这是画中画的一个主要应用场景。...处理画中画窗口关闭时的情况 通过监听窗口的"pagehide"事件,可以了解画中画窗口何时关闭(无论是因为网站启动还是用户手动关闭)。

    52260

    Visual Studio Code(CS code)你们都在用吗?或许你们需要看一下这篇博文

    用于在Google Chrome浏览器或支持Chrome DevTools协议的其他目标中调试JavaScript代码的VS Code扩展。 ?...6.Code Spell Checker 代码拼写检查器 一个与camelCase代码配合良好的基本拼写检查程序。 此拼写检查程序的目标是帮助捕获常见的拼写错误,同时保持误报数量较低。 ?...12.filesize 在状态栏中显示当前文件大小,点击后还可以看到详细创建、修改时间 ? 13.Import Cost 对引入的计算大小 ?...19.Azure Storage VS Code的Azure存储扩展允许您部署静态网站并浏览Azure Blob容器,文件共享,表和队列。...以下是Project Manager提供的一些功能: 将任何项目保存为收藏夹 自动检测VSCode,GIT中,水银或SVN存放区 在相同或新窗口中打开项目 识别已删除/重命名的项目 一个状态栏标识当前项目

    3K20

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

    在接下来的几分钟里,我们不仅将为你详解Chrome扩展的基础知识,还将手把手教你如何用五个简单的步骤创建自己的扩展。 我们将构建什么? 近年来,我们见证了人工智能能力的飞速发展。...步骤1:创建扩展文件 首先,我们需要为我们的Chrome扩展设置基本结构。我们的扩展名为chatgpt-mollyguard,将在一个专门的文件夹中进行组织。...在接下来的几节中,我们将更深入地探讨每个文件,并概述其在扩展中的特定作用。 步骤2:创建 Manifest 文件 Manifest 文件是一个 JSON 文件,它向浏览器提供了有关你的扩展的基本信息。...通过在父级 div 上切换一个类,我们可以轻松地打开或关闭这一功能。 值得注意的是 !important 标志。...我们从一个明确的目标开始:为 ChatGPT 创建一个保护层,确保敏感信息保密。在本教程中,我们看到了如何通过少量的文件和一些代码来实现一个功能强大且有用的浏览器扩展。

    83551

    Chrome Extension 开发中的 Tab 操作与实践

    它允许开发者创建新的标签页、查询现有标签页、修改它们的属性,甚至在后台监控标签页的状态变化。简单来说,通过 Tabs API,你能够在浏览器中以编程的方式控制标签页的行为。...常见的应用场景包括: 扩展启动时自动打开某个页面。 创建一个标签页管理器,让用户快速查看并操作所有打开的标签页。 自动化处理特定网站的标签页,如定时关闭或刷新。...无论是创建新标签、更新现有标签,还是关闭标签页,Chrome 的 chrome.tabs API 提供了一系列简单而强大的方法。接下来,我们从最基本的操作入手,逐步学习如何使用这类操作。...创建新标签页 使用 chrome.tabs.create() 方法,开发者可以轻松创建一个新的标签页并指定它的 URL。...例如,当用户完成某项任务后,扩展可以自动关闭所有不必要的标签页,减少用户的干扰。

    14210

    浏览器架构的温故知新

    这是舱壁架构模式的一个具体体现。 沙箱是一个测试环境,它允许用户在不影响整个系统的情况下运行程序或打开文件。在网络安全领域,沙箱分析并执行潜在的恶意代码,检测并减轻威胁。...为了安全起见,Chrome 在沙箱模式下为每个选项卡创建了一个单独的渲染进程。 GPU 进程最初是为了3D CSS 效果,后来扩展到绘制网页和 Chrome UI 界面。...接收数据后,渲染进程向浏览器发送一个确认。浏览器更新界面状态,包括安全性、地址栏 URL、浏览历史和网页。 3. 渲染进程 现代浏览器使用了延迟加载和缓存等策略来优先考虑性能。...Manifest V2 (MV2)是当前 Chrome 扩展中广泛使用的主流版本,它提供了一个健壮的框架,用于构建具有增强浏览器功能的特性和功能的扩展。...4.3.3 后台脚本 Chrome 扩展中的后台脚本具有最长的生命周期,并且在浏览器打开时连续运行。它拥有广泛的权限,允许访问大多数 Chrome 扩展 API 和跨源请求,而不受 CORS 限制。

    16910

    正道的光!这有个用TensorFlow做的小黄图过滤器

    因此,很多人都在网上搜索:「如何屏蔽网页上的色情广告?」 其实,这个问题通过一个插件就能解决。...它通常被用于标记那些带有淫秽色情、暴力血腥、极端另类等内容的邮件、视频、博客、论坛帖子等,以免读者不恰当地点击浏览。常见的用法是在链接的后面加上一对括号,括号中标记「NSFW」。 ?...Pottekkat 开发的「NSFW Filter」是一个 Web 扩展,它可以在你浏览网站时过滤掉上面的 NSFW 图像。...加载网页后,所有图像将保持隐藏状态,直到上述检查步骤完成。如果发现图像是 NSFW,它们将保持隐藏状态。否则,它们将变为可见。...克隆此存储库,在项目文件夹中导航,并通过运行以下命令安装依赖项: npm ci 安装依赖项后,通过执行以下命令来构建项目: npm run build 设置 Chrome 浏览器 安装完成后,打开 Chrome

    88110

    【Chrome】用户可以手动管理和删除第三方Cookie

    其主要作用包括: 存储登录状态:保持用户的登录状态,使得用户在访问相同网站时无需重新登录。 记录用户设置:保存用户的界面设置、语言选择等个性化信息。...1.2 Cookie的分类 Cookie可以分为以下几类: 会话Cookie:这些Cookie在用户会话期间有效,即从用户打开浏览器开始,到浏览器关闭为止。会话Cookie在会话结束后被删除。...持久Cookie:这些Cookie在用户关闭浏览器后仍然保留,直到其过期日期到达或用户手动删除。 第一方Cookie:由用户访问的网站设置的Cookie,主要用于网站功能和用户体验。...安装后,扩展程序将自动开始工作,帮助你管理和删除不需要的Cookie。...4.5 如何使用隐身模式有效管理隐私? 隐身模式是Chrome提供的一个功能,可以在浏览过程中不保存历史记录和Cookie。

    20310

    安卓Chrome使用技巧合辑

    同时,这一特性也适用于菜单项上方的导航按钮,因为Chrome的菜单键和菜单弹出后的"刷新按钮"位置是重合的,所以按住菜单按钮后保持一秒左右再松开,可以进行刷新网页的操作。   2....在"标签页列表"识图中,旧标签页概览视图总会被新标签页概览视图遮挡,你可以通过长按某一旧标签页两次来把位于它上方的新标签页移开,从而在"标签页列表"视图中预览任意一个标签页全貌。   5....在无网络连接情况下打开任何一个网页,将弹出一个"小恐龙"界面,点击小恐龙即可开始玩儿Chrome自带的游戏(700分后有惊喜)。   7....,将在屏幕底部显示一个快速填充底栏,点击底栏中的快速填充项可以快速将此项填充到输入框。   ..."后,起始页的常用网址瓷贴将会从8个扩展到10个。

    9.6K30

    一段JavaScript让ChatGPT开口说话?网友开源自制浏览器插件

    ---- 新智元报道   编辑:Aeneas 好困 【新智元导读】用一个Chrome扩展程序,让ChatGPT开口说话! 现在,ChatGPT可以和我们语音聊天了!...如何安装 Talk-to-ChatGPT扩展程序可以从此处的Chrome在线商店下载:https://chrome.google.com/webstore/detail/talk-to-chatgpt.../hodadfhfagpiemkeoliaelelfbboamlk 安装 Google Chrome 扩展程序后,打开或重新加载ChatGPT页面 ( https://chat.openai.com/chat...启动后,Talk-to-ChatGPT 会在页面右上角显示一个菜单,我们就可以在其中访问设置(例如语音、语言)、跳过当前消息、打开或关闭语音识别以及切换文本-打开或关闭语音转换。 设置菜单如下所示。...ChatGPT是一个令人难以置信的AI,我强烈地想要与它进行口头上的交流。当然,如果OpenAI自己在做出了一个更好的版本,那我的项目就完全没用了。 问:它安全吗?

    1.5K40

    前端开发技术(vscode怎么下载)

    用于在Google Chrome浏览器或支持Chrome DevTools协议的其他目标中调试JavaScript代码的VS Code扩展。...Code Spell Checker 代码拼写检查器,一个与camelCase代码配合良好的基本拼写检查程序。此拼写检查程序的目标是帮助捕获常见的拼写错误,同时保持误报数量较低。...filesize 在状态栏中显示当前文件大小,点击后还可以看到详细创建、修改时间。 Import Cost 对引入的计算大小。 Path Intellisense 可自动填充文件名。...以下是Project Manager提供的一些功能: 将任何项目保存为收藏夹 自动检测VSCode,GIT中,水银或SVN存放区 在相同或新窗口中打开项目 识别已删除/重命名的项目 一个状态栏标识当前项目...单击树中的TODO将打开文件并将光标放在包含TODO的行上。 找到的TODO也可以在打开的文件中突出显示。 VScode主题集合 Night Owl 一个非常适合夜猫子的 VS Code 主题。

    2.4K20
    领券