油猴,快捷便笺,快速记录页面感兴趣的信息
使用场景:有时候我们需要快速记录一些页面上的信息,以往都是打开某种特定软件或记事本等等,但是记录时候又需要不断切换界面,操作极度不友好,又或仅仅记录一些信息就懒得打开某种特定软件。
使用油猴脚本创建一个快捷便笺,就可以快速记录信息,比如:看网课时候,看教程时候,刷视频时候,又或者看到一些感兴趣的内容,需要记录一些信息等等。
快捷便笺还支持把记录的信息保存为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
注释版
亦可下载注释版,附件如下
功能增加建议:记录下的信息最好与正在浏览的页面相关联,以后只要打开该页面甚至打开该域名就能看到粘附在页面上的便笺。如果能多浏览器同步更好了,也就是说我使用 firefox 在某个页面上创建的便笺,几年之后我在另外一台电脑上使用 edge浏览器打开该页面照样能看到该便笺。 盘儿净 发表于 2022-11-5 23:10
功能增加建议:记录下的信息最好与正在浏览的页面相关联,以后只要打开该页面甚至打开该域名就能看到粘附在 ...
要是真的实现所您说,那真是完美了。 随手记事,这个功能还是很方便的 感谢分享,很好的创意,很棒的工具 {:301_995:} 有创意 我喜欢 挺好的,很实用啊,谢谢楼主,这下可以随时
记下自己的想法了 这个的确很厉害,建议也很有给力。 这个了不起,学习了,回去试一试 随手记事,方便快捷,谢谢分享