Special Rules Tutorial

Special Rules

沉浸式翻译扩展会针对部分网站进行特殊适配，因为这些网站的实现要么不标准，要么是信息流网站，比如 twitter.com, reddit.com等网站，对这类网站不太容易有一个统一的规则去适配，所以此扩展使用特殊规则去实现对不同网站的适配，以实现更好的翻译体验。

目前已有的规则见这里

配置路径

点击浏览器该扩展图标 -> 点击选项(进入扩展配置页面) -> 点击网站配置 -> 特殊页面翻译规则

配置格式

可以参考已有的规则

一个基本的配置规则如下：

这是推特网站适配的真实规则，这个css选择器的意思是选中所有属性为data-testid,并且该属性的值为tweetText的元素集合，这就是所有推文所在的元素。

{
  "hostname": "twitter.com",
  "selectors": [
      "[data-testid=\"tweetText\"]"
  ] 
}

如何找到页面的元素？ 浏览器右键审查元素，然后就可以看到所有的页面元素了，可以在这里 学习更多的CSS选择表达式。

hostname 可以是字符串或者数组，如果有多个网站应用同一个规则的话。比如：

{
    "hostname": [
      "twitter.com",
      "tweetdeck.twitter.com",
      "mobile.twitter.com"
    ],
    "selectors": [
      "[data-testid=\"tweetText\"]",
      ".tweet-text",
      ".js-quoted-tweet-text"
    ]
}

除了使用hostname之外，你也可以用正则表达式regex来匹配更具体的页面，比如以下的配置会匹配substack.com下所有子域名的任何页面：

 {
    "regex": ".substack.com/",
    "selectors": [
      ".post-preview-title",
      ".post-preview-description"
    ]
  }

regex也可以是一个数组。

selectors选择器选择的元素将会被作为一个整体块来复制原文，并翻译。如果你想选择一个大的块，指定该扩展去翻译这个大块下面的多个段落的话，请使用containerSelectors来配置大的容器块，比如我们给路透社的网站做了一个特殊的配置：

{
    "hostname": "www.reuters.com",
    "containerSelectors": "main"
}

该配置表示仅翻译main标签下的内容，并且分段落翻译。

你还可以给不同的网站，设置不同的双语显示主题,比如我想给 discord 的翻译添加下划线样式：

{
    "hostname": "discord.com",
    "selectors": [
      "div[id^='message-content-']"
    ],
    "style":"underline"
}

这样配置之后，就只有discord的双语翻译会显示下划线了。

That's all. 如果还有不懂地方，可以在 Issue 或者 Telegram群组提问