checklister tampermonkey api example script

checklister-helper.js

// ==UserScript==
// @name         Checklister Helper
// @namespace    http://tampermonkey.net/
// @version      1.0.0
// @description  Example userscript for Checklister app
// @author       You
// @match       https://checklister-beta.wilcoxd.com
// @match        http://localhost:3000/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Wait for the ChecklisterAPI to be available
    function waitForAPI() {
        if (typeof window.ChecklisterAPI !== 'undefined') {
            initPlugin();
        } else {
            setTimeout(waitForAPI, 100);
        }
    }

    function initPlugin() {
        const api = window.ChecklisterAPI;

        // Register the plugin
        api.registerPlugin({
            id: 'example-helper',
            name: 'Checklister Helper',
            version: '1.0.0',
            description: 'Adds helpful utilities to Checklister',
            author: 'Example User',
            onMount: function() {
                console.log('Checklister Helper mounted!');

                // Add a simple toolbar button for quick adding items
                const button = document.createElement('button');
                button.textContent = 'Hide Completed Items';
                button.className = 'px-3 py-1 bg-blue-500 rounded hover:bg-blue-600 text-sm';
                button.onclick = async function() {
                    // Function to add styles
                    function addCSS() {
                       const style = document.createElement('style');
                      style.textContent = `
                       .completed-item {
                         display: none; /* Hides checked checkboxes */
                      }
                     `;
                     document.head.appendChild(style);
                    }

                    // Add CSS initially
                    addCSS();

                    // Monitor DOM for changes
                    const observer = new MutationObserver(() => {
                      addCSS(); // Reapply styles whenever the DOM changes
                    });

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

                };
                api.addToolbarItem('hide-completed', 'example-helper', button, 'right');

                // Add another button to the left side for checklist info
                const infoButton = document.createElement('button');
                infoButton.innerHTML = '📊 Info';
                infoButton.className = 'px-3 py-1 bg-green-500 rounded hover:bg-green-600 text-sm';
                infoButton.onclick = async function() {
                    const content = await api.getCurrentChecklistContent();
                    const plugins = api.getAllPlugins();
                    alert(`Active plugins: ${plugins.length}\nChecklist title: "${content.title}"\nItems: ${content.items.length}`);
                };

                api.addToolbarItem('info-btn', 'example-helper', infoButton, 'left');

                // Add a button to set title
                const titleButton = document.createElement('button');
                titleButton.innerHTML = '📝 Set Title';
                titleButton.className = 'px-3 py-1 bg-purple-500 rounded hover:bg-purple-600 text-sm';
                titleButton.onclick = function() {
                    const title = prompt('Enter checklist title:');
                    if (title) {
                        api.setChecklistTitle(title);
                    }
                };

                api.addToolbarItem('title-btn', 'example-helper', titleButton, 'center');
            },
            onUnmount: function() {
                console.log('Checklister Helper unmounted!');
            }
        });

        console.log('Example userscript loaded successfully!');
    }

    // Start waiting for the API
    waitForAPI();
})();