Blogger Code Block Inserter

在Blogger编辑器添加代码块插入按钮

您需要先安裝使用者腳本管理器擴展,如 TampermonkeyGreasemonkeyViolentmonkey 之後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyViolentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyViolentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyUserscripts 後才能安裝該腳本。

你需要先安裝一款使用者腳本管理器擴展,比如 Tampermonkey,才能安裝此腳本

您需要先安裝使用者腳本管理器擴充功能後才能安裝該腳本。

(我已經安裝了使用者腳本管理器,讓我安裝!)

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

(我已經安裝了使用者樣式管理器,讓我安裝!)

// ==UserScript==
// @name         Blogger Code Block Inserter
// @namespace    http://tampermonkey.net/
// @version      0.2
// @description  在Blogger编辑器添加代码块插入按钮
// @author       moran:http://blog.7998888.xyz/
// @match        https://www.blogger.com/blog/post/edit/*
// @grant        none
// @license MIT
// ==/UserScript==

(function() {
    'use strict';

    function addCodeButton() {
        const toolbar = document.querySelector('.hANwub');
        if (!toolbar) {
            setTimeout(addCodeButton, 1000);
            return;
        }

        if (document.querySelector('#code-block-button')) return;

        // 创建按钮容器,使用新的样式但保持原来的结构
        const buttonContainer = document.createElement('div');
        buttonContainer.id = 'code-block-button';
        buttonContainer.className = 'U26fgb mUbCce fKz7Od RUhlrc bsjNHb M9Bg4d';
        buttonContainer.setAttribute('role', 'button');
        buttonContainer.setAttribute('jscontroller', 'VXdfxd');
        buttonContainer.setAttribute('jsaction', 'click:cOuCgd; mousedown:UX7yZ; mouseup:lbsD7e; mouseenter:tfO1Yc; mouseleave:JywGue; focus:AHmuwe; blur:O22p3e; contextmenu:mg9Pef;touchstart:p6p2H; touchmove:FwuNnf; touchend:yfqBxc(preventDefault=true); touchcancel:JMtRjd;');
        
        // 使用新的按钮内部HTML结构
        buttonContainer.innerHTML = `
            <div class="VTBa7b MbhUzd" jsname="ksKsZd"></div>
            <span jsslot="" class="xjKiLb">
                <span class="Ce1Y1c" style="top: -9.5px">
                    <span class="DPvwYc sm8sCf GHpiyd" aria-hidden="true" style="font-size: 18px;width: 24px;text-align: center;display: inline-block;">&lt;&gt;</span>
                </span>
            </span>
        `;

        // 保持原来可以工作的点击事件处理
        buttonContainer.addEventListener('click', function() {
            const codeBlock = '<pre class="prettyprint lang-python">\n<code>\n// 在这里粘贴您的代码\nconsole.log("Hello World!");\n</code>\n<button class="copy-code-button">复制</button>\n</pre>\n';
            
            try {
                document.execCommand('insertText', false, codeBlock);
            } catch(e) {
                const editor = document.querySelector('[role="textbox"]');
                if (editor) {
                    const start = editor.selectionStart;
                    const end = editor.selectionEnd;
                    editor.value = editor.value.slice(0, start) + codeBlock + editor.value.slice(end);
                    editor.dispatchEvent(new Event('input', { bubbles: true }));
                }
            }
        });

        // 插入到引用按钮后面
        const quoteButton = toolbar.querySelector('[data-tooltip="引用文字"]');
        if (quoteButton && quoteButton.parentNode) {
            quoteButton.parentNode.insertBefore(buttonContainer, quoteButton.nextSibling);
        }
    }

    // 监听页面变化
    const observer = new MutationObserver((mutations) => {
        if (!document.querySelector('#code-block-button')) {
            addCodeButton();
        }
    });

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

    // 初始化
    addCodeButton();
})();