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