如何使用番茄钟计时器示例从 Manifest Vo VA 分步指南更新 Chrome 扩展程序
将 Chrome 扩展从 Manifest V2 更新到 Manifest V3 对于开发人员来说是关键的一步,因为 Google 已逐步停止对 Manifest V2 的支持。在本文中,我们将逐步介绍将最初使用 Manifest V2 构建的 Pomodoro Timer 扩展升级到更新的 Manifest V3 标准的过程。
我的故事
我有一个 4 年前免费制作的番茄计时器扩展,我收到了来自 Google 的通知,要求我更新 Manifest。
我的番茄计时器的原始版本是我自己设计的,用霸王龙的咆哮作为周期结束通知?。它既古怪又有趣,我什至惊讶地看到有 24 个人在使用它。
这就是它的样子:
我的妻子最近开始学习设计,由于我需要更新 Manifest,所以我请她更新设计。结果在文章最后。剧透:我认为结果很棒。
为什么升级到 Manifest V3?
Manifest V3 引入了几项关键更改,旨在增强 Chrome 扩展程序的隐私性、安全性和性能。这些变化包括:
- Service Workers: 后台页面被 Service Worker 替换,因为它们不会连续运行,所以效率更高。
- 增强的安全性:缩小权限范围并引入 declarativeNetRequest API 来管理网络请求。
- 提高性能:通过优化扩展程序与浏览器资源的交互方式,V3 确保更好的资源管理。
第 1 步:了解核心差异
在深入了解更新之前,了解 Manifest V2 和 V3 之间的关键变化非常重要:
- 后台脚本: 在 V2 中,后台脚本连续运行。在 V3 中,这些被替换为仅在需要时运行的 Service Worker。
- 权限:Manifest V3 要求显式声明所有权限,某些权限已被弃用或替换。
- API 更改: 一些 API 已被删除或替换,并且扩展程序不同组件之间的消息传递系统已更新。
第2步:更新清单文件
以下是将番茄钟定时器扩展的 manifest.json 文件从 V2 更新到 V3 的方法:
原始清单 V2 示例:
{ "name": "Pomodoro Clock", "version": "1.1.0", "description": "Simple background timer for productivity", "manifest_version": 2, "permissions": ["storage"], "browser_action": { "default_popup": "popup.html", "default_icon": { "16": "img/tomato16.png", "32": "img/tomato32.png", "48": "img/tomato48.png", "128": "img/tomato128.png" } }, "icons": { "16": "img/tomato16.png", "32": "img/tomato32.png", "48": "img/tomato48.png", "128": "img/tomato128.png" }, "background": { "scripts": ["background.js"] }, "options_page": "options.html" }
更新了 Manifest V3 示例:
{ "name": "Pomodoro Timer & Focus Clock", "version": "2.0.1", "description": "Boost productivity with this simple Pomodoro timer. Focus on tasks, minimize distractions, and manage your time effectively.", "manifest_version": 3, "permissions": ["storage","notifications","alarms"], "action": { "default_popup": "popup.html", "default_icon": { "16": "img/tomato16.png", "32": "img/tomato32.png", "48": "img/tomato48.png", "128": "img/tomato128.png" } }, "icons": { "16": "img/tomato16.png", "32": "img/tomato32.png", "48": "img/tomato48.png", "128": "img/tomato128.png" }, "background": { "service_worker": "background.js" } }
清单中的主要变化:
背景脚本:
- V2: "background": {"scripts": ["background.js"]}
- V3: "background": {"service_worker": "background.js"}
在 V3 中,后台脚本被 Service Worker 替换。 Service Worker 仅在必要时运行,提高资源效率。
操作与浏览器操作:
- V2: "browser_action": { ... }
- V3:“动作”:{ ... }
browser_action 已被 action 取代,它整合了功能并简化了清单。
步骤 3:更新后台脚本以使用 Service Worker
我的扩展在后台使用了一个简单的 setInterval(),对于 Service Worker,此行为将不起作用,因为为了节省浏览器资源,它仅在需要时运行。
在我的例子中,我必须修改计时器并将时间戳存储在存储中,使用警报来安排通知调用者的触发代码运行。
当然还有使用chrome的内置通知来发送通知,以摆脱烦人的霸王龙尾部。如果我的扩展的早期用户阅读了我的内容,我真的很抱歉?
这里不会有代码示例,因为它太具体了。
结论
这是结果。我觉得这很酷。简约且易于使用
更新并没有那么困难,主要是了解旧的后台脚本和 Service Worker 之间的区别,但是要小心警报,我什至在测试时使 Chrome 崩溃了几次?
随时尝试更新的番茄钟和焦点时钟扩展,祝您更新顺利!
以上是如何使用番茄钟计时器示例从 Manifest Vo VA 分步指南更新 Chrome 扩展程序的详细内容。更多信息请关注PHP中文网其他相关文章!

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

不同JavaScript引擎在解析和执行JavaScript代码时,效果会有所不同,因为每个引擎的实现原理和优化策略各有差异。1.词法分析:将源码转换为词法单元。2.语法分析:生成抽象语法树。3.优化和编译:通过JIT编译器生成机器码。4.执行:运行机器码。V8引擎通过即时编译和隐藏类优化,SpiderMonkey使用类型推断系统,导致在相同代码上的性能表现不同。

Python更适合初学者,学习曲线平缓,语法简洁;JavaScript适合前端开发,学习曲线较陡,语法灵活。1.Python语法直观,适用于数据科学和后端开发。2.JavaScript灵活,广泛用于前端和服务器端编程。

从C/C 转向JavaScript需要适应动态类型、垃圾回收和异步编程等特点。1)C/C 是静态类型语言,需手动管理内存,而JavaScript是动态类型,垃圾回收自动处理。2)C/C 需编译成机器码,JavaScript则为解释型语言。3)JavaScript引入闭包、原型链和Promise等概念,增强了灵活性和异步编程能力。

JavaScript在Web开发中的主要用途包括客户端交互、表单验证和异步通信。1)通过DOM操作实现动态内容更新和用户交互;2)在用户提交数据前进行客户端验证,提高用户体验;3)通过AJAX技术实现与服务器的无刷新通信。

JavaScript在现实世界中的应用包括前端和后端开发。1)通过构建TODO列表应用展示前端应用,涉及DOM操作和事件处理。2)通过Node.js和Express构建RESTfulAPI展示后端应用。

理解JavaScript引擎内部工作原理对开发者重要,因为它能帮助编写更高效的代码并理解性能瓶颈和优化策略。1)引擎的工作流程包括解析、编译和执行三个阶段;2)执行过程中,引擎会进行动态优化,如内联缓存和隐藏类;3)最佳实践包括避免全局变量、优化循环、使用const和let,以及避免过度使用闭包。

Python和JavaScript在社区、库和资源方面的对比各有优劣。1)Python社区友好,适合初学者,但前端开发资源不如JavaScript丰富。2)Python在数据科学和机器学习库方面强大,JavaScript则在前端开发库和框架上更胜一筹。3)两者的学习资源都丰富,但Python适合从官方文档开始,JavaScript则以MDNWebDocs为佳。选择应基于项目需求和个人兴趣。

Python和JavaScript在开发环境上的选择都很重要。1)Python的开发环境包括PyCharm、JupyterNotebook和Anaconda,适合数据科学和快速原型开发。2)JavaScript的开发环境包括Node.js、VSCode和Webpack,适用于前端和后端开发。根据项目需求选择合适的工具可以提高开发效率和项目成功率。
