App+1 | Google 出品的标签页定制工具,零代码基础制作浏览器扩展
2021-11-18 15:30:00 Author: sspai.com(查看原文) 阅读量:32 收藏

App+1 | Google 出品的标签页定制工具,零代码基础制作浏览器扩展

浏览器是我们网上冲浪必不可少的工具之一,不管你在用的是哪一款,新标签页往往都是我们进入网络世界的重要入口。因此市面上已经有了不少对新标签页进行美化或增强的第三方扩展程序,比如少数派介绍过的 Momentum、Infinity 等。这些新标签页扩展很多又会以「个性化定制」为卖点,我们在点开浏览器图标的同时,只属于自己的网络浏览体验就已经准备好了。

也正是因为类似的原因,Google 近日推出的 Tab Maker 才如此具有吸引力——作为 Chrome 背后的缔造者,Google 推出的这款小工具将选择权完全交给用户,让我们即便没有任何代码基础也能制作一款只属于自己的新标签页扩展。

和大多数「零代码」工具一样,Tab Maker 为我们提供了非常直观的分步引导和图形化定制界面。在 Tab Maker 官网选择 Make your own 进入在线编辑器页面后,我们首先需要从 11 种预置模板中选择一种进行编辑(也可以导入其它人分享过来的 .zip 文件)。

随后 Tab Maker 会引导我们创建一个用于页面内容搭建的 Google Sheet 表格模板。我们此刻需要做的是生成一份这份表格的副本,并将其保存到自己的 Google Drive 存储中。

然后就是在 Google Sheet 中自由发挥的时候了

  • 表格中每一行都代表着一个标签页,我们可以为其添加上页面的背景图片、在每个区块中添加上我们想添加的文字或图片(图片需为链接的形式)
  • 也可以为每个区块附加上超链接,这样区块就具备了点击跳转至目标链接的能力

为了避免大家在 Google Sheet 和 Tab Maker 中来回跳转,表格的左上角还贴心地加上了我们选择的模板样式缩略图。

编辑完表格内容后,接下来我们需要将表格转为公开形式:依次点击左上角菜单 File > Share > Publish to web,并在弹出的对话框里的两个下拉菜单中分别选择第二份副表 Step 2: Add content to this sheet 和 .csv 格式 Comma-separated values (*.csv),最后点击发布(Publish)按钮即可。

此时,Google Sheets 会自动为表格生成一个链接,我们需要将其复制并粘贴到 Tab Maker 页面下方的对话框中,让 Tab Maker 读取表格中输入的页面数据来生成相应的文字和多媒体内容。

最后,对我们塞进标签页中的各种元素进行排版。Tab Maker 提供了非常细致的页面元素排版选项,我们可以一步步定制每一个设计细节,包括背景色、背景图片的排版方式、页面与区块的边距、各个区块的大小、字体类型与大小等。总之,根据自己的喜好和品味微调即可,右侧会即时生成对应的效果预览,直到自己满意为止。

至于导出和使用,新标签页扩展制作完成后,Tab Maker 会自动生成一个包含扩展文件的压缩包文件供我们下载。我们可以将其安装进 Chrome/Edge 浏览器中来查看实际效果。

以 Chrome 为例:打开 Chorme 的扩展设置页面,开启开发者模式,然后点击加载扩展包,选择刚刚下载好并解压生成的文件夹。随后打开一个新标签页就能看到自己制作的新标签页扩展效果了!

若要将制作的扩展小范围地与朋友家人分享,只需将压缩包发送给他们,请他们按照上述加载扩展包的步骤重复操作一遍,就能在打开新标签时看到自己制作的扩展了;如果你想让更多用户下载、使用自己制作的新标签页扩展,还可以前往 Chrome 线上扩展商店注册、登录 Google 开发者账号,将压缩包文件上传并等待审核,通过后便会公开向所有 Chrome 用户提供下载。

当然,即便是小范围分享,我们也能对自己制作的新标签页面进行即时更新!只需持续编辑更新先前那份 Google Sheets 在线表格的内容,被分享者就能在每次打开新标签页的时候第一时间看到我们的内容更新。

在 Google 的设想里,创建 Tab Maker 产品的初衷是为了在这个每天都有无数标签页被打开的时代里,让大家都能无门槛地利用这个平台去与他人分享自己的 idea 或是各种喜爱的事物,例如其给出的四个范例便包含在标签页中建立有关银河星系的画廊来探索学习银河系的奥秘、查看网络上各种可爱的猫猫狗狗、欣赏新生艺术家的作品并获得灵感、从本地的独立商户获取最新的信息和近况等等。

从某种程度上来说,Tab Maker有些类似 Google 早年的产品「iGoogle」服务,该服务可以让用户按照个人的喜好来方便地定制和整合不同来源的信息在 Google 主页上,使其成为一个个性化的门户。

你可以即刻前往 Tab Maker 主页来体验这款新产品。

> 下载少数派 客户端、关注 少数派公众号,了解更妙的数字生活 🍃

> 想申请成为少数派作者?冲!

© 本文著作权归作者所有,并授权少数派独家使用,未经少数派许可,不得转载使用。

鹿額

baby PM / former UX Designer


文章来源: https://sspai.com/post/69990
如有侵权请联系:admin#unsafe.sh