Blogger/blogspot 编辑器 内部 iframe 应用 CSS 实现所见即所得 WYSIWYG 油猴篡改猴 tampermonkey 脚本

前言

前面 改进了 blogger 编辑器, 加入了 pre 和 code 的功能按钮

也 改进了 博客的模板, 能更好的显示 blockquote, pre, code

然后就觉得, 编辑器里面的显示效果有点丑. 主要是原本编辑器就没有 pre 和 code 的功能, 没有合适的显示效果.

思路

我就想, 如果我把 模板里面的 CSS 片段抽出来, 然后应用到 编辑器页面, 不就行了吗?

先让 Agent 帮我把之前制作的模板里面关于 h2, p, blockquote, code, pre 的 CSS 抽取出来, 得到

h2 {

  border-bottom: 1px solid #e8eaed;

  padding-bottom: 6px;

}

p {    

  margin: 0.85em 0;

}

blockquote {

  margin: 1em 0;

  padding: 8px 16px;

  border-left: 4px solid #dadce0;

  color: #5f6368;

  background: #fafafa;

  line-height: 1.55;

}

code {

  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas,

    "Liberation Mono", monospace;

  background: #f1f3f4;

  border-radius: 4px;

  padding: 2px 5px;

}

pre {

  background: #f8f9fa;

  border: 1px solid #e0e0e0;

  border-radius: 6px;

  padding: 12px 14px;

  overflow-x: auto;

  line-height: 1.55;

}

把Stylebot 插件开起来, 准备插入 CSS, 结果发现编辑器中间所见即所得 WYSIWYG 的区域是个 iframe

面向 GPT 开发

本来是打算像上次一样, 用 Antigravity的, 但是怕额度不够.

问的是网页版免费账户Claude

有没有办法给页面中的 iframe 里面注入 CSS?

这一看就是该油猴脚本干的活.

开 F12 开发者工具, 拿到这个 iframe 的class="ZW3ZFc"

然后:

写一个油猴脚本,

选择 iframe 元素 class=ZW3ZFc

插入 CSS

...略

效果

Github

https://github.com/crazypeace/blogger-editor-css/raw/refs/heads/main/blogger-editor-iframe-css.user.js