使用 Kotlin 編寫(xiě)你的第一個(gè) Firefox WebExtension 擴(kuò)展

Kotlin 是我最喜愛(ài)的編程語(yǔ)言。我們已經(jīng)知道 Kotlin 編譯成 Java 字節(jié)碼可以快速被安卓和服務(wù)端采用。事實(shí)上，Kotlin 還支持編譯成 JavaScript，因此該語(yǔ)言也開(kāi)始在 Web 生態(tài)系統(tǒng)中受到關(guān)注。

盡管已經(jīng)發(fā)布了許多 Kotlin 編寫(xiě)的 Web 應(yīng)用程序，但至今人們都忽略了 Kotlin 還可以寫(xiě)瀏覽器擴(kuò)展插件。所以我寫(xiě)了這篇文章，和大家一起探討使用 Kotlin JS 編寫(xiě)一個(gè)簡(jiǎn)單的 Firefox 擴(kuò)展插件的過(guò)程。

這個(gè)擴(kuò)展程序基于 Mozilla 的 “你的第一個(gè)擴(kuò)展程序”，可簡(jiǎn)單地給網(wǎng)站 kotlinlang.org 添加一個(gè)紅色的邊框。

環(huán)境要求

為了測(cè)試我們的 Firefox 的擴(kuò)展插件，我們將要用到 Mozilla 的 web-ext 工具。想要使用它，需要安裝一個(gè) node.js，然后在終端運(yùn)行以下的命令：

npm install --global web-ext

此外，還需要使用 IntelliJ IDEA 2017.2.6 和 1.1.60 版本的 Kotlin 插件來(lái)開(kāi)發(fā)擴(kuò)展程序。

配置項(xiàng)目

打開(kāi) Intelli IDEA，創(chuàng)建一個(gè)新的 Gradle 基礎(chǔ)項(xiàng)目，并勾選 Kotlin(JavaScript) 選項(xiàng)。

使用 Kotlin (JavaScript) 創(chuàng)建一個(gè)新工程

我們繼續(xù)按照向?qū)У牟襟E執(zhí)行，直到創(chuàng)建并打開(kāi)空項(xiàng)目。

下一步，啟用 Kotlin JS 的 Dead Code Elimination 插件。這步非常重要，因?yàn)?Kotlin JS 程序需要捆綁超過(guò)兆字節(jié)大小的 Kotlin stdlib。但我們可以通過(guò)刪除無(wú)用的代碼來(lái)大幅度減少編譯的代碼量。

要啟用這個(gè)插件，只需要在 build.gradle 文件中添加下面這行代碼。

apply plugin: 'kotlin-dce-js'

創(chuàng)建擴(kuò)展清單
在下一步中，我們會(huì)添加 Firefox 擴(kuò)展所需的清單文件。這個(gè)文件被命名為 manifest.json，位于我們項(xiàng)目的根目錄下。該文件應(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"
      ]
    }
  ]

在這個(gè)文件中，我們聲明我們的擴(kuò)展將在匹配模式為 ://kotlinlang.org/ 的任何網(wǎng)站中注入一個(gè)內(nèi)容腳本。 其必要的腳本文件是 Kotlin stdlib kotlin.js 以及我們?cè)?kt-borderify.js 文件中的代碼。
代碼
接下來(lái)，在 src/main/kotlin目錄下新建 main.kt文件。當(dāng)匹配到的網(wǎng)站被加載時(shí)，代碼便會(huì)執(zhí)行。代碼的入口是標(biāo)準(zhǔn)的main函數(shù)。在main函數(shù)里，我們獲取了文檔的 body 并修改了它的邊框樣式。

import kotlin.browser.document
fun main(args: Array<String>) {
    document.body?.style?.border = "5px solid red"
}

main 函數(shù)的這段代碼類似于 JavaScript 代碼。但可以看到因?yàn)槲臋n的 body 可能是不存在的，因此這個(gè)類型系統(tǒng)會(huì)強(qiáng)制我們使用安全操作符(safe-call operator) ?. 來(lái)防止異常的發(fā)生。這是 Kotlin 提供的有特色的語(yǔ)法特性，使得開(kāi)發(fā)更容易而且代碼更安全。
##擴(kuò)展測(cè)試
現(xiàn)在是時(shí)候測(cè)試我們的擴(kuò)展了。首先，需要編譯我們的代碼，并通過(guò)消除沒(méi)用的代碼對(duì)它進(jìn)行壓縮。這是通過(guò)運(yùn)行Gradle任務(wù)的runDceKotlinJs來(lái)完成的。為了能讓代碼在被修改時(shí)立即編譯，我們以持續(xù)(continous)模式運(yùn)行任務(wù)。

可以在 IntelliJ IDEA 通過(guò)創(chuàng)建一個(gè)運(yùn)行配置或者命令行來(lái)運(yùn)行 Gradle 任務(wù)。

Intellij IDEA 運(yùn)行配置以持續(xù)編譯 Kotlin JS 代碼

或者通過(guò)命令行來(lái)運(yùn)行

./gradlew runDceKotlinJs --continuous

接下來(lái)，我們?cè)诮K端使用 web-ext 工具啟動(dòng)一個(gè)新的 Firefox 實(shí)例來(lái)運(yùn)行我們的已安裝的擴(kuò)展。

web-ext run

提示：IntelliJ IDEA 有一個(gè)內(nèi)置終端。

只要運(yùn)行瀏覽器，導(dǎo)航至 kotlinlang.org，就能看到會(huì)顯示一個(gè)漂亮的紅色邊框，這說(shuō)明擴(kuò)展能正常工作。

我們第一個(gè)有效的 Kotlin Firefox 擴(kuò)展

現(xiàn)在我們把邊框顏色顏色由紅改為綠色。修改代碼為：

document.body?.style?.border = "5px solid green"

當(dāng)我們切換回 Firefox 時(shí)，我們看到（短暫的延遲后，重新編譯需要時(shí)間）改變自動(dòng)地生效了，而我們不用去運(yùn)行任何命令。
##
總結(jié)
在這篇文章中，我們看到了如何通過(guò) Kotlin JS 編寫(xiě)一個(gè)簡(jiǎn)單的 Firefox 擴(kuò)展來(lái)注入一個(gè)內(nèi)容腳本。步驟相當(dāng)簡(jiǎn)單，我們也沒(méi)有遇到重大的障礙。此外，包含了持續(xù)構(gòu)建和實(shí)時(shí)重載擴(kuò)展的工作流程也十分讓人滿意。