让你的作品集脱颖而出的 5 个妙招
1. 您最喜欢的网站的深色模式
2. 天气应用
3. 显示今天的日历。
4. 每日咖啡
5. 电子商务愿望清单
厌倦了创建待办事项清单和电商网站？这些 Chrome 扩展程序或许能帮你打造独一无二的作品集！👩💻
要创建你的第一个 Chrome 扩展程序，你只需要掌握HTML、JavaScript 和 CSS 的基础知识！以下是我想到的一些有趣的创意，这些创意都可以仅使用这些技术来实现。
如果您还有疑问，请观看我的视频“ 2 分钟内创建一个简单的 Chrome 扩展程序”。
1. 您最喜欢的网站的深色模式
你是否经常使用某个你喜欢的网站，但该网站没有深色模式？
借助 Chrome 扩展程序，您可以创建自己的 CSS 样式表，覆盖特定网站的部分样式。这样，当您启用扩展程序时，就可以为网站应用深色模式样式。
要实现这一点，您应该使用内容脚本。
提示：在对象中设置样式
"run_at": "document_end"，以便您的样式覆盖网站的样式。content_scriptsmanifest.json
在这个项目中，你需要学习以下内容：
2. 天气应用
你可以创建一个浏览器扩展程序，显示特定地点的当前天气。
你需要调用 API 来获取天气信息：OpenWeatherMap API是一个不错的选择，他们提供免费套餐。
chrome.alarms使用Service Worker 处理的 API 发出的警报，在后台每隔几分钟获取最新的天气更新。
使用 API 存储结果chrome.storage，并在扩展程序的操作弹出窗口中显示它们。
要调用 API，您可以使用 `<API_HOME>` fetch，并且您需要将类似以下内容添加到您的 `<API_HOME>` 文件中manifest.json：
"host_permissions": ["https://some-weather-api.com/*"]
这个项目需要你学习以下内容：
3. 显示今天的日历。
您可以通过浏览器扩展程序轻松访问当天的日历事件，并在浏览器中显示它们。
与之前的想法一样，你需要每隔几分钟从外部 API（Google 日历或你喜欢的日历 API）获取数据，方法是使用chrome.alarmsAPI 发出的警报和 Service Worker 在后台运行。
您还需要使用 Service Worker 存储 API 请求的结果chrome.storage。请记住，当扩展程序处于空闲状态时，Service Worker 可能会被卸载，因此您不能仅仅将日历事件存储在 Service Worker 中声明的变量中。
在扩展程序的操作弹出窗口中显示事件及其标题、时间、嘉宾等信息。
您还可以使用chrome.notificationsAPI 在事件发生前几分钟向用户显示消息。
这个项目需要你学习以下内容：
4. 每日咖啡
每天向用户随机展示一款咖啡配方供其尝试。
在这种情况下，你不需要调用外部 API（至少一开始不需要）。你可以将你最喜欢的食谱列表存储在扩展程序的 JSON 数组中，然后Math.random()每天从数组中随机获取一个条目。
在弹出窗口中显示带有精美图片的咖啡配方。
为了使其更加稳健，您可以chrome.storage存储上次显示的咖啡配方和日期，以确保两件事：
- 每天展示一款咖啡配方。
- 我们不会连续两天拿到相同的菜谱。
这个项目需要你学习以下内容：
5. 电子商务愿望清单
允许用户将来自亚马逊、eBay 等的商品添加到他们的愿望清单中：当用户找到他们感兴趣的商品时，他们可以使用键盘快捷键或从操作弹出窗口将其添加到他们的愿望清单中。
操作弹出窗口还会显示之前添加的项目，并允许用户将其删除。
用户还应该能够导航到每个产品页面，以便购买。为此，您应该使用chrome.tabs.create.
您需要使用chrome.storageAPI 存储每个产品的链接、名称和价格。
这个项目需要你学习以下内容：
希望这篇文章对您有所帮助，并能激发您开展下一个项目的灵感！如果您对 Chrome 扩展程序感兴趣，可以看看我的系列文章，其中我创建了一个简单的 Chrome 扩展程序，并逐步对其进行改进。同时，我也探索了chrome实现本文中提到的想法所需的大部分 API 和概念。
您还可以观看我的视频“ 2 分钟内创建一个简单的 Chrome 扩展程序”，以了解整个过程。
图标来自 Flaticon.com，由 Smashicons 和 Freepik 提供。
文章来源：https://dev.to/paulasantamaria/5-ideas-to-set-your-portfolio-apart-170c