크롬 브라우저 탭 제목 변경하기

lucablaq (28)in #chrome • 7 years ago (edited)

윈도우에서 크롬을 사용할 경우

인터넷 어떻게 사용하고 계신가요?
크롬 브라우저를 사용할 경우에 옵션에서 "이전 탭들을 저장하기"를 해두고 크롬을 닫으면
크롬을 실행할때 크롬을 종료하기전에 열어두었던 탭들이 한꺼번에 열립니다.

마치 즐겨찾기에 넣어둔 것처럼 크롬을 껏다가 키는 것 만으로
이전에 열었던 탭들이 그대로 열리는 것을 확인할 수 있습니다.

그렇게 여러개의 탭들을 닫지 않고 나중에 보는 것과
개인적으로 봐야할 탭들 그리고 개별적으로 구분해 놓은 것들등으로
계속 닫지 않고 크롬을 사용하게되다보니 탭의 수가 굉장히 늘어났습니다.

거의 50개를 넘기는건 기본이고 가끔 100개 가까이 열어두고 작업을 하기도 합니다.
회사에서나 집에서나 이렇게 많은 탭을 열어두고 작업을 할 경우
탭들을 비슷한 분류끼리 구분하기 위해서 비슷한 탭끼리 하나의 창에 넣어두게 됩니다.

그런데 이런 창들도 늘어나다보면 어떤 창이 어떤 창인지 알기가 참 어렵죠...
그래서 생각한게 현재 페이지의 제목을 변경하면 브라우저의 제목이 변경되는 기능을 사용해서 창들을 구분지어 두는 것이었습니다.

잘 모르시겠다고요?
일단 이 링크를 한번 들어가보시죠 ㅎㅎ

https://ilos.glitch.me/title-change

입력창에 입력을 하면 페이지의 타이틀이 변경이 되고 창의 이름도 변경이 되는 것을 확인할 수 있습니다. ㅎㅎ
저는 이 사이트를 이용을 해서 각 창에 첫번째 탭을 카테고리 이름으로 정리해두었습니다.
그리고 작업표시줄에 최소화를 해두면 어떤 창이 어떤 탭들이 모인 창인지 한눈에 알 수 있었죠 ㅎㅎ

아래에 소스코드도 같이 올리니 한번 사용해보시기 바랍니다~

[ Source Code ]

<!DOCTYPE html>
<html>
  <head>
    <title>Welcome to Glitch!</title>
    <meta name="description" content="Can use browser title change">
    <link id="favicon" rel="icon" href="https://glitch.com/edit/favicon-app.ico" type="image/x-icon">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    Title : <input id="inputChangeTitle" /> <input type="button" id="buttonNavTitle" value="Move" />
    <script>
      var inputChangeTitle = document.querySelector("#inputChangeTitle");
      var buttonNavTitle = document.querySelector("#buttonNavTitle");
      
      setTitle( "Change Your title" );
      
      inputChangeTitle.addEventListener('change', inputChangeTitleChangeHandler);
      inputChangeTitle.addEventListener('keydown', inputChangeTitleKeyDownHandler);
      buttonNavTitle.addEventListener('click', buttonNavTitleClickHandler);
      buttonNavTitle.addEventListener('enter', buttonNavTitleEnterHandler);
      
      var title = getTitleFromUrl();
      if ( title ) {
        setTitle(title);
        setDomInnerHtml( inputChangeTitle, title );
      }
      
      setTimeout(function() {
        inputChangeTitle.focus();
      }, 10);
      
      function getUrl() {
        var url = location.origin + location.pathname;
        return url;
      }
      function getTitleFromUrl() {
        var title = "";
        var search = location.search.substring(1);
        if ( search ) {
          var params = JSON.parse('{"' + decodeURI(search).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g,'":"') + '"}');  
          title = params.title;
        }        
        return title;
      }
      function navTitle(title) {
        var urlWithTitle = getUrl() + "?title=" + title;
        location.href = urlWithTitle;
      }
      
      function inputChangeTitleChangeHandler(event) {
        var title = inputChangeTitle.value;
        navTitle( title );
      }
      function inputChangeTitleKeyDownHandler(event) {
        var KEY = {ENTER: 13};
        var which = event.which || event.keyCode;
        if ( which == KEY.ENTER ) {
          var title = inputChangeTitle.value;
          navTitle( title ); 
        }
      }
      function buttonNavTitleClickHandler(event) {
        var title = inputChangeTitle.value;
        navTitle( title );
      }
      function buttonNavTitleEnterHandler(event) {
        var title = inputChangeTitle.value;
        navTitle( title );
      }
      
      function setDomInnerHtml(dom, title) {
        dom.value = title;
      }
      function setTitle(title) {
        document.title = title;
      }
    </script>
  </body>
</html>

#kr #browser #html #javascript