[기타] 와우헤드 정복자보드 깔끔하게 보기

와우헤드에서 정복자보드 깔끔하게 보기

매번 정복자 보드 보는거 스트레스 받아서 만들어 본건데요,

조금의 귀찮음 투자 대비 더 많은 편리함을 원하는 사람이라면 ㄱㄱ.

0. 동작 방식 설명

사이트에 불필요한 요소를 삭제해주는 코드를 한번에 실행하는 방법.

뭐 방식 몰라도 걍 따라하면 됩니다.

1. 원래 정복자 보드 

원래는 아래와 같이 불필요한 부분이 많음

2. 결과 물 

이걸 하고 나면 아래처럼 정복자 보드만 보게 됨.

3. 크롬 플러그인 설치 

일단 코드를 한번에 실행하게 해줄 플러그인을 설치.

https://chromewebstore.google.com/detail/scripty-javascript-inject/milkbiaeapddfnpenedfgbfdacpbcbam?hl=ko 

플러그인을 설치하고 나면 주소창 옆에 플러그인이 추가 되어 있을 것임. 

이 아이콘을 클릭하면 아래와 같은 화면을 볼 수 있음. 

여기서, Add New Script를 클릭해서 코드를 넣어줄 것임.

4. 스크립트 추가하기 

이제 아래와 같은 화면이 나오는데, 각 항목에 그림 아래 참고해서 넣기

Name : 

아무거나 입력

Javascript code: 

아래 코드 복사해서 붙여넣기

document.getElementsByClassName("blocks")[0].remove();

document.getElementsByClassName("sidebar-wrapper")[1].remove();

document.getElementsByClassName("header-wrapper")[0].remove();

document.getElementsByClassName("d4-build-planner-page-heading")[0].remove();

document.getElementsByClassName("wh-toolbar-header")[0].remove();

document.getElementsByClassName("page-controls")[0].remove();

document.getElementsByClassName("footer")[0].remove();

document.getElementsByClassName("heading-size-2 heading-bar")[0].remove();

document.getElementsByClassName("d4-image-card-container")[0].remove();

document.getElementsByClassName("wh-tabs d4-build-planner-tabbed-nav")[0].remove();

document.getElementsByClassName("wh-toolbar")[0].remove();

document.getElementsByClassName("d4-paragon-calc-search-container")[0].remove();

document.getElementById("zul-bar").remove();

var style = document.createElement('style');

style.innerHTML = `

.layout:before { display: none !important; }

.sidebar-wrapper, .page-content { margin-top: 0px!important}

.d4-build-planner-container {

    z-index: 10000!important;

    position: absolute!important;

    top: 0!important;

    left: 0!important;

    right: 0!important;

    bottom: 0!important;

}

.page-content {

    position: unset!important;

}

.layout-wrapper {

    position: unset!important;

}

.d4-build-planner-container .d4-build-planner-tabbed-nav {

    top: unset!important;

`;

document.head.appendChild(style);

Run script if : 

URL Pattern, Matches

그 아래 텍스트 박스 별표까지 넣기 : (별을 꼭 넣어야함)

https://www.wowhead.com/* 

Trigger: 

Manually

이제 준비가 되었음.

5. 해보기 

예를들어 더큐님의 중재자 빌드 예시로 아래 경로로 들어가보겠음. 

https://www.wowhead.com/diablo-4/ko/build/%EC%84%B1%EA%B8%B0%EC%82%AC-%EC%8A%A4%ED%83%80%ED%84%B0-%EC%A4%91%EC%9E%AC%EC%9E%90-51710

여기서 중요한건 정복자까지 눌러서 보드를 보고 있어야함. 

이제 정복자 페이지가 보이면, 

아까 설치했던 플러그인을 클릭해주면, 추가했던 스크립트가 보임.

저기에 목록에 보이는 항목을 클릭하면 정복자 보드만 보이는 깨끗한 화면을 볼 수 있음. 

원하는 보드를 즐겨찾기 해두고, 저걸 누르면 넓게 볼 수 있음. 

수고하셨습니다.