소개

사내에서 ChatWork를 사용하고 있습니다만, 조금이라도 편리하게 할 수 있으면 좋겠다고 생각해, chrome의 확장 기능을 자작했습니다.

이 기사에서는 다음 세 가지에 대해 씁니다.

만든 확장 프로그램 설명

크롬 확장 프로그램 개발 환경, 개발 절차

크롬 확장 프로그램을 저장소에 게시하는 단계

무엇을 만들었습니까?

이것입니다.

ChatWork 용 Chrome 확장 프로그램입니다.
구체적으로는 링크처의 개요에 써 있습니다만, 할 수 있는 것을 글머리 기호로 써 보겠습니다.

정형문을 설정

상용문을 버튼(*1) 클릭으로 호출

키보드 단축키에도 등록 할 수 있습니다

(* 1) 텍스트 영역의 "TO"등이있는 부분



↑버튼 부분을 HTML로 설정할 수 있도록 하고 있으므로, 외형의 자유도가 높아서 좋은 느낌입니다!

구현 절차

chatWork에 대한 확장 기능은 이미 몇 가지 공개되어 있으며, 그 중 라이센스가 MIT의 것이 있었기 때문에 그것을 기반으로 만들었습니다.
htps : // 기주 b. 코 m / 유키 아사노 / CW_ 쿠이 c 킨후 엔푸 t

사용 기술

Chrome-Javascript-API

Svelte

sass

webpack

구현!

크롬 확장 프로그램은 모두 manifest.json이라는 파일로 시작합니다.
이 파일에

버전

확장 프로그램의 이름, 개요

아이콘 이미지의 설정(16×16, 48×48, 128×128의 3 사이즈 준비하지 않으면 안 된다, 이것이 귀찮다!)

설정 화면 경로

언제 어느 시점에서 js가 실행되는지

등 설정합니다.

실제 manifest.json의 소스는 여기

manifest.json

{
    "name": "ChatWork Quick Input",
    "version": "0.2",
    "manifest_version": 2,　//最近3が発表されたらしい
    "description": "ChatWorkのテキスト入力をサポートする拡張機能",
    "permissions": ["storage"], //使用するChrome-Javascript-APIによって権限をリクエストする必要がある
    "content_security_policy": "script-src 'self'; object-src 'self'",
    "icons": {
        "16" : "images/icon_16.png",
        "48" : "images/icon_48.png",
        "128": "images/icon_128.png"
    },
    "content_scripts": [{　// chatworkページ上で実行されるjsの設定
        "matches": ["*://*.chatwork.com/*","*://chatwork.com/*","*://kcw.kddi.ne.jp/*"],
        "js": ["scripts/jquery-3.5.1.min.js", "scripts/core.js"],
        "run_at": "document_end",
        "all_frames": true
    }],
    "options_page":"pages/public/index.html"　// 設定画面
}

그리고는 실장할 뿐!

공개 절차

공식 공개 절차에 따라 게시했습니다.

대략적으로 이하의 흐름으로 공개합니다.

확장 프로그램의 zip 파일 만들기

개발자 계정 만들기

zip 파일 업로드

상점에서 설명 작성

신청→승인

공개!

출처

참고