[問卦] 要學油猴腳本語法有推薦的書嗎？

原本因為找不到讓瀏覽器有便利貼的腳本語法，想自已寫一個給chrome用
一開始怕直接寫會失敗還找了chatGPT和它邊聊邊寫
結果還是失敗…現在就想說乾脆不要有省錢的心態
認真的找書來邊看邊學吧，可是，該挑哪一本才好？
希望給點建議吧？

底下順便給出寫失敗的語法，這是chatGPT替我寫的第三版了
目前問題出在按了對應的快速鍵(ctrl+shift+s)
或是在網頁上直接單/雙按滑鼠左鍵或右鍵都無法開出寫便利貼的選單或按鈕
不懂怎麼回事？？

// ==UserScript==
// @name 高級隨手貼
// @namespace http://tampermonkey.net/
// @version 0.3
// @description 增強的隨手貼功能，支持搜尋和分類
// @author You
// @match *://*/*
// @grant none
// ==/UserScript==

(function() {
'use strict';

// 創建隨手貼按鈕
const button = document.createElement('button');
button.textContent = '隨手貼';
button.style.position = 'fixed';
button.style.top = '10px';
button.style.right = '10px';
button.style.padding = '10px';
button.style.backgroundColor = '#f0f0f0';
button.style.border = '1px solid #ccc';
button.style.borderRadius = '5px';
button.style.cursor = 'pointer';
document.body.appendChild(button);

// 創建便條紙面板
const panel = document.createElement('div');
panel.style.position = 'fixed';
panel.style.top = '50px';
panel.style.right = '10px';
panel.style.width = '250px';
panel.style.maxHeight = '500px';
panel.style.backgroundColor = '#ffffe0';
panel.style.border = '1px solid #ccc';
panel.style.borderRadius = '5px';
panel.style.display = 'none';
panel.style.overflowY = 'auto';
panel.style.zIndex = '1000';
document.body.appendChild(panel);

// 創建搜尋框
const searchBox = document.createElement('input');
searchBox.placeholder = '搜尋便條';
searchBox.style.width = 'calc(100% - 20px)';
searchBox.style.margin = '10px';
searchBox.style.padding = '5px';
panel.appendChild(searchBox);

// 創建分類選擇器
const categorySelect = document.createElement('select');
categorySelect.style.width = 'calc(100% - 20px)';
categorySelect.style.margin = '10px';
categorySelect.style.padding = '5px';
const defaultOption = document.createElement('option');
defaultOption.textContent = '所有分類';
defaultOption.value = '';
categorySelect.appendChild(defaultOption);
panel.appendChild(categorySelect);

// 創建便條紙容器
const notesContainer = document.createElement('div');
panel.appendChild(notesContainer);

// 顯示或隱藏面板的函數
function togglePanel() {
panel.style.display = panel.style.display === 'none' ? 'block' :
'none';
if (panel.style.display === 'block') {
loadNotes();
}
}

// 綁定按鈕點擊事件
button.addEventListener('click', togglePanel);

// 鍵盤快捷鍵設置
document.addEventListener('keydown', (event) => {
// Ctrl + Shift + S
if (event.ctrlKey && event.shiftKey && event.key === 'S') {
togglePanel();
event.preventDefault(); // 防止默認行為（例如瀏覽器快捷鍵）
}
});

// 加載便條紙
function loadNotes() {
console.log('加載便條紙'); // 確認加載便條紙
notesContainer.innerHTML = '';
const categories = JSON.parse(localStorage.getItem('noteCategories')
|| '{}');
const notes = JSON.parse(localStorage.getItem('stickyNotes') || '[]'); const selectedCategory = categorySelect.value;

notes.forEach(note => {
if (selectedCategory === '' || note.category ===
selectedCategory) {
const noteElement = document.createElement('div');
noteElement.style.padding = '10px';
noteElement.style.border = '1px solid #ccc';
noteElement.style.borderRadius = '5px';
noteElement.style.marginBottom = '10px';
noteElement.style.backgroundColor = '#fff';

const title = document.createElement('h4');
title.textContent = note.title;
noteElement.appendChild(title);

const content = document.createElement('p');
content.textContent = note.content;
noteElement.appendChild(content);

notesContainer.appendChild(noteElement);
}
});
}
})();

--