油猴插件代码:note with gpt - webnote-爱代码爱编程
插件功能:实现在openai的web端在windows10上的临时笔记功能,操作极其简单。
备注:欢迎借鉴思路制作任何收费或者免费的插件,不做任何限制。
说明:该插件由我和GPT4.0 共同完成,其中笔记隐藏(CRTL+K下面会提到)是个bug,bug会使外面有个滑动的侧边栏,我利用这个bug让GPT实现了笔记的透明隐藏。说起来好玩,本来开发的目的是想把输入框放大到中央的,因为看起来不太舒服哈哈哈;然后发现不好搞,openai会检查用户的行为,从而有所限制;所以索性做一个临时记事本吧,应该值得注意的是这个临时笔记本可以在任何的网站打开并使用,但是不同网站的笔记内容不能迁移。
注意事项:笔记可以在关闭浏览器和刷新网页时仍然得以保存,前提是你根据下面的操作方法或者点击UI按键保存了,但仍然不建议将它作为一个笔记本使用,当做一个临时的缓存式样的笔记最好。这款插件的核心目的就是避免在本地的笔记本和GPT之间大量的来回切换的时间,突出一个减少切换时间让用户得到更好的使用体验。
使用前提
1.使用极其简单,首先有油猴编辑器,建立属于你的新脚本复制即可使用。
2.使用前提,Edge浏览器魔法上网到chat.openai.com 需要将该网址作为本地应用安装。否则快捷键会与EDGE的浏览器冲突。
使用方法
CRTL+L :会打开临时笔记本,再次点击会关闭临时笔记本,这个过程会自动保存你的笔记,也可以点击对应的UI自动保存和关闭临时笔记本。
CRTL+K:使笔记本收纳可以透明观看背景板,再次点击可以显示你的笔记。请注意这个也可以通过拖拽外面的滑块实现。这也是代码实现的原理,使用bug解决了一个好用的需求,“程序员走bug”这句话,我做这个插件的时候,算是彻底理解了。
// ==UserScript==
// @name WebNote
// @version 1.0
// @grant none
// @include *
// ==/UserScript==
(function() {
const noteDiv = document.createElement('div');
noteDiv.style.position = 'fixed';
noteDiv.style.zIndex = '9999';
noteDiv.style.backgroundColor = 'transparent'; // 透明颜色
noteDiv.style.overflow = 'auto';
noteDiv.style.display = 'none';
noteDiv.style.padding = '15px';
noteDiv.style.boxSizing = 'border-box';
noteDiv.style.border = '1px solid black';
const textarea = document.createElement('textarea');
textarea.style.width = '100%';
textarea.style.height = 'calc(100% - 20px)';
textarea.style.boxSizing = 'border-box';
noteDiv.appendChild(textarea);
const saveButton = document.createElement('button');
saveButton.textContent = 'Save';
saveButton.style.position = 'absolute';
saveButton.style.bottom = '5px';
saveButton.style.left = '5px';
saveButton.addEventListener('click', saveNote);
noteDiv.appendChild(saveButton);
const closeButton = document.createElement('button');
closeButton.textContent = 'Close';
closeButton.style.position = 'absolute';
closeButton.style.bottom = '5px';
closeButton.style.right = '5px';
closeButton.addEventListener('click', closeNote);
noteDiv.appendChild(closeButton);
document.body.appendChild(noteDiv);
['n', 'e', 's', 'w'].forEach((direction) => {
const resizeHandle = document.createElement('div');
resizeHandle.style.position = 'absolute';
resizeHandle.style.background = 'transparent';
resizeHandle.style.width = direction === 'e' || direction === 'w' ? '15px' : '100%';
resizeHandle.style.height = direction === 'n' || direction === 's' ? '15px' : '100%';
resizeHandle.style[direction === 'n' ? 'top' : direction === 'e' ? 'right' : direction === 's' ? 'bottom' : 'left'] = '0';
resizeHandle.style.cursor = `${direction}-resize`;
resizeHandle.addEventListener('mousedown', startResize.bind(null, direction));
noteDiv.appendChild(resizeHandle);
});
let isScrolledToBottom = false;
document.addEventListener('keydown', function(e) {
if (e.ctrlKey && e.key === 'l') {
if (noteDiv.style.display === 'none') {
openNote();
} else {
closeNote();
}
}
if (e.ctrlKey && e.key === 'k') {
toggleScroll();
}
});
let note = {};
function openNote() {
note = JSON.parse(localStorage.getItem('webNote') || '{}');
textarea.value = note.content || '';
noteDiv.style.top = '20%';
noteDiv.style.left = '20%';
noteDiv.style.width = '60%';
noteDiv.style.height = '60%';
noteDiv.style.display = 'block';
}
function closeNote() {
saveNote();
noteDiv.style.display = 'none';
}
function saveNote() {
note.content = textarea.value;
localStorage.setItem('webNote', JSON.stringify(note));
}
function toggleScroll() {
if (isScrolledToBottom) {
noteDiv.scrollTop = 0;
} else {
noteDiv.scrollTop = noteDiv.scrollHeight;
}
isScrolledToBottom = !isScrolledToBottom;
}
let resizeStartX, resizeStartY, resizeStartWidth, resizeStartHeight;
function startResize(direction, e) {
e.stopPropagation();
e.preventDefault();
resizeStartX = e.clientX;
resizeStartY = e.clientY;
resizeStartWidth = noteDiv.offsetWidth;
resizeStartHeight = noteDiv.offsetHeight;
document.addEventListener('mousemove', resize);
document.addEventListener('mouseup', stopResize);
function resize(e) {
let dx = e.clientX - resizeStartX;
let dy = e.clientY - resizeStartY;
if (direction === 'e' || direction === 'w') {
noteDiv.style.width = `${resizeStartWidth + (direction === 'e' ? dx : -dx)}px`;
} else {
noteDiv.style.height = `${resizeStartHeight + (direction === 'n' ? -dy : dy)}px`;
}
note.top = noteDiv.style.top;
note.left = noteDiv.style.left;
note.width = noteDiv.style.width;
note.height = noteDiv.style.height;
}
function stopResize() {
document.removeEventListener('mousemove', resize);
document.removeEventListener('mouseup', stopResize);
}
}
})();