|
|
@ -0,0 +1,27 @@
|
|
|
|
|
|
|
|
# 构建浏览器插件
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
构建浏览器插件是一种有趣的方式,可以在构建不同类型的网络资产的同时思考你的应用程序的性能。本模块包括关于浏览器如何工作和如何部署浏览器扩展的课程,如何建立一个表单、调用 API 和使用 local storage (本地存储),以及如何衡量网站的性能并加以改进。
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
你将建立一个能在 Edge、Chrome 和 Firefox 上运行的浏览器插件。这个插件就像一个为非常具体的任务量身定做的迷你网站:利用 [C02 Signal API](https://www.co2signal.com) 检查地区的电力使用情况和碳排放浓度,回传地区的碳足迹。
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
一旦 API 密钥和地区代码被输入到一个表格中,用户就可以临时调用这个扩展,以确定当地的用电情况,从而提供可以影响用户的用电决定的数据。例如,在你所在地区的高用电量期间,推迟运行干衣机(一种碳密集型活动)可能是更好的选择。
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### 主题
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1. [关于浏览器](../1-about-browsers/translations/README.zh-tw.md)
|
|
|
|
|
|
|
|
2. [表单和 Local Storage](../2-forms-browsers-local-storage/translations/README.zh-tw.md)
|
|
|
|
|
|
|
|
3. [背景工作与效能](../3-background-tasks-and-performance/translations/README.zh-tw.md)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### 成就
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
![一个绿色浏览器插件](../extension-screenshot.png)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## 贡献者
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
网页碳排放追踪的想法由 Asim Hussain,微软绿色云计算倡导团队的负责人和 [Green Principles](https://principles.green/) 的作者。这源自于一个[网页项目](https://github.com/jlooper/green)。
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
浏览器插件的结构受到 [Adebola Adeniran 的 COVID 插件](https://github.com/onedebos/covtension)的启发
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
「点」 图标系统背后的概念是由加州排放的 [Energy Lollipop](https://energylollipop.com/) 浏览器插件的图标结构提出的。
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
这些课程由 [Jen Looper](https://www.twitter.com/jenlooper) 用满满的 ♥️ 來编写。
|