mika-cn/maoxian-web-clipper

[FR] 增加摘录时选项 - 隐藏所有图片

Azona77 opened this issue · 5 comments

Azona77 commented

某些页面只需要保留文本无需下载图片
对于不需要摘录图片的页面，我预载了以下JavaScript来临时隐藏/显示所有图片元素，希望能增加选项到保存选项浮窗中

// 监听键盘事件
document.addEventListener('keydown', function(event) {
    // 检查是否按下 Ctrl+Shift+Q
    if (event.ctrlKey && event.shiftKey && event.key === 'Q') {
        // 阻止默认行为
        event.preventDefault();
        
        // 获取所有 img 元素
        var images = document.querySelectorAll('img');
        
        // 遍历并隐藏每个 img 元素
        images.forEach(function(img) {
            img.style.display = (img.style.display === 'none') ? 'block' : 'none';
        });
    }
});
mika-cn commented

你所說的這些無需保存圖片的網頁，是一個怎樣的使用場景。是在同一個網站上都不需要保存嗎？還是一些某幾個不需要保存？

目前你可以使用『毛線助手』功能，做這個事情。它支持你： 對於某個網址模式下的網頁的狀態進行修改（包括隱藏圖片）。

Azona77 commented

你所說的這些無需保存圖片的網頁，是一個怎樣的使用場景。是在同一個網站上都不需要保存嗎？還是一些某幾個不需要保存？

目前你可以使用『毛線助手』功能，做這個事情。它支持你： 對於某個網址模式下的網頁的狀態進行修改（包括隱藏圖片）。

固定排版的可以用毛線助手隐藏，但仍有需要临时隐藏的场景。

例如部分repo的readme中，会有联系方式的二维码、star history图、赞助作者的链接等等，这类内容很难和其他说明图区分开。

我碰到这类场景，需要用插件注入的JavaScript临时隐藏所有图片元素，从而只摘录纯文本。

mika-cn commented

你所说的这种：主内容区有个别无需保存的图片，其他图片又需要保存的情况，只能通过临时删除，即在框选时，选中无需保存的图片，按 Delete 建删除。

然后你说的第二种：所有图片都不保存的情况，这个目前的「毛线助手」确实无法实现，但它已经具备可实现的潜力。现在每个 action 都可以打标签，然后在执行时，根据每个 action 的标签，决定这个 action 要不要执行。

比如：我们定义了一个 action，其功能为隐藏所有的图片，然后为其打上一个 text-only 的标签。然后默认情况下，裁剪流程是不带 text-only 标签的，所以默认不执行，只有在触发裁剪流程时，激活 text-only 标签才触发。

现在初步想法是，可以自定义菜单项，比如设置一个菜单项为“无图裁剪"，其绑定的动作为激活 text-only 标签，并进入裁剪流程。然后当你需要时，你就选择对应的菜单项就行了。但是比较麻烦的是，目前支持在下拉菜单中选择存储格式，所以有选择存储格式需求的用户，需要定义重复的两个菜单项： “无图裁剪为 HTML” 和 “无图裁剪为 Md”。

之所以想在进入裁剪流程之前就决定好本次裁剪所用的标签，是因为助手是个比较独立的模块，如果在裁剪的过程中加入了助手的UI 逻辑（比如：选择标签），就会破坏原来裁剪流程的简单性，并让整个过程复杂起来。

这个需求放在助手里是合理的，助手的核心功能就是对网页状态的修改，而且其近期加入了执行自定义脚本的功能。 目前我还没有决定到底，如何实现比较好，容我再想想吧，也许有更好的方法呢。

  • ❤️1
mika-cn commented

目前已经实现用户命令（自定义命令），配合毛线助手的动作标签。可用不同的快捷键，激活不同的标签，从而控制毛线助手定义的动作，哪些执行，哪些不执行。

具体流程如下：

配置助手和定义用户命令

首先启用助手功能，并定义如下自定义Plan。注意我们为隐藏所有图片这个动作，添加了标签 text-only。

{
  "name": "github.readme",
  "pattern": "https://github.com/*/*",
  "actions": [
     {"pick": "article"},
     {"hide": ["img", "picture"], "tag": "text-only"}
  ]
}

然后进入扩展的 设置 > 用户命令 页面，定义一个用户命令，如下：

{
  "clipTextOnly": {
    "exec": "startClip",
    "args": [{
      "config": {"saveFormat": "html"},
      "badge": {"text": "txt", "textColor": "white", "backgroundColor": "#00ff00"},
      "extra": {
         "assistant": {"tagStatus": "text-only"}
      }
    }]
  }
}
  • 定义了一个名字叫做 clipTextOnly 的用户命令
  • exec 指定了执行动作 startClip （开始裁剪）
  • args 定义了执行动作所用的参数：
    • config 那一行，指定了裁剪的存储格式为 html
    • badge 那一行，指定了扩展图标（小剪刀）上方的提示文字为 txt， 文字颜色为白色（white）， 背景色为绿色（#00ff00）
    • extra.assistant 那一行是重点，指定了本次裁剪，标签的激活状态，此处激活了一个叫 text-only 的标签

注意： 上方为了演示，给出了目前三个 startClip 动作的三个参数，实际它们都是可选的。

用户命令文档
tagStatus 文档

绑定用户命令并设置快捷键

当我们定义好了自定义命令后，就可以绑定到对应的快捷键了，可在 设置 > 用户命令 页面找到设置的地方。MaoXian 默认提供了一些快捷键插槽，假如我们要把它绑定到插槽 4，就直接在对应的输入框，填入自定义命令的名字，如： clipTextOnly。

最后，再去扩展中心，设置扩展的快捷键，把插槽 4 的快捷键设置成你想要的。

本次更新可能丢失快捷键

如果之前修改了扩展默认的快捷键，本次更新后，可能会丢失，需要重新设置。

  • 👍1
  • 🚀1
Pinwee commented

不知道楼主有没有用过油猴脚本。里面有个脚本能直接控制网站页面的图片显示隐藏很方便
https://greasyfork.org/zh-CN/scripts/496216-nopic-%E4%B8%80%E9%94%AE%E9%9A%90%E8%97%8F-%E6%98%BE%E7%A4%BA%E5%85%A8%E9%A1%B5%E9%9D%A2%E5%9B%BE%E7%89%87