Kotlin 是我最喜愛的編程語言。我們已經(jīng)知道 Kotlin 編譯成 Java 字節(jié)碼可以快速被安卓和服務(wù)端采用。事實上，Kotlin 還支持編譯成 JavaScript，因此該語言也開始在 Web 生態(tài)系統(tǒng)中受到關(guān)注。
盡管已經(jīng)發(fā)布了許多 Kotlin 編寫的 Web 應(yīng)用程序，但至今人們都忽略了 Kotlin 還可以寫瀏覽器擴展插件。所以我寫了這篇文章，和大家一起探討使用 Kotlin JS 編寫一個簡單的 Firefox 擴展插件的過程。
這個擴展程序基于 Mozilla 的 “你的第一個擴展程序”，可簡單地給網(wǎng)站 kotlinlang.org 添加一個紅色的邊框。
環(huán)境要求
為了測試我們的 Firefox 的擴展插件，我們將要用到 Mozilla 的 web-ext 工具。想要使用它，需要安裝一個 node.js，然后在終端運行以下的命令：
npm install --global web-ext
此外，還需要使用 IntelliJ IDEA 2017.2.6 和 1.1.60 版本的 Kotlin 插件來開發(fā)擴展程序。
配置項目
打開 Intelli IDEA，創(chuàng)建一個新的 Gradle 基礎(chǔ)項目，并勾選 Kotlin(**JavaScript) **選項。
*使用 *Kotlin (JavaScript) 創(chuàng)建一個新工程
我們繼續(xù)按照向?qū)У牟襟E執(zhí)行，直到創(chuàng)建并打開空項目。
下一步，啟用 Kotlin JS 的 Dead Code Elimination 插件。這步非常重要，因為 Kotlin JS 程序需要捆綁超過兆字節(jié)大小的 Kotlin stdlib。但我們可以通過刪除無用的代碼來大幅度減少編譯的代碼量。
要啟用這個插件，只需要在 build.gradle 文件中添加下面這行代碼。
apply plugin: 'kotlin-dce-js'
創(chuàng)建擴展清單
在下一步中，我們會添加 Firefox 擴展所需的清單文件。這個文件被命名為 manifest.json，位于我們項目的根目錄下。該文件應(yīng)包含如下內(nèi)容：
{
"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/ 的任何網(wǎng)站中注入一個內(nèi)容腳本。 其必要的腳本文件是 Kotlin stdlib kotlin.js 以及我們在 kt-borderify.js 文件中的代碼。
代碼
接下來，在 src/main/kotlin目錄下新建 main.kt 文件。當匹配到的網(wǎng)站被加載時，代碼便會執(zhí)行。代碼的入口是標準的main函數(shù)。在main 函數(shù)里，我們獲取了文檔的 body 并修改了它的邊框樣式。
import kotlin.browser.document
fun main(args: Array<String>) {
document.body?.style?.border = "5px solid red"
}
main 函數(shù)的這段代碼類似于 JavaScript 代碼。但可以看到因為文檔的 body 可能是不存在的，因此這個類型系統(tǒng)會強制我們使用安全操作符(safe-call operator) ?. 來防止異常的發(fā)生。這是 Kotlin 提供的有特色的語法特性，使得開發(fā)更容易而且代碼更安全。
擴展測試
現(xiàn)在是時候測試我們的擴展了。首先，需要編譯我們的代碼，并通過消除沒用的代碼對它進行壓縮。這是通過運行Gradle任務(wù)的runDceKotlinJs 來完成的。為了能讓代碼在被修改時立即編譯，我們以持續(xù)(continous)模式運行任務(wù)。
可以在 IntelliJ IDEA 通過創(chuàng)建一個運行配置或者命令行來運行 Gradle 任務(wù)。
Intellij IDEA 運行配置以持續(xù)編譯 Kotlin JS 代碼
或者通過命令行來運行
./gradlew runDceKotlinJs --continuous
接下來，我們在終端使用 web-ext 工具啟動一個新的 Firefox 實例來運行我們的已安裝的擴展。
web-ext run
提示：IntelliJ IDEA 有一個內(nèi)置終端。
只要運行瀏覽器，導(dǎo)航至 kotlinlang.org，就能看到會顯示一個漂亮的紅色邊框，這說明擴展能正常工作。
我們第一個有效的 Kotlin Firefox 擴展
現(xiàn)在我們把邊框顏色顏色由紅改為綠色。修改代碼為：
document.body?.style?.border = "5px solid green"
當我們切換回 Firefox 時，我們看到（短暫的延遲后，重新編譯需要時間）改變自動地生效了，而我們不用去運行任何命令。
總結(jié)
在這篇文章中，我們看到了如何通過 Kotlin JS 編寫一個簡單的 Firefox 擴展來注入一個內(nèi)容腳本。步驟相當簡單，我們也沒有遇到重大的障礙。此外，包含了持續(xù)構(gòu)建和實時重載擴展的工作流程也十分讓人滿意。
