hewenguang / circle Goto Github PK

大佬你好，我试用了一下Circle，显示效果的确非常棒，希望能支持快捷键调用，自定义框选，期待油猴脚本😁

遇到的问题:

近几个版本支持了自动切换黑暗模式的功能，这对阅读体验带来了很大的帮助。
但是最近使用中我发现这和浏览器插件带来的网页反色的功能起了冲突，例如我在用一款叫Dark Mode的插件，功能就是晚上把网页上的所有颜色一反了之，平时用没问题，而一旦开启了阅读模式遇到了自动黑暗模式就会负负得正重新变成了白色底黑色字。
不知道有没有可能在阅读模式这一端做些判断和优化解决这个问题。
谢谢

问题截图:

你期望的结果:

复现网址:

遇到的问题: firefox平台使用中时，部分网页会莫名卡顿，同时浏览器提示“扩展应用circle拖慢了网页”

问题截图:

你期望的结果:

1. 希望能增加黑名单的功能，指定部分网站不会去尝试检测开启

复现网址:

Suggestions

• 1. Provide reset settings to default (workaround: reinstall)
• 2. Import/Export settings, or provide editable area like <textarea> for change
  settings (backup/import by copy/paste)
• 3. Run in batch mode (command line, given URLs, output PDFs), this should be the lowest priority
• 4. Add English README.md (like https://github.com/brookhong/Surfingkeys
• 5. Add more GitHub Topics to earn more publicity, like Chrome extension etc, i dunooo, oh how about copy them from https://github.com/brookhong/Surfingkeys

Some thought

(ignore this freely)

Highlight text with colors (regexp support):

    Especially useful for text that shows many times and long,
    like people name, location, jargon, etc

UI (scratch):

      1. Provide a list of words with borders around sorted by
         occurrences (exclude stop words), Click to toggle highlight
         the selected word.

      2. In another area, show the user's custom patterns list.

      3. Highlight text directly from user input, for example, text
         with space "foo bar", or other regexp patterns

      4. Option to automatically highlight top-N words with most
         occurrences.

Do you think it's gaudy?

Code Cleanup: Splitting Up git Commits In the Middle of a Branch - Embedded Artistry

Difference Between SMTP and IMAP | Difference Between

Hopes Circle becomes on the up-and-up :)

比如这个网页

转换之前是这样的

转换后格式就会乱掉

Python代码非常依赖缩进，影响很大，希望能修复下这个问题

遇到的问题:

1. 鼠标点击目录跳转时，页面发生跳转但目录不跟随，背景颜色无变化。（鼠标滚动时有）
2. 阅读页面设置选项过长时不能滚动，超出部分无法查看。

问题截图:

你期望的结果:

1. 鼠标点击目录跳转时目录跟随变化
2. 阅读页面的设置选项可滚动查看

复现网址:

https://sspai.com/post/66102#circle-heading-2

文章地址如下：
https://www.wsj.com/articles/phones-know-who-went-to-an-abortion-clinic-whom-will-they-tell-11659873781?mod=tech_listb_pos1#circle=on

问题表现效果为，实际原页面展示内容为P1

阅读模式开启后显示为P2

可以看到几个问题：

1. 标题识别错了（第一个打开是正确的，关闭再打开就变成图片效果了）
2. 出现了好多不知道是哪里的文章内容，因为从P1看到，文章正文是 In May...
   如P3
   
   往下滑好久才找到正文，那么上面的好几段内容是哪里的呢？
3. 还有个影响我使用的问题，开启阅读模式后，用【沙拉查词】插件查询的单词，无法在取词框中修改内容（只能删除不能打字），这样对于那些变幻语态，查询比较级原单词的时候，查询起来特别麻烦，正常网页是可以取词和修改的。
   

希望能改进，谢谢。

为什么聚焦模式没有了呢。。

稍后读功能目前只能先在右键菜单设置里加入到菜单,然后才能通过邮件菜单去使用。没有任何其它的操作入口。
是因为目前这个功能还处于测试阶段,所以还明显的放出来吗?

您好，染河

今天用了你的 Circle 查看文章，非常棒，感谢你的工作！

我本人是Emacs/EAF的作者 （项目地址 https://github.com/manateelazycat/emacs-application-framework )
EAF里面用PyQt开发了自己的浏览器。

想问一下您的circle库能否像 darkreader.js 那样支持自定义浏览器通过库的方式来使用呢？

如果已经可以了，麻烦告知一下库的使用步骤。 ;)

工作很棒，再次感谢！

希望可以一键切换成无图模式

遇到的问题:
circle阅读模式的启用似乎检测了Dom 是否加载完成.
补充一个场景,当浏览的页面里面有引用google 和Facebook的统计脚本之类的东西,页面就会一直加载不完.

问题截图:

你期望的结果:
是否可以考虑设置一个超时时间,用Promise.race,比如10s了,即使没加载完成,也可以启用circle阅读模式.
复现网址:
https://dcravey.wordpress.com/2011/03/21/using-sqlite-in-a-visual-c-application/

Circle v1.0.3 新版已经发布： chrome 版本已经发布，其他平台审核过程中

全新的解析引擎，从 9kb 缩小到 5kb 的极致轻量，解析能力做到更强大更智能，覆盖更多文章页面

页面右侧工具栏

1 “调整页面” 按钮和 “退出” 按钮替换顺序，为了方便退出 Circle

快捷键相关

1 自定义快捷键
2 解决输入或者复制等操作的冲突
3 双击触发修改为单击触发，支持单键（如：C）、组合键（如：Ctrl + C）和多组合键（如： Ctrl + Shift + C）

bug 修复

1 Edge 平台验证码冲突
2 图片等资源的重复加载

新特性

1 返回顶部
2 文章目录
3 一键隐藏文章图片
4 设置图片对齐方式

右键

1 右键进入设置页面
2 右键加入白名单
3 右键进入聚焦模式

详细功能介绍见： https://ranhe.xyz/circle-usage/

已有功能汇总：

• 自动解析正文处理后渲染
• 对渲染界面进行自定义（目前支持：字体、字体大小、页面宽度、文字间距、行高、段间距、杭缩紧、对齐方式）
• 预制 5 种主题且支持自定义主题
• 全屏（最大化）
• 自定义“解析成功自动开启”
• 自定义“纸张效果（即含有边框的背景）”
• 分享功能
• 解析正文含有下一页的文章并渲染
• 白名单
• 字体自定义
• 快捷键支持
• 重置排版设置参数
• 聚焦模式（基础版）
• 无图模式

用户反馈功能：

• 添加长文阅读的对开翻页模式
• 配置导入导出
• 识别并删除广告

和其它产品冲突：

• 鼠标手势（smart guesture）在净化后的页面不起作用

已上线平台支持：

• Chrome 浏览器
• Microsoft Edge 浏览器
• Firefox 浏览器
• Brave 浏览器 (无扩展中心，可以直接安装 Chrome 扩展)
• 油猴(紧锣密鼓开发中)

感谢大家的反馈，比心。目前 Circle 还只是一个测试小版本，我会等产品稳定之后支持其他平台。加入 QQ 讨论群： 605710052 及时获取更新消息

chrome 版本 91.0.4472.114（正式版本） (x86_64)

遇到的问题:

问题截图:

你期望的结果:

复现网址:

遇到的问题: 网站不能适配

问题截图:

你期望的结果:

复现网址: https://thenewstack.io/containerds-important-role-for-nvidias-gpu-operator-and-ai-accelerated-cloud/

遇到的问题:

這個網頁截取內容錯誤。

问题截图:

內容錯誤：

你期望的结果:

應該是這裡面的內容：

复现网址:

https://www.inside.com.tw/article/3325-59-hilarious-but-true-programming-quotes-for-software-developers

针对正常的大篇幅文章识别失败，无法正常展示情况。请在下面评论。我会在处理之后回复，感谢反馈

写上对应失败网址！写上对应失败网址！写上对应失败网址！

Feel free to close this feature if you think not worth it.

Usage:

Open page: https://ranhe.xyz/my-career/

Preparation:

0. Open Console, run the following javascript

1. Press 1 to select block element such as paragraph, div, etc as first element

2. Press 2 to select block element such as paragraph, div, etc as second element

   Details: Once two elements are selected, the common parent will be calculated, and mark the first element as starting point, you can repeat 1 or 2 to reset the element or re-calculate the common parent.

Shortcuts:
(j / k is the Vim default keybinding for moving cursor down/up)

1. Use j to navigate to the next sibling
2. Use k to navigate to the previous sibling

How do you feel? Hope this supports in Circle, the above "Preparation" section should not be needed when in read mode, because we can easily mark the first paragraph as the starting point.

The script is written by me, feel free to do whatever you want. The code is a mess, just gives you inspiration for what may need to improve. Currently, the code does not support navigate list items one by one.

Pros:

1. Don't need to move your eyes anymore, which means never lose yourself while reading
2. Easily skip the long image
3. Scroll in the middle of a line of text and scroll back a little bit manually never happens
4. Without using mouse to keep scrolling, and just one keystroke to go, scroll by element instead of pixels

// ==UserScript==
// @name        Navigation System
// @description Navgiate page easily
// @author      snowman
// @match       <all_urls>
// @require     http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js
// @version     1.0
// @grant       GM_addStyle
// @grant       GM.getValue
// ==/UserScript==

"use strict"

function off() {
  function get_page_height() {
    // https://stackoverflow.com/questions/1145850/how-to-get-height-of-entire-document-with-javascript
    let body = document.body,
      html = document.documentElement

    let height = Math.max(
      body.scrollHeight,
      body.offsetHeight,
      html.clientHeight,
      html.scrollHeight,
      html.offsetHeight
    )

    return height
  }

  const VIEWPORT_HEIGHT = window.innerHeight
  const PAGE_HEIGHT = get_page_height()

  return { VIEWPORT_HEIGHT, PAGE_HEIGHT }
}

let first, second
let status
let located
let active

let scroll_to_bottom = $e => scroll_to($e, true)
let scroll_to_top = $e => scroll_to($e, false)

let getOffset = top => {
  let { PAGE_HEIGHT, VIEWPORT_HEIGHT } = off()
  let indicator = 0

  return Math.max(0, Math.min(PAGE_HEIGHT - VIEWPORT_HEIGHT, top - indicator))
}

let scroll_to = ($e, bottom = false) => {
  let height_of_element_include_margin_border = e =>
    $(e).outerHeight(true) - parseInt($(e).css("marginTop"))

  let offset =
    $e.offset().top +
    (bottom
      ? height_of_element_include_margin_border($e)
      : -parseInt($e.css("marginTop")))

  console.log(`move to offset:`, offset)

  let y = getOffset(offset)

  _scrollTo(y)
}

function _scrollTo(y) {
  window.scrollTo({
    top: y,
    behavior: "smooth"
  })
}

let next = () => {
  let $navi_current = $(`.navi-current`)
  let $navi_next = $navi_current.nextAll(":visible").slice(0, 1)

  // if ($navi_current.length == 0) {
  //   $topics.first().addClass("navi-current")
  //   scroll_to_bottom($(`.navi-current`))
  // }

  if ($navi_next.length) {
    let true_top =
      $navi_current.offset().top - parseInt($navi_current.css("marginTop"))

    console.log("true_top", true_top)
    console.log("window.pageYOffset", window.pageYOffset)

    // https://stackoverflow.com/questions/4096863/how-to-get-and-set-the-current-web-page-scroll-position
    if (Math.abs(true_top - window.pageYOffset) > 48) {
      console.log(`scrolling to position where current element is at top...`)

      scroll_to_top($navi_current)

      return
    }

    scroll_to_bottom($navi_current)
    $navi_current.removeClass("navi-current")
    $navi_next.addClass("navi-current")
  }
}

let prev = () => {
  let $navi_current = $(`.navi-current`)
  let $navi_prev = $navi_current.prevAll(":visible").slice(0, 1)

  if ($navi_prev.length) {
    $navi_current.removeClass("navi-current")
    $navi_prev.addClass("navi-current")
    scroll_to_top($navi_prev)
  }
}

;(function() {
  jQuery(document).ready($ => {
    document.$ = $

    const internalCSS = styles =>
      $(`<style type="text/css">${styles}</style>`).appendTo("head")

    const styles = `
      *:hover {
         outline: solid 5px rgba(255, 0, 0, 0.5) !important;
      }
`

    // if you set class with "border-left", it will reflow text of element
    // results in different height, and scroll to wrong position.
    //
    // and sadly, there is not style called "outline-left"
    //
    // so use box-shadow instead:
    //   https://stackoverflow.com/questions/43729480/outline-to-only-one-side-of-div
    const internalStyles = `
.navi-current {
  box-shadow: inset 2px 0px 0px 0px red;
background-color: let(--topic-item-hover-background-color);
}
`

    internalCSS(internalStyles)

    function get_common_parent_longest(e1, e2) {
      return $(e1)
        .parents()
        .has(e2)
        .first()
    }

    function get_direct_children_of_common_parent(e1, e2) {
      e1 = $(e1)
      e2 = $(e2)

      let common = get_common_parent_longest(e1, e2)[0]

      let chain = e1
        .parents()
        .add(e1)
        .toArray()

      for (let idx = 0; idx < chain.length; idx++) {
        const element = chain[idx]

        if (element == common) {
          located = chain[idx + 1]
          return located
        }
      }
    }

    let ctre = {
      mouseover: function(e) {
        if (ctre.hoveredElement != e.target) {
          ctre.hoveredElement = e.target
          ctre.highlightElement()
        }
      },
      addHighlightStyle: function(elm) {
        ctre.markedElement.style.setProperty(
          "outline",
          "solid 5px rgba(255,0,0,0.5)",
          "important"
        )
        ctre.markedElement.style.setProperty(
          "outline-offset",
          "-5px",
          "important"
        )
      },
      highlightElement: function() {
        if (!ctre.hoveredElement) return

        if (ctre.markedElement) {
          ctre.removeHighlightStyle(ctre.markedElement)
        }

        ctre.markedElement = ctre.hoveredElement

        ctre.addHighlightStyle(ctre.markedElement)
      },
      removeHighlightStyle: function(elm) {
        ctre.markedElement.style.outline = ""
        ctre.markedElement.style.outlineOffset = ""
      },
      keyDown: function(e) {
        if (e.keyCode == 27) {
          // esc
          ctre.off()
        }

        if (e.keyCode == 68) {
          // d
          ctre.init()
        }

        if (e.keyCode == 49) {
          // 1
          status = "KEY_1"

          ctre.init()
        }

        if (e.keyCode == 50) {
          // 2
          status = "KEY_2"

          ctre.init()
        }

        if (e.keyCode == 74) {
          // j
          next()
        }

        if (e.keyCode == 75) {
          // k
          prev()
        }
      },
      init: function(e) {
        $("body").on("mouseover", ctre.mouseover)
      },
      mousedown: function(e) {
        if (status == "KEY_1") {
          first = e.target
          console.log(`set first to`, e.target)
        }
        if (status == "KEY_2") {
          second = e.target
          console.log(`set second to`, e.target)
        }

        if (status && first && second) {
          let c = get_common_parent_longest(first, second)
          console.log(`set common parent to`, c)

          active = get_direct_children_of_common_parent(first, second)
          console.log(`active:`, active)

          $(".navi-current").removeClass("navi-current")
          $(active).addClass("navi-current")
        }

        if (status) {
          status = null

          ctre.off()

          e.preventDefault()
          e.stopPropagation()

          return false
        }
      },
      off: function(e) {
        ctre.removeHighlightStyle()
        $("body").off("mouseover", ctre.mouseover)
      }
    }

    $("body").on("keydown", ctre.keyDown)
    $("body").on("click", ctre.mousedown)
  })
})()

遇到的问题: 点击扩展不能进入阅读模式

你期望的结果: 希望能够配适，进入阅读模式

复现网址: https://www.playpcesor.com/2021/02/OpenSyllabus.html

遇到的问题:

没有右键菜单（设置里已开启）

重现方法 将本扩展取消固定 然后重启浏览器 然后右键菜单就没了 不知道是不是我浏览器的问题

然后在设置里关闭右键菜单 再开启右键菜单 右键菜单又有了

遇到的问题:单纯想要打印的时候网页能显示完全，好像这个功能还没有

问题截图:

你期望的结果:

复现网址:

我调整页内边距时，只有顶部边距发生变化，左右并没有变化。
这样会造成我打印成pdf时，左右太宽。
能不能修改或者加上调整左右边距的选项？

遇到的问题:目前默认是双击C键自动切换到阅读模式

问题截图:

你期望的结果:能不能自定义成别的键？有时候ctrl + C，但是相信很多人像我一样都会不自觉地按住ctrl，然后多按几次C，这样忽然就切换到阅读模式了，很烦

复现网址:

遇到的问题:打印重新排版的页面时，标题、功能按键会在各页重复出现

你期望的结果:标题不重复出现，功能按键不显示

遇到的问题:
启用 uBlock Origin 时在 Firefox 上不工作。这个扩展似乎是注入css，不知为何背景和文字颜色相同。
问题截图:

你期望的结果:

复现网址:
我测试的所有网页，包括简书和CSDN,cnblog 都是同样的白屏

如题。

发现很难准确描述，请试一次打印成pdf就知道了，要不止一页的pdf。

遇到的问题:首次输入验证码，报错验证吗错误，再次输入新的验证码，成功登录。注销，输入验证码，报错验证码错误，再次输入成功登录。
问题截图:内部系统不能截图

你期望的结果:

复现网址:

体验了下，排版速度是真的快，就是第一次安装使用的时候，挂代理初始化不成功，提示连接网络重试，关了代理重新加载就正常了。
目前有两个小建议：
1、打开阅读模式添加快捷键支持（你已经有规划了）。
2、排版页设置，添加一个重置为默认参数，因为有时候想自定义调调，都改了之后，又觉得好像没有默认好看，这个时候又全都改回去，有点麻烦，哈哈哈。

其实还有个建议，就是添加长文阅读的对开翻页模式，我个人觉得阅读长文的时候，滚动阅读没有对开翻页来的舒服，效率也不及对开翻页（仅指长文），这方面我觉得做的好的就是多看了，多看阅读示例当然，只是个建议。

感谢你的工作🤞

遇到的问题:链接块解析异常

问题截图:

你期望的结果:

复现网址:
https://post.smzdm.com/p/az5gwonr/

但我其实想要个【隐藏文字】… ！！

有移动版的吗？经常用的是手机

遇到的问题:

在浏览部分使用了Pjax技术的网页时，可能会出现块个问题

1. 着陆页为首页，点进文章，点击Circle进入阅读模式，无法识别正文
2. 点击Circle进入阅读模式，退出Circle，进入该网站的另一篇文章，点击Circle进入阅读模式，此时显示的还是之前的文章
3. 标题识别错误

你期望的结果:

页面内容更新时，Circle能自动更新标题及正文

复现网址:

https://iiong.com
https://haremu.com
https://www.ihewro.com

遇到的问题:
stylish设置的CSS不起作用了

问题截图:

你期望的结果:

复现网址:

没有找到 自研的正文解析引擎 这个相关的代码

遇到的问题:
无法在阅读模式中使用 element.scrollIntoView() 或者 window.scrollTo({top: 1000})

复现网址:
https://ranhe.xyz/my-career/

原网页支持href和id页内跳转，circle模式下希望保留href、id并支持跳转

eg：https://w.cnblogs.com/timlly/p/11471507.html?utm_source=wechat_session&utm_medium=social&utm_oi=895719691941736448

遇到的问题:
总结后面的段落不见了

复现网址:
https://mp.weixin.qq.com/s/zbcMXoJLG2ied3Ei82noaA

其实我用的最多的是聚焦模式，因为不想改变网站原有的布局。 聚焦模式也能起到遮挡广告的效果，并且不需要重新加载页面。

遇到的问题:
输入CC 会自动进入阅读模式
问题截图:

你期望的结果:
输入CC 不会自动进入阅读模式
复现网址:
任何支持阅读模式的

双拼一打cc 就进入阅读模式，很难受

可以上架 Microsoft Edge 扩展商店吗？
还有就是 Firefox 有机会吗？🤣

遇到的问题: 网站未配适

问题截图:

你期望的结果: 进入阅读模式

复现网址: https://www.thepaper.cn/

官网查遍了都没有找到联系方式，只有一个circle阅读助手 产品交流，而且是在常见问题里面的立即贡献，但是我不想用这个, 而且太多层跳转了

我没找到邮箱联系方式，能不能把整个联系方式独立出来？不要写在常见问题里面，这个不应该放在常见问题里面

比如 新增一栏 联系我们 在 导航栏上

好吧， 我找到了联系我 | Circle 阅读助手, 不过是通过谷歌搜索site:circlereader.com email找到的

ADDED:

原来在如何支持 Circle？ | Circle 阅读助手翻译 Circle也可以找到邮箱联系方式 :|， 我不想翻译， 只想提报告， 所以忽略掉了...

我原来的问题就是：
更新日志能不能带上时间戳？:)))

遇到的问题:
给经常看的网站加上白名单后，重新打开链接，没有自动启用Circle渲染，查看设置-->白名单,可以看到域名已经加进去了。
另外，浏览器扩展配置页面，有个允许扩展何处运行的配置项，
我把白名单域名添加进去，就可以自动触发Circle了，但这样太麻烦了，
我又尝试修改该配置为“所有站点”，结果就是所有站点都会自动触发Circle。

总体感觉就是白名单无效，白名单的域名应该手动在扩展配置页面手动加入允许的站点。

遇到的问题: 在浏览网页时连按F键会弹出聚焦页面元素的功能，非常打扰上网体验。（应该是circle插件造成的吧？）也不清楚这是个什么feature。

问题截图:

请问登录了账户有什么作用?
pro账户有什么用?
能云同步配置吗?

使用firefox开发者创建的扩展程序无法使用(是这个issue发布时的最新版本)

希望也可以把日期、作者智能提取出来。

遇到的问题: CSDN代码行号跟代码分离，呈现下面的效果

问题截图:

你期望的结果:
行号和代码在一行

复现网址:
https://blog.csdn.net/weixin_42927959/article/details/81590667