링크 여는 방식 변경하기

홈 ❯ 구현 예제

웨일은 웨일만의 웹 API를 제공합니다. 웨일 링크 형식과 자바스크립트를 사용하여 특정 페이지를 웨일만의 기능인 듀얼탭, 사이드바, 모바일 창, 웹앱 창으로 열도록 할 수 있습니다. 이는 확장앱 처리 결과를 사이드바에서 열거나 모바일 창에서 여는 등 여러 방식으로 응용할 수 있습니다. HTML 속성 변경을 활용하거나 자바스크립트를 활용하는, 크게 두 가지로 방법으로 나뉘지만 두 방법 모두 콘텐츠 스크립트를 이용하여 구현할 수 있습니다.

`rel` 속성 사용

콘텐츠 스크립트는 현재 페이지의 DOM에 접근할 수 있습니다.
Selector API를 이용해 변경하려는 링크 요소를 특정하고 rel 속성을 변경해주면 됩니다.

content-script.js

const links = document.querySelectorAll("a");

links.forEach(link => {
    link.setAttribute("rel", "whale-dualtab");  // 이제 모든 <a> 는 듀얼탭에서 열립니다
});

rel 속성을 해제하고 싶다면 속성 제거 메서드를 이용하여 해제할 수 있습니다.

content-script.js

const link = document.querySelector("a");
link.removeAttribute("rel");    // 이제 기본 링크 동작으로 돌아갑니다.

사이드바, 모바일 창 모두 같은 방법으로 구현할 수 있습니다. 자세한 내용은 rel 속성 문서를 참고하세요.

자바스크립트 이용

자바스크립트를 통해서도 링크 여는 방식을 변경할 수 있습니다. 이 경우 window.open() 함수의 세 번째 인자에 원하는 속성을 넣고, 클릭 이벤트를 통해 실행시키는 방법으로 구현할 수 있습니다. 세 번째 인자에 넣는 속성에는 rel 속성 말고도 width, height 등 일부 속성을 함께 넣을 수 있습니다.

index.html

<body>
    <button>듀얼탭에서 열기</button>
</body>

content-script.js

const button = document.querySelector("button");
const clickEvent = () => window.open("https://mail.naver.com/", "_blank", "whale-space");

button.addEventListener("click", clickEvent); // 듀얼탭에서 열기를 누르면 네이버 메일이 듀얼탭에서 열립니다

기존에 설정된 클릭 이벤트가 있는 경우, 기존 클릭 이벤트를 막고 다른 방식으로 여는 이벤트를 설정해주면 됩니다.

index.html

<body>
    <a href="https://mail.naver.com" target="_self">네이버 메일 열기</button>
</body>

content-script.js

const link = document.querySelector("a");
const { href, target } = link;

const clickEvent = (event) => {
    // 기존 클릭 이벤트 비활성화
    event.preventDefault();
    event.stopPropagation();

    window.open(href, target, "whale-space, width=300, height=400");
}

link.addEventListener("click", clickEvent); // 네이버 메일 열기를 누르면 듀얼탭에서 열립니다

사이드바, 모바일 창, 웹앱 창 모두 같은 방법으로 구현할 수 있습니다.

더 알아보기

← 테스트와 디버깅 매니페스트 버전3로 변경하기 →