Edge, Chrome, Firefox, Opera, Brave 및 Vivaldi의 모든 브라우저에 대해 하나의 브라우저 확장 프로그램 만들기

게시 됨: 2022-03-10

빠른 요약 ↬ 오늘의 기사에서는 동일한 코드 기반을 사용하여 모든 주요 최신 브라우저에서 작동하는 JavaScript 확장을 만들 것입니다. 실제로 HTML, CSS 및 JavaScript를 기반으로 하는 Chrome 확장 모델은 이제 거의 모든 곳에서 사용할 수 있으며 표준 작업을 수행하는 브라우저 확장 커뮤니티 그룹 도 있습니다. 웹 확장 모델(예: Edge, Chrome, Firefox, Opera, Brave 및 Vivaldi)을 지원하는 이 확장을 설치하는 방법을 설명하고 모든 모델에 대해 고유한 코드 기반을 얻는 방법에 대한 간단한 팁을 제공하지만 또한 각 브라우저에서 디버그하는 방법.

웹 확장 모델(예: Edge, Chrome, Firefox, Opera, Brave 및 Vivaldi)을 지원하는 이 확장을 설치하는 방법을 설명하고 모든 모델에 대해 고유한 코드 기반을 얻는 방법에 대한 간단한 팁을 제공하지만 또한 각 브라우저에서 디버그하는 방법.

참고: Safari는 다른 것과 동일한 확장 모델을 지원하지 않기 때문에 이 기사에서 Safari를 다루지 않습니다.

기초

각 공급업체에서 이미 많은 좋은 리소스를 사용할 수 있으므로 확장 개발의 기본 사항은 다루지 않겠습니다.

점프 후 더! 아래에서 계속 읽기 ↓

Google
Microsoft(또한 훌륭한 개요 비디오 "Microsoft Edge용 확장 빌드" 참조)
Mozilla(위키 참조)
오페라
용감한

따라서 이전에 확장 기능을 구축한 적이 없거나 작동 방식을 모르는 경우 해당 리소스를 빠르게 살펴보십시오. 걱정하지 마세요. 구축하는 것은 간단하고 간단합니다.

우리의 확장

시각 장애인이 웹 페이지에서 이미지를 분석할 수 있도록 인공 지능(AI)과 컴퓨터 비전을 사용하는 확장 기능인 개념 증명을 구축해 보겠습니다.

몇 줄의 코드로 브라우저에서 몇 가지 강력한 기능을 만들 수 있음을 알 수 있습니다. 제 경우 에는 웹에서의 접근성에 대해 우려하고 있으며 예를 들어 웹 오디오 및 SVG를 사용하여 브레이크아웃 게임에 액세스할 수 있도록 하는 방법에 대해 이미 생각하는 데 시간을 보냈습니다.

그래도 저는 시각 장애인들을 좀 더 일반적인 방식으로 도울 수 있는 방법을 찾고 있었습니다. 저는 최근에 리스본에서 Chris Heilmann의 "픽셀과 픽셀에 숨겨진 의미"라는 훌륭한 강연을 들으면서 영감을 받았습니다.

실제로 웹 스피치 API를 사용하여 브라우저에 노출되거나 원격 클라우드 서비스를 사용하여 클라우드에 있는 오늘날의 AI 알고리즘과 텍스트 음성 변환 기술을 사용하여 누락된 웹 페이지 이미지를 분석하는 확장을 매우 쉽게 구축할 수 있습니다. 또는 부적절하게 채워진 alt 텍스트 속성.

내 작은 개념 증명은 단순히 웹 페이지(활성 탭에 있는 이미지)에서 이미지를 추출하고 목록에 축소판을 표시합니다. 이미지 중 하나를 클릭하면 확장 프로그램이 Computer Vision API 를 쿼리하여 이미지에 대한 설명 텍스트를 가져온 다음 Web Speech API 또는 Bing Speech API 를 사용하여 방문자와 공유합니다.

아래 비디오는 Edge, Chrome, Firefox, Opera 및 Brave에서 이를 보여줍니다.

Computer Vision API가 일부 CGI 이미지를 분석할 때도 매우 정확하다는 것을 알 수 있습니다! 나는 최근 몇 달 동안 이 분야에서 이룩한 발전에 정말 감명을 받았습니다.

다음 서비스를 사용하고 있습니다.

컴퓨터 비전 API, Microsoft Cognitive Services
이것은 무료로 사용할 수 있습니다(할당량 포함). 무료 키를 생성해야 합니다. 코드의 TODO 섹션을 키로 대체하여 이 확장이 컴퓨터에서 작동하도록 하십시오. 이 API가 무엇을 할 수 있는지 알아보려면 이 API를 사용해 보십시오.

Bing Text to Speech API, Microsoft Cognitive Services
이것은 또한 무료로 사용할 수 있습니다(할당량 포함). 무료 키를 다시 생성해야 합니다. 우리는 또한 JavaScript에서 이 API를 호출하기 위해 최근에 작성한 작은 라이브러리를 사용할 것입니다. Bing 키가 없는 경우 확장 프로그램은 항상 최신 브라우저에서 지원되는 Web Speech API로 대체됩니다.

그러나 다른 유사한 서비스를 자유롭게 사용해 보십시오.

시각적 인식, IBM 왓슨
클라우드 비전 API, 구글

내 GitHub 페이지에서 이 작은 브라우저 확장에 대한 코드를 찾을 수 있습니다. 테스트하려는 다른 제품의 코드를 자유롭게 수정하십시오.

모든 브라우저와 호환되는 코드를 만드는 팁

대부분의 코드와 튜토리얼은 Extension API(예: chrome.xxx )에 대해 chrome.tabs 네임스페이스를 사용합니다.

그러나 내가 말했듯이 Extension API 모델은 현재 browser.xxx 로 표준화되고 있으며 일부 브라우저는 그 동안 자체 네임스페이스를 정의하고 있습니다(예: Edge는 msBrowser 사용).

다행히도 대부분의 API는 브라우저 뒤에서 동일하게 유지됩니다. 따라서 JavaScript의 아름다움 덕분에 모든 브라우저와 네임스페이스 정의를 지원하는 약간의 트릭을 만드는 것은 매우 간단합니다.

 window.browser = (function () { return window.msBrowser || window.browser || window.chrome; })();

그리고 짜잔!

물론 모든 브라우저에서 지원하는 API의 하위 집합도 사용해야 합니다. 예를 들어:

Microsoft Edge에는 지원 목록이 있습니다.
Mozilla Firefox는 현재 Chrome 비호환성을 공유합니다.
Opera는 브라우저에서 지원하는 자체 확장 API 목록을 유지 관리합니다.

확장 아키텍처

이 확장의 아키텍처를 함께 검토해 보겠습니다. 브라우저 확장을 처음 사용하는 경우 흐름을 이해하는 데 도움이 됩니다.

매니페스트 파일부터 시작하겠습니다.

이 매니페스트 파일 및 관련 JSON은 물론 확장 자체의 코드를 고려하지 않는 경우 모든 브라우저에서 확장을 로드하는 데 필요한 최소한의 것입니다. 내 GitHub 계정에서 소스를 확인하고 여기에서 시작하여 확장이 모든 브라우저와 호환되는지 확인하십시오.

예를 들어 Edge에서 로드하려면 author 속성을 지정해야 합니다. 그렇지 않으면 오류가 발생합니다. 아이콘에도 동일한 구조를 사용해야 합니다. default_title 속성은 일부 브라우저의 화면 판독기에서 사용하기 때문에 중요합니다.

다음은 어디에서나 호환되는 매니페스트 파일을 빌드하는 데 도움이 되는 설명서에 대한 링크입니다.

크롬
가장자리
파이어폭스

이 글에서 사용한 샘플 확장은 주로 콘텐츠 스크립트의 개념을 기반으로 한다. 이것은 우리가 검사하려는 페이지의 컨텍스트에 있는 스크립트입니다. DOM에 액세스할 수 있기 때문에 웹 페이지에 포함된 이미지를 검색하는 데 도움이 됩니다. 콘텐츠 스크립트가 무엇인지 더 알고 싶다면 Opera, Mozilla 및 Google에 관련 문서가 있습니다.

콘텐츠 스크립트는 간단합니다.

 console.log("Dare Angel content script started"); browser.runtime.onMessage.addListener(function (request, sender, sendResponse) { if (request.command == "requestImages") { var images = document.getElementsByTagName('img'); var imagesList = []; for (var i = 0; i < images.length; i++) { if ((images[i].src.toLowerCase().endsWith(".jpg") || images[i].src.toLowerCase().endsWith(".png")) && (images[i].width > 64 && images[i].height > 64)) { imagesList.push({ url: images[i].src, alt: images[i].alt }); } } sendResponse(JSON.stringify(imagesList)); } }); view raw

그러면 먼저 콘솔에 로그인하여 확장이 제대로 로드되었는지 확인할 수 있습니다. F12 , Control + Shift + I 또는 ⌘ + ⌥ + I 에서 액세스할 수 있는 브라우저의 개발자 도구를 통해 확인하십시오.

그런 다음 현재 DOM에서 사용 가능한 모든 이미지를 가져오기 위해 requestImages 명령이 포함된 UI 페이지의 메시지를 기다린 다음 64 × 64픽셀보다 큰 경우 URL 목록을 반환합니다(모든 픽셀 추적 정크 및 저해상도 이미지).

우리가 사용하는 팝업 UI 페이지는 매우 간단하며 flexbox 컨테이너 내부에 콘텐츠 스크립트가 반환한 이미지 목록을 표시합니다. 현재 보이는 탭에 있는 이미지의 URL을 가져오기 위해 콘텐츠 스크립트에 메시지를 보내기 위해 즉시 dareangel.dashboard.js 의 인스턴스를 생성하는 start.js 스크립트를 로드합니다.

다음은 콘텐츠 스크립트에 대한 URL을 요청하는 UI 페이지에 있는 코드입니다.

 browser.tabs.query({ active: true, currentWindow: true }, (tabs) => { browser.tabs.sendMessage(tabs[0].id, { command: "requestImages" }, (response) => { this._imagesList = JSON.parse(response); this._imagesList.forEach((element) => { var newImageHTMLElement = document.createElement("img"); newImageHTMLElement.src = element.url; newImageHTMLElement.alt = element.alt; newImageHTMLElement.tabIndex = this._tabIndex; this._tabIndex++; newImageHTMLElement.addEventListener("focus", (event) => { if (COMPUTERVISIONKEY !== "") { this.analyzeThisImage(event.target.src); } else { var warningMsg = document.createElement("div"); warningMsg.innerHTML = " 다른 탭에서 Computer Vision 키를 생성하십시오. ";
                    this._targetDiv.insertBefore(warningMsg, this._targetDiv.firstChild);
                    browser.tabs.create({ 활성: false, URL: "https://www.microsoft.com/cognitive-services/en-US/sign-up?ReturnUrl=/cognitive-services/en-us/subscriptions?productId =%2fproducts%2f54d873dd5eefd00dc474a0f4" });
                }
            });
            this._targetDiv.appendChild(newImageHTMLElement);
        });
    });
});

우리는 이미지 요소를 만들고 있습니다. 각 이미지는 포커스가 있는 경우 이벤트를 트리거하여 검토를 위해 Computer Vision API를 쿼리합니다.

이것은 다음과 같은 간단한 XHR 호출에 의해 수행됩니다.

 analyzeThisImage(url) { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = () => { if (xhr.readyState == 4 && xhr.status == 200) { var response = document.querySelector('#response'); var reponse = JSON.parse(xhr.response); var resultToSpeak = `With a confidence of ${Math.round(reponse.description.captions[0].confidence * 100)}%, I think it's ${reponse.description.captions[0].text}`; console.log(resultToSpeak); if (!this._useBingTTS || BINGSPEECHKEY === "") { var synUtterance = new SpeechSynthesisUtterance(); synUtterance.text = resultToSpeak; window.speechSynthesis.speak(synUtterance); } else { this._bingTTSclient.synthesize(resultToSpeak); } } }; xhr.onerror = (evt) => { console.log(evt); }; try { xhr.open('POST', 'https://api.projectoxford.ai/vision/v1.0/describe'); xhr.setRequestHeader("Content-Type", "application/json"); xhr.setRequestHeader("Ocp-Apim-Subscription-Key", COMPUTERVISIONKEY); var requestObject = { "url": url }; xhr.send(JSON.stringify(requestObject)); } catch (ex) { console.log(ex); } } view raw

다음 문서는 이 Computer Vision API의 작동 방식을 이해하는 데 도움이 될 것입니다.

"이미지 버전 1.0 분석", Microsoft Cognitive Services
"Computer Vision API, v1.0", Microsoft Cognitive Services
이것은 웹 페이지의 대화형 콘솔을 통해 적절한 JSON 속성을 사용하여 REST API를 호출하는 방법과 반환되는 JSON 개체를 보여줍니다. 작동 방식과 호출 방법을 이해하는 것이 유용합니다.

우리의 경우 API의 describe 기능을 사용하고 있습니다. 또한 콜백에서 옵션에 따라 Web Speech API 또는 Bing Text-to-Speech 서비스를 사용하려고 한다는 것을 알 수 있습니다.

다음은 이 작은 확장의 글로벌 워크플로입니다.

각 브라우저에서 확장 로드

각 브라우저에 확장 프로그램을 설치하는 방법을 빠르게 살펴보겠습니다.

전제 조건

GitHub 어딘가에서 내 작은 확장을 하드 드라이브로 다운로드하거나 복제하십시오.

또한 적어도 Computer Vision API 키를 추가하도록 dareangel.dashboard.js 를 수정합니다. 그렇지 않으면 확장 프로그램은 웹 페이지에서 추출한 이미지만 표시할 수 있습니다.

마이크로소프트 엣지

먼저 Edge에서 확장을 지원하려면 Windows 10 1주년 업데이트(OS 빌드 14393+) 이상이 필요합니다.

그런 다음 Edge를 열고 주소 표시줄에 about:flags 를 입력합니다. "확장 개발자 기능 사용"을 확인하십시오.

Edge의 탐색 모음에서 "..."를 클릭한 다음 "Extensions"를 클릭한 다음 "Load extension"을 클릭하고 내 GitHub 리포지토리를 복제한 폴더를 선택합니다. 당신은 이것을 얻을 것이다:

이 새로 로드된 확장 프로그램을 클릭하고 "주소 표시줄 옆에 버튼 표시"를 활성화합니다.

확장 프로그램을 개발하는 동안 유용한 "확장 프로그램 새로고침" 버튼에 유의하십시오. 개발 과정에서 강제로 제거하거나 다시 설치하지 않아도 됩니다. 확장 프로그램을 새로 고치려면 버튼을 클릭하기만 하면 됩니다.

BabylonJS로 이동하여 Dare Angel(DA) 버튼을 클릭하여 비디오에 표시된 것과 동일한 데모를 따르십시오.

구글 크롬, 오페라, 비발디

Chrome에서 chrome://extensions 로 이동합니다. Opera에서 Opera opera://extensions 로 이동합니다. 그리고 Vivaldi에서 vivaldi://extensions 로 이동합니다. 그런 다음 "개발자 모드"를 활성화하십시오.

"압축 해제된 확장 프로그램 로드"를 클릭하고 확장 프로그램을 추출한 폴더를 선택합니다.

BabylonJS로 이동하여 확장 프로그램을 열어 제대로 작동하는지 확인합니다.

모질라 파이어 폭스

여기에는 두 가지 옵션이 있습니다. 첫 번째는 확장 프로그램을 임시로 로드하는 것인데, 이것은 Edge 및 Chrome에서처럼 쉽습니다.

Firefox를 열고 about:debugging 으로 이동한 다음 "임시 추가 기능 로드"를 클릭합니다. 그런 다음 확장 프로그램의 폴더로 이동하여 manifest.json 파일을 선택합니다. 그게 다야! 이제 확장을 테스트하기 위해 BabylonJS로 이동합니다.

이 솔루션의 유일한 문제는 브라우저를 닫을 때마다 확장 프로그램을 다시 로드해야 한다는 것입니다. 두 번째 옵션은 XPI 패키징을 사용하는 것입니다. 이에 대한 자세한 내용은 Mozilla 개발자 네트워크의 "확장 패키지"에서 확인할 수 있습니다.

용감한

Brave의 공개 버전에는 서명되지 않은 확장을 로드할 수 있는 "개발자 모드"가 내장되어 있지 않습니다. "Brave에서 Chrome 확장 프로그램 로드하기"의 단계에 따라 자신만의 버전을 빌드해야 합니다.

해당 기사에서 설명한 대로 Brave를 복제한 후에는 텍스트 편집기에서 extensions.js 파일을 열어야 합니다. 아래 줄을 찾아 확장에 대한 등록 코드를 삽입하십시오. 제 경우에는 마지막 두 줄을 추가했습니다.

 // Manually install the braveExtension and torrentExtension extensionInfo.setState(config.braveExtensionId, extensionStates.REGISTERED) loadExtension(config.braveExtensionId, getExtensionsPath('brave'), generateBraveManifest(), 'component') extensionInfo.setState('DareAngel', extensionStates.REGISTERED) loadExtension('DareAngel', getExtensionsPath('DareAngel/')) view raw

확장 프로그램을 app/extensions 폴더에 복사합니다. browser-laptop 폴더에서 두 개의 명령 프롬프트를 엽니다. 첫 번째에서 npm run watch 를 실행하고 webpack이 Brave의 Electron 앱 빌드를 마칠 때까지 기다립니다. "webpack: 번들이 이제 유효합니다."라고 표시되어야 합니다. 그렇지 않으면 몇 가지 문제가 발생합니다.

그런 다음 두 번째 명령 프롬프트에서 npm start 를 실행하여 약간 사용자 정의된 Brave 버전을 시작합니다.

Brave에서 about:extensions 로 이동하면 확장 프로그램이 표시되고 주소 표시줄에 로드되는 것을 볼 수 있습니다.

각 브라우저에서 확장 디버깅

모든 브라우저를 위한 팁 : console.log() 를 사용하여 확장 프로그램의 흐름에서 일부 데이터를 기록하기만 하면 됩니다. 대부분의 경우 브라우저의 개발자 도구를 사용하여 기록된 JavaScript 파일을 클릭하여 열고 디버그할 수 있습니다.

마이크로소프트 엣지

페이지 컨텍스트에 있는 클라이언트 스크립트 부분을 디버그하려면 F12 를 열면 됩니다. 그런 다음 "디버거" 탭을 클릭하고 확장의 폴더를 찾으십시오.

디버깅하려는 스크립트 파일(내 경우에는 dareangel.client.js )을 열고 평소와 같이 코드를 디버그하고 중단점을 설정하는 등의 작업을 수행합니다.

확장 프로그램이 작업을 수행하기 위해 별도의 탭을 만드는 경우(예: Vorlon.js 팀이 스토어에 게시한 페이지 분석기) 해당 탭에서 F12 를 눌러 디버그하기만 하면 됩니다.

팝업 페이지를 디버그하려면 먼저 확장의 ID를 가져와야 합니다. 그렇게 하려면 확장의 속성으로 이동하면 ID 속성을 찾을 수 있습니다.

그런 다음 주소 표시줄에 ms-browser-extension://ID_of_your_extension/yourpage.html 과 같이 입력해야 합니다. 우리의 경우 ms-browser-extension://DareAngel_vdbyzyarbfgh8/dashboard.html 입니다. 그런 다음 이 페이지에서 F12 를 사용하세요.

구글 크롬, 오페라, 비발디, 브레이브

Chrome과 Opera는 동일한 Blink 코드 기반에 의존하기 때문에 동일한 디버깅 프로세스를 공유합니다. Brave와 Vivaldi는 Chromium의 포크이지만 대부분 동일한 디버깅 프로세스를 공유합니다.

클라이언트 스크립트 부분을 디버그하려면 디버그하려는 페이지에서 브라우저의 개발자 도구를 엽니다(사용 중인 브라우저나 플랫폼에 따라 F12 , Control + Shift + I 또는 ⌘ + ⌥ + I 누름).

그런 다음 "콘텐츠 스크립트" 탭을 클릭하고 확장 프로그램의 폴더를 찾으십시오. 디버그하려는 스크립트 파일을 열고 JavaScript 코드에서와 마찬가지로 코드를 디버그하십시오.

다음은 콘텐츠 스크립트에 대한 URL을 요청하는 UI 페이지에 있는 코드입니다.

 browser.tabs.query({ active: true, currentWindow: true }, (tabs) => { browser.tabs.sendMessage(tabs[0].id, { command: "requestImages" }, (response) => { this._imagesList = JSON.parse(response); this._imagesList.forEach((element) => { var newImageHTMLElement = document.createElement("img"); newImageHTMLElement.src = element.url; newImageHTMLElement.alt = element.alt; newImageHTMLElement.tabIndex = this._tabIndex; this._tabIndex++; newImageHTMLElement.addEventListener("focus", (event) => { if (COMPUTERVISIONKEY !== "") { this.analyzeThisImage(event.target.src); } else { var warningMsg = document.createElement("div"); warningMsg.innerHTML = " 다른 탭에서 Computer Vision 키를 생성하십시오. ";
                    this._targetDiv.insertBefore(warningMsg, this._targetDiv.firstChild);
                    browser.tabs.create({ 활성: false, URL: "https://www.microsoft.com/cognitive-services/en-US/sign-up?ReturnUrl=/cognitive-services/en-us/subscriptions?productId =%2fproducts%2f54d873dd5eefd00dc474a0f4" });
                }
            });
            this._targetDiv.appendChild(newImageHTMLElement);
        });
    });
});

우리는 이미지 요소를 만들고 있습니다. 각 이미지는 포커스가 있는 경우 이벤트를 트리거하여 검토를 위해 Computer Vision API를 쿼리합니다.

이것은 다음과 같은 간단한 XHR 호출에 의해 수행됩니다.

 analyzeThisImage(url) { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = () => { if (xhr.readyState == 4 && xhr.status == 200) { var response = document.querySelector('#response'); var reponse = JSON.parse(xhr.response); var resultToSpeak = `With a confidence of ${Math.round(reponse.description.captions[0].confidence * 100)}%, I think it's ${reponse.description.captions[0].text}`; console.log(resultToSpeak); if (!this._useBingTTS || BINGSPEECHKEY === "") { var synUtterance = new SpeechSynthesisUtterance(); synUtterance.text = resultToSpeak; window.speechSynthesis.speak(synUtterance); } else { this._bingTTSclient.synthesize(resultToSpeak); } } }; xhr.onerror = (evt) => { console.log(evt); }; try { xhr.open('POST', 'https://api.projectoxford.ai/vision/v1.0/describe'); xhr.setRequestHeader("Content-Type", "application/json"); xhr.setRequestHeader("Ocp-Apim-Subscription-Key", COMPUTERVISIONKEY); var requestObject = { "url": url }; xhr.send(JSON.stringify(requestObject)); } catch (ex) { console.log(ex); } } view raw

다음 문서는 이 Computer Vision API의 작동 방식을 이해하는 데 도움이 될 것입니다.

"이미지 버전 1.0 분석", Microsoft Cognitive Services
"Computer Vision API, v1.0", Microsoft Cognitive Services
이것은 웹 페이지의 대화형 콘솔을 통해 적절한 JSON 속성을 사용하여 REST API를 호출하는 방법과 반환되는 JSON 개체를 보여줍니다. 작동 방식과 호출 방법을 이해하는 것이 유용합니다.

다음은 이 작은 확장의 글로벌 워크플로입니다.

각 브라우저에서 확장 로드

각 브라우저에 확장 프로그램을 설치하는 방법을 빠르게 살펴보겠습니다.

전제 조건

GitHub 어딘가에서 내 작은 확장을 하드 드라이브로 다운로드하거나 복제하십시오.

마이크로소프트 엣지

먼저 Edge에서 확장을 지원하려면 Windows 10 1주년 업데이트(OS 빌드 14393+) 이상이 필요합니다.

그런 다음 Edge를 열고 주소 표시줄에 about:flags 를 입력합니다. "확장 개발자 기능 사용"을 확인하십시오.

이 새로 로드된 확장 프로그램을 클릭하고 "주소 표시줄 옆에 버튼 표시"를 활성화합니다.

BabylonJS로 이동하여 Dare Angel(DA) 버튼을 클릭하여 비디오에 표시된 것과 동일한 데모를 따르십시오.

구글 크롬, 오페라, 비발디

"압축 해제된 확장 프로그램 로드"를 클릭하고 확장 프로그램을 추출한 폴더를 선택합니다.

BabylonJS로 이동하여 확장 프로그램을 열어 제대로 작동하는지 확인합니다.

모질라 파이어 폭스

여기에는 두 가지 옵션이 있습니다. 첫 번째는 확장 프로그램을 임시로 로드하는 것인데, 이것은 Edge 및 Chrome에서처럼 쉽습니다.

용감한

 // Manually install the braveExtension and torrentExtension extensionInfo.setState(config.braveExtensionId, extensionStates.REGISTERED) loadExtension(config.braveExtensionId, getExtensionsPath('brave'), generateBraveManifest(), 'component') extensionInfo.setState('DareAngel', extensionStates.REGISTERED) loadExtension('DareAngel', getExtensionsPath('DareAngel/')) view raw

그런 다음 두 번째 명령 프롬프트에서 npm start 를 실행하여 약간 사용자 정의된 Brave 버전을 시작합니다.

Brave에서 about:extensions 로 이동하면 확장 프로그램이 표시되고 주소 표시줄에 로드되는 것을 볼 수 있습니다.

각 브라우저에서 확장 디버깅

마이크로소프트 엣지

디버깅하려는 스크립트 파일(내 경우에는 dareangel.client.js )을 열고 평소와 같이 코드를 디버그하고 중단점을 설정하는 등의 작업을 수행합니다.

팝업 페이지를 디버그하려면 먼저 확장의 ID를 가져와야 합니다. 그렇게 하려면 확장의 속성으로 이동하면 ID 속성을 찾을 수 있습니다.

구글 크롬, 오페라, 비발디, 브레이브

확장 프로그램이 생성하는 탭을 디버그하려면 Edge에서와 완전히 동일합니다. 개발자 도구를 사용하기만 하면 됩니다.

Chrome 및 Opera의 경우 팝업 페이지를 디버그하려면 주소 표시줄 옆에 있는 확장 프로그램의 버튼을 마우스 오른쪽 버튼으로 클릭하고 "팝업 검사"를 선택하거나 팝업의 HTML 창을 열고 내부를 마우스 오른쪽 버튼으로 클릭하여 "검사. " Vivaldi는 HTML 창을 열면 마우스 오른쪽 버튼을 클릭한 다음 "검사"만 지원합니다.

Brave의 경우 Edge와 동일한 프로세스입니다. 먼저 about:extensions 에서 확장과 관련된 GUID를 찾아야 합니다.

그런 다음 별도의 탭에서 디버깅하려는 페이지(제 경우에는 chrome-extension://bodaahkboijjjodkbmmddgjldpifcjap/dashboard.html )를 열고 개발자 도구를 엽니다.

레이아웃의 경우 Shift + F8 을 사용하여 약간의 도움을 받을 수 있습니다. 그러면 Brave의 전체 프레임을 검사할 수 있습니다. 그리고 Brave가 React를 사용하는 Electron 앱이라는 것을 알게 될 것입니다!

예를 들어 data-reactroot 속성에 유의하십시오.

참고 : 현재 기본적으로 투명한 배경으로 팝업을 표시하기 때문에 Brave용 확장의 CSS를 약간 수정해야 했으며 내 이미지 컬렉션의 높이에도 몇 가지 문제가 있었습니다. 저는 Brave에서 4가지 요소로 제한했습니다.

모질라 파이어 폭스

Mozilla에는 웹 확장 디버깅에 대한 정말 훌륭한 문서가 있습니다.

클라이언트 스크립트 부분은 Edge, Chrome, Opera, Brave와 동일합니다. 디버그하려는 탭에서 개발자 도구를 열면 디버그할 코드가 있는 moz-extension://guid 섹션을 찾을 수 있습니다.

확장 프로그램이 생성하는 탭을 디버깅해야 하는 경우(예: Vorlon.js의 페이지 분석기 확장 프로그램) 개발자 도구를 사용하기만 하면 됩니다.

마지막으로 팝업 디버깅은 좀 더 복잡하지만 설명서의 "팝업 디버깅" 섹션에 잘 설명되어 있습니다.

각 상점에서 확장 게시

각 공급업체에는 상점에 확장을 게시하기 위해 따라야 하는 프로세스에 대한 자세한 문서가 있습니다. 그들은 모두 비슷한 접근 방식을 취합니다. 특정 파일 형식(대부분 ZIP과 유사한 컨테이너)으로 확장자를 패키징해야 합니다. 그런 다음 전용 포털에 제출하고 가격 책정 모델을 선택한 다음 검토 프로세스가 완료될 때까지 기다려야 합니다. 수락하면 확장 저장소를 방문하는 모든 사용자가 브라우저 자체에서 확장을 다운로드할 수 있습니다.

다음은 다양한 프로세스입니다.

Google: "Chrome 웹 스토어에 게시"
Mozilla: "WebExtension 게시"
Opera: "출판 지침"
Microsoft: "Microsoft Edge 확장 패키징"

Microsoft Edge 확장을 Windows 스토어에 제출하는 것은 현재 제한된 기능입니다. Microsoft Edge 팀에 Windows 스토어 참여 요청을 문의하세요. 그러면 향후 업데이트를 고려할 것입니다.

Vorlon.js 페이지 분석기 확장과 이 작은 개념 증명 작업에서 배운 것을 최대한 공유하려고 했습니다.

일부 개발자는 확장을 빌드하기 위해 다양한 구현을 통해 작업하는 고통을 기억합니다. 다른 빌드 디렉토리를 사용하든, 약간 다른 확장 API로 작업하든, Firefox의 XUL 확장 또는 Internet Explorer의 BHO 및 ActiveX와 같은 완전히 다른 접근 방식을 따르는 것이든 상관 없습니다.

오늘날 우리의 일반 JavaScript, CSS 및 HTML 기술을 사용하여 모든 브라우저에서 동일한 코드 기반을 사용하여 훌륭한 확장을 구축할 수 있다는 사실을 알게 되어 정말 기쁩니다!

피드백이 있으면 언제든지 Twitter에서 저에게 핑을 보내주십시오.