当前所在位置: 首页 > 资讯

零基础也能做浏览器插件,Google的这个工具帮你轻松搞定

2021-11-19 【 字体:

浏览器是我们网上冲浪必不可少的工具之一,不管你在用的是哪一款,新标签页往往都是我们进入网络世界的重要入口。 

因此市面上已经有了不少对新标签页进行美化或增强的第三方扩展程序,比如少数派介绍过的 Momentum、Infinity 等。这些新标签页扩展很多又会以「个性化定制」为卖点,我们在点开浏览器图标的同时,只属于自己的网络浏览体验就已经准备好了。 

零基础也能做浏览器插件,Google的这个工具帮你轻松搞定(图1)

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

零基础也能做浏览器插件,Google的这个工具帮你轻松搞定(图2)

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

零基础也能做浏览器插件,Google的这个工具帮你轻松搞定(图3)

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

零基础也能做浏览器插件,Google的这个工具帮你轻松搞定(图4)

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

表格中每一行都代表着一个标签页,我们可以为其添加上页面的背景图片、在每个区块中添加上我们想添加的文字或图片(图片需为链接的形式)

也可以为每个区块附加上超链接,这样区块就具备了点击跳转至目标链接的能力

零基础也能做浏览器插件,Google的这个工具帮你轻松搞定(图5)

为了避免大家在 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 读取表格中输入的页面数据来生成相应的文字和多媒体内容。 

零基础也能做浏览器插件,Google的这个工具帮你轻松搞定(图6)

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

零基础也能做浏览器插件,Google的这个工具帮你轻松搞定(图7)

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

零基础也能做浏览器插件,Google的这个工具帮你轻松搞定(图8)

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

零基础也能做浏览器插件,Google的这个工具帮你轻松搞定(图9)

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

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

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

零基础也能做浏览器插件,Google的这个工具帮你轻松搞定(图10)

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

你可以即刻前往 Tab Maker 主页 (https://tabmaker.withgoogle.com/) 来体验这款新产品。 

本文来自微信公众号 “少数派”(ID:sspaime),作者:鹿額,36氪经授权发布。

阅读全文
相关推荐

抖音爆火的“拆盲盒”直播,是如何将昂贵的废品卖给消费者的?

<strong>抖音爆火的“拆盲盒”直播,是如何将昂贵的废品卖给消费者的?</strong>
抖音直播间掀起了一股“拆盲盒”热潮。最初,这股热潮主要集中在拆卡直播间。一盒10...

低至4元的柠檬水,凭什么赚钱?

<strong>低至4元的柠檬水,凭什么赚钱?</strong>
柠檬水快卷疯了。入夏后,不少新茶饮品牌都从柠檬开刀,要么降价,要么推新,动作频频...

2分钟找到契合你的小众市场

<strong>2分钟找到契合你的小众市场</strong>
编者按:互联网是个长尾市场,越来越长尾。不要试图取悦所有人,到头来你会一场空。相...

牙齿正畸这门生意,也到了出海时代

<strong>牙齿正畸这门生意,也到了出海时代</strong>
高瓴资本作为LP的时代天使,凭借本土先发优势,与国际巨头爱奇科技在国内隐形正畸市...

【设计参考】EMR电子病历系统:数字化医疗的未来

<strong>【设计参考】EMR电子病历系统:数字化医疗的未来</strong>
EMR电子病历系统:数字化医疗的未来 https://baijiahao....

通义千问跳科目三,关AI电商啥事?

<strong>通义千问跳科目三,关AI电商啥事?</strong>
海底捞的小哥们,为了科目三,崴了多少脚。但是千算万算,没有算到在通义千问悄悄上线...

乘云数字获得数千万A轮融资,专注数字化可观测技术

乘云数字获得数千万A轮融资,专注数字化可观测技术
近日,36氪获悉,聚焦一体化云原生观测与内生AIOps平台的「乘云数字“Data...

2024年,让自己增值的5件事

<strong>2024年,让自己增值的5件事</strong>
人与人之间的差距看似很大,但是拉开差距的,往往是日复一日微小的积累。从现在开始,...

35+被裁大厂人,“被过滤者”的生活

35+被裁大厂人,“被过滤者”的生活
“刚被裁时,我想着大不了换个公司,但没想到找不到工作了。”2021年10月,从某...

年薪20万招不到人?这个副业爆火

<strong>年薪20万招不到人?这个副业爆火</strong>
旅游行业迎来超级大复苏。五一前,机酒价格暴涨的讯息让不少人感叹:“活久见,五一也...