Backlog에서 과제의 일람 표시 & 알림을 담당하는 크롬 확장 개발

Backlog를 확인하기 위해 웹 페이지를 하나하나 여는 것은 메일을 보기 귀찮은 사람이고, 여러 작업 공간에서 자신의 후기 목록을 볼 수 있으며, 과제가 생기면 알려주는 크롬 확장→yk-lab/backlog-notification을 완성했다.
yk-lab/backlog-notification - GitHub

사용법


다운로드 및 설치


먼저 다운로드하고 구축한 다음에 설치한다(점포 미공개).
※ npm 명령을 사용할 수 있는 환경에서
클론 및 구축
$ git clone [email protected]:yk-lab/backlog-notification.git
$ cd backlog-notification
$ npm install
$ npm run build
Chrome 확장 설치 단계:

  • 열기chrome://extensions
  • 오른쪽 상단에'개발자 모드'가 유효
  • 포장되지 않은 확장 기능 읽기
  • 클릭
  • "backlog-notification/build"폴더 선택
  • 설정


    확장된 옵션 페이지를 엽니다.
    아래 화면이 나타나므로 도메인 및 API 키를 입력하여 저장하십시오.
    (API 키 획득 방법: API 설정 – Backlog 도움말 센터

    기능 소개


    담당 과제 일람


    작업 목록을 표시하려면 확장 아이콘을 클릭합니다.

    과제 알림 담당(β 기능)


    담당 과제를 설정하면 알려 드리겠습니다.

    방법을 강구하는 곳


    목록 표시부의 DOM 생성


    이제야 HTML이 잘 template 라벨이 있다는 걸 알았어.
    이번에 그template 라벨을 사용하여 과제 일람의 DOM 생성을 진행한다.

    여러 공간 지원


    워낙 여러가지를 여는 것만으로도 짜증이 나서 이곳에 얽매이기 시작했다.
    json-editor/json-editor: JSON Schema Based Editor를 사용하여 여러 공간 설정용 창을 쉽게 가져옵니다.

    최후


    크롬 확장 기능은 만들어본 적이 없어 백그라운드 공간이 여러 개 있을 때 담당 부분을 바로 확인하려고 한다.
    더 편리한 확장 기능을 아시면 말씀해 주세요.
    GiitHub의 issue, Pull Request, 트위터 DM의 버그 보고서, 아이디어 제공 등을 기대하고 있다.
    코드의 팩스도 환영합니다!

    참고 자료


    Chrome API 문서

  • chrome.alarms - Chrome Developers
  • chrome.notifications - Chrome Developers
  • chrome.storage - Chrome Developers
  • chrome.tabs - Chrome Developers
  • import/require Webpack

  • Concepts | webpack
  • [ECMAScript] import의 Syntax Error-Qiita
  • # Common JS와 ES6의 import/export에서 길을 잃으면 - Qita
  • 웹팩과 바벨의 기본 이해 (1) - 웹팩편-Qiita
  • Node.js13.2.0에서--experimental-modules가 떨어져서 ESM 테스트
  • Node.js의 ES Modules 지원 현황 확인 및 준비 - teppeis blog
  • JSLint(JSHint)

  • JSLint를 사용하십시오!(기본 설명 및 옵션 요약) | JavaScript |ANALOGIC(아날로그 로직)를 포함
  • DOM 생성

  • template 요소의 사용법을 아십니까? -Qiita
  • 어느 것이 빠릅니까?DOM 요소를 대량으로 삽입합니다.고견
  • 설계

  • [복사 가능] HTML과 CSS에서 카드 인코딩 6 선택 |eclair의 블로그
  • CSS Filter를 사용하여 배경색과 일치하는 텍스트 색상 자동 설정 - Blanktar
  • json-editor

  • @json-editor/json-editor - npm
  • 기타

  • chrome-extension-cli - npm
  • Give users options - Chrome Developers
  • [Chrome Extension] 팝업부터 간이 셔터까지. - Qita.
  • Chrome 확장에 유용한 API 요약 - Qita
  • How to enable fetch POST in chrome extension contentScript? - Stack Overflow
  • JS가 수행하는 시기가 다양해요. - 큐타.
  • JavaScript| 함수에서 호출 소스로 여러 값 반환
  • arrays - Javascript Fetch inside a map - Stack Overflow
  • Date.parse() - JavaScript | MDN
  • Date.prototype.toLocaleString() - JavaScript | MDN
  • size-plugin | Probot
  • 좋은 웹페이지 즐겨찾기