프로덕션 환경에서 어색하고 싶지 않습니다.

web개발을 하는데 있어서, 프로덕션 환경·스테이징 환경·개발 환경 등, 복수의 환경이 있는 경우가 대부분이라고 생각합니다.
테스트나 확인 ​​등은 기본 개발 환경에서 하는 것이 보통이라고 생각합니다만, 실 데이터를 보고 싶은 등의 사정으로 프로덕션 환경을 접할 필요가 있는 경우도 있다고 생각합니다.
그런 가운데, 「개발 환경이라고 생각하면 실전이었다!!」가 되면, 매우 무서운 일이 될 수 있습니다.

프로덕션과 개발 환경을 동시에 열지 않게 하거나 매번 주소 표시줄을 확인하면서 작업하도록 하면 됩니다만, 뭔가 더 한눈에 프로덕션이라고 알 수 있는 방법이 없을까라고 생각하면 chrome extension에서 그렇게 할 수 있을 것 같아서 해 보았습니다.

한눈에 프로덕션 환경으로 알 수 있도록

chrome extension에서 페이지의 HTML에 DOM을 추가하여 프로덕션 환경이라는 것을 알 수 있도록 메시지를 표시시키려고합니다.

chrome extension 구성

적당히 디렉토리를 잘라, 이하의 파일을 준비했습니다.

safety_catch          #ルートディレクトリ
    ├── icons
    │   └── icon.png  #適当なアイコン
    ├── main.css      #追加するDOM要素用css
    ├── main.js       #ページにDOM要素を追加するjavascript
    └── manifest.json #extension用の設定

그리고 먼저 manifest 설정을 작성합니다.

manifest.json

{
    "manifest_version": 2,   // manifestのバージョン
    "name": "Safety catch",  // extensionの名前
    "version": "1.0",        // extensionのバージョン
    "description": "Prevent misoperation on production environment", // extensionの説明
    // 使用するアイコン
    "icons": { 
        "16": "icons/icon.png", 
        "48": "icons/icon.png", 
        "128": "icons/icon.png"
    },
    "content_scripts": [
        {
            "matches": ["https://google.com/*"], // このurlの場合に以下が有効になる
            "js": ["main.js"],                   // DOMを追加するjavascript
            "css": ["main.css"],                 // スタイル指定用のcss
            "run_at": "document_end"
        }
    ]
}

content_scripts의 matches에서 사용하려는 url을 지정합니다.
여기에 프로덕션 url을 지정하여 프로덕션 환경에서만 메시지를 표시합니다.
이번에는 우선 google로 둡니다.

javascript로 DOM 추가

main.js에서 페이지에 DOM을 추가하여 메시지를 표시합니다.
페이지를 로드한 시점에서 화면 오른쪽 하단에 메시지를 표시하는 div를 추가합니다.
다만, 쭉 오른쪽 하단에 표시되어 있으면 문자가 숨기거나 버튼을 누르지 않거나 하기 때문에, 마우스 오버로 div의 스타일을 바꾸어 반대측(오른쪽 아래에 있을 때는 좌하, 좌하에 있을 때는 오른쪽 아래)로 도망 가십시오.

main.js

window.onload = showSafetyCatchExtentionPanel();

/* onloadのタイミングでページ右下にdivを追加して、そこにメッセージを表示する。*/
function showSafetyCatchExtentionPanel() {
    var panel = document.createElement('div');
    panel.setAttribute('id', 'safety_catch_extention_panel');
    panel.setAttribute('class', 'safety_catch_extention_panel_bottom_right');
    panel.onmouseover = toggleSafetyCatchExtentionPanel;

    var message = document.createElement('p');
    message.innerText = '!!!本番注意!!!';

    panel.appendChild(message);
    document.body.appendChild(panel);
}

/* ずっと右下にあると邪魔なので、マウスオーバーで表示位置を変える。 */
function toggleSafetyCatchExtentionPanel() {
    var panel = document.getElementById('safety_catch_extention_panel');
    var elementClass = panel.getAttribute('class');
    if (elementClass == 'safety_catch_extention_panel_bottom_right') {
        panel.setAttribute('class', 'safety_catch_extention_panel_bottom_left');
    } else {
        panel.setAttribute('class', 'safety_catch_extention_panel_bottom_right');
    }
}

나머지는 CSS로 스타일을 지정합니다.

main.css

/* メッセージを表示するdivの */
#safety_catch_extention_panel {
  padding: 10px;
  border: solid 1px #000000;
  -webkit-border-radius: 10px;
  -webkit-box-shadow: 5px 5px 5px #aaaaaa;
  position: fixed;
  bottom: 20px;
  z-index: 99999;
  background-color:rgba(255, 215, 0, 0.8);
  color: #dc413c;
  float: left;
  font-weight: bold;
  font-size: xx-large;
}

/* これで右下に表示 */
.safety_catch_extention_panel_bottom_right {
  position: fixed;
  bottom: 15px;
  right: 15px;
}

/* これで左下に表示 */
.safety_catch_extention_panel_bottom_left {
  position: fixed;
  bottom: 15px;
  left: 15px;
}

나중에 이것을 chrome에 추가하면 확인할 수 있습니다.

크롬에 확장을 추가합니다.

추가하기 쉽고,
1. 오른쪽 상단 메뉴에서 설정 탭을 열고 확장 기능을 선택합니다.
2. 오른쪽 상단의 "개발자 모드"를 체크할 수 있습니다.
3. 패키징되지 않은 확장 기능 로드를 클릭합니다.
4. 파일을 배치한 디렉토리 선택
입니다.

그러면 아래와 같이 화면 오른쪽 하단에 메시지가 표시됩니다.



마우스 오버로 왼쪽 하단으로 도망 가십시오.



이것은 manifest.json에 지정된 url 아래의 페이지에서만 표시됩니다.

그리고 이제 chrome에서 프로덕션에 액세스했을 때 비교적 한눈에 알게 되었습니다.
chrome으로 액세스했을 때만으로, 완전히 오조작을 저지할 수 있는 것은 아닙니다만, 일단 눈에 붙기 때문에 조금은 도움이 될 것 같습니다.