Git Product home page Git Product logo

hewenguang / circle Goto Github PK

View Code? Open in Web Editor NEW
450.0 6.0 55.0 570 KB

让网页赏心悦目、让阅读回归初心。Circle 阅读模式提供更隐私、更轻松、更舒适的网页阅读体验

Home Page: http://circlereader.com/

License: MIT License

JavaScript 3.98% Less 7.34% HTML 0.07% TypeScript 88.58% Shell 0.03%
chrome reader-mode distraction-free-reader chrome-reader chrome-reader-mode extensions

circle's Introduction

让网页赏心悦目,让阅读回归初心 - Circle 提供更舒适的阅读体验

由染河全职开发的产品。v2.5.0 即将发布。认可我的工作,请我喝杯咖啡 ☕️

为了不饿死自己,v2.0.0 版加入高级功能。由于集成了用户体系,决定 v2.0 之后的版本部分开源更新。如果有同学对识别算法感兴趣,可以看这里

2022-10-10 采用 ts 重构,加入了插件体系,集成了 mainfest v3 版本热更新。

广而告之

如果满意 Circle 阅读助手的识别能力,你的公司或者业务也刚好需要相关的功能,我们提供有私有化部署的方案,请联系我商务合作

组成

当前仓库包含 Circle 阅读助手的整体架构 - 插件体系和勾子机制。不包含:帐户体系、高级功能和识别算法。

开发和构建

  • 执行 yarn 安装依赖
  • 执行 yarn start 后生成的 dev 文件夹下是用来调试的代码
  • 执行 yarn prod 生成的 zip 文件夹下就是可运行的扩展代码

介绍

简约、优雅、轻量,Circle 阅读助手可以是一个简单的阅读辅助工具,可以是一个小说阅读神器、可以是一个故事机,也可以是一个资料整理助手。

比 Safari 阅读模式更强大的阅读助手浏览器扩展 Circle ,是浏览器自带阅读模式的扩充和完善;是电脑阅读网页、看小说、看新闻的不二神器;具有快捷键支持、自定义样式、自定义字体、自定义主题、自动滚动、自动加载下一页、大声朗读、文章大纲(outline)、返回顶部、分栏目阅读、打印阅读模式格式化之后的网页、支持浏览器自带的翻译等阅读辅助类功能。

自研的解析引擎,解析更快速、解析能力更智能。自研的排版引擎,自动屏蔽 html 上的广告和噪音,和格式跑掉说拜拜。纯 js 开发的 Circle 阅读助手浏览器扩展,已经上线 Google Chrome 浏览器、火狐浏览器、Edge 浏览器、360 浏览器、Opera 浏览器。免费下载安装 Circle

关于 Circle 阅读助手

广告太多分散注意力、配色太丑不忍直视、字体太小看不清、排版太乱找不到正文,阅读真的需要这么困难吗?

有没有产品可以把网页中的内容提取出来重新整理,渲染成更方便阅读的排版界面呢?

能够做到这些的产品很多,这类产品最大的问题就是识别正文效果太差,识别失败、识别成非正文、漏掉正文、漏掉主图、图片裂开等都是常事。在我看来目前做的比较好的是苹果系统的 Safari 浏览器。即使是 Safari 浏览器也或多或少的存在此类问题,除此之外 Safari 的设置界面太简单,定制型不够灵活

为了解决上面普遍存在的问题,Circle 诞生了。Circle 是一款不太一样的浏览器扩展程序,我们采用自研的正文解析引擎,识别成功率大大提高,甚至于比 Safari 还要智能。只需要单击一下(或许不需要),Circle 还你最纯粹的阅读体验,为你更好的阅读保驾护航。如果你正在寻找一款极度轻量化的阅读辅助产品,Circle 也许可以打动你

Circle 识别效果

上图就是 Cirlce 的默认界面。舒适美观的界面、极易上手的操作、灵活丰富的配置、强大智能的识别算法共同成就了 Circle

舒适美观的界面

为了打造更舒适的阅读体验, Circle 内置了 5 款绚丽主题。如图所示:

Circle 舒适美观的界面

自定义主题

正如莎士比亚所说 “ 一千个观众眼中有一千个哈姆雷特 ” 不同的人有不同的阅读喜好,内置的主题做不到让所有人都喜欢,所以我们支持灵活的自定义配置。如下图所示:

Circle 灵活的自定义配置

不仅仅是文字颜色、背景颜色。Circle 还支持自定义滚动条、自定义背景渐变和图片(图片暂未上线)等等

跟随系统

针对白天和夜晚的光线不同,阅读的时候为了更舒服,Circle 提供跟随系统自动切换主题功能。且支持自定义不同时间的主题

Circle 跟随系统

独创的网页多栏阅读

大屏幕用户的福利。两栏、三栏、四栏?你说了算!不浪费屏幕上的每一寸空间。

Circle 独创的网页多栏阅读

用了会上瘾的多页解析

当前页浏览其他页面内容,小说党的最爱。滚动到页面底部,秒开其他页面的内容

Circle 用了会上瘾的多页解析

大声朗读、自动滚动、跟随系统切换主题、查找关键字、删除内容块、现场编辑等等,只为你更好的阅读

极易上手的操作

为了让用户快速上手,Circle 整个操作流程都是经过设计的。如下列举部分逻辑:

“选项页面” 默认是浏览器单独的页面,考虑到用户在浏览文章的时候想修改配置又不想离开当前页面,为此 Circle 支持当前页面直接访问选项配置页面

Circle 支持直接打开选项页面

为了方便用户沉浸式阅读,Circle 支持多页加载(需要满足存在下页链接的条件)

为了让用户零等待,程序会后台解析页面。正常浏览多页文章时,完全感觉不到加载的动作

为了方便用户多页浏览退出时找不到最后在什么页面,退出 Circle 会自动跳转到最后一页

为了急速展示页面,Circle 取消了 loading 页面,先展示正文,后格式化。实现秒开格式化页面

为了方便用户退出当前页面还需要关闭网页,Circle 提供 “退出关闭” 选项,开启之后退出 Circle 当前页面也会同时关闭

更多细节欢迎自己体验

灵活丰富的配置

借助于 Circle ,你可以调整字体,字体大小,字体间距、字体行高,字体粗细、段落间距,页面宽度等等。如下图所示:

Circle 灵活丰富的配置

强大智能的识别算法

借助于自研解析引擎的能力,Circle 更智能更强大

正文识别效果对比

你可以分别使用 Circle 和其他相关产品访问如下网址对比识别效果

http://www.shb.cas.cn/kjjz2016/201607/t20160712_4639424.html

原始网页效果

Circle 阅读模式三方原始网页

识别效果对比

Circle 阅读模式效果对比图

上面的网址内容结构不够规范,对于大部分产品都是从中间部分开始展示,漏掉了大段的前半部分正文( Safari 也不例外),除此之外,请大家注意识别之后的文章标题!!!!

主图识别效果对比

不仅可以完美识别标题和正文,Circle 还可以智能识别主图。业界大部分产品仅仅识别正文,正文主图对于理解正文有时候也是至关重要的。 如下图对比:

infoQ 一篇文章: https://www.infoq.cn/article/m30vgkxw9alvzo9czoay

Circle 对比 infoQ

Circle 识别的效果

Circle 识别 infoQ

Safari 正文都识别不出来,其他产品大多识别失败

多页解析识别

对于当前文章页面含有下一页链接时,Circle 可以自动加载其他页面追加到当前页面

Circle 阅读模式多页加载

其他功能介绍

打印文章

借助于 Circle 阅读模式你可以打印任何文章。以 “如何看待市场监管总局对阿里巴巴垄断行为作出 182.28 亿行政处罚?会带来哪些影响?”为例展示如何使用 Circle 阅读模式打印知乎文章

原网页如下:

Circle 阅读模式如何打印知乎文章

直接右键打印效果如下:

Circle 阅读模式如何打印知乎文章

安装启用 Circle 之后如下:

Circle 阅读模式解析知乎文章

右键打印如下:

Circle 阅读模式打印知乎文章

直接选择文章(聚焦模式已下线)

Circle 不存在任何预先写好的模版,全部使用算法识别正文。所以对于 Circle 而言,不存在所谓的小众网站,只要是正文,就可以识别并展示。所以 Circle 做到了秒开,只要页面加载完成,立即就可以展示格式化之后的效果

但是算法无法做到 100% 完美效果,为此对于无法识别的正文,你可以使用直接选取正文,噪音信息就可以消失

使用入口(快捷键 f 和右键菜单)

大纲展示

当文章中含有子级目录时会统一展示在页面左侧,不含子目录的文章页面不会显示。默认是折叠的,你可以固定和隐藏

Circle 大纲展示

返回顶部

通过“返回顶部”可以快速返回页面最顶部,滚动鼠标离开顶部才会显示滚动到顶部按钮

白/黑名单

当前文章网址加入白/黑名单后,访问相关页面匹配到会自动开启。需要匹配整站可以修改网址只保留域名提交即可

同时你可以搜索和翻页查看已存在的白/黑名单

Circle 白/黑名单

快捷键

通过快捷键模块,你可以自定义快捷键,且支持开关快捷键和全局开关快捷键系统

Circle 快捷键系统

右键菜单

通过右键菜单模块,你可以开关右键菜单和全局开关右键菜单系统

Circle 右键菜单系统

配置中心

通过配置中心,你可以导入导出你的设置信息。借助于高级帐户体系,你可以开启自动同步配置,方便不同设备的同步

Circle 配置中心

自定义样式

尽管我们的设置页面已经足够灵活,但是仍然存在无法实现的效果,对于专业人员,你可以通过自定义样式实现你自己的任何想法 💡

本地文件支持

你可以在浏览器使用本地文件,如 markdown 文件和纯文本文件,Circle 也可以识别。

真实用户评价

文海*:非常棒!简洁,功能也简单,解析特别快,用起来舒适!千万不要做复杂化了!!找了 N 久,是真的,几年了,每隔段时间就找阅读插件,只有这款最符合我的需求~

Andong Wang: Awesome!Apple 上习惯了 Safari 的阅读模式,这个插件一使用我就知道是我想要的感觉了,简洁美观

Yanyan su: 值得五星推荐,比简悦简约不要太多!希望作者做一下导出功能。

chuanliang zang:Reader View、简悦... 还有好几款阅读模式都在用,现在只保留了前面两个,简悦因为交了钱也退不了,功能繁杂不太想用。平常 Reader View 用的多一些,刚才试用了一下 Circle,一下子就喜欢上了。最喜欢的就是能方便的调节页面宽度、行距、段距(!!),非常的推荐。

aione:之前用过一个差不多的插件,外国的,十分顺心。这个和我之前用的那个差不多。 我不是来推荐之前那个插件的,我的意思是,可以遇见这么好同类的插件,也是十分不易的

Aeon Khronos:小众软件推荐过来的,确实好用!!!!

LI Yi:很快很简洁,感谢开发者!非常期待黑白名单~

曾小*:小巧,漂亮,高效!

问题反馈

意见建议、产品缺陷和其他任何问题都可以在 https://support.qq.com/products/317910 反馈

支持我

如果觉得 Circle 还不错,欢迎升级为高级帐户支持 Circle 更好的发展。你也可以在这个页面捐赠支持我

circle's People

Contributors

hewenguang avatar oldpanda avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

circle's Issues

右键菜单消失

遇到的问题:

没有右键菜单(设置里已开启)

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

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

Edge 上白名单未生效

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

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

能不能自定义快捷键?

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

问题截图:

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

复现网址:

黑暗模式和浏览器插件冲突的问题

遇到的问题:

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

问题截图:

你期望的结果:

复现网址:

打印设置优化

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

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

新功能

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

产品功能规划和建议统一评论在这(加入 QQ 讨论群 605710052 获取更新消息)

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)在净化后的页面不起作用

已上线平台支持:

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

支持自定义浏览器吗?

您好,染河

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

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

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

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

工作很棒,再次感谢!

期待新功能

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

问题截图:

你期望的结果:

复现网址:

Feature Request: Keyboard driven navigation

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

Usage:

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

Preparation:

  1. Open Console, run the following javascript

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

  3. 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)
  })
})()

WSJ似乎不支持?

文章地址如下:
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
image
阅读模式开启后显示为P2
image
可以看到几个问题:

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

希望能改进,谢谢。

功能建议

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

关于页面识别失败评论在这里

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

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

连按F键的快捷功能可以关闭吗?

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

问题截图:
Uploading Xnip2021-04-01_10-48-36.jpg…

没有联系方式吗?比如邮箱?

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

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

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

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

ADDED:

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


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

启用 uBlock Origin 时在 Firefox 上不工作

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

你期望的结果:

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

影响验证码刷新

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

你期望的结果:

复现网址:

需要黑名单功能

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

问题截图:

你期望的结果:

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

复现网址:

一些建议

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

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

感谢你的工作🤞

在浏览使用了 Pjax 技术的网站时出错

遇到的问题:

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

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

你期望的结果:

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

复现网址:

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

输入CC 会自动进入阅读模式

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

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

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

circle阅读模式的启用问题

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

问题截图:

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

聚焦模式可以有吗

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

Provide reset settings to default

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
image
Difference Between SMTP and IMAP | Difference Between
image

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.