使用 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 擴展來注入一個內容腳本。步驟相當簡單，我們也沒有遇到重大的障礙。此外，包含了持續構建和實時重載擴展的工作流程也十分讓人滿意。