[Chrome 확장] Backlog 알림이 쌓이면 데스크톱에 알림

삿포로 Advent Calendar 2021 15일째 보도다.
개요

Backlog 알림이 쌓이면 데스크톱 알림의 Chrome 확장 기능을 만듭니다.

이 글은 아직 완성되지 않았다.(이동하지만 개량의 여지가 있다)

하고 싶은 계기.
며칠 전에 투고프로젝트 과제 관리가 백로그에 도입되면를 했는데 그 사건의 고객 측 담당자가 우연히 중얼거렸다.
"아직 백로그에 익숙하지 않아서 깜빡 잊고 봤어요. 데스크톱 알림이 있으면 큰 도움이 돼요."
백로그는 알림, 메일 알림 등의 기능을 갖추고 있어 개인적으로는'메신저처럼 즉각성을 요구할 필요가 없기 때문에 데스크톱 알림이 필요하지 않다'고 판단했다.
다만, 기술이 해결되지 않아 괴로워하는 목소리를 들었을 때'뭔가 하고 싶다'는 마음이 드는 것은 사실이다.나는 도전하기 전부터 흥미를 느꼈던 크롬 확장 기능에 도전하기로 결정했다.
크롬 확장 기능 만드는 법
만들고 싶은 기능에 대한 인상은 다음과 같은 느낌이다.

Backlog API를 통해 정기적으로 알림 개수

일정 건수 이상이면 데스크톱 알림'00건 이상 알림'

기본 구성
우선 이쪽 기사를 참고하게 해 주세요.
Chrome 확장 방법(초개요)
우선 "API 호출"과 "데스크톱 알림"을 실행하고 싶기 때문에 최소한 manifest가 필요합니다.json과 js 파일 두 개를 만들기로 했습니다.
마지막 디렉터리 구조는 다음과 같다.

root(任意の名前)
 ├ manifest.json -- 設定ファイル
 ├ background.js -- 処理本体
 └ backlog-favicon.svg -- デスクトップ通知用のアイコン

※ 열심히 공부하고 싶은 사람은 Google이 공개한 공식 문서를 읽는 것이 좋습니다.
https://developer.chrome.com/docs/extensions/
배포 Backlog API 키
Backlog API란 무엇입니까?
과제, 위키, 파일 추가와 취득부터 API에서 프로젝트와 사용자 관리 등 브라우저에서 백로그가 할 수 있는 대부분의 작업을 할 수 있다.
https://developer.nulab.com/ja/docs/backlog/
Backlog API 인증에는 API 키 또는 OAuth 두 가지가 있습니다.
이번에는 API 키를 사용합니다.
Backlog에 로그인한 후 [개인 설정] > [API] > [로그인] 버튼을 누르면 API 키가 발행됩니다.

manifest.json 만들기manifest.json는 Chrome 확장을 위한 설정 파일로 반드시 만들어야 합니다.이번 기술은 아래와 같다.
manifest.json

{
  "name": "Backlog Desktop notification",
  "version": "1.0.0",
  "manifest_version": 2,
  "description": "Backlog のお知らせ件数を通知します",
  "permissions":[
    "notifications"
  ],
  "background": {
    "scripts": [
        "js/background.js"
    ],
    "persistent": false
  }
}

주요 부분만 설명하다.
프로젝트 이름
설명
반드시... 해야 한다
name
Chrome 확장자 이름
○
version
Chrome의 확장된 버전입니다.4층까지 표현할 수 있어요.
○
manifest_version
구성 파일 버전지금 틀림없이
○
permissions
Google에서 제공하는 JS API를 사용할 때는 객체 사용을 기술합니다.
background
백그라운드에서 작업할 JS 파일을 지정합니다.여러 개를 지정할 수 있습니다.
주 처리 제작 (js 파일)
자세한 설명은 잠시 접어두고 15분마다 Backlog를 실행하는 알림 정보로 API를 얻고 10개 이상의 알림이 있으면 데스크톱 알림을 보냅니다.
background.js

setInterval(function(){
    let xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(data) {
        if (xhr.readyState == 4) {
            if (xhr.status == 200) {
                let contents = xhr.responseText;
                let parse_data = JSON.parse(contents);
                if (parse_data.length > 0) {
                    let options={
                        type: "basic",
                        title: "Backlog 通知",
                        message: "お知らせが" + parse_data.length + "件以上あります！確認してね",
                        iconUrl: "backlog-favicon.svg"
                    };
                    chrome.notifications.create(options);        
                }
            }
        }
    };

    let url = 'https://[スペースID].backlog.jp/api/v2/notifications?apiKey=[自分のAPIキー]&count=10';
    xhr.open('GET', url, true);
    xhr.send();    

}, 1000 * 60 * 15);

동작 확인
만든 크롬 확장자를 브라우저에 적용합니다.

Chrome의 주소 표시줄에 chrome://extensions/를 입력하고 확장 기능 설정 화면

을 표시합니다.

오른쪽 상단의'개발자 모드'가 OFF일 경우 ON

으로 설정

왼쪽 위에 있는 "패키지되지 않은 확장 기능 읽기"에서 만든 확장 기능의 디렉토리

를 선택합니다.

올바르게 적용할 때 다음과 같이 표시됩니다.(포장되지 않아 ID가 고정되지 않음)

10건 이상의 알림이 있으면 15분마다 다음 데스크톱 알림이 표시됩니다.

Windwos 사용자에게 알림이 표시되지 않은 사용자는 다음 설정을 확인하십시오.
[설정][시스템]>[알림과 동작][소스별 알림 수신 설정]
Chrome의 설정은 ON입니다.

앞으로 개선하고 싶은 부분.
일단 백로그를 확인하지 못할 때는 계속 알림을 보내면 고통스러워 한 번 확인하고 일정 시간 알리지 않는 옵션을 원한다.
총결산
크롬 확장 기능은 이번이 처음이지만 의외로 쉽게 만들 수 있었다.
또 지금까지 백로그 API도 활용할 기회가 없었지만 편리한 API를 많이 준비해 스스로 봇과 도구를 만들고 싶을 때 유용하다고 생각했다.
자기가 원하는 걸 만들면 즐거워!나는 이것이 이번의 가장 큰 수확이라고 생각한다.