MS 사이트의 docs 및 support 페이지 언어를 변환하는 Chrome 확장 프로그램을 만들려고했습니다.

개요



Microsoft의 docs나 support 페이지에서는, 일본어에서는 URL이/ja-jp/영어에서는/en-us/입니다만, 이것을 버튼 하나로 전환해 주는 Chrome 확장을 만들어 보았습니다.
Chromium 기반 Edge에서도 작동이 확인되었습니다.

이 페이지의 끝에서 github에서 다운로드 할 수 있도록 했으므로 관심이 있으시면 사용하십시오.

Microsoft docs 예제:
htps : // / cs. mic로소 ft. 코 m / 쟈 jp / 언트네 /


htps : // / cs. 미 c 로소 ft. 코 m / En-u s / Intsune /


자체 제작 추가 기능 :


경위



직업 Microsoft 페이지를 참조하는 경우가 많습니다만, 이하의 때에 영어로부터 일본어로 변환하는 것이 미묘하게 귀찮습니다.
  • 검색에서 걸린 것이 영어 페이지
  • 북마크가 링크 끊어져 영어 페이지로 리디렉션
  • 동료로부터의 참고 자료가 영어

  • 사쿠토 일영 변환해 주는 애드인이 있으면 편리하다고 생각해 작성에 이르렀습니다.

    했던 일



    좋은 시대이므로 인터넷상의 여러분은 해 본 계의 기사에서 상세하게 구현 방법을 설명해 주시고 있습니다만,
    빨리 만들고 싶었기 때문에, 누군가가 공유되고 있던 코드를 둥글게 박아 주셔, 필요한 곳만 바꿨습니다.

    개발 환경은?



    개발 환경은 필요없고, 폴더를 준비해 매니페스트인 manifest.json 과 실처리를 쓰는 background.js, 나중에 아이콘이나 약속계의 파일을 두면 준비 완료입니다.



    매니페스트 파일



    내가 변경한 것은 이름이나 제목의 변경과,
    이번에는 탭 조작 및 메뉴 표시를 위해 permissions를 추가했습니다.

    manifest.json
    {
      "name": "en-us to ja-jp",
      "version": "0.0.5",
      "manifest_version":2,
      "description": "/en-us/ -> /ja-jp/",
      "permissions": [
        "activeTab",
        "tabs",
        "contextMenus"
      ],
      "background":{
        "scripts":  ["background.js"]
      },
      "page_action": {
        "default_icon": "off19.png",
        "default_title": "Language Change"
      },
      "icons" : {
        "128": "128.png"
      }
    }
    

    실제 처리



    아래와 같은 느낌으로, 버튼 누르면 URL 을/ja-jp/인가/en-us/로 Replace 하고 페이지 갱신하는 것 뿐입니다.

    background.js
    const JA_URL = "/ja-jp/";
    const EN_URL = "/en-us/";
    
    (function(){
        // メニュー作成
        const JEID = "jatoen";
        const EJID = "entoja";
        chrome.contextMenus.create({title: "ja-jp to en-us", id: JEID, contexts: ["all"]});
        chrome.contextMenus.create({title: "en-us to ja-jp", id: EJID, contexts: ["all"]});
        chrome.contextMenus.onClicked.addListener(function (info, tab) {
            if ( info.menuItemId == JEID ) {
                replaceUrl(tab, JA_URL,EN_URL);
            }
            else if ( info.menuItemId == EJID ) {
                replaceUrl(tab, EN_URL,JA_URL);
            }
    
        });
    
      // tab がアップデートされたとき
      chrome.tabs.onUpdated.addListener(function(tabId){
          // ページアクションを出す
          chrome.pageAction.show(tabId);
      })
    
      // ページアクションアイコンをクリックしたときの挙動
      chrome.pageAction.onClicked.addListener(function(tab){
            replaceUrl(tab,EN_URL,JA_URL);
        });
    
    })();
    
    function replaceUrl(tab, oldstr, newstr) {
        var newurTmp = tab.url.replace(oldstr,newstr);
        if (newurTmp != tab.url) {
            chrome.tabs.update(tab.id, {url: newurTmp}, null);
        }
    }
    

    설치 방법


  • 아래에서 ZIP을 다운로드합니다.
    htps : // 기주 b. 코 m / 난메이 365 / 난메이 st
  • 압축을 풀고 내부 langChange 폴더를 적절한 위치에 놓습니다.
  • chrome://extensions를 열고 "패키지되지 않은 확장 기능 로드"를 클릭합니다.
  • langChange 폴더에서 데이터를 선택합니다.
  • 적절한 페이지를 다시 열면 오른쪽 상단의 아이콘이 활성화되므로 사용해보십시오.
  • 좋은 웹페이지 즐겨찾기