Chatworkのふざけちゃいけない部屋を赤くするChrome拡張

Tatsuya Tobioka

Published in

Ruffnote

6 min readMar 5, 2019

皆さんチャットでふざけてますか？
わりとぼくはふざけた発言が多いんですが、お客さんの前でそれをやってしまうと致命傷ですよね…。

弊社では、以下のようなチャットがあります。（歴史的経緯やお客さんのニーズによって分散している）

Slack（社内やりとり用）
Slack（お客さんやりとり用）
Chatwork（社内やりとり用）
Chatwork（お客さんやりとり用）

このうち、ふざけてもいいのは1・3だけです。
2はワークスペース自体が分かれる事が多いのであまり誤爆の心配はなく、いちばんやらかしそうなのは4です。

Chatworkには組織外のユーザーがいると表示が変わる機能があります。
ただ、弊社の場合組織外の人に手伝ってもらうことも多く、彼らの前でふざける分にはなんの問題もありません。
（内心、この社員なんぞ？と思われている可能性はありますが…）

というわけで、要注意の部屋リストを設定しておいて、その部屋の場合は表示を赤くするChrome拡張を作って対策することにします。

必要な機能

今回の拡張はとても単純なので、機能は以下の2つだけです。

Chrome拡張の設定画面でルームIDのリストを保存
ルームIDにマッチしたらチャットの入力欄を赤くする

manifest.json

機能1のための設定画面を opstions_ui で、機能2のためのスクリプトを content_scripts で設定すればOKです。
また、設定を保存するために storage を要求します。

{
  "name": "RedWork",
  "version": "1.0",
  "description": "Danger Zone",
  "permissions": ["storage"],
  "options_ui": {
    "page": "options.html",
    "chrome_style": true
  },
  "content_scripts": [
    {
      "matches": ["https://www.chatwork.com/*", "https://kcw.kddi.ne.jp/*"],
      "js": ["content.js"]
    }
  ],
  "manifest_version": 2
}

設定画面

HTMLはこんな感じです。

<!DOCTYPE html>
<html>
<head>
<style>
label {
  display: block;
  margin-bottom: 0.5rem;
}
textarea {
  width: 100%;
}
</style>
</head>
<body>
  <label for="rooms">Room IDs</label>
  <textarea id="rooms" rows="10"></textarea>
</body>
<script src="options.js"></script>
</html>

JSはこちら。

function loadOptions() {
  chrome.storage.sync.get('rooms', function(items) {
    if (!items.rooms) {
      return
    }
    document.querySelector('#rooms').value = items.rooms 
  })
}function saveOptions(e) {
  chrome.storage.sync.set({
    rooms: e.target.value
  })
}document.addEventListener('DOMContentLoaded', loadOptions)
document.querySelector('#rooms').addEventListener('input', saveOptions)

この状態で拡張を読み込むと以下のような設定画面が表示できるようになります。

入力欄を赤くする

さて、あとはメインの赤くする機能です。

(function() {const TEXTAREA_ID = '#_chatText'
const RETRY_LIMIT = 5function makeRed() {
  const roomId = location.hash.match(/rid(\d+)/)[1]
  chrome.storage.sync.get('rooms', function(items) {
    if (!items.rooms) {
      return
    }
    const color = items.rooms.split('\n').includes(roomId) ? '#FF8A80' : null
    document.querySelector(TEXTAREA_ID).style.backgroundColor = color
  })
}function waitTextarea(retryCount) {
  if (retryCount > RETRY_LIMIT) {
    return
  }if (document.querySelector(TEXTAREA_ID)) {
    makeRed()
  } else {
    setTimeout(function() { waitTextarea(retryCount + 1) }, 1000)
  }
}window.addEventListener('hashchange', makeRed)
waitTextarea(1)})()