使用一段简单的油猴脚本来改善沉浸式翻译插件的阅读体验

Why

因为感觉沉浸式翻译这个浏览器插件，翻译后的默认样式不太容易区分，尤其是遇到那种内容多且排版不是那么好的网页，所以就写了一段简单的脚本来稍微改善下观感。

效果

如下图：

完整代码

完整代码如下：

// ==UserScript==
// @name         修改沉浸式翻译插件翻译后的内容样式
// @namespace    http://tampermonkey.net/
// @version      2024-10-04
// @description  修改沉浸式翻译插件翻译后的内容样式。
// @author       王某人
// @run-at       document-end
// @match        *://*/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=stackoverflow.com
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    var myStyle = document.createElement('style');
    myStyle.innerText = 'font.notranslate>font>font{display:block;color:blue;background-color:aqua;padding:10px;border-radius:7px;}';
    document.head.appendChild(myStyle);
    console.log("沉浸式翻译插件的样式脚本注入成功！");
})();

关键代码解释

上面的完整代码中的关键代码就这下面 5 行：

// @run-at       document-end
// @match        *://*/*
var myStyle = document.createElement('style');
myStyle.innerText = 'font.notranslate>font>font{display:block;color:blue;background-color:aqua;padding:10px;border-radius:7px;}';
document.head.appendChild(myStyle);

1. 第一行：用 @run-at document-end 指定脚本的运行时机是在 document 加载完成之后。但在这个例子中，其实不指定运行时机，也就是使用油猴的默认值也是可以的，因为只要能将样式注入到网页中，我们再使用沉浸式翻译这个插件来翻译内容【即使是先翻译，再注入样式也可以，具体的自行搜索浏览器的重排和重绘】，这些翻译出来的内容就会被注入的样式的选择器选中，自然就可以实现样式的修改。
2. 第二行：用 @match 来匹配任意的网址（*://*/*），也就是在任何网页上，这段油猴脚本都会生效。正则中的第一个星号是表示任意的协议，也就是 http 和 https 都可以被匹配到。第二个星号是表示任意的域名。第三个星号是表示这个域名下的任意网页都可以被匹配到。如果想让编写的油猴脚本对任意一个网页生效，那么这个 @match 后面的内容就像这样写就可以了。
3. 第三行：就是创建一个 style 标签，用变量 myStyle 接收，名称随便。
4. 第四行：通过 innerText 这个属性(当然也可以使用别的属性，比如：textContent)向这个 style 标签中添加内容，这个内容就是要向网页中注入的样式，是以字符串形式编写的，具体的样式根据自己的喜好来即可。但其实我们可以先在网页中使用这个插件翻译一个段落，然后再用开发者工具来实时调整这个段落的样式，具体一点的步骤写在后面的【修改样式的小技巧【optional】】中了。
5. 第五行：就是将这个 style 标签添加到网页的 head 标签下，这样就可以让这个style标签中的样式对整个网页生效了。

脚本运行成功后，可以在开发者工具中的 Element 面板中找到注入的样式，如下图：

修改样式的小技巧【optional】

使用浏览器的左上角的选择工具，选中要修改的元素，然后就可以在 element.style 这里编写这个元素的行内样式，调好这个样式后，直接右键 Copy rule ，将整个样式规则复制出来，修改掉选择器部分即可。

选择器的获取这里就不多说了，看左侧的网页结构就可以很容易找出来，而且不止一种写法。

如下图：

使用vim来合并多行的小技巧【optional】

如果你不用 vim 或者 gvim ，这里不用再看了。

这是配合上面的 Copy rule 这个技巧的另一个小技巧。是我写脚本时比较常用的技巧。

也就是将复制出来的规则，粘贴到 vim 编辑器中，然后使用 vim 的 normal 模式下的 J 命令来合并多个行【按一次 J，合并两行为一行，合并多行需要按多次 J 】，前提是你没有重新映射这个命令。

效果类似下图：

这样就可以很容易得到一个合并在一行中的样式规则，如果想要去掉那些多余的空格，那么可以使用 vim 的替换命令，gvim 中也一样：

:s/ //g

执行后，就可以去掉所有的空格了，但如果你的CSS选择器是用的后代选择器【空格】的话，就需要再手动添加下。