☰

Greasy Fork is available in English.

Heading Buttons

Adds custom buttons to set text headings on SurferSEO page

// ==UserScript==
// @name         Heading Buttons
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Adds custom buttons to set text headings on SurferSEO page
// @author       mhshan
// @match        https://app.surferseo.com/drafts/s/*
// @grant        none
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';

    // Function to create and add a heading button
    function createHeadingButton(text, top, left, heading) {
        const button = document.createElement('button');
        button.innerText = text;
        button.style.position = 'fixed';
        button.style.top = top;
        button.style.left = left;
        button.style.height = '40px';
        button.style.width = '40px';
        button.style.background = 'Black';
        button.style.color = 'white';
        button.style.fontWeight = '600';
        button.style.zIndex = 1000;
        button.style.borderRadius = '8px';
        button.style.padding = '5px 10px';
        button.style.border = 'none';
        button.style.cursor = 'pointer';
        button.style.transition = 'background 0.3s ease, transform 0.3s ease';

        button.addEventListener('mouseover', function() {
            button.style.background = '#3CCF4E';
            button.style.transform = 'scale(1.05)';
        });

        button.addEventListener('mouseout', function() {
            button.style.background = 'Black';
            button.style.transform = 'scale(1)';
        });

        button.addEventListener('click', function() {
            const outerDiv = document.querySelector('div[data-testid="ribbon-heading-select-button"]');
            if (outerDiv) {
                outerDiv.click();

                setTimeout(() => {
                    const menuItems = document.querySelectorAll('div[role="menuitem"] span.Text__StyledText-sc-8gmuv2-0.kGVTxJ');
                    let headingElement = null;
                    menuItems.forEach(item => {
                        if (item.textContent.trim() === heading) {
                            headingElement = item.closest('div[role="menuitem"]');
                        }
                    });

                    if (headingElement) {
                        headingElement.click();
                    } else {
                        alert(`${heading} element not found.`);
                    }
                }, 500);
            } else {
                alert('Outer button not found.');
            }
        });

        document.body.appendChild(button);
    }

    // Check if the URL matches the pattern
    if (window.location.href.startsWith('https://app.surferseo.com/drafts/s/')) {
        createHeadingButton('H1', '400px', '60px', 'Heading 1');
        createHeadingButton('H2', '400px', '110px', 'Heading 2');
        createHeadingButton('H3', '400px', '160px', 'Heading 3');
    }
})();