☰

Blogger Code Block Inserter

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

  1. // ==UserScript==
  2. // @name         Blogger Code Block Inserter
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.2
  5. // @description  在Blogger编辑器添加代码块插入按钮
  6. // @author       moran：http://blog.7998888.xyz/
  7. // @match        https://www.blogger.com/blog/post/edit/*
  8. // @grant        none
  9. // @license MIT
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.  
  15.     function addCodeButton() {
  16.         const toolbar = document.querySelector('.hANwub');
  17.         if (!toolbar) {
  18.             setTimeout(addCodeButton, 1000);
  19.             return;
  20.         }
  21.  
  22.         if (document.querySelector('#code-block-button')) return;
  23.  
  24.         // 创建按钮容器，使用新的样式但保持原来的结构
  25.         const buttonContainer = document.createElement('div');
  26.         buttonContainer.id = 'code-block-button';
  27.         buttonContainer.className = 'U26fgb mUbCce fKz7Od RUhlrc bsjNHb M9Bg4d';
  28.         buttonContainer.setAttribute('role', 'button');
  29.         buttonContainer.setAttribute('jscontroller', 'VXdfxd');
  30.         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;');
  31.         
  32.         // 使用新的按钮内部HTML结构
  33.         buttonContainer.innerHTML = `
  34.             <div class="VTBa7b MbhUzd" jsname="ksKsZd"></div>
  35.             <span jsslot="" class="xjKiLb">
  36.                 <span class="Ce1Y1c" style="top: -9.5px">
  37.                     <span class="DPvwYc sm8sCf GHpiyd" aria-hidden="true" style="font-size: 18px;width: 24px;text-align: center;display: inline-block;">&lt;&gt;</span>
  38.                 </span>
  39.             </span>
  40.         `;
  41.  
  42.         // 保持原来可以工作的点击事件处理
  43.         buttonContainer.addEventListener('click', function() {
  44.             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';
  45.             
  46.             try {
  47.                 document.execCommand('insertText', false, codeBlock);
  48.             } catch(e) {
  49.                 const editor = document.querySelector('[role="textbox"]');
  50.                 if (editor) {
  51.                     const start = editor.selectionStart;
  52.                     const end = editor.selectionEnd;
  53.                     editor.value = editor.value.slice(0, start) + codeBlock + editor.value.slice(end);
  54.                     editor.dispatchEvent(new Event('input', { bubbles: true }));
  55.                 }
  56.             }
  57.         });
  58.  
  59.         // 插入到引用按钮后面
  60.         const quoteButton = toolbar.querySelector('[data-tooltip="引用文字"]');
  61.         if (quoteButton && quoteButton.parentNode) {
  62.             quoteButton.parentNode.insertBefore(buttonContainer, quoteButton.nextSibling);
  63.         }
  64.     }
  65.  
  66.     // 监听页面变化
  67.     const observer = new MutationObserver((mutations) => {
  68.         if (!document.querySelector('#code-block-button')) {
  69.             addCodeButton();
  70.         }
  71.     });
  72.  
  73.     observer.observe(document.body, {
  74.         childList: true,
  75.         subtree: true
  76.     });
  77.  
  78.     // 初始化
  79.     addCodeButton();
  80. })();