Takitooru 发表于 2022-11-5 21:20

油猴,快捷便笺,快速记录页面感兴趣的信息

使用场景:
有时候我们需要快速记录一些页面上的信息,以往都是打开某种特定软件或记事本等等,但是记录时候又需要不断切换界面,操作极度不友好,又或仅仅记录一些信息就懒得打开某种特定软件。
使用油猴脚本创建一个快捷便笺,就可以快速记录信息,比如:看网课时候,看教程时候,刷视频时候,又或者看到一些感兴趣的内容,需要记录一些信息等等。
快捷便笺还支持把记录的信息保存为txt文档,还可以调整输入框透明度,方便不遮挡内容而快速输入信息。


脚本的效果截图



一些说明
有条件以及技术,可以扩展把记录保存到云端接口,甚至可以生成二维码,达到pc端与移动设备互通访问记录信息。
只需要写一个后端接口文件,然后把保存为txt改成post方式到接口,其余就任凭自由发挥了。
一键安装版,可通过油猴脚本直接安装,脚本已经上传到油猴资源库
注释版,可自行下载参详,代码有详细注释,也方便有对这方面感兴趣的新人学习。

一些疑问
问:油猴有高级API函数,为什么不用?,而使用js原生创建?
答:快捷便笺着重于js使用技巧及语法,而且通用性强,可扩展其他功能,更重要对于js初学者有学习机会。(正所谓看100遍作业不如动手做10遍作业)

问:在线安装了,为什么没有效果?
答:常见的典型浏览器缓存问题之一,请按照截图方法操作即可。

2-上述依然无效,请打开浏览器F12开发者模式,查看控制台报错信息,并截图反馈。

问:可不可以这样这样,然后这样那样?
答:你尽管反馈意见或建议,我假装看不到((狗头))

问:这里那里我不喜欢,能不能修改一下?
答:你已经不是菜逼了,要学会自己动手丰衣足食。

最后结语
以上,该说的都说了,希望快捷便笺能帮到你,成为得力助手辅助脚本之一。
如你对这方面感兴趣,可自行下载注释版本,然后愉快玩耍去吧。



部分核心代码

                var Newdiv = document.createElement("div");
                Newdiv.id = "knote";
                Newdiv.innerHTML = '<span class="kjbtn">快捷便笺</span>';
                var jsslider = '<div class="slider">透明度:<input class="sliderinput" type="range" min="30" max="100" step="1" value="100"></div>';
                var jsavetxt = '<div class="savetxt">保存为txt</div>';
                Newdiv.innerHTML += '<div class="boxhide"><div class="jstoolbar"><div class="sclose">X</div>' + jsslider + jsavetxt + '</div><textarea class="stextarea"></textarea></div>';
                document.body.insertBefore(Newdiv, document.body.lastChild);

                var boxname = document.getElementsByClassName("boxhide");
                document.getElementsByClassName("kjbtn").onclick = function() {
                        boxname.style.display = "block";
                        boxname.style.top = "2px";
                        boxname.style.right = (Newdiv.clientWidth + 2) + "px";
                };
                document.getElementsByClassName("sclose").onclick = function() {
                        boxname.style = null;
                };
                function Val2txt() {
                        let Filename = new Date().getTime();
                        let TextContent = document.getElementsByClassName("stextarea").value;                              
                        let Addele = document.createElement('a');
                        Addele.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(TextContent));
                        Addele.setAttribute('download', Filename);
                        let jset = document.createEvent('MouseEvents');
                        jset.initEvent('click', true, true);
                        Addele.dispatchEvent(jset);

                }
                function o2t(vv) {
                        let getnamet = document.getElementsByClassName("stextarea");
                        getnamet.style.opacity = vv.value / 100;
                }



“食用”方法

在线安装,脚本已经上传到油猴脚本资源库

链接:https://greasyfork.org/zh-CN/scripts/454303-%E5%BF%AB%E6%8D%B7%E4%BE%BF%E7%AC%BA

注释版

亦可下载注释版,附件如下





盘儿净 发表于 2022-11-5 23:10

功能增加建议:记录下的信息最好与正在浏览的页面相关联,以后只要打开该页面甚至打开该域名就能看到粘附在页面上的便笺。如果能多浏览器同步更好了,也就是说我使用 firefox 在某个页面上创建的便笺,几年之后我在另外一台电脑上使用 edge浏览器打开该页面照样能看到该便笺。

xuxinliang 发表于 2022-11-5 23:26

盘儿净 发表于 2022-11-5 23:10
功能增加建议:记录下的信息最好与正在浏览的页面相关联,以后只要打开该页面甚至打开该域名就能看到粘附在 ...

要是真的实现所您说,那真是完美了。

afti 发表于 2022-11-5 21:48

随手记事,这个功能还是很方便的

lingniao 发表于 2022-11-5 21:49

感谢分享,很好的创意,很棒的工具

gandhi98 发表于 2022-11-5 21:57

{:301_995:} 有创意 我喜欢

xiuqidou 发表于 2022-11-5 22:42

挺好的,很实用啊,谢谢楼主,这下可以随时
记下自己的想法了

xuxinliang 发表于 2022-11-5 23:25

这个的确很厉害,建议也很有给力。

bj9ye666 发表于 2022-11-6 00:03

这个了不起,学习了,回去试一试

orb001 发表于 2022-11-6 00:25

随手记事,方便快捷,谢谢分享
页: [1] 2 3 4
查看完整版本: 油猴,快捷便笺,快速记录页面感兴趣的信息