使用 Kotlin 编写你的第一个 Firefox WebExtension 扩展 Kotlin 是我最喜爱的编程语言。我们已

来自：开源中国社区

链接：www.oschina.net/translate/your-first-firefox-web-extension-in-kotlin

原文：http://medium.com/@Cypressious/your-first-firefox-web-extension-in-kotlin-348fc907915

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

下一步，构建一个使用 Web Extensions API 作为接口的扩展可能会很有趣。例如，创建一个工具栏按钮。

●本文编号270，以后想阅读这篇文章直接输入270即可

●输入m获取文章目录

推荐↓↓↓

Java编程

更多推荐《18个技术类微信公众号》

涵盖：程序人生、算法与数据结构、黑客技术与网络安全、大数据技术、前端开发、Java、Python、Web开发、安卓开发、iOS开发、C/C++、.NET、Linux、数据库、运维等。