如何在每个新选项卡上使用API中的数据更新chrome扩展徽章？ - 腾讯云开发者社区

文章/答案/技术大牛

发布

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

Chrome Extension API 360浏览器的插件文档中文, 虽然内核差不多但是不一定与 Chrome api 一致, 可以作为参考 Chrome 官方案例库案例如何实现网页和Chrome...page_action 否则使用 browser_action 8. background 用来定义后台脚本部分扩展是基于事件的程序，这些事件包括导航到新页面、删除书签、或者关闭选项卡，...扩展在他们的后台脚本中监视这些事件，然后用指定的指令进行响应关于后台脚本的状态首次下载后或者更新后被加载后台脚本下载后会处于休眠状态，直到它侦听的某个事件被触发，侦听到事件后，会使用指定的指令响应...（怎么相应自定义）以下情况会需要调用到后台脚本扩展首次下载或者版本更新后台脚本中正在监听事件，并且这事件被触发了 content_script 或者其他扩展中调用了 sendMessage...的查询、修改、onChange 监听 history 浏览器历史记录操作权限 storage chrome.storage 的使用权限（注意不是浏览器的 localStorage） tabs 选项卡权限

3.5K2 0

提高工作效率的神器：基于前端表格实现Chrome Excel扩展插件

插件允许我们通过使用API修改浏览器行为和访问Web内容来扩展和增强浏览器的功能。...相信使用Chrome(谷歌浏览器)的小伙伴们都在用Chrome扩展插件(Chrome Extension)，类似一键翻译、批量下载网页图片、OneTab、甚至大名鼎鼎的 ”油猴” 等。...当你晚上回复完所有论坛帖子，这时候插件徽章上不再有数字，这时候是不是成就感满满。今天我们就带大家来花30分钟时间，一起写一个展示待办任务的浏览器插件。...使用chrome.actionAPI 控制 Google Chrome 工具栏中的扩展程序图标。...使用chrome.notificationsAPI 使用模板创建丰富的通知，并将这些通知显示给系统托盘中的用户。当你的桌面不再停留在浏览器，或许你在处理邮件，或许你在编辑Excel。

4.4K1 0

您找到你想要的搜索结果了吗？

是的

没有找到

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

Chrome扩展可以使用浏览器提供的所有JavaScriptAPI。使用扩展程序比Web应用程序更强大的是它们对ChromeAPI的访问。可以获得更改网站的功能和行为。...它还必须位于扩展程序的根目录中。清单记录重要的元数据，定义资源，声明权限，并标识哪些文件在后台和页面上运行 2 content scripts 内容脚本在网页上下文中执行 Javascript。...内容脚本只能使用 Chrome API 的一个子集，但可以通过与扩展服务工作者交换消息来间接访问其余部分 3 service worker 扩展服务工作者处理和监听浏览器事件。...它可以使用所有的Chrome API，但不能直接与网页内容交互；这就是内容脚本的工作 4 popup/page 扩展可以包含各种 HTML 文件，例如弹出窗口、选项页面和其他 HTML 页面。...实现选项卡的管理通过开发chrome expansion实现在弹窗中整合已打开的掘金文章列表案例关键词 API：Tabs API 主机权限期望效果配置清单文件沿用上一个案例创建弹窗先配置

1.2K1 0

谷歌 Chrome 浏览器终于让你可以对标签进行整理和分组了

标签太多，是不是让你的Chrome浏览器凌乱了？Google Chrome 浏览器的新更新，即 Chrome 81，引入了标签组功能，让用户终于可以整理标签页了！这是个不错的选择。...标签组功能为你的所有标签页提供了整洁、颜色编码的标签。以下是如何在谷歌浏览器上设置标签组，并最大限度地发挥其功能。以下配置以Mac版Chrome为例。...1.如何启用功能确保你的电脑上安装了最新版本的谷歌Chrome(81+)。点击关于Chrome查看是否有更新： ? 如果你能更新，就更新吧。...2.如何创建新的选项卡组只需右键单击一个选项卡，然后选择添加到新组选项。 ? 标签将根据它们的组改变颜色，而点也将作为组标题出现。如果要更改选项卡组名称，则只需单击该组。 ?...你也可以使用此方法更改组的颜色。 ? 3.如果你想添加(删除)一个标签到一个组只需右键单击每个选项卡，然后选择添加到现有组。 ? 你还可以将选项卡拖放到组中，并通过拖放将选项卡从组中删除。

2.5K4 0

深入理解浏览器原理

bindings / core：大量使用V8 API controller：一组使用core、modules的高级库，如devtools。...Context：对应全局对象，如为Frame时对应Frame的窗口对象，每个帧都有自己的窗口对象 World：支持Chrome扩展程序内容脚本关系：一个frame = N个窗口对象 = 用于N个world...Context对应该窗口对象 V8的API低级且难以使用，在platform/bindings中提供很多V8 API辅助类。每个C++ DOM对象，如Node都有其对应的V8包装器。...当Chrome在强大的硬件上运行时，它可能会将每个服务拆分为不同的流程，从而提供更高的稳定性，但如果它位于资源约束设备上，Chrome会将服务整合到一个流程中，从而节省内存占用。...图片引自Mariko Kosaka的《Inside look at modern web browser》渲染中的难点布局树变化：在每个步骤中，前一个操作的结果用于创建新数据。

6K4 1

Chrome 商店高人气扩展暗藏间谍软件，超 10 万用户遭遇会话劫持

一款在 Chrome 商店拥有「官方认证徽章」、下载量超 10 万的热门扩展「Color Picker, Eyedropper — Geco colorpick」，竟在 6 月底的更新中被植入高级间谍软件...官方背书下的信任陷阱该扩展长期以「正规工具」形象存在，不仅获得 Chrome 商店「featured placement」推荐，还带有谷歌验证徽章，普通用户很难怀疑其安全性。...删除扩展打开 Chrome「扩展程序」页面，找到该工具并彻底移除。2. 清除数据进入浏览器设置，删除缓存和 Cookie，重点清除追踪标识。3....全面扫描运行杀毒软件（如 Windows Defender/Malwarebytes）进行系统扫描。长期防护建议：定期检查已安装扩展，重点关注「权限请求」和更新日志。...安全专家提醒：即使是官方推荐的扩展，也应保持警惕。正如 Dardikman 所言：「每个扩展都可能在任何时刻变成恶意程序」，建立「最小权限原则」和定期审查机制，才是应对之道

4620 0

每天都在用的浏览器，你知道它是如何工作的吗？

3.1K2 0

一文看懂Kubernetes v1.16！

当转换到GA时，我们的首要重点是API客户端的数据一致性。当您升级到GA API时，您会注意到一些以前可选的护栏已经成为必需的或默认的行为。...我们对任意子资源、API组迁移以及更高效的序列化协议等特性都有一些想法，但是这里的变化本质上是可选的，并且与GA API中已有的特性互补。...这极大地扩展了Windows工作负载的存储选项，使用户能在FlexVolume和in-tree存储插件之外拥有新的选择。...考虑到endpoint在部署期间频繁滚动更新等事件，这将是一笔巨大的资源浪费。使用endpoint切片，服务的网络endpoint可以拆分为多个资源，从而显着减少大规模更新所需的数据量。...endpoint切片的第二个主要目标，是提供一种在各种用例中具有高度可扩展性和实用性的资源。endpoint切片的一个关键添加还涉及新的拓扑属性。

1.1K4 1

Chrome 61 Beta版已支持JavaScript模块，Web支付API，Web Share API和WebUSB

Web Share API 为了让用户轻松地在社交网络上分享内容，开发人员之前必须手动将每个社交服务的共享按钮集成到他们的网站中。...网站现在可以在Chrome for Android上使用新的navigator.shareAPI来触发原生的Android共享对话框，允许用户轻松地与任何已安装的本地app共享文本或链接。...当从已安装的网络应用程序导航到初始Web应用程序范围之外的网站时，新的站点现在将自动加载到自定义Chrome选项卡中。...对于使用原生控件播放的视频，当用户按照与屏幕上播放的视频相匹配的方向旋转设备时，Chrome会自动将视频扩展为全屏。...为了防止忽视误发的证书，站点可以使用新的Expect-CT HTTP头，这将允许自动报告和/或执行证书透明度要求。背景选项卡中的Chrome将不再解码使用Media Source的视频帧。

2.1K6 0

【译】一文洞察 Chrome DevTools 近半年新增了哪些功能

Chrome Devtools 是前端开发工程师不可或缺的开发工具，最近半年 Chrome 更新了 6 个版本，其中的 5 个版本里 Chrome Devtools 也更新了一些新功能，我们对最近的一些更新做了翻译整理...DevTools（Chrome 74）的新增功能高亮显示所有受 CSS 属性影响的节点将鼠标悬停在会影响节点盒子模型的 CSS 属性上，如 padding 或 margin ，会高亮显示受到这个属性声明影响的所有节点...PWA 分类使用新的徽章计分系统。 ?...从 Chrome 75 开始，DevTools 会显示所有域的 IndexedDB 数据库。 ? 旧版本中，这个页面了嵌入一个使用 IndexedDB 的 demo，但是看不到任何数据库信息。 ?...从 Chrome 75 开始，每个内联断点在 Breakpoints 面板中都有自己单独的一行。 ? 旧版本中，Breakpoints 面板中只有 1 行。 ?

2.1K3 0

【译】一文洞察 Chrome DevTools 近半年新增了哪些功能

2.6K2 0

如何使用浏览器工具调试PWA

Chrome使用这个主题颜色来着色浏览器的一些UI部分，比如地址栏。可以使用meta标签来自定义每个页面的颜色，但是当应用从主屏启动时，在清单中指定的主题颜色提供站点范围的主题颜色。 ?...Service Workers技术使得PWA可以离线工作，同时允许您拦截网络请求并使用Cache API在本地存储资源。 ? 通过此屏幕，您可以通过启用选项卡中离线复选框来强制离线模式： ?...强制离线模式，反映在应用程序中。在设备模式屏幕下，离线也是强制的，除网络节流。重新加载更新：当调试时，这个非常有用。Service Workers首次加载时会将其安装在设备上。...您无法模拟事件或强制更新或绕过Service Workers，如Chrome。我希望，在Firefox这很快将变成可能，以便有更容易的测试体验。...像Chrome一样，当用Cache API使用被“开发工具”的“网络”面板中的Service Worker缓存的资源时，在Transferred列下列出了『Service Worker』： ?

5.5K4 0

用getDisplayMedia实现在Chrome中共享屏幕

它不使用更新的getDisplayMedia的API，我们稍后将讨论它，但实现几乎完全相同：这将被更新以最终支持该规范。...简单，基于承诺的管理，如getUserMedia： Microsoft Edge 今年早些时候刚刚使用此API 提供了屏幕共享。...绝大多数用户都是通过内嵌安装进行安装的，因此可能会在2014年之前我们从未更新过Chrome浏览器商店中的扩展屏幕截图。现在，Chrome网上商店正在删除内联安装，如本博文中所述。...如果我正确地理解了声明，则会在另一个选项卡中打开Chrome WebStore。这会使得检测用户何时从Web应用程序安装扩展程序相当困难。...帖子中的时间表如下： 6月12日，新的扩展程序不再进行内联安装。没有通知期限。内联安装将于9月12日停用。三个月的通知期。抱怨这有几件事是错误的。

5.5K3 0

在Salesforce Lightning Experience（闪电体验）提高性能和速度

由于客户端设备和远程web服务器之间的延迟问题;或客户网络拓扑，如虚拟专用网络，在Salesforce环境中重新路由到客户的org之前，需要通过公司办公室或数据中心路由通信。...使用带有消耗大量CPU或内存的插件或扩展的web浏览器。同时运行太多的浏览器选项卡。每个选项卡消耗内存和CPU周期。...释放这些资源使浏览器和操作系统的资源管理更加高效，允许浏览器和操作系统在经常使用的应用程序(如Lightning Experience)上花费更多的时间和系统资源。...在第一个选项卡上显示最需要的信息，并将辅助信息移动到后面的选项卡上。将不太重要的组件移动到一个或多个Lightning页面选项卡之后。不在主选项卡中的组件不会在初始页面加载中呈现，而是只按需呈现。...相关列表:将相关列表组件放在辅助选项卡中，可以使用新的“相关列表”组件在主页面上显示一个或两个关键的相关列表。将相关列表的数量减少到3个或更少。

2.4K2 0

JavaScript 开发者需要了解的15个 DevTools 技巧

忽略 localhost 域上的 SSL 错误 --disable-extentions 禁用影响渲染的 Chrome 扩展，例如广告拦截器 --window-size=,<height...启用本地文件替代 Chrome 允许任何 HTTP 请求使用你的设备上的本地文件，而不是通过网络获取它。...可以在 Chrome 中或使用任何代码编辑器来编辑文件，每当重新加载页面时，都将使用更新的版本。 14. 管理客户端存储网页可以使用多种技术将数据存储在客户端上。...Chrome 中的 Storage 标签显示本地存储了多少数据，并提供了一个快速的 Clear site data 选项。 15....模拟移动硬件智能手机和平板电脑通常包括诸如全球定位系统（GPS），陀螺仪和加速度计之类的硬件。这些通常在电脑上是不可用的，这会使使用地理定位等 API 进行开发变得非常困难。

7K2 0

WWDC 2022：哪些是前端开发者要关注的信息？

和 Chrome 开发工具扩展的 JavaScript API 也基本一样。...你可以轻松的把现有的 Chrome Extension 移植到 Safari 上，你只需要在 App Store 就可以搜到这些扩展。...要了解构建 Safari Web 扩展的基础知识、如何将现有扩展转换为与 Safari 一起使用，以及如何在 App Store 打包发布，可以看看这个视频讲解 https://developer.apple.com...然后，系统会提示他们授予你的网站或应用发送通知的权限。用户能够在通知中心查看和管理通知，并在通知设置中自定义样式并关闭每个网站的通知。...Safari 中的 Web Push 会使用和 Apple 推送相同的通知服务，该服务支持所有 Mac 和 iOS 设备上的本地推送。

2.5K1 0

lastTab—Chrome 拓展开发实践

但是好景不长，这个插件下线了，猜测可能是因为 Chrome 升级了版本（2->3），插件没有及时更新导致的。后来我就从一些神奇的网站上找到历史版本，使用离线安装的方式继续使用，及手续香。...当用户关闭掉倒数第二个页面的时候，创建一个新的页面，默认使用的是浏览器的 newTab 页面。下面分享一下我对于这些逻辑的实现。...: "caption.html", active: true}); }); 代码在 Chrome 扩展程序安装时执行以下操作：设置扩展图标上的徽章文字：在扩展图标上显示 "Fun" 字样的徽章。...设置徽章的背景颜色：将徽章的背景颜色设置为红色。创建一个新的标签页并打开指定的页面：在浏览器中创建一个新的标签页，并打开扩展程序目录下的 "caption.html" 文件。...遍历每个窗口，检查并处理特定的窗口关闭条件。确认每个窗口的第一个标签页是否是预期的，如果不是，则在该窗口中创建一个新的标签页。

3711 0

Chrome浏览器必备插件推荐

因为每个人的情况不同，而且很多插件由于作用方向太垂直，只对某一部分群体适用，对于其他人来说并不是那么硬需。所以我只推荐必备的插件，也就是无论你从事什么行业，你都可以使用。...- 定制弹出菜单容貌 - 制作扩展群组 - 通过弹出菜单和右键菜单启用/禁用扩展群组 - 启用活动页面更新日志可以在扩展的选项页面里找到。...Toby for Chrome 效率提升工具，管理标签tab Toby比书签更好，它可以升级您的Chrome浏览器。Toby是一个视觉工作区，位于每个新选项卡上。...通过将浏览器选项卡拖放到集合中来添加新选项卡，或者只需单击一下即可保存整个会话。通过自动同步功能在任何桌面上访问所有收藏集。...运行于chromium(chrome环境下开发)及其衍生浏览器(如：360安全浏览器、360极速浏览器、猎豹浏览器、百度浏览器、UC浏览器等)提供分析、提取网页中的图片并以多种筛选方式辅助用户选取下载等功能的扩展软件

2.6K0 0

JavaScript调试和优化，深入研究谷歌Chrome浏览器开发工具（二）

请注意，还可以使用标准的JavaScript API从控制台查询当前的HTML文档，如document. queryselector()或document. getelementsbyclass()等。...在生产环境中禁用/清理控制台输出在开发中使用不同的控制台API是非常有用的，但是您可能不希望所有的日志信息出现在生产环境中，所以您可以使用工具来清理生产代码，或者使用这个简单的代码禁用控制台API:...然后可以使用这些信息进一步优化影响性能的问题区域，以减少UI阻塞并优化UI响应。值得一提的是，Chrome的性能面板是新的。...在分析应用程序的性能时，请确保在Incognito模式中使用Chrome，这样就可以防止其他打开的选项卡——尤其是安装在Chrome安装上的扩展——不会干扰应用程序的分析。 ?...从定义中，您可以看到帧速率是一个与拍摄和计算机图形有关的概念，但它也被用于现代性能工具，如Chrome DevTools，以度量页面对用户交互的响应性。

3.6K4 0

API 请求慢？这次锅真不在后端

问题我们在开发过程中，发现后端 API 请求特别慢，于是跟后端抱怨。“怎么 API 这么慢啊，请求一个接口要十几秒”。而且这种情况是偶现的，前端开发同学表示有时候会出现，非必现。...我们打开 Chrome 调试工具。在 network 中可以看到每个接口的耗时。hover 到你的耗时接口的 Waterful，就可以看到该接口的具体耗时。...此限制是针对每个浏览器 + 域的，因此这意味着您可以跨所有选项卡打开 6 个 SSE 连接到 www.example1.com，并打开 6 个 SSE 连接到 www.example2.com。...至于偶现，是因为前端开发者有时候用 Chrome 会打开了多个选项卡，每个选项卡都是同一个本地开发地址，就会导致达到 SSE 的最大连接数的限制，而它的执行时间会很长，也就会阻塞其他的请求，一致在等待...而在开发环境中，我们使用的是 HTTP 1.1 就会出现这个问题。那如何在开发环境中使用 HTTP / 2 呢？

1.3K5 0

点击加载更多

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

提高工作效率的神器：基于前端表格实现Chrome Excel扩展插件

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

谷歌 Chrome 浏览器终于让你可以对标签进行整理和分组了

深入理解浏览器原理

Chrome 商店高人气扩展暗藏间谍软件，超 10 万用户遭遇会话劫持

每天都在用的浏览器，你知道它是如何工作的吗？

一文看懂Kubernetes v1.16！

Chrome 61 Beta版已支持JavaScript模块，Web支付API，Web Share API和WebUSB

【译】一文洞察 Chrome DevTools 近半年新增了哪些功能

【译】一文洞察 Chrome DevTools 近半年新增了哪些功能

如何使用浏览器工具调试PWA

用getDisplayMedia实现在Chrome中共享屏幕

在Salesforce Lightning Experience（闪电体验）提高性能和速度

JavaScript 开发者需要了解的15个 DevTools 技巧

WWDC 2022：哪些是前端开发者要关注的信息？

lastTab—Chrome 拓展开发实践

Chrome浏览器必备插件推荐

JavaScript调试和优化，深入研究谷歌Chrome浏览器开发工具（二）

API 请求慢？这次锅真不在后端

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐