hewenguang / circle Goto Github PK
View Code? Open in Web Editor NEW让网页赏心悦目、让阅读回归初心。Circle 阅读模式提供更隐私、更轻松、更舒适的网页阅读体验
Home Page: http://circlereader.com/
License: MIT License
让网页赏心悦目、让阅读回归初心。Circle 阅读模式提供更隐私、更轻松、更舒适的网页阅读体验
Home Page: http://circlereader.com/
License: MIT License
遇到的问题:
问题截图:
你期望的结果:
复现网址:
遇到的问题:单纯想要打印的时候网页能显示完全,好像这个功能还没有
问题截图:
你期望的结果:
复现网址:
遇到的问题:
总结后面的段落不见了
如题。
发现很难准确描述,请试一次打印成pdf就知道了,要不止一页的pdf。
遇到的问题:
stylish设置的CSS不起作用了
问题截图:
你期望的结果:
复现网址:
遇到的问题: firefox平台使用中时,部分网页会莫名卡顿,同时浏览器提示“扩展应用circle拖慢了网页”
问题截图:
你期望的结果:
复现网址:
遇到的问题:
没有右键菜单(设置里已开启)
重现方法 将本扩展取消固定 然后重启浏览器 然后右键菜单就没了 不知道是不是我浏览器的问题
然后在设置里关闭右键菜单 再开启右键菜单 右键菜单又有了
稍后读功能目前只能先在右键菜单设置里加入到菜单,然后才能通过邮件菜单去使用。没有任何其它的操作入口。
是因为目前这个功能还处于测试阶段,所以还明显的放出来吗?
遇到的问题:
circle阅读模式的启用似乎检测了Dom 是否加载完成.
补充一个场景,当浏览的页面里面有引用google 和Facebook的统计脚本之类的东西,页面就会一直加载不完.
问题截图:
你期望的结果:
是否可以考虑设置一个超时时间,用Promise.race,比如10s了,即使没加载完成,也可以启用circle阅读模式.
复现网址:
https://dcravey.wordpress.com/2011/03/21/using-sqlite-in-a-visual-c-application/
遇到的问题:
无法在阅读模式
中使用 element.scrollIntoView()
或者 window.scrollTo({top: 1000})
其实我用的最多的是聚焦模式,因为不想改变网站原有的布局。 聚焦模式也能起到遮挡广告的效果,并且不需要重新加载页面。
Chrome extension
etc, i dunooo, oh how about copy them from https://github.com/brookhong/Surfingkeys(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.
Code Cleanup: Splitting Up git Commits In the Middle of a Branch - Embedded Artistry
Difference Between SMTP and IMAP | Difference Between
请问登录了账户有什么作用?
pro账户有什么用?
能云同步配置吗?
针对正常的大篇幅文章识别失败,无法正常展示情况。请在下面评论。我会在处理之后回复,感谢反馈
写上对应失败网址!写上对应失败网址!写上对应失败网址!
遇到的问题: 点击扩展不能进入阅读模式
你期望的结果: 希望能够配适,进入阅读模式
使用firefox开发者创建的扩展程序无法使用(是这个issue发布时的最新版本)
原网页支持href和id页内跳转,circle模式下希望保留href、id并支持跳转
官网查遍了都没有找到联系方式,只有一个circle阅读助手 产品交流,而且是在常见问题里面的立即贡献,但是我不想用这个, 而且太多层跳转了
我没找到邮箱联系方式,能不能把整个联系方式独立出来?不要写在常见问题里面,这个不应该放在常见问题里面
比如 新增一栏 联系我们 在 导航栏上
好吧, 我找到了联系我 | Circle 阅读助手, 不过是通过谷歌搜索site:circlereader.com email
找到的
原来在如何支持 Circle? | Circle 阅读助手翻译 Circle
也可以找到邮箱联系方式 :|, 我不想翻译, 只想提报告, 所以忽略掉了...
我原来的问题就是:
更新日志能不能带上时间戳?:)))
遇到的问题:
近几个版本支持了自动切换黑暗模式的功能,这对阅读体验带来了很大的帮助。
但是最近使用中我发现这和浏览器插件带来的网页反色的功能起了冲突,例如我在用一款叫Dark Mode的插件,功能就是晚上把网页上的所有颜色一反了之,平时用没问题,而一旦开启了阅读模式遇到了自动黑暗模式就会负负得正重新变成了白色底黑色字。
不知道有没有可能在阅读模式这一端做些判断和优化解决这个问题。
谢谢
问题截图:
你期望的结果:
复现网址:
遇到的问题: CSDN代码行号跟代码分离,呈现下面的效果
你期望的结果:
行号和代码在一行
复现网址:
https://blog.csdn.net/weixin_42927959/article/details/81590667
遇到的问题:
给经常看的网站加上白名单后,重新打开链接,没有自动启用Circle渲染,查看设置-->白名单,可以看到域名已经加进去了。
另外,浏览器扩展配置页面,有个允许扩展何处运行的配置项,
我把白名单域名添加进去,就可以自动触发Circle了,但这样太麻烦了,
我又尝试修改该配置为“所有站点”,结果就是所有站点都会自动触发Circle。
总体感觉就是白名单无效,白名单的域名应该手动在扩展配置页面手动加入允许的站点。
希望可以一键切换成无图模式
为什么聚焦模式没有了呢。。
可以上架 Microsoft Edge 扩展商店吗?
还有就是 Firefox 有机会吗?🤣
希望也可以把日期、作者智能提取出来。
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/
已有功能汇总:
用户反馈功能:
和其它产品冲突:
已上线平台支持:
感谢大家的反馈,比心。目前 Circle 还只是一个测试小版本,我会等产品稳定之后支持其他平台。加入 QQ 讨论群: 605710052 及时获取更新消息
遇到的问题:
输入CC 会自动进入阅读模式
问题截图:
你期望的结果:
输入CC 不会自动进入阅读模式
复现网址:
任何支持阅读模式的
双拼一打cc 就进入阅读模式,很难受
您好,染河
今天用了你的 Circle 查看文章,非常棒,感谢你的工作!
我本人是Emacs/EAF的作者 (项目地址 https://github.com/manateelazycat/emacs-application-framework )
EAF里面用PyQt开发了自己的浏览器。
想问一下您的circle库能否像 darkreader.js 那样支持自定义浏览器通过库的方式来使用呢?
如果已经可以了,麻烦告知一下库的使用步骤。 ;)
工作很棒,再次感谢!
大佬你好,我试用了一下Circle,显示效果的确非常棒,希望能支持快捷键调用,自定义框选,期待油猴脚本😁
没有找到 自研的正文解析引擎
这个相关的代码
有移动版的吗?经常用的是手机
Usage:
Open page: https://ranhe.xyz/my-career/
Preparation:
Open Console, run the following javascript
Press 1
to select block element such as paragraph, div, etc as first element
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)
j
to navigate to the next siblingk
to navigate to the previous siblingHow 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:
// ==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)
})
})()
遇到的问题:目前默认是双击C键自动切换到阅读模式
问题截图:
你期望的结果:能不能自定义成别的键?有时候ctrl + C,但是相信很多人像我一样都会不自觉地按住ctrl,然后多按几次C,这样忽然就切换到阅读模式了,很烦
复现网址:
遇到的问题:
在浏览部分使用了Pjax技术的网页时,可能会出现块个问题
你期望的结果:
页面内容更新时,Circle能自动更新标题及正文
复现网址:
遇到的问题:打印重新排版的页面时,标题、功能按键会在各页重复出现
你期望的结果:标题不重复出现,功能按键不显示
遇到的问题:首次输入验证码,报错验证吗错误,再次输入新的验证码,成功登录。注销,输入验证码,报错验证码错误,再次输入成功登录。
问题截图:内部系统不能截图
你期望的结果:
复现网址:
遇到的问题: 网站不能适配
问题截图:
你期望的结果:
复现网址: https://thenewstack.io/containerds-important-role-for-nvidias-gpu-operator-and-ai-accelerated-cloud/
体验了下,排版速度是真的快,就是第一次安装使用的时候,挂代理初始化不成功,提示连接网络重试,关了代理重新加载就正常了。
目前有两个小建议:
1、打开阅读模式添加快捷键支持(你已经有规划了)。
2、排版页设置,添加一个重置为默认参数,因为有时候想自定义调调,都改了之后,又觉得好像没有默认好看,这个时候又全都改回去,有点麻烦,哈哈哈。
其实还有个建议,就是添加长文阅读的对开翻页模式,我个人觉得阅读长文的时候,滚动阅读没有对开翻页来的舒服,效率也不及对开翻页(仅指长文),这方面我觉得做的好的就是多看了,多看阅读示例当然,只是个建议。
感谢你的工作🤞
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.