使用 Kotlin 编写你的第一个 Firefox WebExtension 扩展

Posted 2021-10-21

Kotlin 是我最喜爱的编程语言。我们已经知道 Kotlin 编译成 Java 字节码可以快速被安卓和服务端采用。事实上，Kotlin 还支持编译成 javascript，因此该语言也开始在 Web 生态系统中受到关注。

尽管已经发布了许多 Kotlin 编写的 Web 应用程序，但至今人们都忽略了 Kotlin 还可以写浏览器扩展插件。所以我写了这篇文章，和大家一起探讨使用 Kotlin JS 编写一个简单的 Firefox 扩展插件的过程。

这个扩展程序基于 Mozilla 的 “你的第一个扩展程序”，可简单地给网站 kotlinlang.org 添加一个红色的边框。

环境要求

为了测试我们的 Firefox 的扩展插件，我们将要用到 Mozilla 的 web-ext 工具。想要使用它，需要安装一个 node.js，然后在终端运行以下的命令：

npm install --global web-ext

此外，还需要使用 IntelliJ IDEA 2017.2.6 和 1.1.60 版本的 Kotlin 插件来开发扩展程序。

配置项目

打开 Intelli IDEA，创建一个新的 Gradle 基础项目，并勾选 Kotlin(JavaScript) 选项。

使用 Kotlin (JavaScript) 创建一个新工程

我们继续按照向导的步骤执行，直到创建并打开空项目。

下一步，启用 Kotlin JS 的 Dead Code Elimination 插件。这步非常重要，因为 Kotlin JS 程序需要捆绑超过兆字节大小的 Kotlin stdlib。但我们可以通过删除无用的代码来大幅度减少编译的代码量。

要启用这个插件，只需要在 build.gradle 文件中添加下面这行代码。

apply plugin: ‘kotlin-dce-js‘

创建扩展清单
在下一步中，我们会添加 Firefox 扩展所需的清单文件。这个文件被命名为 manifest.json，位于我们项目的根目录下。该文件应包含如下内容：

{
  "manifest_version": 2,
  "name": "Kotlin Borderify",
  "version": "1.0",
  "description": "Adds a red border to kotlinlang.org",
  "content_scripts": [
    {
      "matches": [
        "*://kotlinlang.org/*"
      ],
      "js": [
        "build/classes/kotlin/main/min/kotlin.js",
        "build/classes/kotlin/main/min/kt-borderify.js"
      ]
    }
  ]

在这个文件中，我们声明我们的扩展将在匹配模式为 ://kotlinlang.org/ 的任何网站中注入一个内容脚本。 其必要的脚本文件是 Kotlin stdlib kotlin.js 以及我们在 kt-borderify.js 文件中的代码。
代码
接下来，在 src/main/kotlin目录下新建 main.kt文件。当匹配到的网站被加载时，代码便会执行。代码的入口是标准的main函数。在main函数里，我们获取了文档的 body 并修改了它的边框样式。

import kotlin.browser.document
fun main(args: Array<String>) {
    document.body?.style?.border = "5px solid red"
}

main 函数的这段代码类似于 JavaScript 代码。但可以看到因为文档的 body 可能是不存在的，因此这个类型系统会强制我们使用安全操作符(safe-call operator) ?. 来防止异常的发生。这是 Kotlin 提供的有特色的语法特性，使得开发更容易而且代码更安全。
##扩展测试
现在是时候测试我们的扩展了。首先，需要编译我们的代码，并通过消除没用的代码对它进行压缩。这是通过运行Gradle任务的runDceKotlinJs来完成的。为了能让代码在被修改时立即编译，我们以持续(continous)模式运行任务。

可以在 IntelliJ IDEA 通过创建一个运行配置或者命令行来运行 Gradle 任务。

Intellij IDEA 运行配置以持续编译 Kotlin JS 代码

或者通过命令行来运行

./gradlew runDceKotlinJs --continuous

接下来，我们在终端使用 web-ext 工具启动一个新的 Firefox 实例来运行我们的已安装的扩展。

web-ext run

提示：IntelliJ IDEA 有一个内置终端。

只要运行浏览器，导航至 kotlinlang.org，就能看到会显示一个漂亮的红色边框，这说明扩展能正常工作。

我们第一个有效的 Kotlin Firefox 扩展

现在我们把边框颜色颜色由红改为绿色。修改代码为：

document.body?.style?.border = "5px solid green"

当我们切换回 Firefox 时，我们看到（短暂的延迟后，重新编译需要时间）改变自动地生效了，而我们不用去运行任何命令。
##
总结
在这篇文章中，我们看到了如何通过 Kotlin JS 编写一个简单的 Firefox 扩展来注入一个内容脚本。步骤相当简单，我们也没有遇到重大的障碍。此外，包含了持续构建和实时重载扩展的工作流程也十分让人满意。