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 扩展来注入一个内容脚本。步骤相当简单，我们也没有遇到重大的障碍。此外，包含了持续构建和实时重载扩展的工作流程也十分让人满意。
原文地址：https://blog.51cto.com/14284753/2383567