Chrome 및 Firefox와 호환되는 첫 번째 브라우저 확장 프로그램을 쉽게 만드는 실용적인 가이드

맞춤형 브라우저 확장 프로그램을 만들면 브라우저의 기능을 확장하고 생산성을 향상시키거나 단 한 번의 클릭으로 반복되는 문제를 해결할 수 있습니다. 공통 표준에 대한 지원이 증가함에 따라 여러 브라우저에서 작동하는 단일 확장 프로그램을 개발하는 것은 초보자와 전문가 모두에게 현실적인 목표가 되었습니다.

사파리, 크롬, 파이어폭스 로고 위에 퍼즐 조각처럼 표시된 인기 오픈소스 브라우저 확장 프로그램: 크롬 및 파이어폭스와 호환되는 첫 번째 브라우저 확장 프로그램을 쉽게 만드는 실용적인 가이드.

확장 프로그램의 성공은 파일 구조, 권한 메커니즘, 그리고 웹 페이지와 안전하고 효율적으로 상호 작용하는 방법을 이해하는 데 달려 있습니다. 표준 관행을 준수하면 브라우저별로 필요한 수정 사항을 최소화하고 배포 프로세스를 가속화할 수 있습니다.

이 가이드는 크롬, 파이어폭스 및 기타 브라우저와 호환되는 브라우저 확장 프로그램을 구축하기 위한 명확한 단계를 제공하며, 장기적인 성능, 안정성 및 유지 관리 용이성을 보장하는 모범 사례에 중점을 둡니다.

WebExtensions 이니셔티브와 핵심 웹 기술 덕분에 크로스 브라우저 호환 확장 프로그램 개발이 쉬워졌습니다. 표준화된 형식을 사용하면 특정 브라우저를 대상으로 할 필요 없이 어디에서든 작동하는 확장 프로그램을 작성할 수 있습니다.

웹 페이지를 사용자 지정으로 편집할 수 있는 플러그인을 직접 프로그래밍하고 테스트하는 방법을 배워보세요.

차례

웹 플러그인이란 무엇인가요?

웹 플러그인은 다양한 브라우저와 호환되는 확장 기능으로, 웹 애플리케이션 프로그래밍 인터페이스(API)를 사용하여 웹 브라우저의 기본 기능을 향상시킵니다. 플러그인은 소스 코드 형태로 배포되며 HTML, CSS, JavaScript와 같은 핵심 웹 기술을 활용합니다.

웹 확장 프로그램은 거의 30년 동안 존재해 왔지만, 브라우저마다 전통적으로 서로 다른 방식으로 지원해 왔습니다. 즉, 크롬 확장 프로그램은 파이어폭스와 호환되지 않았고, 그 반대의 경우도 마찬가지였습니다. 하지만 표준화 노력과 크로뮴 엔진을 중심으로 많은 브라우저가 통합되면서 이러한 문제는 점차 해결되었습니다. 2021년부터 웹 확장 프로그램(WebExtensions) 이니셔티브는 이러한 생태계를 공식적으로 규제하는 것을 목표로 삼고 있습니다. 이상적으로는 개발자가 확장 프로그램을 한 번만 작성하여 모든 브라우저에서 사용할 수 있도록 하는 것이 목표입니다.

또한 읽기: 연결 또는 페어링되지 않는 Apple Pencil에 대한 상위 7가지 수정 사항

계속 읽어보시면 웹 플랫폼을 사용하여 모든 브라우저와 호환되는 최신 확장 프로그램을 개발하는 방법을 알 수 있습니다. 생각보다 훨씬 쉽습니다!

참고: 웹 확장 프로그램은 브라우저에 구애받지 않도록 설계되었지만, Firefox는 확장 프로그램을 일시적으로 로드할 수 있도록 해주기 때문에 개발하기 가장 쉬운 브라우저입니다. 반면 Safari는 유료 개발자 구독이 필요합니다.

매니페스트 파일 작성: 모든 플러그인에 필요한 것은 플러그인의 일반적인 구조를 설명하는 매니페스트 파일뿐입니다. 다음은 예시입니다.

{
    "manifest_version": 3,
    "name": "my first extension",
    "version": "1.0",
    "icons": {
        "16": "app/images/icon16.png",
        "48": "app/images/icon48.png",
        "128": "app/images/icon128.png"
    },
    "permissions": [
        "webNavigation",
        "storage"
    ],
}

주의
이 파일은 JSON 형식이므로 사용 가능한 모든 도구를 사용하여 편집하거나 볼 수 있습니다.

필수 키는 name, version, manifest_version 세 개뿐입니다. name과 version 키는 애플리케이션에 따라 다르며, 이 설명에서는 실제 값이 중요하지 않습니다. 하지만 버전이 유효하지 않으면 Chrome에서 확장 프로그램을 로드하지 않으므로, "0" 또는 "0.0.1"과 같이 1에서 4 사이의 점으로 구분된 정수인지 확인하세요.

manifest_version은 다소 민감한 부분입니다. 다른 브라우저는 버전 1과 2를 지원할 수 있지만, Chrome은 버전 3을 사용하지 않으면 어떤 확장 프로그램도 로드하지 않습니다. 이 버전을 사용하면 제어력이 다소 떨어지지만, Chrome에서 지원을 받으려면 사용하는 것이 좋습니다.

또한 매니페스트 파일에서는 추가 기능의 특성을 설명하기 위해 여러 키를 사용할 수 있습니다. 여기에는 작성자, 설명 및 아이콘이 포함되며, 이는 스토어에서 추가 기능을 홍보하는 데 유용할 수 있습니다. Command 키를 사용하면 키보드 단축키를 정의할 수 있습니다.

또한 읽기: Facebook Messenger에서 그룹 채팅을 종료하는 방법

`content_scripts` 키는 플러그인이 JavaScript 또는 CSS 파일을 로드하고 웹 페이지에 적용할 수 있도록 해주기 때문에 가장 중요한 매니페스트 키 중 하나입니다.

"content_scripts": [{
    "matches": ["https://en.wikipedia.org/wiki/*"],
    "js": ["script.js"],
    "css": ["style.css"]
}]

`content_scripts` 파일의 각 요소에는 확장 프로그램이 실행되는 URL을 지정하는 `matches` 키가 포함되어야 합니다. `js` 및 `css` 키를 사용하면 일치하는 페이지를 표시할 때 확장 프로그램이 로드해야 하는 스크립트 또는 스타일시트 목록을 지정할 수 있습니다.

확장 코드 작성

이 간단한 예제는 시뮬레이션합니다. 탬퍼 몽키Tampermonkey는 웹 페이지를 맞춤 설정할 수 있는 인기 있는 확장 프로그램입니다. 이를 사용하면 Reddit 피드에서 "가장 인기 있는" 콘텐츠가 표시되지 않도록 설정하는 등의 작업을 할 수 있습니다.

매니페스트 파일과 약간의 자바스크립트를 사용하면 간단한 웹 확장 프로그램을 쉽게 만들 수 있습니다. 이 예제는 위키백과 페이지를 보는 방식을 바꾸지만, 가능성은 무궁무진합니다. 웹 페이지로 할 수 있는 모든 것을 확장 프로그램을 통해 구현할 수 있습니다.

{
    "manifest_version": 3,
    "name": "tweakipedia",
    "description": "Tweak Wikipedia pages to our liking",
    "version": "1.0",

    "content_scripts": [{
        "matches": ["https://en.wikipedia.org/wiki/*"],
        "js": ["tweakipedia.js"],
        "css": ["tweakipedia.css"]
    }]
}

간단하게 CSS 코드를 사용하여 몇 가지를 제 개인적인 취향에 맞게 수정해 보겠습니다. 예를 들어, 저는 "추가 참고 자료 필요"라는 알림이 마음에 들지 않습니다. 일반 독자에게는 거슬리기 때문입니다. 따라서 해당 요소의 카테고리를 지정하고 display 속성을 "none"으로 설정하여 숨기겠습니다.

.box-More_citations_needed { display: none; }

선행을 베풀고 싶지 않다면 모금 공지를 숨길 수도 있습니다.

.cn-fundraising { display: none; }

그 후, 각주 표시가 다소 거슬리는 것 같아서 색상을 조정하여 중요도를 약간 낮추겠습니다.

sup a { color: rgb(51, 102, 204, 0.5); }

참고로, 이는 알파 채널이 50%인 기본 색상으로, 거의 투명합니다. 이렇게 하면 이러한 표시가 눈에 잘 띄지 않게 됩니다.

이 개념을 좀 더 자세히 살펴보면, 필요할 때만 다른 요소들을 숨기거나 수정하고, 변경 사항을 쉽게 되돌릴 수 있는 기능을 추가하고 싶습니다. 이를 위해서는 약간의 자바스크립트가 필요하지만, 매우 간단하게 구현할 수 있습니다!

toggle_on_key("Escape", "sup a,.mw-editsection,.vector-page-toolbar");

function toggle_on_key(key, sels) {
    document.addEventListener("keydown", function (ev) {
        if (ev.key === key) {
            document.querySelectorAll(sels).forEach(function (node) {
                node.style.display = node.style.display === "none" ? "" : "none";
            });
        }
    });
}

특정 키를 누르면 특정 요소를 숨기거나 표시하는 편리한 기능을 만들었습니다. 이벤트 핸들러는 해당 키를 검색하고, 선택자와 일치하는 모든 요소를 찾아 시각적 상태에 따라 숨기거나 표시합니다. 이 기능은 스타일시트와 동일한 CSS(display) 속성을 사용하지만, JavaScript를 사용하여 동적으로 구현합니다.

또한 읽기: Windows 및 Linux에서 PDF 파일을 병합하는 방법