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

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 扩展来注入一个内容脚本。步骤至关简单，咱们也没有遇到重大的障碍。此外，包含了持续构建和实时重载扩展的工做流程也十分让人满意。