Search Bookmarks

 This JavaScript adds a search bar to the bookmark panel. 

(()=>{

function addSearchBookmarks() {

    let original = document.querySelector(".sf-element.sf-element-bookmark-capture");

    if (!original || document.querySelector(".sf-element-clone")) return; // Exit if no original or clone exists

    // Clone and modify the original element

    let clone = original.cloneNode(true);

    clone.classList.add("sf-element-clone");

    let originalInput = original.querySelector(".sf-element-input");

    let clonedInput = clone.querySelector(".sf-element-input");

    if (clonedInput) clonedInput.placeholder = "Search Bookmarks";

    let button = clone.querySelector(".sf-element-button");

    if (button) {

        button.setAttribute("title", "Search Bookmarks");

        let svg = button.querySelector("svg");

        if (svg) {

            svg.removeAttribute("style");

            svg.innerHTML = `

                <circle cx="2.5" cy="2.5" r="2" stroke="currentColor" stroke-width="1" fill="none"></circle>

                <line x1="4" y1="4" x2="7" y2="7" stroke="currentColor" stroke-width="1"></line>

            `;

        }

    }

    // Bookmark filtering function

    function filterBookmarks() {

        let searchInput = clonedInput?.value.toLowerCase();

        document.querySelectorAll(".sf-element-bookmark-item").forEach(bookmark => {

            bookmark.style.display = bookmark.innerText.toLowerCase().includes(searchInput) ? "block" : "none";

        });

    }

    // Attach event listeners for filtering

    if (button) button.addEventListener("click", filterBookmarks);

    if (clonedInput) {

        clonedInput.addEventListener("keyup", filterBookmarks);

        clonedInput.addEventListener("keydown", (event) => {

            if (event.key === "Enter") filterBookmarks();

        });

    }

    // Insert the modified clone after the original

    original.parentNode.insertBefore(clone, original.nextSibling);

    // Adjust scrollbar position

    let scrollbar = original.parentElement.querySelector(".VerticalScrollbarContainer");

    if (scrollbar) {

        let extraHeight = clone.getBoundingClientRect().height;

        scrollbar.style.top = `${parseFloat(getComputedStyle(scrollbar).top) + extraHeight}px`;

        scrollbar.style.height = `${parseFloat(getComputedStyle(scrollbar).height) - extraHeight}px`;

    }

    // Observe width changes of the original input

    if (originalInput && clonedInput) {

        let resizeObserver = new ResizeObserver(() => {

            clonedInput.style.width = originalInput.style.width;

            clone.style.width = original.style.width;

        });

        resizeObserver.observe(originalInput);

    }

}

// Check and initialize when the original element is found

function checkForOriginalElement() {

    if (document.querySelector(".sf-element.sf-element-bookmark-capture")) addSearchBookmarks();

}

// Observe DOM changes to detect new elements

const observer = new MutationObserver(checkForOriginalElement);

observer.observe(document.body, { childList: true, subtree: true });

// Initial check in case the element is already present

checkForOriginalElement();

})()