基于react、tailwindcss开发自己的chrome插件

Chrome插件开发 - Adding browser notifications


CSS 函数是一种可以接受参数并返回值的特殊类型的 CSS 值。CSS 函数可以用来计算、操作和转换属性值，使得开发者能够更方便地控制页面的样式和布局。以下是一些常见的 CSS 函数及其用途：

- calc()：用于在 CSS 中进行数学计算。例如，可以使用 calc() 函数将两个长度值相加，以便在布局时动态计算宽度或高度。
- var()：用于设置自定义属性值。可以在一个地方设置变量的值，然后在文档中的其他地方使用 var() 函数引用它们。
- rgb() 和 rgba()：用于设置颜色值。rgb() 函数使用红、绿、蓝三个参数来定义颜色，而 rgba() 函数则在此基础上增加了一个透明度参数，用于设置颜色的不透明度。
- hsl() 和 hsla()：类似于 rgb() 和 rgba()，但是使用的是色调、饱和度和亮度来定义颜色。
- url()：用于在 CSS 中引用外部资源，例如图像、字体或音频文件。可以将 url() 函数用作属性值，以指定需要加载的文件的路径和名称。
- attr()：用于在 CSS 中访问 HTML 元素的属性值。可以将 attr() 函数用作属性值，以从 HTML 元素中提取属性值并将其应用于样式。
- min() 和 max()：用于确定给定值的最小值和最大值。这些函数可以用于计算长度、宽度和其他尺寸相关的值。


## 函数选择器

CSS 函数选择器是一种特殊的选择器，它可以根据元素的属性值来匹配元素。函数选择器的语法如下：

```css
.post :is(h1, h2, h3) {
	line-height: 1.2;
}
```

其中，selector 是一个 CSS 选择器，function 是一个 CSS 函数。函数选择器的作用是，当元素的属性值与函数的返回值相匹配时，就会应用选择器中的样式。

## 自定义变量

CSS 自定义属性（Custom Properties）是一种特殊的属性，它可以用来定义变量。自定义属性的语法如下：

```css
:root {
  --main-color: #f00;
}

.my-element {
	background: var(--main-color);
}
```

其中，--main-color 是自定义属性的名称，#f00 是自定义属性的值。自定义属性的名称必须以两个连字符开头，然后是一个或多个字母、数字或连字符。自定义属性的值可以是任何有效的 CSS 值，包括颜色、长度、百分比、URL、函数等。

## attr() 函数

attr() 函数用于在 CSS 中访问 HTML 元素的属性值。可以将 attr() 函数用作属性值，以从 HTML 元素中提取属性值并将其应用于样式。

```html
<a href="https://www.w3school.com.cn" class="my-link">W3School</a>
```

```css
.my-link {
  color: attr(href);
}
```

上面的代码中，attr() 函数用于获取 a 元素的 href 属性值，并将其作为颜色值。由于 a 元素的 href 属性值为 https://www.w3school.com.cn，因此 a 元素的颜色为蓝色。

## color() 函数

color() 函数用于在 CSS 中定义颜色。color() 函数的语法如下：

```css
color(<color-value> [ / <alpha-value> ]? )
```

其中，color-value 是颜色值，alpha-value 是透明度值。color-value 可以是以下任意一种：

- 十六进制颜色值，例如 #f00、#ff0000 或 #ff0000ff。
- RGB 颜色值，例如 rgb(255, 0, 0) 或 rgba(255, 0, 0, 1)。
- HSL 颜色值，例如 hsl(0, 100%, 50%) 或 hsla(0, 100%, 50%, 1)。
- 颜色关键字，例如 red、green 或 blue。

alpha-value 是一个介于 0 和 1 之间的数值，用于设置颜色的不透明度。如果省略 alpha-value，则默认值为 1。

## calc() 函数

calc() 函数用于在 CSS 中进行数学计算。例如，可以使用 calc() 函数将两个长度值相加，以便在布局时动态计算宽度或高度。

```css
.my-element {
  width: calc(100% - 20px);
}
```

上面的代码中，calc() 函数用于计算 100% 减去 20px 的值，然后将结果作为宽度值。由于 100% 减去 20px 的值为 80%，因此 .my-element 元素的宽度为 80%。

## min() 和 max() 函数

min() 和 max() 函数用于确定给定值的最小值和最大值。这些函数可以用于计算长度、宽度和其他尺寸相关的值。

```css
.my-element {
  width: min(100%, 200px);
}
```

上面的代码中，min() 函数用于计算 100% 和 200px 两个值的最小值，然后将结果作为宽度值。由于 100% 和 200px 两个值的最小值为 100%，因此 .my-element 元素的宽度为 100%。

## clamp() 函数

clamp() 函数用于限制给定值的范围。clamp() 函数的语法如下：

```css
clamp(<min>, <value>, <max>)
```

其中，min 是最小值，value 是给定值，max 是最大值。clamp() 函数的作用是，如果给定值小于最小值，则返回最小值；如果给定值大于最大值，则返回最大值；否则，返回给定值。

```css
.my-element {
  width: clamp(100px, 50%, 200px);
}
```

上面的代码中，clamp() 函数用于限制 50% 的值的范围，使其不小于 100px，也不大于 200px。由于 50% 的值为 50px，因此 .my-element 元素的宽度为 100px。

## 图形函数

CSS 图形函数用于在 CSS 中定义图形。CSS 图形函数的语法如下：

```css
<shape>(<shape-box> [, <shape-box>]*)
```

其中，shape 是图形函数的名称，shape-box 是图形函数的参数。shape-box 可以是以下任意一种：

- 关键字值：inset、circle、ellipse、polygon、path。
- 坐标值：top、right、bottom、left、center、x-start、x-end、y-start、y-end、length、percentage。
- 关键字值：content-box、padding-box、border-box、margin-box。

## 变形函数

CSS 变形函数用于在 CSS 中定义变形。CSS 变形函数的语法如下：

```css
<transform-function>(<transform-argument> [, <transform-argument>]*)
```

其中，transform-function 是变形函数的名称，transform-argument 是变形函数的参数。transform-argument 可以是以下任意一种：

- 关键字值：none、matrix、matrix3d、translate、translate3d、translateX、translateY、translateZ、scale、scale3d、scaleX、scaleY、scaleZ、rotate、rotate3d、rotateX、rotateY、rotateZ、skew、skewX、skewY、perspective。
- 数值：number、length、percentage、angle。

## 过渡函数

CSS 过渡函数用于在 CSS 中定义过渡。CSS 过渡函数的语法如下：

```css
<transition-timing-function>(<transition-timing-function-argument> [, <transition-timing-function-argument>]*)
```

其中，transition-timing-function 是过渡函数的名称，transition-timing-function-argument 是过渡函数的参数。transition-timing-function-argument 可以是以下任意一种：

- 关键字值：linear、ease、ease-in、ease-out、ease-in-out、step-start、step-end、steps、cubic-bezier。
- 数值：number、length、percentage、angle。

## 过滤函数

CSS 过滤函数用于在 CSS 中定义过滤。CSS 过滤函数的语法如下：

```css
<filter-function>(<filter-argument> [, <filter-argument>]*)
```

其中，filter-function 是过滤函数的名称，filter-argument 是过滤函数的参数。filter-argument 可以是以下任意一种：

- 关键字值：blur、brightness、contrast、drop-shadow、grayscale、hue-rotate、invert、opacity、saturate、sepia。
- 数值：number、length、percentage、angle。

## 混合模式函数

CSS 混合模式函数用于在 CSS 中定义混合模式。CSS 混合模式函数的语法如下：

```css
<blend-mode>(<blend-mode-argument> [, <blend-mode-argument>]*)
```

其中，blend-mode 是混合模式函数的名称，blend-mode-argument 是混合模式函数的参数。blend-mode-argument 可以是以下任意一种：

- 关键字值：normal、multiply、screen、overlay、darken、lighten、color-dodge、color-burn、hard-light、soft-light、difference、exclusion、hue、saturation、color、luminosity。
- 数值：number、length、percentage、angle。

## 生成内容函数

CSS 生成内容函数用于在 CSS 中定义生成内容。CSS 生成内容函数的语法如下：

```css
<content-function>(<content-argument> [, <content-argument>]*)
```

其中，content-function 是生成内容函数的名称，content-argument 是生成内容函数的参数。content-argument 可以是以下任意一种：

- 关键字值：attr、counter、counters、open-quote、close-quote、no-open-quote、no-close-quote。
- 数值：number、length、percentage、angle。

## 计数器函数

CSS 计数器函数用于在 CSS 中定义计数器。CSS 计数器函数的语法如下：

```css
<counter-function>(<counter-argument> [, <counter-argument>]*)
```

其中，counter-function 是计数器函数的名称，counter-argument 是计数器函数的参数。counter-argument 可以是以下任意一种：

- 关键字值：counter、counters。
- 数值：number、length、percentage、angle。



css - Functions


`Node.js`提供了一个`fs`模块，用于操作文件系统。通过`fs`模块，可以读取文件，创建文件，删除文件，移动文件，复制文件等。

```js
const fs = require('fs')
```

## sync 和 async

`fs`模块中的每个方法都有`sync`和`async`两种形式。异步方法会返回一个`Promise`对象，而同步方法会返回一个`callback`。

```bash
echo "hello world" > demo.txt
```

```js
const fs = require('fs')

// 异步读取文件
fs.readFile('demo.txt', function (err, data) {
  if (err) {
    return console.error(err)
  }
  console.log('Asynchronous read: ' + data.toString())
})

// 同步读取文件
var data = fs.readFileSync('demo.txt')
console.log('Synchronous read: ' + data.toString())

console.log('Program Ended')
```

## 打开文件

语法：`fs.open(path, flags, [mode], callback)`

- `path`: 文件路径
- `flags`: 打开文件的方式，可以是`r`，`r+`，`w`，`w+`，`a`，`a+`，`x`，`x+`，`t`，`t+`，`c`，`c+`
- `mode`: 打开文件的模式，默认是`0o666`
- `callback`: 回调函数，参数为 err,fd

```js
const fs = require('fs')
fs.open('demo.txt', 'r', function (err, fd) {
  if (err) {
    return console.error(err)
  }
  console.log('文件打开成功，文件描述符：' + fd)
})
```

## 获取文件信息

语法：`fs.stat(path, callback)`

- `path`: 文件路径
- `callback`: 回调函数，参数为 err,stats

方法：

- `stats.isFile()`: 判断是否是文件
- `stats.isDirectory()`: 判断是否是目录
- `stats.isBlockDevice()`: 判断是否是块设备
- `stats.isCharacterDevice()`: 判断是否是字符设备
- `stats.isSymbolicLink()`: 判断是否是符号链接
- `stats.isFIFO()`: 判断是否是 FIFO，如果是 FIFO，则返回 true，否则返回 false
- `stats.isSocket()`: 判断是否是 Socket

```js
const fs = require('fs')
fs.stat('demo.txt', function (err, stats) {
  if (err) {
    return console.error(err)
  }
  console.log(stats)
  console.log('文件类型：' + stats.isFile())
  console.log('文件大小：' + stats.size)
  console.log('文件创建时间：' + stats.birthtime)
})
```

## 写入文件

语法：`fs.writeFile(file, data, [options], callback)`

- `file`: 文件路径
- `data`: 写入的数据
- `options`: 可选参数，可以是`encoding`，`mode`，`flag`
- `callback`: 回调函数，参数为 err

```js
const fs = require('fs')
fs.writeFile('demo.txt', '我是写入的文件内容', function (err) {
  if (err) {
    return console.error(err)
  }
  console.log('数据写入成功！')
  console.log('--------我是分割线-------------')
  console.log('读取写入的数据！')
  fs.readFile('demo.txt', function (err, data) {
    if (err) {
      return console.error(err)
    }
    console.log('异步读取文件数据: ' + data.toString())
  })
})
```

## 读取文件

语法：`fs.read(fd, buffer, offset, length, position, callback)`

- `fd`：返回的文件描述符
- `buffer`：数据被写入的缓冲区
- `offset`：缓冲区写入的偏移位置
- `length`：读取的字节数
- `position`：从哪里开始读取
- `callback`：`err`、`bytesRead`、`buffer`

```js
var fs = require('fs')
var buf = new Buffer(1024)

console.log('Going to open an existing file')
fs.open('input.txt', 'r+', function (err, fd) {
  if (err) {
    return console.error(err)
  }
  console.log('File opened successfully!')
  console.log('Going to read the file')

  fs.read(fd, buf, 0, buf.length, 0, function (err, bytes) {
    if (err) {
      console.log(err)
    }
    console.log(bytes + ' bytes read')

    // Print only read bytes to avoid junk.
    if (bytes > 0) {
      console.log(buf.slice(0, bytes).toString())
    }
  })
})
```

## 关闭文件

语法：`fs.close(fd, callback)`

- `fd`：返回的文件描述符
- `callback`：回调函数，参数为 err

```js
const fs = require('fs')
fs.open('demo.txt', 'r', function (err, fd) {
  if (err) {
    return console.error(err)
  }
  console.log('文件打开成功，文件描述符：' + fd)
  fs.close(fd, function (err) {
    if (err) {
      return console.error(err)
    }
    console.log('文件关闭成功！')
  })
})
```

## 删除文件

语法：`fs.unlink(path, callback)`

- `path`：文件路径
- `callback`：回调函数，参数为 err

```js
const fs = require('fs')
fs.unlink('demo.txt', function (err) {
  if (err) {
    return console.error(err)
  }
  console.log('文件删除成功！')
})
```

## 创建目录

语法：`fs.mkdir(path, [mode], callback)`

- `path`：目录路径
- `mode`：目录权限
- `callback`：回调函数，参数为 err

```js
const fs = require('fs')
fs.mkdir('/tmp/test', function (err) {
  if (err) {
    return console.error(err)
  }
  console.log('目录创建成功！')
})
```

## 读取目录

语法：`fs.readdir(path, callback)`

- `path`：目录路径
- `callback`：回调函数，参数为 err、files

```js
const fs = require('fs')
fs.readdir('/tmp', function (err, files) {
  if (err) {
    return console.error(err)
  }
  files.forEach(function (file) {
    console.log(file)
  })
})
```

## 阅读目录

语法：`fs.readdirSync(path)`

- `path`：目录路径

```js
const fs = require('fs')
fs.readdirSync('/tmp')
```

## 删除目录

语法：`fs.rmdir(path, callback)`

- `path`：目录路径
- `callback`：回调函数，参数为 err

```js
const fs = require('fs')
fs.rmdir('/tmp/test', function (err) {
  if (err) {
    return console.error(err)
  }
  console.log('目录删除成功！')
})
```

[入门教程](http://nodejs.cn/learn/the-nodejs-fs-module)
[Node.js 文档](http://nodejs.cn/api/buffer.html)


File System是一个文件系统模块，用于操作文件系统。

Node.js - File System


在 Swift 中，属性是一个值或者一组值，它与特定的类、结构体或枚举相关联。属性可以是存储属性或计算属性。

## 存储属性

存储属性是一种将值存储到实例变量中的属性。存储属性可以是变量属性（用 var 关键字定义）或常量属性（用 let 关键字定义）。

下面是一个存储属性的示例：

```swift
struct Rectangle {
  var width = 0.0
  var height = 0.0
}

var rect = Rectangle()
rect.width = 10.0
rect.height = 20.0

print("width: \(rect.width), height: \(rect.height)") // 输出 width: 10.0, height: 20.0
```

在上面的示例中，我们定义了一个 Rectangle 结构体，它有两个存储属性 width 和 height。然后，我们创建了一个 Rectangle 实例 rect，并将其宽度设置为 10.0，高度设置为 20.0。最后，我们打印出了 rect 实例的宽度和高度。

## 计算属性

计算属性是一种不直接存储值，而是提供一个 getter 和一个可选的 setter 用于间接获取和设置值的属性。计算属性可以用于计算、转换或验证值。

下面是一个计算属性的示例：

```swift
struct Rectangle {
var width = 0.0
var height = 0.0

    var area: Double {
        return width * height
    }
}

var rect = Rectangle()
rect.width = 10.0
rect.height = 20.0

print("area: \(rect.area)") // 输出 area: 200.0
```

在上面的示例中，我们给 Rectangle 结构体添加了一个计算属性 area，它通过 getter 计算并返回矩形的面积。然后，我们创建了一个 Rectangle 实例 rect，并将其宽度设置为 10.0，高度设置为 20.0。最后，我们打印出了 rect 实例的面积。

## 属性观察器

属性观察器是一种用于监听属性值变化的属性，它允许在属性值被设置之前或之后执行自定义代码。属性观察器可以应用于存储属性和计算属性。

下面是一个属性观察器的示例：

```swift
class StepCounter {
  var totalSteps: Int = 0 {
    willSet(newTotalSteps) {
      print("About to set totalSteps to \(newTotalSteps)")
    }
    didSet {
      if totalSteps > oldValue {
        print("Added \(totalSteps - oldValue) steps")
      }
    }
  }
}

let stepCounter = StepCounter()
stepCounter.totalSteps = 10
stepCounter.totalSteps = 20
```

在上面的示例中，我们定义了一个 StepCounter 类，它有一个存储属性 totalSteps，并为该属性添加了一个属性观察器。属性观察器包括 willSet 和 didSet 两个方法，分别在属性值被设置之前和之后执行。在 willSet 方法中，我们打印出将要设置的属性值，而在 didSet 方法中，我们比较旧值和新值，并打印出添加的步数。

然后，我们创建了一个 StepCounter 实例 stepCounter，并分别将其 totalSteps 设置为 10 和 20。由于 totalSteps 的值发生了变化，属性观察器被调用，并输出了相关的日志信息。

## 延迟存储属性

延迟存储属性是一种将属性的初始化推迟到第一次使用该属性时的属性。延迟存储属性使用 lazy 关键字定义。

下面是一个延迟存储属性的示例：

```swift
class DataImporter {
  var filename = "data.txt"
  // 模拟数据导入的过程
}

class DataManager {
  lazy var importer = DataImporter()
  var data = [String]()
  // 这里是 DataManager 的其他方法和属性
}

let manager = DataManager()
manager.data.append("Some data")
manager.data.append("Some more data")

// 此时 importer 属性还未被创建
print(manager.importer.filename)

// 第一次访问 importer 属性时，它会被创建
```

在上面的示例中，我们定义了一个 DataImporter 类，它有一个 filename 存储属性和一个模拟数据导入的方法。然后，我们定义了一个 DataManager 类，它有一个 data 数组属性和一个延迟存储属性 importer。当我们创建一个 DataManager 实例 manager 时，importer 属性不会被创建，直到我们第一次访问它时。在第一次访问 importer 属性时，它会被创建，并执行 DataImporter 的初始化过程。最后，我们打印出了 importer 的 filename 属性。

总之，Swift 的属性提供了一种方便的方式来封装和访问与类、结构体或枚举相关联的值。不同类型的属性具有不同的特点和用途，您可以根据自己的需求选择适合的属性类型。


在 Swift 中，属性是一个值或者一组值，它与特定的类、结构体或枚举相关联。属性可以是存储属性或计算属性。

Swift - 属性


在上一篇文章[【Add Tailwind】](/blog/translate/build-chrome-extensions/add-tailwind)学习了集成 tailwind。

这篇文章学习使用 react 创建一个新标签插件，类似如图：

也可以使用其他自己喜欢的框架：vue、angular、svlete 等

<video
  src="https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/react-browser_jqqqkk.webm"
  autoPlay
/>

## 安装 React

```bash
npm install react react-dom
touch -p index.js src/{App,Counter}.js
vim new-tab.html
```

**new-tab.html**

```html
<body>
  <div id="app"></div>
  <script type="module" src="index.js"></script>
</body>
```

**index.js**

```js
import ReactDOM from 'react-dom'
import {App} from './src/App'

const app = document.getElementById('app')
ReactDOM.render(<App />, app)
```

**App.js**

```js
import Counter from './Counter'
export function App() {
  return (
    <div className="flex flex-col items-center justify-center w-screen h-screen bg-indigo-400 text-6xl font-bold text-white">
      <p>Welcome 👋</p>
      <Counter />
    </div>
  )
}
```

**Counter.js**

```js
import {useState} from 'react'

export default function Counter() {
  const [counter, setCounter] = useState(0)
  const increase = () => setCounter((count) => count + 1)
  const decrease = () => setCounter((count) => count - 1)
  return (
    <div>
      <button onClick={decrease}>-</button>
      <span className="px-4">{counter}</span>
      <button onClick={increase}>+</button>
    </div>
  )
}
```

跑起来

```bash
npm run build
```

## 测试插件

![FMA6T1](https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/FMA6T1.jpg)

可以在这里找到[【Source Code】](https://github.com/rebelchris/new-tab-extension/tree/react)


Chrome插件开发 - 使用React开发扩展


在 Swift 中，取消初始化通常指的是在初始化器中出现了错误或某些情况下无法完成初始化时，通过返回 nil 或抛出异常来表示初始化的失败或取消。

取消初始化的常用方法有两种：

使用可失败初始化器（Failable initializer）：可失败初始化器是指在初始化时可能会失败并返回 nil 的初始化器。可以通过在初始化方法后面加上问号来声明可失败初始化器。

```swift
class Person {
    var name: String

    init?(name: String) {
        if name.isEmpty {
            return nil
        }
        self.name = name
    }
}
```

在上述示例中，如果传入的 name 为空，则初始化失败并返回 nil。

使用抛出错误（Throwing Errors）：抛出错误是指在初始化时如果遇到错误就会抛出一个异常，这可以让调用者来决定如何处理错误。可以通过在初始化方法中使用 throw 语句抛出一个异常。

```swift
enum InvalidInputError: Error {
  case emptyName
}

class Person {
  var name: String

    init(name: String) throws {
        if name.isEmpty {
            throw InvalidInputError.emptyName
        }
        self.name = name
    }
}
```

在上述示例中，如果传入的 name 为空，则会抛出 InvalidInputError.emptyName 异常，调用者可以使用 do-catch 语句来处理异常。

当然，取消初始化并不是一种推荐的行为，我们应该尽量避免在初始化器中使用返回 nil 或抛出异常的方式来取消初始化，而应该尽量保证初始化器的顺利完成，或者在初始化器中处理可能会导致初始化失败的情况。


在 Swift 中，取消初始化通常指的是在初始化器中出现了错误或某些情况下无法完成初始化时，通过返回 nil 或抛出异常来表示初始化的失败或取消。

Swift - 取消初始化


本章学习如何创建`turboReader`插件，如下图：

<video
  src={
    'https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/turboreader_ghlbnk.webm'
  }
  autoPlay
></video>

## 初始化项目

```bash
mkdir turboReader && cd turboReader
```

添加`manifest.json.json`

```json
{
  "manifest_version": 3,
  "version": "1.0",
  "name": "TurboReader",
  "description": "Become a faster reader with TurboReader",
  "action": {},
  "icons": {
    "48": "icons/icon-48.png"
  },
  "background": {
    "service_worker": "background.js"
  },
  "permissions": ["activeTab", "scripting"]
}
```

添加`background.js`，获取活动标签，并注入名为`turboMode`的函数。

```js
const turboMode = () => {
  // do something
}

chrome.action.onClicked.addListener(async () => {
  const [tab] = await chrome.tabs.query({active: true, currentWindow: true})
  chrome.scripting.executeScript({
    target: {tabId: tab.id},
    function: turboMode
  })
})
```

## 创建函数

首先获取页面内所有段落

```js
const paragraphs = document.getElementsByTagName('p')
```

判断当前是否是阅读模式

```js
const isTurboMode = document.body.classList.contains('trms')
```

遍历并处理段落

```js
for (const paragraph of paragraphs) {
  if (isTurboMode) {
    // 阅读模式已开启就返回当前段落
    paragraph.innerText = paragraph.innerText
  } else {
    // 阅读模式未开启，返回处理后的段落
    paragraph.innerHTML = paragraph.innerText
      .split(' ')
      .map((word) => {
        const length = word.replace(/[^a-zA-Z0-9]+$/, '').length
        const boldLength = length === 1 ? 1 : Math.floor(length / 2)
        return `<strong>${word.substring(
          0,
          boldLength
        )}</strong>${word.substring(boldLength)}`
      })
      .join(' ')
  }
}
```

在循环外部加入判断

```js
isTurboMode
  ? document.body.classList.remove('trms')
  : document.body.classList.add('trms')
```

完整代码

```js
const turboMode = () => {
  const paragraphs = document.getElementsByTagName('p')
  const isTurboMode = document.body.classList.contains('trms')
  for (const paragraph of paragraphs) {
    if (isTurboMode) {
      paragraph.innerText = paragraph.innerText
    } else {
      paragraph.innerHTML = paragraph.innerText
        .split(' ')
        .map((word) => {
          const length = word.replace(/[^a-zA-Z0-9]+$/, '').length
          const boldLength = length === 1 ? 1 : Math.floor(length / 2)
          return `<strong>${word.substring(
            0,
            boldLength
          )}</strong>${word.substring(boldLength)}`
        })
        .join(' ')
    }
  }

  isTurboMode
    ? document.body.classList.remove('trms')
    : document.body.classList.add('trms')
}
```

## Source Code

[【Source Code】](https://github.com/rebelchris/turbo-reader)
