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

[powerg5 (mac)]

原本因為找不到讓瀏覽器有便利貼的腳本語法，想自已寫一個給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);
            }
        });
    }
})();

--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 125.229.194.9 (臺灣)
※ 文章網址: https://www.ptt.cc/bbs/Gossiping/M.1726400347.A.73C.html
→ zyxx: 直接去找extension就好了 幹嘛自己寫=.=
→ luciffar: Note Anywhere:
推 Goog1e: 你連基本原理都沒搞懂 別寫這個吧
→ Goog1e: 便利貼的功能是什麼？要記多久？
→ Goog1e: tampermonkey的原理是在既有網頁上執行js
→ Goog1e: 也就是說你執行的程式依然是網頁的一部份
→ Goog1e: 你的便利貼就只是某個網站的一個小程式
→ Goog1e: 所以你這樣做無法跨網站存取
→ Goog1e: 更慘的是你存在localstorage裡
→ Goog1e: 如果那個網站執行了一個程式把它清掉...
→ Goog1e: 你的便利貼就沒了
→ Goog1e: 你該做的是寫extension吧
→ Goog1e: 但這種東西一定一堆了 找別人寫的來用就好
→ wahimodeux: 你可以用ChatGPT或搜別人的腳本