js书签图标为 暗色方块

coult3

win10 x64，百分测试版（5.1.1130.26）

centbrowser_5.1.1130.26_x64_portable.exe ，下载便携版后，直接运行 chrome.exe ，没有安装任何扩展。

1.在书签栏添加一个js书签：书签栏右键，添加网页...
名称为：test-1
网址填写：

1. javascript:alert('The time is: '+Date());

复制代码

在书签栏中此js图标为 暗色方块，但是把这个js书签 复制到 【书签栏的文件夹】中，图标变为默认的黄底js图标，如图：


2.使用Bookmark Iconizer扩展
书接上回：

百分js书签图标与Bookmark Iconizer扩展冲突
https://www.centbrowser.net/zh-c ... 749&fromuid=658
(出处: 百分浏览器论坛)



装好该扩展后，书签栏新建一个js小书签：
名称为：夜间模式切换
网址为：

1. javascript:(d=>{var css=`:root{background-color:#fefefe;filter:invert(100%)}*{background-color:inherit}img:not([src*=".svg"]),video{filter: invert(100%)}%60,style,id="dark-theme-snippet",ee=d.getElementById(id);if(null!=ee)ee.parentNode.removeChild(ee);else {style = d.createElement('style');style.type="text/css";style.id=id;if(style.styleSheet)style.styleSheet.cssText=css;else style.appendChild(d.createTextNode(css));(d.head||d.querySelector('head')).appendChild(style)}})(document)

复制代码

在Bookmark Iconizer选项中第一步中输入框输入：夜间 后面再输入一个空格，就会找到 夜间模式切换 书签（不输空格则找不到），点击绿色的 “+”，在第二步中输入base64代码，比如：

1. data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAACHUlEQVR42pWTzWsTURTFz3xk0gxVCpWCRF1IVSioVBCpKRUXdeFKF925DSou0q5UqLooaJYiqEtRt/4Bgii22WsRtNVsWkraNDCZTCaZ73nXO52FikScgQv38d753fPufSPhH19+ySSVBPr3R6VBZwZuqAsGnTwtodcn1G9lBVQMmiupuDxVwOIbG42FLID5Nl2ZVvDy6j68Wg8x/9pCXB37T8Adk66VFFRnh1E3Bd63ItS+BZEXkBoQIQg4XIHIJUAG2j/s3wD3LLoxo2Lpgo6VHRYaAhCES0UFQwrB8AhWRGgH3NQI+GwC715spQDpoU2VkozFKR3LzRirZoyYxW2fIMcENxboct7jcBKAm4Ak7C63IO1/2qW75zWUJ/L4yOK1XoyIRTYfttiy5Ql0uLrLucv2E4jrCISygs7KNqQDz216NKvh7GgOb5sRQrbZ40gqdn3BFXkdstBhYeKAgQ478GMZVm0zvcJw1aLyTA6nihrqRgw7SiuxGfQDcJ7advxU7LEjj/ft2savJuoP2jQ3reH4YQ0b3IMEYJku3JBzDseX4PCj8pyYxQJ+yOtPzT/HWLht0MVzMo4d1dHoCGytNdHa9KDqBQROBDazN8qI4cyEaPp/P6Shyi5NnslhfELH91UL619tdB+PZ3vK+Zs7dGJSw8iYgi8fuug8OZL9Z9Kvb9PIQbbrAa1qMTtg7zrlBqk5nsazQwPP/QQwKkexzEJveQAAAABJRU5ErkJggg==

复制代码

下一步，另存为对话框中，保存类型选择 所有文件，文件名输入 test.html ，
最后发现 书签管理器中 【导入不了 test.html 】，导入后没反应，没有任何导入文件夹。

打开 test.html，发现js书签的代码只有一小半，另外一半消失了，不知道是什么原因。

1. <p><!DOCTYPE NETSCAPE-Bookmark-file-1></p><p><!-- This is an automatically generated file.</p><p>     It will be read and overwritten.</p><p>     DO NOT EDIT! --></p><p><META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8"></p><p><TITLE>Bookmarks</TITLE></p><p><H1>Bookmarks</H1></p><p><DL><p></p><p><span style="white-space:pre">        </span><DT><A HREF="javascript:(d=>{var css=`:root{background-color:</p>

复制代码

3 不使用该扩展，打算使用原始的方式 导出书签，手动添加icon属性，最后导入。
在电脑其他磁盘 重新下载 centbrowser_5.1.1130.26_x64_portable.exe ，直接运行 chrome.exe ，没有扩展，然后删除所有默认的自带书签。

还是先添加一个 夜间模式切换 的 js小书签，图标依然是 暗色方块，点击它工作良好。
然后在书签管理器中导出书签为 test.html ，然后手动编辑添加一个ICON属性。
修改前:

1. <p>    <DL><p></p><p>        <DT><A HREF="javascript:(d=>{var css=`:root{background-color:#fefefe;filter:invert(100%)}*{background-color:inherit}img:not([src*=%22.svg%22]),video{filter:%20invert(100%)}%60,style,id=%22dark-theme-snippet%22,ee=d.getElementById(id);if(null!=ee)ee.parentNode.removeChild(ee);else%20{style%20=%20d.createElement('style');style.type=%22text/css%22;style.id=id;if(style.styleSheet)style.styleSheet.cssText=css;else%20style.appendChild(d.createTextNode(css));(d.head||d.querySelector('head')).appendChild(style)}})(document)" ADD_DATE="1709392591">夜间模式切换</A></p><p>    </DL><p></p>

复制代码

修改后：

1. <p>    <DL><p></p><p>        <DT><A HREF="javascript:(d=>{var css=`:root{background-color:#fefefe;filter:invert(100%)}*{background-color:inherit}img:not([src*=%22.svg%22]),video{filter:%20invert(100%)}%60,style,id=%22dark-theme-snippet%22,ee=d.getElementById(id);if(null!=ee)ee.parentNode.removeChild(ee);else%20{style%20=%20d.createElement('style');style.type=%22text/css%22;style.id=id;if(style.styleSheet)style.styleSheet.cssText=css;else%20style.appendChild(d.createTextNode(css));(d.head||d.querySelector('head')).appendChild(style)}})(document)" ADD_DATE="1709392591" ICON="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAACHUlEQVR42pWTzWsTURTFz3xk0gxVCpWCRF1IVSioVBCpKRUXdeFKF925DSou0q5UqLooaJYiqEtRt/4Bgii22WsRtNVsWkraNDCZTCaZ73nXO52FikScgQv38d753fPufSPhH19+ySSVBPr3R6VBZwZuqAsGnTwtodcn1G9lBVQMmiupuDxVwOIbG42FLID5Nl2ZVvDy6j68Wg8x/9pCXB37T8Adk66VFFRnh1E3Bd63ItS+BZEXkBoQIQg4XIHIJUAG2j/s3wD3LLoxo2Lpgo6VHRYaAhCES0UFQwrB8AhWRGgH3NQI+GwC715spQDpoU2VkozFKR3LzRirZoyYxW2fIMcENxboct7jcBKAm4Ak7C63IO1/2qW75zWUJ/L4yOK1XoyIRTYfttiy5Ql0uLrLucv2E4jrCISygs7KNqQDz216NKvh7GgOb5sRQrbZ40gqdn3BFXkdstBhYeKAgQ478GMZVm0zvcJw1aLyTA6nihrqRgw7SiuxGfQDcJ7advxU7LEjj/ft2savJuoP2jQ3reH4YQ0b3IMEYJku3JBzDseX4PCj8pyYxQJ+yOtPzT/HWLht0MVzMo4d1dHoCGytNdHa9KDqBQROBDazN8qI4cyEaPp/P6Shyi5NnslhfELH91UL619tdB+PZ3vK+Zs7dGJSw8iYgi8fuug8OZL9Z9Kvb9PIQbbrAa1qMTtg7zrlBqk5nsazQwPP/QQwKkexzEJveQAAAABJRU5ErkJggg==">夜间模式切换</A></p><p>    </DL><p></p>

复制代码

保存后，在 书签管理器 将其导入。
发现图标确实是变成 相应的自定义图标了，js脚本也能正常工作。
这次终于是成功了：）

S8F8ry

简单测试了下，看起来 5.1 版本对于在根目录(书签栏)下新增的小书签的图标处理是不正常的：

coult3

补充测试：
在原版chrome中，使用 Bookmark Iconizer扩展 ，同样建立一个夜间模式切换 的 js书签 ，发现也出现 导入不进去，js脚本代码消失的bug

然后去 https://www.runningcheese.com/bookmarklets 找了很多小书签测试，在 原版chrome 和 百分测试版（5.1.1130.26），都安装 Bookmark Iconizer扩展，发现：
1.对于某些书签（比如代码 长度短 以及 代码简单 的js脚本）， 同一个 js书签 ，百分和chrome 都能成功该图标且运行正常；
2对于另一些书签（比如代码很长以及比较复杂的）， 同一个 js书签 ，百分和chrome 都有此bug

所以感觉此bug和js脚本的本身的代码 以及 代码长度 有关。

S8F8ry

coult3 发表于 2024-3-3 18:16
补充测试：
在原版chrome中，使用 Bookmark Iconizer扩展 ，同样建立一个夜间模式切换 的 js书签 ，发现也 ...

是由于小书签中的特殊字符(#)导致插件生成的数据网址被截断了：bookmark-iconizer。

coult3

S8F8ry 发表于 2024-3-3 20:14
是由于小书签中的特殊字符(#)导致插件生成的数据网址被截断了：bookmark-iconizer。 ...

找到问题了，是扩展的锅。

夜间模式切换js脚本 里 [src*=".svg"] 这里有一个 双引号，然后扩展进行第3步导出 html 时 没有把双引号编码替换为

1. &quot;

复制代码

注意看：本帖1楼的第3步，使用原始的方式 导出书签，导出书签为 test.html ，这时相应的代码为 [src*=%22.svg%22] ，是编码成功了的。

解决：把js脚本里的所有 双引号 改成 单引号，然后配合您的补丁 bookmark-iconizer-pr 扩展完美解决。
（因为双引号+bookmark-iconizer-pr 还是有错误）

测试了一下：夜间模式切换 js书签脚本里是 双引号，使用补丁 bookmark-iconizer-pr ，导出的 html 相关代码为：

1. <A HREF="……([src*=".svg"]……" ADD_DATE="1709519824" ICON="……">test</A>

复制代码

发现导出的 html 里 双引号 还是没有编码成功，HREF属性有一个双引号，里面还是老样子 src*=".svg" ，而不是 %22，冲突导致脚本不工作。


如果手动修改 options.js 152行，修改为

1. var url=rows[i].querySelector('td.name a, td.name span').getAttribute('title').replace(/"/g,'%22').replace(/#/g,'%23');

复制代码

发现还是不行。

最后非常非常感谢超版的热心帮助

参考：
https://www.runoob.com/tags/html-urlencode.html

S8F8ry

[挠头] 我就是直接用了你给的小书签网址加以及图标进行的测试，结果是可以正常导出导入的：




而且我已经丢回原项目上了：bookmark-iconizer

coult3

S8F8ry 发表于 2024-3-4 12:53
[挠头] 我就是直接用了你给的小书签网址加以及图标进行的测试，结果是可以正常导出导入的：

超版费心了

是的，最新版已经解决了 #导致网址被截断 的bug ，并且作者也已经合并了您的pr ：）

但我在 5楼 是发现了另一个bug：如果bookmarklet包含双引号，那么在导入后，图标正常，但bookmarklet不能工作。

而且您使用的测试脚本和我的还是有些不一样的：

您使用的测试脚本（双引号已经经过编码）：
来源：https://github.com/Kaligula0/boo ... /5#issue-2165327271

src*=%22.svg%22]),video{filter:%20invert(100%)}%60,style,id=%22dark-theme-snippet%22,e

我的脚本（双引号没有编码）：

src*=".svg"]),video{filter: invert(100%)}`,style,id="dark-theme-snippet",e

我已反馈，最后再次感谢超版的帮助：）

S8F8ry

coult3 发表于 2024-3-4 17:02
超版费心了

是的，最新版已经解决了 #导致网址被截断 的bug ，并且作者也已经合并了您的pr ： ...

将这段小书签网址保存至浏览器书签，浏览器本身是会编码双引号的。或者换句话说，在实际操作书签时遇不到双引号的情况吧：

S8F8ry 发表于 2024-3-4 18:56
将这段小书签网址保存至浏览器书签，浏览器本身是会编码双引号的。或者换句话说，在实际操作书 ...

有趣了。。直接输入两个双引号确实是会 编码双引号的，但是输入js代码就不一样了，如图。



下面操作与浏览器无关，在 原版chrome 和 cent最新测试版 都能复现：
即 js小书签代码中 的双引号在书签管理器中能被编码，在书签栏中还是双引号（与是否在文件夹中无关）。

coult3

游客 125.65.157.x 发表于 2024-3-4 20:56
有趣了。。直接输入两个双引号确实是会 编码双引号的，但是输入js代码就不一样了，如图。

图片地址在 https://i.postimg.cc/hSpvtfjg/GIF1.gif