Chrome Extension in CLJS - 개발 환경 구축

머리말
  칼 갈 이 는 장작 패기 에 지장 이 없 으 며, 크롬 플러그 인 을 만 드 는 클 로 저 스 크 립 트 개발 환경 을 소개 한다.구체 적 인 도구 창고: vim (paredit, tslime, vim - clojure - static, vim - fireplace) + leiningen (lein - cljsbuild, lein - doo, lein - ancient) + com. cemerick / figgieback
시원스럽게 써 라
* 8195: 우선 cljs 를 js, 디 버 깅, 테스트 와 발표 등 으로 컴 파일 하 는 문 제 를 버 리 고 첫 번 째 중요 한 것 은 시원 하 게 쓰 는 것 입 니 다 ~ 8195: cljs 에서 가장 짜증 나 는 것 은 괄호 () 입 니 다. 과거 에 저 는 괄호 대신 문법 을 바 꿀 수 있 을 까 생각 했 습 니 다.paredit. vim 은 이 문 제 를 해결 하기에 딱 좋다.
설치 하 다.
vimrc 에 추가

Plugin 'paredit.vim'

vim 에서 실행

:source %
:PluginInstall

설정 키

"    
let mapleader=','
let g:mapleader=','

사용법

입력 (, [, { 과 " 은 자동 으로 생 성 ), ], } 과 " 되 며 커서 는 그 중에서 vim 은 insert 상태 에 있다.

normal 모드 에서 입력 +W 하면 현재 커서 가 있 는 표현 식 을 괄호 로 감 싸 줍 니 다.

normal 모드 에서 입력 +w+[ 하면 현재 커서 가 있 는 표현 식 을 생 성 [] 합 니 다.

normal 모드 에서 입력 +w+" 하면 현재 커서 가 있 는 표현 식 을 생 성 "" 합 니 다.

더 많은 용법 은 :help paredit 을 통 해 paredit 의 문 서 를 보면 됩 니 다.
컴 파일 환경
『 8195 』 cljs 는 js 로 컴 파일 된 후에 야 실 행 될 수 있 습 니 다. 여 기 는 leiningen 을 사용 합 니 다.셸 에서 실행

#     
$ lein new crx-demo
$ cd crx-demo

프로젝트 디 렉 터 리 의 project.clj 는 바로 프로젝트 파일 입 니 다. 우 리 는 이 를 다음 과 같이 수정 합 니 다.

(defproject crx-demo "0.1.0-SNAPSHOT"
  :description "crx-demo"
  :urnl "http://fsjohnhuang.cnblogs.com"
  :license {:name "Eclipse Public License"
            :url "http://www.eclipse.org/legal/epl-v10.html"}
  :dependencies [[org.clojure/clojure "1.8.0"]               ;;   dependencies       
                 [org.clojure/clojurescript "1.9.908"]]
  :plugins [[lein-cljsbuild "1.1.7"]]                        ;;   plugins  leiningen   ，       lein cljsbuild  lein-cljsbuild     
  :jvm-opts ["-Xmx1g"]                                        ;;   JVM    ，            
  :cljsbuild {:builds
              [{:id "browser_action"
                :source-paths ["src/browser_action"]
                :compiler {:main browser-action.core
                           :output-to "resources/public/browser_action/js/ignoreme.js"
                           :output-dir "resources/public/browser_action/js/out"
                           :asset-path "browser_action/js/out"
                           :optimizations :none              ;;   ：       ，         :none
                           :source-map true
                           :source-map-timestamp true}}
               {:id "content_scripts"
                :source-paths ["src/content_scripts"]
                :compiler {:main content-scripts.core
                           :output-to "resources/public/content_scripts/js/content_scripts.js"
                           :output-dir "resources/public/content_scripts/js/out"
                           :asset-path "content_scripts/js/out"
                           :optimizations :whitespace
                           :source-map true
                           :source-map-timestamp true}}}]}
  :aliases {"build" ["cljsbuild" "auto" "browser_action" "content_scripts"] ;;     ，    lein build       browser_action content_scripts      。
  })

  위 설정 은 분명 합 니 다. 저 는 browseraction 과 contentscripts 는 두 개의 독립 된 하위 항목 으로 크롬 플러그 인 에서 Browser Action, Page Action, Content Scripts 와 Background 등 은 모두 상대 적 으로 독립 된 모듈 이 서로 의존 하지 않 고 실행 방식 과 환경 이 다 르 기 때문에 독립 된 하위 항목 으로 설정, 컴 파일 과 최적화 가 더욱 적합 합 니 다.다음 에 resources / public / img 디 렉 터 리 를 새로 만 들 고 icon. jpg 라 는 아이콘 을 첨부 하면 됩 니 다.esmp;그리고 resources / public 에서 manifest. json 파일 을 새로 만 듭 니 다. 수정 내용 은 다음 과 같 습 니 다.

{
  "manifest_version": 2,
  "name": "crx-demo",
  "version": "1.0.0",
  "description": "crx-demo",
  "icons":
  {
    "16": "img/icon.jpg",
    "48": "img/icon.jpg",
    "128": "img/icon.jpg"
  },
  "browser_action":
  {
    "default_icon": "img/icon.jpg",
    "default_title": "crx-demo",
    "default_popup": "browser_action.html"
  },
  "content_scripts":
  [
        {
            "matches": ["*://*/*"],
            "js": ["content_scripts/js/core.js"],
            "run_at": "document_start"
        }
  ],
  "permissions": ["tabs", "storage"]
}

다음 에 새로 만 들 기 resources/public/browser_action.html, 그리고 수정 내용 은 다음 과 같 습 니 다.