unicar9 / jizhi

A Chrome/Firefox extension with custom new tab page featuring Chinese poems and P5.js enabled noise waves in traditional Chinese colors

几枝 | Jizhi

支持自定义新标签页的 Chrome/Firefox/Edge 扩展，几枝将在新标签页上展示**传统色的层叠波浪动画效果搭配经典诗词。

A Chrome/Firefox extension with custom new tab page featuring Chinese poems and P5.js enabled noise waves in traditional Chinese colors

Chrome Web Store 地址 | Firefox Add-ons 地址 | Edge Add-ons 地址

功能请查看更新日志

---

相关创意编程（Creative Coding）教程（我参与哒~）

文字版课程搭配 Web IDE，实例多多，干货多多。很可能是中文全网 p5.js 最系统最实用的教程了。对编程和 Web 开发有兴趣的同学可以学学，应该会有不一样的体会和认识，也欢迎帮忙宣传一下：）

• p5.js 创意编程之旅 - 蓝桥云课

我和国内首次 Processing 社区日的组织者之一 Ye Qianqian 也合作录过两个《几枝》相关的迷你视频教程：

• Guest Tutorial #1: p5.js Noise with Unicar - Youtube | bilibili
• Guest Tutorial #2: Noise Waves in p5.js with Unicar - Youtube | bilibili

---

中文字体说明

几枝目前使用了以下几种字体：

• 江西拙楷体

江西拙楷体是设计师黄煜臣的个人原创字体，可免费商用。字体本身有一种拙朴憨厚的气质，设计师也想就此推广一下自己的家乡文化。

• 字体圈欣意吉祥宋

字体圈欣意吉祥宋是设计师邹乐伟的个人原创字体，可免费商用。字体本身是圆润娟秀的感觉，是非常有设计感的宋体。

• 方正细金陵

《几枝》从一开始使用了方正细金陵体，该字体支持设计师免费自用，但《几枝》在最初的源代码中附上了字体文件，并且在浏览器扩展中使用应该也超过了“设计师自用”的范畴，算是一种侵权行为。因此《几枝》会在不久的将来将该字体移除，同时探索一个能在不侵权的情况下让大家有更多选择的方案。

对于中文字体的使用，我们纠结了很久，一直没有找到完美的解决方案。中文字体本身字形复杂，设计一套完整的中文字体比英文字体要复杂得多，而且中文字体文件一般比较大，在网页端使用也会造成一些性能上的问题，无论如何，我们都希望在推广中文字体的同时能尊重中文字体设计师的巧思和辛劳。关于中文字体的使用权限有很多类别，有些字体可供个人免费使用，有些字体可用于个人商用但不支持软件的嵌入式使用，我也购买了相关中文字体，但无奈这些有设计感的中文字体都无法在《几枝》中嵌入使用。总的来说，我们希望可以在尊重原创尊重版权的同时，提供更大的自由度和更多的可能性，同时也希望能通过《几枝》推广更多的中文原创字体。

如果大家在字体方面有任何想法和建议，也欢迎随时和我联系：）

---

Chrome 本地装载

• 下载最新的 release 打包文件，首先运行 yarn 再运行 yarn build 生成 builds 文件夹(包含 Chrome 和 Firefox 的 build 文件以及压缩包)
• 在 Chrome 浏览器里输入 chrome://extensions/ 进入插件管理页面
• 打开右上角开发者模式（Developer mode）
• 点击左上角 Load unpacked 按钮并选取刚刚生成的 build_chrome 文件夹
• 「几枝」装载成功，打开新标签页试试吧

示例 - 最新版 2.4.0

鸣谢

• 使用的字体为方正金陵系列的金陵细简体。
• 层叠的波浪动画效果是利用p5.js实现的。
• 诗词名句调用使用今日诗词 API。
• **传统色名称及色号参考了以下来源：
  • **色－**传统颜色
  • Traditional Chinese Colors | **传统颜色
  • **传统色彩
  • 最全！超美**传统色 含 RGB、CMYK 色值！值得收藏！

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Arthur Zheng 💻 🤔 🐛 🎨

xnng 💻

This project follows the all-contributors specification. Contributions of any kind welcome!

jizhi's Issues

关于背景的层叠的波浪动画

请问下背景的层叠的波浪动画的代码在那个文件呀？我自己做了一个网页版搜索小工具，想用上你的背景嘻嘻嘻😁

江西拙楷在显示四字颜色名称时容易超高

因为字体比较大，而且字间距较大，在笔记本的分辨率下比较容易超高，第四个字不能显示完整。可以将拙锴显示颜色名称时的字体和间距调小一些？

这次调整了默认字体，建议在左下角设置按钮处增加一个 “可以自定义字体” 的提示，避免用户不适应新字体。

2.25后的版本，竖版改不回来了，字体设置也无效，不自测吗。。

来个firefox的版本吧！

有计划么。

新标签页的名称无法跟随浏览器设置的语言

firefox中语言是中文，但是加载了插件之后，新标签页名字变成了new tab，没有跟随浏览器设置。

不知道about:newtab这个跟随浏览器设定是怎么实现的。我想是不是tabs.create()函数里面可以设定，查了文档暂时没看到什么好办法。

可能对功能影响不大，原谅我的强迫症 谢谢 XD

诗词一直不变

一直显示“红豆生南国，春来发几枝。”
需要给特定网址添加代理吗？
Version 74.0.3729.169 (Official Build) (64-bit)

建议增加“最常访问的网站”

提个小建议：
增加“最常访问的网站”，可以横排放在页面下方，默认隐藏，随着鼠标的focus浮动显示，应该不影响现在的美观效果，也比较实用。

解决打开新标签时闪现的 loading...

CPU 和 GPU 占用率高

操作系统：win10

此插件在打开时会导致 cpu 和 gpu 占用率飙升，风扇的声音都能听得到。

有没有可能添加一个搜索框

比方说加一个搜索的小图标在诗词下方，当鼠标滑过或者开始输入的时候，搜索图标展开。或者当用户开始输入的时候，光标自动切换到地址栏进行输入

2月25日的新版本，修改设置后无法保存

修改了设置后无法保存

yarn build报错

[root@iZva01gaj2xsb8Z jizhi]# yarn build
yarn run v1.22.4
$ webpack --mode production && node build.js
/home/jizhi/webpack.config.js:13
...config,
^^^

SyntaxError: Unexpected token ...
at NativeCompileCache._moduleCompile (/home/jizhi/node_modules/v8-compile-cache/v8-compile-cache.js:240:18)
at Module._compile (/home/jizhi/node_modules/v8-compile-cache/v8-compile-cache.js:186:36)
at Object.Module._extensions..js (module.js:586:10)
at Module.load (module.js:494:32)
at tryModuleLoad (module.js:453:12)
at Function.Module._load (module.js:445:3)
at Module.require (module.js:504:17)
at require (/home/jizhi/node_modules/v8-compile-cache/v8-compile-cache.js:161:20)
at WEBPACK_OPTIONS (/home/jizhi/node_modules/webpack-cli/bin/utils/convert-argv.js:114:13)
at requireConfig (/home/jizhi/node_modules/webpack-cli/bin/utils/convert-argv.js:116:6)
at /home/jizhi/node_modules/webpack-cli/bin/utils/convert-argv.js:123:17
at Array.forEach (native)
at module.exports (/home/jizhi/node_modules/webpack-cli/bin/utils/convert-argv.js:121:15)
at yargs.parse.err (/home/jizhi/node_modules/webpack-cli/bin/cli.js:71:45)
at Object.parse (/home/jizhi/node_modules/webpack-cli/node_modules/yargs/yargs.js:567:18)
at /home/jizhi/node_modules/webpack-cli/bin/cli.js:49:8
at Object. (/home/jizhi/node_modules/webpack-cli/bin/cli.js:366:3)
at Module._compile (module.js:577:32)
at Object.Module._extensions..js (module.js:586:10)
at Module.load (module.js:494:32)
at tryModuleLoad (module.js:453:12)
at Function.Module._load (module.js:445:3)
at Module.require (module.js:504:17)
at require (internal/module.js:20:19)
at Object. (/home/jizhi/node_modules/webpack/bin/webpack.js:156:2)
at Module._compile (module.js:577:32)
at Object.Module._extensions..js (module.js:586:10)
at Module.load (module.js:494:32)
at tryModuleLoad (module.js:453:12)
at Function.Module._load (module.js:445:3)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

建议增加页面宽度的响应式适配

页面变窄后，文字部分未适当变窄或者换行，建议优化

万人血书 safari版本

万人血书 safari版本

设置弹框超高，覆盖了设置按钮

能不能加个滚动

如何增加自定义的书签

新标签页的一个重要作用就是常用网站的导航，我通常在新标签页中配置好常用网站的书签，可即时跳转，此插件是否带有这个功能？

我想将你的这个功能复制到小程序

如果不直接产生商业利益应该是没问题的吧

建议添加一个 ”猛男硬汉“ 模式, 去除粉色、红色的背景

如题，建议添加一个"猛男硬汉"模式, 去除粉色、红色的背景。

身后站着同事，打开 tab 发现是粉色，气氛有点尴尬。

you are so beautiful

请务必给我您的秋秋号码以便共同探讨问题😂

是否可以做成mac的screensaver？:)

you are so beautifu

请务必给我您的秋秋号码以便共同探讨问题

建议加入 F11 按键全屏提示，全屏状态下用作屏幕保护

建议在界面左下角的选项按钮中，加入按 F11 按键进入全屏的提示，全屏状态可以作为屏幕保护来使用，效果极好。

字体ttf 偏大

• node服务 动态解析获取接口的文字

• 压缩 或换个别的小的chrome支持的字体格式

• 用一个cdn， 善用一下缓存。preload

[Bug]新版本下保存图片文字的透明度好像有点问题

如图。
不太清楚原因，可能和 html2canvas 有关系？

能增加深色主题

在全局使用深色主题情况下,新打开的网页实在是太亮眼了,希望添加一个深色主题,

建议打开新页面时搜索栏自动聚焦，不然每次手动有点麻烦

想要safari版本的

非常喜欢您的插件，可以开发一个safari版本的吗

很喜欢啊，期待加入经常访问网站或导航气泡

期待加入经常访问网站或导航气泡，鼠标滑过自动显示那种，不用的时候隐藏。期待更新，开发者加油哦

[问题反馈] 浏览器最大化时，底部会有一条很显眼的白线

这个问题好像很早就有了，今天显得没事就来反馈一下，强迫症看着难受。

Chrome 浏览器、几枝 v2.5.0

# 问题描述

浏览器最大化，Win10 深色模式，任务栏是黑色的，这条白线就很显眼了。

浏览器最大化，Win10 浅色模式，任务栏是白色的，就看不见这个白线了。

另外，不管是否开启扩展设置中的 黑夜模式，无论背景是 Waves 还是 Blobs，都会有这条白线。

---

# 问题分析

初步判断是因为网页背景颜色是白色导致的，你看这个 GIF 动图：

当我浏览器窗口化并调整大小时，可以看到网页背景颜色是白色的（动画绘制会有一点点延迟才会跟上）。

窗口化调整大小时，如果是缩小那么不会复现，如果是放大那可能是底部白线。浏览器最大化时，底部始终显示白线。

---

# 解决方法

当我通过 F12 开发者工具，调整网页样式后发现：

只要在 div.app、div#root、body、html 其中任意一个添加 background-color: #XXXXXX 样式都可以解决白线问题。

建议在随机颜色后，顺便修改以上元素之一的样式（style="background-color: #XXXXXX;"），该背景颜色值就是随机到的颜色值（当然是底部颜色最深的那个）。

Feature Request：波浪动画自动打开

能不能做成动态壁纸

保存背景快捷键(Alt+s)与Firefox菜单冲突

Alt+S恰好是Firefox菜单中历史一栏的快捷键

可以将此扩展作用于主页而不仅仅作用于新标签页吗，谢谢

建议加入黑暗模式

建议加入黑暗模式。图可以是夜空，一弯细细的弦月，几缕淡淡的云，配上古诗不是很应景吗。
主要是系统改成黑暗模式之后，其他都黑的，显得这个新标签页面很亮。

你好，可以解决360极速浏览器无法使用的问题吗？

你好 可以上线mircsoft扩展应用商店吗

能不能做一个网页版呢?我想用它自制动态壁纸

这要是做成动态壁纸,多美啊,: )

字体切换没有效果

三种字体不管选哪个，最后字体效果都只有江西拙楷。
chrome商店的版本，卸载重装了也是一样。

怎么换字体?

请问怎么在Chrome 里面换字体？

书签栏

你好:
默认书签栏全局隐藏,系统自带的新标签页也会显示书签栏(书签较少,不想一直展示).
几枝新标签页不会展示.能不能给个设置实现类似的效果呢?

诗词搜索可以不调用百度从古诗文网上搜索

中文字体是否可以从本地调用？

新版扩展可以在Edge中使用了！解决了使用Edge的一大阻碍！
目前在Edge下无法切换字体，跟之前chrome中碰到的问题一样。

看到关于字体版权的说明，如果这个字体可以允许个人使用的话，能否不把字体打包到扩展中，给出官方链接让用户自己下载安装，然后从用户本地字库调用呢？这样就还适用于个人使用的授权吧？

毕竟方正细金陵还是很好看啊～
不过如果版权问题无法规避的话，还是支持换字体。
授权的话，嵌入App的授权是一年一万五……太贵了 =_=

郭麐 高阳台·将反魏塘疏香女子亦以次日归吴下置酒话别离怀惘惘 未正常显示

竖排显示时如图：

传统色字体显示不完整及保存背景相关问题

有些颜色的第一个字会被”砍头“，例如图




以及保存背景时是否有可能把设置按钮隐藏呢？

[Feature Request] 点击 play 后播放白躁声

只有波浪动画有点单调，可否同时播放白躁声。(我原以为是有的，结果听了半天也没听到一丝声音，仔细阅读了 RAEDME 后发现实际并无此功能)

几枝修改版能否上架为 Edge 外接程序?

修改版的插件名并不相同.
会在各处标明原作者并保留贡献者.

其他问题: 图标是否开放使用? 本仓库采用何种开源协议?

求大佬告知, 若不予许可, 那我就只自用解压缩扩展了.

可否把诗词主题放在新建 tab 靠右一点的譬如黄金分割的位置呢？

因为 tab 基本上都是在右边打开嘛，而且就整个画面的美感来说，不要直接摆在当中更符合诗词或者古汉语的美感？
或者，是不是可以至少提供一个选项。。😂
最新版的竖排就是很贴心的功能呀。点赞 👍

链接到对应诗词释义的页面

chrome web store 的用户反馈。

yarn build error

具体如下:

yarn build
yarn run v1.22.10
warning ..\package.json: No license field
$ webpack --mode production && node build.js
Hash: 12e55cb7277a7b93364b12e55cb7277a7b93364b
Version: webpack 4.44.2
Child
Hash: 12e55cb7277a7b93364b
Time: 4875ms
Built at: 2021/02/10 下午10:51:19
3 assets

ERROR in ./src/App.jsx
Module build failed (from ./node_modules/eslint-loader/dist/cjs.js):
Module failed because of a eslint error.
error: 'youzikuClient' is assigned a value but never used (no-unused-vars) at src\App.jsx:27:7:
  25 | const DEFAULT_SHICI_LIST = require('./constants/shici.json');
  26 |
> 27 | const youzikuClient = new youziku.youzikuClient('xxxxxx'); //apikey
     |       ^
  28 |
  29 | class App extends Component {
  30 |   constructor(props) {


1 error found.
 @ ./src/index.jsx 3:0-24 4:41-44
 @ multi ./src/index

Child
Hash: 12e55cb7277a7b93364b
Time: 4836ms
Built at: 2021/02/10 下午10:51:19
3 assets

ERROR in ./src/App.jsx
Module build failed (from ./node_modules/eslint-loader/dist/cjs.js):
Module failed because of a eslint error.
error: 'youzikuClient' is assigned a value but never used (no-unused-vars) at src\App.jsx:27:7:
  25 | const DEFAULT_SHICI_LIST = require('./constants/shici.json');
  26 |
> 27 | const youzikuClient = new youziku.youzikuClient('xxxxxx'); //apikey
     |       ^
  28 |
  29 | class App extends Component {
  30 |   constructor(props) {


1 error found.
 @ ./src/index.jsx 3:0-24 4:41-44
 @ multi ./src/index

error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

求上微软EDGE浏览器商店

太赞了