星期一, 十一月 08, 2021

147 压缩优化chrome核浏览器导出的html书签

朋友共享了他的html书签, 我没导入, 打算用的时候直接打开html搜索. 

发现书签文件的体积很大, 打开看都是一些base64的图片和一些没用的字段. 经过一个下午的折腾, 终于用笨办法解决了去除无用字段的问题. 

首先来看一下chrome html书签中的两种情况和它的无用字段:

<H3 ADD_DATE="1606639169" LAST_MODIFIED="1636365719">书签文件夹名称</H3>

<A HREF="url" ADD_DATE="1633767478" ICON="data:image/png;base64,此处省略图片代码...">书签名称</A>

可以看到有3个字段是没有用的, add_date last_modified icon, 尤其是icon, 占用了大量的体积. 

尝试过文件编辑器+正则, 可惜正则实在让人头疼...

又尝试了使用JavaScript书签, removeAttribute, 屁用没有...

毕竟不是大佬, 能力十分有限. 折腾了两个多小时, 灵光一现, 想到了chrome去广告的扩展uBlock Origin, 终于成功...


文章来源: stackoverflow.com

1, 先用hfs之类的小工具, 在本地建一个html小环境. 如http://127.0.0.1/  因为虽然ublock可以在设置里允许访问file://, 但是我不知道本地规则该咋写... 

2, 把需要修改的html书签放到环境中. 如 http://127.0.0.1/1.html

3, 在ublock里面写这些规则: 

127.0.0.1##+js(ra.js, icon, a)

127.0.0.1##+js(ra.js, last_modified, a)

127.0.0.1##+js(ra.js, add_date, a)

127.0.0.1##+js(ra.js, add_date, h3)

127.0.0.1##+js(ra.js, last_modified, h3)

4, 保存之后, 访问你的html书签, 如 http://127.0.0.1/1.html

5, 按f12点开elements, 点一下<html>, 然后ctrl+c复制. 我试过直接ctrl+s还是会保存成未修改的, 所以要用f12. 
粘贴到记事本保存成html格式就行了. 


*实际测试效果: 2.67MB -> 495KB. 

----------

为什么要计较这1MB多呢? 

对于我个人的需求来说, 别人分享给我的书签, 我没必要导入自己的浏览器, 只是偶尔才用到, 用到的时候, 直接打开搜索就行啦. 我将这个书签放在我自己的网站上, 或者路由器上, 可能会用到手机访问, 几千行的内容外加一堆隐藏的图片, 可能会导致手机浏览器卡顿费电. 
所以花了三个小时研究方法还是很值的哈哈哈, 主要还是太菜, 不然正则几分钟搞定😂