Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

🔴 一些功能优化以及站点适配的建议 #91

Open
Thomas-Harrell opened this issue Sep 6, 2024 · 30 comments
Open

🔴 一些功能优化以及站点适配的建议 #91

Thomas-Harrell opened this issue Sep 6, 2024 · 30 comments

Comments

@Thomas-Harrell
Copy link


image
@MapoMagpie
Copy link
Owner

这个接口似乎解析起来有点复杂,加上最近没什么精力,所以有空再搞吧。

@Thomas-Harrell
Copy link
Author

Thomas-Harrell commented Sep 6, 2024

@MapoMagpie


  • 感谢开发者的回复

  • 还有一些功能上的建议,因为已经开了两个议题了,就不额外多开了

功能建议

  • 对缩略图视图的空间利用率进行优化

image

image

  • 添加在缩略图模式下显示「图片编号」的选项,类似章节页面的「章节数」,以方便对于图片的定位
image
  • 添加「在新标签页打开脚本页面」的选项,避免由于误触而退出脚本视图的情况

  • 不知道能否添加类似于以下形式的章节列表(示例脚本

c6cc76a7-e999-4e8a-8073-c8f0008853bf.mp4
  • 或者对现有的章节页面优化一下,现有的章节页面由于一堆重复的封面而导致观感不佳
image

网页适配

  • 希望可以对 X/Twitter 的列表页面进行适配

  • 知道可以使用正则表达式在脚本的「配置 - 站点配置」中添加网站

  • 但是我没有添加成功(我的问题

  • 列表页面的网址示例:https://x.com/i/lists/1359849574949527557

image

BUG

  • 一个在使用中遇到的问题

  • 在进入脚本浏览后,按下任意按键,网页四周会出现蓝色边框,只要不按下按键,就不会出现这个状况

  • 在浏览器的无痕模式下测试也是这样,与特定网站无关

  • 不知道是不是我这边的问题

系统:macOS

浏览器:Chrome

JS 插件:Violentmonkey

image

05422f88-a92c-4674-983f-0200a981e5b3.mp4
  • 还有的就是,Ctrl 键之类的在 macOS 下无法使用
image

@MapoMagpie
Copy link
Owner

感谢提供了这些建议,我会针对这些进行优化。

@Thomas-Harrell
Copy link
Author

Thomas-Harrell commented Sep 7, 2024

@MapoMagpie


  • 感谢开发者的回复

  • 这里有个关于 Pixiv 的 JS 脚本:GitHub & Greasy Fork

  • 用户体验十分出色,有着良好的界面、交互设计和功能性,希望能够带来一些帮助和启发

  • 录制了关于脚本界面和功能性的演示,碍于时长与文件体积,只演示了一部分:

3ff3daac-9f2d-4abc-8753-11ec044eb2d5.mp4

@Thomas-Harrell
Copy link
Author

站点适配建议(补充):ArtStation

SCR-20240909-cgbl


MapoMagpie added a commit that referenced this issue Sep 9, 2024
@MapoMagpie
Copy link
Owner

MapoMagpie commented Sep 9, 2024

还有的就是,Ctrl 键之类的在 macOS 下无法使用

我没有Mac设备,所以不知道Control+鼠标左键,具体触发了哪些按键。
你可以在任意页面上打开控制台,然后输入

document.addEventListener("click", ev => console.log(`alt: ${ev.altKey}, ctrl: ${ev.ctrlKey}, meta: ${ev.metaKey}, shift: ${ev.shiftKey}`, ev))

注册一个点击事件,然后按下Control+鼠标左键,看看控制台输出了什么。
这是触发选图功能的相关代码。

if (event.ctrlKey) {

@Thomas-Harrell
Copy link
Author

Thomas-Harrell commented Sep 9, 2024

@MapoMagpie


  • 感谢开发者的回复

  • 以下是一部分的输出信息:
alt: false, ctrl: false, meta: true, shift: false PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, pressure: 0, …}
image
  • Command 键就是 Meta 键的意思

  • Control 键对应的应该是 Ctrl 键

image

@MapoMagpie
Copy link
Owner

我刚更新了,可以匹配ctrl和meta任意一个,现在应该有效了。
还有支持了artstation.com,跳过了youtube的内嵌视频。

@Thomas-Harrell
Copy link
Author

@MapoMagpie


  • 感谢开发者的工作

  • macOS 下的 Meta 键以及 ArtStation 的画师主页已经可以使用了


MapoMagpie added a commit that referenced this issue Sep 11, 2024
MapoMagpie added a commit that referenced this issue Sep 13, 2024
@Thomas-Harrell
Copy link
Author

漫画网站交互逻辑优化建议

  • 当前逻辑:漫画网站,在漫画某话的缩略图视图,点击页面空白区域后,会直接退出脚本的浏览模式

  • 优化建议:点击页面空白区域后,退回到漫画的章节页,而不是直接退出脚本的浏览模式

  • PS:这样可以更方便的进行漫画章节间的切换,而且也更符合页面切换的逻辑


image

⬇️

image

@Thomas-Harrell
Copy link
Author

功能建议:适配鼠标侧键

  • 如题,适配鼠标的前进、后退按键

  • 方便进行页面间的切换:网页视图 - 章节页视图 - 缩略图视图 - 大图视图


image


MapoMagpie added a commit that referenced this issue Sep 15, 2024
@MapoMagpie
Copy link
Owner

更新了章节选择的展示方式。

@Thomas-Harrell Thomas-Harrell changed the title 🔴 站点适配建议:Instagram 🔴 一些功能以及站点适配的建议 Sep 16, 2024
@Thomas-Harrell Thomas-Harrell changed the title 🔴 一些功能以及站点适配的建议 🔴 一些功能优化以及站点适配的建议 Sep 16, 2024
@MapoMagpie
Copy link
Owner

总结一下你提出的建议
现在已改善的:

  • 缩略图的流式布局,使用了横向自适应的布局,相比瀑布式的更容易保持图片的顺序性。
  • 章节列表的展示方式。
  • Mac的Control或Meta键适配。
  • Artstation.com的适配

计划进行的:

  • instagram.com的适配
  • twitter.com或artstation.com其他列表[For You、Following、Likes]适配
  • 借鉴Ppixiv脚本的功能,很棒的脚本,但是我不能实现那么多和Pixiv站点本身的功能如搜索点赞推荐,这个脚本更专注的是多个站点统一的阅读体验。我会参考Ppixiv的右键菜单功能。
  • 鼠标按键参与到快捷键的自定义中。

你仍可以继续提供建议。

@Thomas-Harrell
Copy link
Author

Thomas-Harrell commented Sep 17, 2024

@MapoMagpie


  • 感谢开发者的工作

  • 先提一些发现的问题吧,主要是关于章节页面的,之后会有别的建议


  • 如视频所示:

  • 打开章节页面,不进行选择,直接退出,选项框会停留在网页中,刷新网页后才会消失

6978C461-7C67-4D1A-9557-2D0B0503D94C.mp4
  • 章节页的漫画封面只显示了图片的局部,这样看起来有些怪异
image
  • 点击脚本控制栏「章节」按钮后出现的章节选框里的封面也是可以去掉的
SCR-20240917-mzol
  • 在大图视图中添加「章节」按钮,可在阅读至漫画最后一页时更方便地进行章节切换,减少多余操作

  • 用网格形式来进行章节选择会更简洁、直观、高效一些
SCR-20240917-kasr SCR-20240917-kauo
  • BUG:章节切换选框错误停留在网页中

  • 🔴 搁置:在章节页显示漫画封面的全局

  • 精简「章节」按钮中的漫画封面

  • 在大图视图中添加「章节」按钮

  • 在「章节页面」中以网格形式展示漫画章节


@Thomas-Harrell
Copy link
Author

@MapoMagpie


  • 希望这个 JS 脚本对 IG 图片抓取的开发有所帮助

image


@MapoMagpie
Copy link
Owner

这个脚本看起来不涉及API的请求,基本网页有什么信息就获取什么信息,比如一个Post里有7张图片,但是它只能获取页面上预加载的两张图片。
我又研究了下instagram的api,明天看看能否解析成功。

@Thomas-Harrell
Copy link
Author

@MapoMagpie

MapoMagpie added a commit that referenced this issue Sep 24, 2024
@MapoMagpie
Copy link
Owner

* [chromewebstore.google.com](https://chromewebstore.google.com/detail/%E5%9B%BE%E7%89%87%E5%8A%A9%E6%89%8Bimageassistant-%E6%89%B9%E9%87%8F%E5%9B%BE%E7%89%87%E4%B8%8B%E8%BD%BD/dbjbempljhcmhlfpfacalomonjpalpko)

* 这个插件也可以抓取,但是不知道用的什么方法,而且也不是开源的。

这个拓展也没有请求API去获取用户所有的POST,页面上有什么图片就只能获取到什么图片。

总之现在我添加了Instagram的支持,只作用于用户的POSTS,用户的REELS大部分和POSTS重复(例外),暂时没考虑REELS的请求。

@Thomas-Harrell
Copy link
Author

Thomas-Harrell commented Sep 24, 2024

@MapoMagpie


  • 感谢开发者的工作

  • 这样一来就可以把 IG 的用户也吸引过来了

  • IG 用最多的一般是 Home 页面和 User 的 Posts 页面

  • 如果后续要适配 IG Home 页面的话,还需要去除 Sponsored 和 Suggested for you 之类的干扰内容

SCR-20240925-rdvb SCR-20240925-rewg
  • 关于「横向滚动」功能,可以看一下这个 JS 脚本,希望能带来一些帮助

  • 横向滚动这个功能非常适于阅读漫画,特别是对于使用带鱼屏显示器的用户而言

image


@Thomas-Harrell
Copy link
Author

Thomas-Harrell commented Sep 26, 2024

功能优化建议

  • 章节页面脚本控制栏的「章节」按钮功能重复了,可以精简掉
SCR-20240926-rkfe
  • 缩略图视图下的视频标签可以从 MP4 改为 Video

SCR-20240926-rlyn


  • 添加隐藏视频(Hide Video)功能,方便专注于图片的浏览(点名 IG 视频)

  • 在脚本配置面板添加「隐藏视频」选项

  • 在缩略图视图控制栏添加用于快速切换「是否显示视频」按钮


  • 再 Callback 一下之前提及的 BUG:按下按键后,网页四周出现蓝色边框
2024-09-26.21.50.46.mov

  • 精简章节页面控制栏「章节」按钮

  • 🔴 搁置:缩略图视图视频标签 MP4 -> Video

  • 添加「隐藏视频」功能


@MapoMagpie
Copy link
Owner

章节页面脚本控制栏的「章节」按钮功能重复了,可以精简掉

开屏显示的章节选择只显示一次,后面切换章节时,只能通过控制栏的“章节”按钮来进行章节切换。
还有你之前提到关于章节选择的优化:网格式选择、只显示图片的局部、精简掉图片。

网格式选择:这种方式不方便展示章节名的信息,不能快速分辨番外之类的信息,在某些站点,章节名也比较长,总之对于各个站点风格多变的章节名,目前列表式的最简单直接。

只显示封面图片的局部:我找不到合适的方式来展示章节的封面图片,有的宽有的窄,窄的适合放到侧面,宽的适合放到顶部。暂时采取裁剪成方形。
还有一种展示方式则是将方形的图片模糊变暗作为背景,在方形格子中展示原本的封面图片。chore: adjust chapters panel;
目前可以通过自定义样式将这种方式展示出来。

#chapter-thumbnail-canvas {
  filter: blur(3px) brightness(0.2);
}
#chapter-thumbnail-image-container {
  display: flex !important;
}

精简掉图片: 需要有个地方展示更多的关于章节的信息,以及封面也是一种直观的标识。现在我更新了将每个章节的第一张图片作为章节的封面的功能。feat: update chapter thumbnail when first loaded;

@MapoMagpie
Copy link
Owner

缩略图视图下的视频标签可以从 MP4 改为 Video

这个再说,目前展示的是文件MIME-type的后缀

添加隐藏视频(Hide Video)功能,方便专注于图片的浏览(点名 IG 视频)

可以,不过涉及到横向流式视图的重排,现在横向流式视图还有一些问题,等我再研究研究。

再 Callback 一下之前提及的 BUG:按下按键后,网页四周出现蓝色边框

现在应该修复了。

@Thomas-Harrell
Copy link
Author

Thomas-Harrell commented Oct 3, 2024

@MapoMagpie

  • 感谢开发者的回复,我回复的有些晚了

精简章节页面控制栏的「章节」按钮

章节页面脚本控制栏的「章节」按钮功能重复了,可以精简掉

开屏显示的章节选择只显示一次,后面切换章节时,只能通过控制栏的“章节”按钮来进行章节切换。

  • 这里意思是:只去掉「章节页面」控制栏的「章节」按钮,因为功能重复了。「缩略图页面」和「大图页面」控制栏「章节」按钮还是保持不变。

章节页面的网格排布

网格式选择:这种方式不方便展示章节名的信息,不能快速分辨番外之类的信息,在某些站点,章节名也比较长,总之对于各个站点风格多变的章节名,目前列表式的最简单直接。

  • 这个当时考虑有所欠缺,后续才发现,有些站点的命名方式是「话数 + 标题」或者「话数 + 更新日期」之类的

  • 但其实用网格来展示还是可行的,下面是 Bilibili 漫画的截图,URL

SCR-20241003-tcqg

SCR-20241004-mywj

  • 可以像 Bilibili 漫画一样,使用两种方案:章节页面使用网格、控制栏章节按钮使用列表

  • 列表方案的文字还是居中显示比较好,还有列表项间距之类的,也要调整一下

2024-10-03.22.32.5-1.mov

章节封面

只显示封面图片的局部:我找不到合适的方式来展示章节的封面图片,有的宽有的窄,窄的适合放到侧面,宽的适合放到顶部。暂时采取裁剪成方形。

  • 如果没有特别好的想法,就保持目前 1:1 的方形吧,折衷的方案

  • 其实可以先判断封面图片的长宽比例,竖向的就放在左侧,横向的就放在顶部

  • 不过还是不额外增加工作量了


还有一种展示方式则是将方形的图片模糊变暗作为背景,在方形格子中展示原本的封面图片。

  • 还是保持纯色背景比较好,减少不必要的视觉干扰

  • 而且封面图片的分辨率一般也不大,拿来当背景的话,模糊度数值要开很大才行了

精简控制栏「章节」按钮的封面

精简掉图片: 需要有个地方展示更多的关于章节的信息,以及封面也是一种直观的标识。现在我更新了将每个章节的第一张图片作为章节的封面的功能。

  • 这里精简的是控制栏「章节」按钮的图片

  • 封面图片已经出现了三次:原网站页面、脚本章节页面、脚本控制栏章节按钮

  • 所以就想精简掉脚本控制栏章节按钮里面的封面

  • 而且在控制栏出现相较于按钮而言体积硕大的图片在视觉层面很是怪异突兀

  • 不同方案的对比(我有的没的改了一下,但是没有特别细致的去抠细节):

SCR-20241003-tqzn

SCR-20241003-tqmn


  • 接上

  • 新方案「将章节第一张图片作为章节封面」,这个功能目前没发现有漫画网站在使用的

  • 有首图是章节封面的,也有首图不是章节封面的

  • 首图是章节封面(竖向、横向、第一和第二张合在一起为完整封面)

  • 剩下就是首图不是章节封面的情况(第二张才是章节封面、网站广告、汉化组广告、纯色空白页)等等

  • 又回到了章节页面封面横竖的问题上,而且还出现了其他例外的状况

  • 暂未发现有在使用这个功能的案例,也不确定这个功能是否真的是硬性需求,毕竟点进去就能看到首图了,看不到也没有多大影响

  • 所以个人看法还是减少不必要的视觉干扰,精简掉控制栏章节按钮里面的图片

缩略图视图的视频标签

缩略图视图下的视频标签可以从 MP4 改为 Video

这个再说,目前展示的是文件MIME-type的后缀

  • 这个属于锦上添花的抠细节,优先级不太高,如果比较麻烦可以不去管了

隐藏缩略图视图的视频

添加隐藏视频(Hide Video)功能,方便专注于图片的浏览(点名 IG 视频)

可以,不过涉及到横向流式视图的重排,现在横向流式视图还有一些问题,等我再研究研究。

  • 可以循序渐进一下:先在「配置」添加「隐藏视频」选项,隐藏缩略图视图的视频,刷新网页后生效,这样就不涉及到重排了吧?后面再在缩略图视图的控制栏添加「是 / 否显示视频」按钮

  • 如果「一些问题」是指:缩略图视图的横向瀑布流模式下,修改「每行数量」不起作用。这个 BUG 倒是刚想提及

杂项

再 Callback 一下之前提及的 BUG:按下按键后,网页四周出现蓝色边框

现在应该修复了。

  • 经测试,发现问题已解决,感谢开发者的修复

  • 我先把信息整合一下,修改优化一下上面的待办事项列表

  • 而且这条回答内容已经很多了,还有其他问题和想法就放在下面回答里了


@Thomas-Harrell
Copy link
Author

Thomas-Harrell commented Oct 4, 2024

@MapoMagpie

缩略图视图视频标签的文字样式

  • v4.9.2 版本,缩略图视图下,视频右上角的 MP4 标签样式在黑色背景下有些显示的小问题

SCR-20241004-cakb

自适应视图与「每行数量」

  • 在「配置 - 站点配置」中开启「自适应视图」的网站,「配置 - 每行数量」调整无法生效

  • 这是属于功能特性还是 BUG 来的?

33965D7F-C201-470E-A3DC-F4682C26821F.mp4

鼠标快捷键

  • 关于「鼠标侧键」,这个建议原义是像在网页中使用鼠标侧键进行「前进、后退」的操作一样

  • 实际功能的实现是可将鼠标的「左键(M0)、中键(M1)、右键(M2)」与衍生的「Meta、Option、Control、Shirt」按键录入在「配置 - 快捷键」中

  • 鼠标侧键未在适配中,所以按下鼠标侧键依旧会在原网页中进行「前进、后退」的操作

  • 该功能在实际操作发现一些小问题,如下面录屏所示

  • 在初次进入「配置 - 快捷键」面板时,可以进行键盘快捷键的录入。但在鼠标点击按钮外的区域后,将无法再次录入键盘快捷键,此时只能录入与鼠标相关的快捷键。需要重新打开「配置 - 快捷键」面板才能重新录入键盘快捷键。

D0D4292C-9C6D-4FA7-9219-4189B7C7C587.mp4

主图标的优化

  • 主图标可从 <🎑> 改为 < 🎑 >,添加一些视觉上的留白

  • 个人使用的是 < 🌠 >(流星),中心构图、主体清晰、背景简洁,冷暖与明暗的对比,棱角分明的星形在小尺寸下依旧保留形状样式的高辨识度

SCR-20241004-cdgt-2

脚本图标的更换

  • 关于脚本图标的修改

  • 现在脚本使用的还是 NSFW 网站的图标,而且图标的分辨率也很低

  • 新图标来自于宫崎骏执导的动画电影《魔女宅急便》里的 🐈‍⬛ 黑猫「吉吉」

  • 基于网络图片修改了颜色以及一些样式上的处理,猫咪边缘的毛边属于原图问题,而且毛边在小图下是可以忽略不计的

8c1001e93901213f400c06b65ce736d12f2e9599

SCR-20241004-cedv

  • 在暴力猴(Violentmonkey)和篡改猴(Tampermonkey)下的展示
SCR-20241004-nsao

SCR-20241004-nsdh

  • 1024 x 1024 分辨率的 PNG 图标,放在 GitHub 仓库或者图床之类的都可以,使用 // @icon URL 调用(这个就不用多说了)

  • Imgur 图床链接 https://i.imgur.com/hDU7zsB.png

待办列表

  • 缩略图视图下视频右上角 MP4 标签样式修复

  • 缩略图视图下「配置 - 站点配置 - 自适应视图」与「配置 - 每行数量」的冲突

  • 「配置 - 快捷键」面板下鼠标与键盘按键录入的优化

  • 主图标的样式优化

  • 脚本图标的更换


@stkly
Copy link

stkly commented Dec 26, 2024

不知道这的规矩,看到有人提了就在冒昧的提一下,冒犯了请多海涵
漫画网站大多有点击图片左侧跳转上一页,点击图片右侧跳转下一页的操作,装完插件习惯性点击图片结果直接关闭了,能不能增加这个支持?

@Thomas-Harrell
Copy link
Author

Thomas-Harrell commented Dec 26, 2024

@stkly

把下面的内容复制粘贴到 配置 -> 样式 里面

然后点击 Apply

这样应该会改善一些情况

.img-land-left, .img-land-right {
    width: 30%;
    height: 100%;
    top: 0%;
}

也可以把 width: 30%; 改成 width: 50%;

不过这样的话就只能通过 ESC 来退出大图模式了

@ryanlo713
Copy link

建议增加筛选功能,以便能够在 x.com 上选择仅下载特定格式(如视频)以及进行分辨率筛选。希望能对此功能进行开发。

@MapoMagpie
Copy link
Owner

建议增加筛选功能,以便能够在 x.com 上选择仅下载特定格式(如视频)以及进行分辨率筛选。希望能对此功能进行开发。

在开发计划中,不过实现的日期不会是近期。

@MapoMagpie
Copy link
Owner

@Thomas-Harrell

在初次进入「配置 - 快捷键」面板时,可以进行键盘快捷键的录入。但在鼠标点击按钮外的区域后,将无法再次录入键盘快捷键,此时只能录入与鼠标相关的快捷键。需要重新打开「配置 - 快捷键」面板才能重新录入键盘快捷键。

已修复。

鼠标侧键未在适配中,所以按下鼠标侧键依旧会在原网页中进行「前进、后退」的操作

Edge可配置鼠标侧键并可以使用,Firefox上不行,因为Firefox上的元素的鼠标事件无法捕获鼠标的几个侧键,浏览器的问题。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants