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

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

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

脚本的效果截图

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

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

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

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

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

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

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

部分核心代码

[JavaScript] 纯文本查看 复制代码

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

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")[0];
document.getElementsByClassName("kjbtn")[0].onclick = function() {
        boxname.style.display = "block";
        boxname.style.top = "2px";
        boxname.style.right = (Newdiv.clientWidth + 2) + "px";
};
document.getElementsByClassName("sclose")[0].onclick = function() {
        boxname.style = null;
};
function Val2txt() {
        let Filename = new Date().getTime();
        let TextContent = document.getElementsByClassName("stextarea")[0].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")[0];
        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

注释版

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

油猴脚本快捷便笺注释版.rar (1.95 KB, 下载次数: 52)

盘儿净 · 发表于 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

有创意我喜欢

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

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

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

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

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

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

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

随手记事，方便快捷，谢谢分享

帐号		自动登录	找回密码
密码			注册[Register]

[其他原创] 油猴，快捷便笺，快速记录页面感兴趣的信息

免费评分

本帖被以下淘专辑推荐: