소개

자신의 비망록으로서 기사의 투고를 했습니다.
내용은 크지 않지만 엄청 간단하기 때문에 엔지니어가 아닌 분들도 조금 HTML 주위를 알게된다는 사람이라면 즉시 업무 효율에 도입할 수 있다고 생각합니다.

왜 어쨌든 하려고 했는가?

우선은 아래 그림을 봐 주세요.

내가 경애하는 FF14의 프로듀서 요시다 P의 리액션이 이렇게 작다고 하는 것이 있습니까?
요시다 P의 옆은 서버 짱, 한층 더 옆이 응코군입니다.
너무 작다.
너무 불만스럽고 어쨌든 해보려고 생각했다.
이것뿐입니다.
이 후 소개합니다만, 플러그인의 내용은 정말로 큰 일은 하고 있지 않습니다.
최종적으로는 확장 기능에 의해 아래 그림과 같이 됩니다.

만족.

■ 개발하자

1. 폴더 생성

2. 'manifest.json' 파일 만들기

manifest.json

{
  "manifest_version": 2,
  "name": "Slackリアクションボタンくそでか",
  "version": "1.0.0",
  "description": "Slackのリアクションボタンをめっちゃでかくするプラグインです。",
  "content_scripts": [{
    "matches": ["https://app.slack.com/client/*"],
    "css": ["style.css"]
  }]
}

위와 같이 최소한의 설정을 합니다.
문자 코드는 UTF8로 저장처는 1로 만든 폴더 바로 아래에.

3. "style.css" 파일 만들기

style.css

/*ボタンを糞でかにする*/
.c-reaction_bar {
    zoom:2.0;
}

/*ボタンに影を付けてそれっぽくする*/
.c-reaction, .c-reaction_add {
    box-shadow: -2px -1px 2px grey;
}
.c-reaction--reacted{
    box-shadow: 2px 1px 4px 2px #ccccccbf inset !important;
}

버튼의 표시 컨테이너를 사용하여, 드디어 버튼처럼 조금 가공.
이쪽도 문자 코드는 UTF8로 저장처는 1로 만든 폴더 직하.


개발은 이것으로 완료됩니다.

4. 플러그인을 Chrome에 설치

URL 바에 chrome://extensions/를 입력하여 확장 프로그램 화면을 표시합니다.
오른쪽 상단의 개발자 모드를 켭니다.


순서 1에서 작성한 폴더를 이 화면에 드래그＆드롭

설치가 성공적으로 완료되면 아래 그림과 같습니다. (왼쪽 위)

이것으로 모두 완료.

결론

엄청 쉽게 만들 수 있었기 때문에, 나 자신 놀랐습니다.
이번에는 JS에서 가챠 가챠 해볼까라고 생각합니다.