ClojureScript 构建现代 Chrome 扩展指南

2023-12-21 07:25:44




## ClojureScript 构建现代 Chrome 扩展指南

ClojureScript 是一种用于编写交互式、高性能 Web 应用程序的语言。它基于 Clojure 语言，并编译成 JavaScript 代码。Chrome 扩展是一种可以在 Chrome 浏览器中运行的程序，可以访问 Chrome 的 API 和用户数据。

本文将介绍如何使用 ClojureScript 构建 Chrome 扩展。我们将使用 Vim 作为我们的编辑器，并使用 lein-cljsbuild 和 lein-doo 来构建我们的扩展。我们还将使用 shadow-cljs 来开发我们的扩展并集成 repl。

### 1. 搭建开发环境

首先，我们需要搭建 ClojureScript 开发环境。我们将使用 Vim 作为我们的编辑器，并安装必要的插件。

1. 安装 Vim

如果您还没有安装 Vim，请访问 https://www.vim.org/download.html 下载并安装 Vim。

2. 安装 ClojureScript 插件

接下来，我们需要安装一些 ClojureScript 插件。这些插件将帮助我们在 Vim 中编写 ClojureScript 代码。

以下是一些常用的 ClojureScript 插件：

* Paredit：这是一个 ClojureScript 编辑器插件，它提供了许多有用的功能，包括括号匹配、自动缩进和代码导航。
* Tslime：这是一个 ClojureScript 调试器插件，它允许您在 Vim 中调试您的 ClojureScript 代码。
* Vim-clojure-static：这是一个 ClojureScript 静态分析插件，它可以帮助您找到代码中的错误。
* Vim-fireplace：这是一个 ClojureScript 代码格式化插件，它可以帮助您保持您的代码整洁。

您可以使用以下命令安装这些插件：

vim +PlugInstall +qall


3. 安装 ClojureScript 工具

接下来，我们需要安装 ClojureScript 工具。这些工具将帮助我们编译和运行我们的 ClojureScript 代码。

以下是一些常用的 ClojureScript 工具：

* Leiningen：这是一个 ClojureScript 构建工具，它可以帮助您构建您的 ClojureScript 项目。
* Lein-cljsbuild：这是一个 ClojureScript 构建插件，它可以帮助您编译和运行您的 ClojureScript 代码。
* Lein-doo：这是一个 ClojureScript 开发工具，它可以帮助您开发您的 ClojureScript 项目。
* Shadow-cljs：这是一个 ClojureScript 开发工具，它可以帮助您开发和调试您的 ClojureScript 项目。

您可以使用以下命令安装这些工具：

lein install


### 2. 构建 Chrome 扩展

现在，我们已经搭建好了 ClojureScript 开发环境，我们可以开始构建我们的 Chrome 扩展了。

1. 创建新项目

首先，我们需要创建一个新的 ClojureScript 项目。您可以使用以下命令创建一个新的 ClojureScript 项目：

lein new cljs my-extension


这将创建一个名为 my-extension 的新 ClojureScript 项目。

2. 添加依赖项

接下来，我们需要添加一些依赖项到我们的项目中。这些依赖项将帮助我们构建我们的 Chrome 扩展。

以下是一些常用的 Chrome 扩展依赖项：

* chrome-extension：这是一个 ClojureScript 库，它提供了用于构建 Chrome 扩展的 API。
* lein-cljsbuild-chrome-extension：这是一个 ClojureScript 构建插件，它可以帮助您构建 Chrome 扩展。

您可以使用以下命令添加这些依赖项到您的项目中：

lein add-dependencies [chrome-extension "0.4.3"] [lein-cljsbuild-chrome-extension "0.4.3"]


3. 编写代码

现在，我们可以开始编写我们的 Chrome 扩展的代码了。

以下是一个简单的 Chrome 扩展的示例：

```clojure
(ns my-extension.core
  (:require [chrome-extension.api :as api]
            [goog.string :as string]))

(defn on-load []
  (let [text (string/trim (.-textContent (api/get-active-tab-info)))]
    (api/send-message text)))

(api/add-listener "tabs.onUpdated" on-load)