使用 Kotlin 编写你的第一个 Firefox WebExtension 扩展-白红宇

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

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

这个扩展程序基于 Mozilla 的，可简单地给网站添加一个红色的边框。

环境要求

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

npm install --global web-ext复制代码

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

配置项目

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

*使用 *Kotlin (JavaScript)

创建一个新工程

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

下一步，启用 Kotlin JS 的插件。这步非常重要，因为 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.documentfun main(args: Array
    
     ) {    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 有一个。

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

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

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

document.body?.style?.border = "5px solid green"复制代码

当我们切换回 Firefox 时，我们看到（短暂的延迟后，重新编译需要时间）改变自动地生效了，而我们不用去运行任何命令。

总结在这篇文章中，我们看到了如何通过 Kotlin JS 编写一个简单的 Firefox 扩展来注入一个内容脚本。步骤相当简单，我们也没有遇到重大的障碍。此外，包含了持续构建和实时重载扩展的工作流程也十分让人满意。