Dev Tabs

面向 Web 开发者、全栈开发者、软件工程师、GitHub 用户等的新标签页扩展程序。 Dev Tabs 是 Chrome 的“新标签页”和主页。此扩展程序主要面向开发者、软件工程师及类似人群。我找了很久的新标签页替代品，要么过于通用、不适合开发工作，要么充斥广告、处处跟踪我，或者根本不是我喜欢的风格。于是我创建了 Dev Tabs。我集成了常用网站、开发行业新闻、当前天气和 GitHub 的显示区域，甚至还在扩展程序中加入了一个小型二维码生成器。它很快成为我依赖的重要工具。 书签： 从页面左侧开始，我放置了一列“书签”。这些是我经常使用的网站。每天工作和娱乐时，我都会访问许多网站，包括电子邮件客户端、GitHub、各种文档网站、教程等等，无需再在所有页面中寻找。你可以添加任意数量的网站，该列会独立滚动。这些书签与内置书签无关，需要单独输入。首次访问页面时，点击页面中间的设置齿轮，即可看到几个选项。点击“Bookmarks”设置后会显示一个输入框。在这里输入你希望显示在“书签”列中的初始网站列表。使用 Markdown 格式 [Name of Site](https://nameOfWebsite.com), [Name of Site](https://nameOfWebsite.com)，用逗号分隔各条目，输入你希望列在页面上的所有网站。完成后返回页面，它们就会全部列出。此外，页面中间的设置齿轮下方还有一个“+”，可以在发现想添加的网站时单独添加“书签”，无需重新输入其他条目。点击“+”后会出现输入框，可输入名称和网站网址。点击保存后，该条目会添加到列表末尾。 新闻： 我使用 Dev.to 的文章 API 集成了行业新闻。它会自动在一列中显示当天 dev.to 首页的文章。如果文章附有图片，图片会显示出来，下方是文章标题，点击标题即可直接进入相应文章。我不仅在 Dev.to 上发现了许多有趣的文章，还找到了无数有用的操作指南，而且我也会不时投稿，因此我选择用它来展示行业新闻。 GITHUB： 集成 GitHub 是理所当然的。我每天都会多次使用其服务。在进行 100 天编程挑战时，我确保每天提交一些内容来跟踪进度。因此，我在页面中央放置了 GitHub 贡献图。首次访问页面时，进入设置并选择“GitHub Calendar”选项。填写 GitHub 用户名，返回主页后就会显示贡献图。由于我经常使用 GitHub，我还集成了 GitHub 仓库列表。页面的这部分会显示你的前 10 个仓库。设置方法相同，选择“GitHub Feed”并再次填写用户名。我把它们保留为两个独立设置，因为我自己有多个 GitHub 账号，想到有人可能希望显示一个用户名的贡献图和另一个用户名的仓库。你也可以在两项设置中输入相同的用户名，显示同一账号的贡献图和前 10 个仓库列表。贡献图仅供查看，但仓库列表可以点击。点击仓库名称即可直接进入相应页面。 天气： 我在页面中央显示当前天气状况。进入设置页面，选择“Weather”选项并点击按钮定位。我使用 HTML 地理位置 API 在你点击按钮时获取坐标。首次点击时会请求定位权限。点击“确定”后，扩展程序会获取你的坐标并将其保存在 Chrome 的本地存储中。此扩展程序收集的任何信息都保存在你电脑上的 Chrome 本地存储中，不会收集并发送到任何地方。所有信息都由你自己保管。因此，如果你更换位置并希望更新天气显示，需要返回设置并再次点击按钮获取新坐标，新坐标会覆盖之前保存的坐标。随后便会显示正确的天气。 时间和日期： 时间和日期只是一个用 JavaScript 编写的普通时钟。它获取当前时间和日期，并将其显示在页面中央。 TWITTER： Dev.to 有自己的 Chrome 扩展程序，在你访问 Twitter 网站时，会在 Twitter 信息流旁显示更新的新闻或文章列表。我借用了该扩展程序的重要部分并将其加入这里。因此，当你访问 Twitter 时，信息流左侧会显示一份小巧、不碍事的 dev.to 当前热门文章列表。该列表可以交互，我发现它有助于找到行业中值得关注的聪明人。你可以在他们的 GitHub 页面找到该扩展程序：https://github.com/thepracticaldev。 二维码生成器： 二维码生成器是我目前决定加入此扩展程序的最后几个功能之一。我现在远程工作，每天经常需要离开工作台去做其他事情。每天下午 2:15，我都要去学校接孩子。我得在车子熄火的情况下排队等 30 分钟。如果我正在阅读某项操作的教程，现在可以复制当前网站的网址，粘贴到二维码生成器中，生成二维码，然后用手机扫描。这样，排队时我就可以继续阅读或完成手头的事情。这就是二维码功能的由来。使用时，只需点击此扩展程序的图标，就会出现一个小窗口。窗口中有一些关于扩展程序的简单信息，底部是输入框。只需粘贴网址或其他内容，点击生成二维码。用手机扫描后就可以继续使用了。 跟踪和个人信息： 正如开头所说，我一直在寻找一款适合我工作且没有广告或跟踪的扩展程序。由于找不到，我决定自己制作一款。因此……此扩展程序不会跟踪你，也不会获取任何可识别个人身份的信息。它没有任何广告或类似内容。我甚至没有加入 Google Analytics。此扩展程序运行所需的任何信息都存储在你的电脑上的 Chrome 本地存储中。我特意说明这一点是因为，作为开发者，你一定知道有两种不同的“本地存储”：一种用于 HTML API，另一种用于 Chrome API。我是在开发此扩展程序时发现这一点的，实际上还需要一个专门的扩展程序来查看 Chrome 本地存储。仅仅使用“检查元素”无法查看。我使用了名为 Storage Area Explorer 的扩展程序：https://github.com/jusio/storage-area-explorer。它让我能够查看 Chrome 本地存储，供你好奇时参考。 支持： 请发送邮件至：info@mattaz.com 网站：https://mattaz.com 可在此查看信息、升级和进一步开发进展：https://mattaz.com/devtabs/ 代码：https://github.com/Cipher-Coder/chromeExtension