Safari Web Inspector 확장 프로그램 만들기

♪♪

안녕하세요 WebKit팀 엔지니어 Devin Rousso입니다 오늘 Safari의 Web Inspector 확장 프로그램을 생성할 수 있는 새로운 기회를 여러분과 공유하고자 합니다 Web Inspector는 모든 Apple 플랫폼의 웹 콘텐츠를 디버그하기 위한 중요한 개발자 도구입니다 이미 웹사이트 디버그를 위한 수많은 기능이 내장되어 있지만 일반적인 개발자 도구로는 구축하기 어려운 웹 개발 영역들이 있습니다 유명한 JavaScript library를 디버그한다거나 여러분이 하고 있는 일에 구체적인 작업이 필요한 경우죠 Web Inspector 확장 프로그램은 이런 개인 작업에 있어 훌륭한 솔루션이 될 겁니다

크로스-브라우저 웹 확장 프로그램과 DevTools APIs를 활용해서 Safari 16의 Web Inspector에서 여러분의 탭을 추가할 수 있죠 Web Inspector 확장 프로그램의 기능을 간단히 살펴보고 여러분만의 확장 프로그램을 구축하는 법도 보여 드리겠습니다 우선 Safari의 확장 프로그램 설정을 엽니다

그리고 Web Inspector 확장 프로그램을 활성화합니다 그다음 Safari 설정 창을 닫고 페이지를 확인할 겁니다

Develop 메뉴에서 Show Web Inspector를 누릅니다 Web Inspector에서는 'Elements' 탭처럼 기존에 있던 탭뿐만 아니라 방금 활성화한 Web Inspector 확장 프로그램 탭도 있습니다 하지만 확장 프로그램을 방금 활성화했기 때문에 현재 검사 중인 페이지에 작업 권한을 부여해야 합니다 저는 Web Inspector 이외의 다른 확장 프로그램과 동일한 사용 권한 기간 옵션이 있습니다 일단은 하루만 접근 권한을 받아 보죠 이번 세션에서 Open Graph 확장 프로그램을 구축할 겁니다 이는 일반적인 소셜 미디어 메타데이터를 표시하는데 대부분 웹 사이트의 메시지 및 소셜 미디어 사이트에서 링크 미리보기에 사용합니다 Web Inspector 확장 프로그램이 할 수 있는 걸 간략히 살펴봤으니 이제는 어떻게 만드는지 얘기해 보죠 Safari 웹 확장 프로그램들과 마찬가지로 Web Inspector 확장 프로그램은 App Store의 앱을 통해 배포됩니다

여러분만의 확장 프로그램을 구축하려면 Xcode가 필요합니다 Mac과 iOS 앱을 만들기 위한 Apple의 앱 생성 도구죠 Xcode에 딸려 오는 프로젝트 템플릿이 새 Safari 확장 프로그램 앱을 만드는 걸 도와줍니다 이미 다른 브라우저용으로 만든 웹 확장 프로그램이 있는 경우 Xcode의 변환 도구도 사용할 수 있습니다 safari-web-extension-converter를 터미널에서 실행하고 확장 프로그램의 디렉토리로 보내는데 거기엔 manifest.json 파일이 포함됩니다 그다음 확장 프로그램에 대한 앱 프로젝트가 생성되면 구축 및 실행 준비는 끝난 겁니다

이 도구에 대한 자세한 내용은 'WWDC 2020의 ‘Meet Safari Web Extensions'와 온라인 자료로 확인해 보세요 오늘 저는 Web Inspector 확장 프로그램의 기본 구조와 그 프로그램에서 코드를 잘 평가하는 법을 알아보고 여러분의 사용자를 위한 몇 가지 사례를 얘기할 겁니다 그럼 시작해 보죠

Web Inspector 확장 프로그램의 구조는 Safari의 다른 확장 프로그램과 비슷합니다 툴바 아이콘이나 백그라운드 페이지 콘텐츠 스크립트 같은 것들이죠 하지만 전용 DevTools 백그라운드 페이지도 있습니다 실제로 어떻게 작동하는지 한번 살펴보죠 Safari 웹 확장 프로그램의 전형적인 구조는 기본적인 사항이 들어 있는 manifest 파일로 시작됩니다 여기엔 이름이나 아이콘 설명 같은 정보가 포함되죠 이를 통해 백그라운드 페이지에서 확장 프로그램의 숨겨둔 로직을 처리할 수도 있고 사용자가 방문한 웹 페이지에서 기능적인 부분을 주입에 사용되는 콘텐츠 스크립트도 포함됩니다

Web Inspector 확장 프로그램은 몇 개의 페이지가 섞입니다 우선, DevTools의 백그라운드 페이지가 필요합니다 Web Inspector 확장 프로그램의 로직을 위한 거죠 이 페이지는 DevTools APIs에 접근할 수 있으며 제한된 콘텐츠 스크립트 APIs에도 접근할 수 있습니다 DevTools 백그라운드 페이지에서 탭 페이지를 만들 수 있습니다 여기에 Web Inspector가 표시되는 거죠 하지만 이건 Web Inspector가 하나인 경우에 해당됩니다 만약 Web Inspector가 여러 개라면 같은 DevTools 페이지여도 여러 개의 인스턴스가 생기고 관련 Web Inspector가 열렸을 땐 활성화된 상태로 유지됩니다 그렇기 때문에 각 DevTools 탭 페이지에 여러 개의 인스턴스가 있을 수도 있죠 실제로 이 구조가 어떻지 확인해 보고 Open Graph Web Inspector 웹 확장 프로그램을 구축해 보죠

Xcode에 새로운 프로젝트를 먼저 만들겠습니다

프로젝트 유형은 Safari 확장 프로그램 앱입니다 저는 macOS만 필요하지만 나중에 iOS 기능을 추가하고 싶을 때를 대비해 멀티플랫폼으로 남겨두겠습니다 이름을 'Open Graph'로 지정하고 나머지는 기본값으로 둡니다 여러분이 사용하고 있는 Apple 개발자 계정을 기반으로 팀과 번들 식별자를 정해야 한다는 걸 알아 두세요 그리고 마지막으로 이걸 데스크톱에 저장합니다

이제 Safari 웹 확장 프로그램 프로젝트가 생성됐고 수정할 수도 있습니다 먼저 manifest.json 파일로 이동하겠습니다 이건 모든 웹 확장 프로그램 루트 구성 파일이죠 manifest 파일은 확장 프로그램을 구성하는 리소스를 참고합니다 현지화나 이미지, 페이지 스크립트, 스타일 등이죠 제 Web Inspector 확장 프로그램에는 필요하지 않은 파일들이 있습니다 백그라운드 페이지나 콘텐츠 스크립트 또는 팝업은 manifest에서 삭제하고 전제 프로젝트에서도 삭제할 겁니다

이제 Web Inspector 확장 프로그램을 만들어 보죠 DevTools 백그라운드 페이지를 manifest에 추가하고 그에 상응하는 파일을 생성하면서 내부에서 사용할 JavaScript 파일도 생성합니다 '파일'에서 '새로 만들기'를 선택합니다

그리고 밑으로 내려 '빈 템플릿'을 선택합니다

'devtools_background.html'이라고 파일을 저장해서 제가 쓰던 manifest 파일명과 통일시킬 겁니다

다른 리소스에서 위치와 타깃은 이미 설정해 뒀기 때문에 그것들은 바꿀 필요가 없습니다

JavaScript 파일에서도 같은 단계를 반복합니다

'devtools_background.js'라고 저장하겠습니다

마지막으로 DevTools 백그라운드 페이지에 JavaScript 파일을 포함해야 합니다

Web Inspector를 열 때 이 페이지를 생성하면 되는데 이는 Web Inspector에 나타나는 사용자 지정 탭 생성을 담당합니다 저는 항상 탭을 만들려고 합니다 그래서 필요한 경우에는 앞서 본 사용 권한이 바로 제 사용자들에게 표시되도록 하는 겁니다 다른 곳에 표시되는 대신에 말이죠 API를 생성하는 DevTools 패널에는 세 가지 인수가 있습니다 첫 번째는 탭의 이름입니다 저는 현지화 메서드를 이용해 제 확장 프로그램의 현지화된 이름을 확인하는 겁니다 다음은 사용하는 아이콘의 경로입니다 아이콘은 반드시 벡터 이미지여야 합니다 그래야 사용자가 선택했을 때 어떤 크기로든 부드럽게 조절되죠 하지만 이 아이콘을 사용하려면 확장 프로그램에 필요한 다른 모든 아이콘과 함께 아이콘이 제 프로젝트의 일부인지 확인해야 합니다 'images' 폴더의 아이콘은 프로젝트 템플릿의 기본값입니다 프로젝트에서 이것들을 삭제해 보죠

그리고 제가 아까 만든 아이콘으로 바꿀 겁니다

DevTools 탭을 만들 때 사용하는 'logo.svg' 파일을 포함합니다

여기까지 했으면 DevTools 백그라운드 스크립트로 돌아갑니다

세 번째는 Web Inspector 탭에서 사용되는 HTML입니다 방금 봤던 이미지처럼 제가 사용하기 전에 이 페이지를 만들어야 합니다

파일명은 'devtools_tab.html'로 지정해서 API 이름과 맞추도록 하겠습니다

하지만 DevTools 백그라운드 페이지와는 달리 이 DevTools 탭 페이지는 사용자에게 보여지기 때문에 JavaScript와 CSS 파일 둘 다 생성할 겁니다

JavaScript 파일명은 'devtools_tab.js'로 하겠습니다

그리고 CSS 파일명은 'devtools_tab.css'로 하겠습니다

이렇게 구조를 구축한 건 좋지만 지금은 'Hello World'를 추가해서 제대로 작동하는지 확인해 보겠습니다 잠시 후에 더 자세히 알아볼 테니 걱정하지 마세요 이 확장 프로그램이 일관되게 보이도록 하기 위해서 아직 바꿀 아이콘이 더 남아 있기 때문이죠 우선 큰 기본 아이콘을 교체해야 합니다

먼저 이걸 지웁니다

그리고 제 아이콘을 그 자리에 끌어다 놓는 거죠

큰 아이콘은 앱의 일부기 때문에 올바른 타깃에 추가해야 합니다

나머지 아이콘들은 Assets 카탈로그의 일부입니다 특히 AppIcon 세트의 일부죠

제가 아이콘을 미리 준비했으니 붙여 넣기 하겠습니다

이걸로 기본 아이콘은 전부 교체된 것 같군요 이제 제 확장 프로그램을 실행해 보겠습니다 프로젝트가 처음 만들어질 때는 몇 초 정도 걸릴 수 있습니다

다 됐네요! UI의 대부분은 Xcode 템플릿에서 가져온 거지만 기본 아이콘 대신 제 아이콘이 표시되죠 Safari 확장 프로그램 앱을 한 번이라도 시행하면 프로그램을 닫을 수 있습니다 더는 Safari에서 앱을 실행할 필요가 없기 때문이죠

하지만 Safari에서 확인하기 전에 서명되지 않은 앱에서 프로그램을 구축한 경우에 Develop 메뉴에서 확장 프로그램을 허용해야 합니다 이제 Safari의 확장 프로그램 설정에서 Open Graph를 볼 수 있습니다 켜 보도록 하죠

Safari 탭을 열고 apple.com으로 이동한 다음 제 확장 프로그램을 시험해 볼 수 있습니다 그리고 제 아이콘이 이미 툴바에 있는 걸 볼 수 있습니다

제 확장 프로그램 탭이 탭 바에 표시됩니다 그걸로 넘어가 보죠

앞서 본 것과 같은 권한 프롬프트를 볼 수 있습니다 이 권한 프롬프트는 확장 프로그램에서 권한이 필요한 경우에 자동으로 보여집니다 아까와 마찬가지로 하루만 허가해 보죠

제가 DevTools 탭 페이지에 추가한 'Hello World'가 보입니다 이건 Safari 16에서 Web Inspector 확장 프로그램을 만드는 기본 방법입니다 이제 정리해 보죠 제가 DevTools 백그라운드 페이지를 만들고 Xcode 프로젝트에 추가했습니다 그다음 Web Inspector에서 새로운 탭을 만들어 제가 구축한 프로그램을 보여 줬습니다 그리고 제 확장 프로그램에 필요한 권한을 고려하기 시작했죠 Web Inspector 확장 프로그램에서는 검사된 페이지에서 코드를 평가할 때도 있으며 Web Inspector 내부에 표시하려고 일부 데이터를 추출하기도 합니다 웹 확장 프로그에는 이미 코드를 평가하는 여러 방법이 있습니다 Web Inspector 확장 프로그램에는 검사된 페이지 내에서 스크립트를 평가할 때 선호하는 API가 있죠 이제 이 API를 살펴보고 제 OpenGraph 확장 프로그램에 사용하는 법을 알아보죠 검사된 페이지 내에서 JavaScript를 평가하는 DevTools 확장 프로그램 API는 빠른 결과를 얻을 수 있는 가장 좋은 방법입니다 여러분의 확장 프로그램이 실행되는 Web Inspector와 연결된 페이지를 자동 대상으로 지정하죠 사용자는 여러 페이지를 한 번에 검사할 수 있습니다 API를 위한 유용한 옵션도 있습니다 이는 옳은 결과를 얻을 수 있게 도와주죠 기본적으로 이 API에 지정된 식은 검사된 페이지의 메인 프레임 콘텍스트가 평가합니다 하지만 frameURL 옵션을 사용할 수도 있습니다 다른 프레임 내에 평가 내용을 명시하는 거죠 이는 여러분의 확장 프로그램에서 여러 개의 서브 프레임 중 추가 데이터를 추출할 때 필요하죠 제 OpenGraph 확장 프로그램은 메인 프레임만 생각하면 되지만 여러분은 Web Inspector 확장 프로그램에서 스크립트를 평가할 때 이 점을 기억해 두세요 제가 확장 프로그램에서 이 기능을 이용해 검사된 페이지의 데이터를 가져오고 표시하는 걸 보여 드리죠 우선, placeholder 'Hello World'를 바꾸겠습니다 앞서 HTML을 사용하여 로딩한 제 CSS와 JavaScript 파일이죠

그다음 기본 CSS를 추가해 DevTools 탭 스타일을 바꿉니다

제 DevTools 탭이 Web Inspector의 나머지와 일치하는지 확인해 보겠습니다 일단 color-scheme 프로퍼티에서 DevTools 탭이 Web Inspector와 일치하도록 합니다 시스템 폰트 패밀리를 이용해 폰트 크기를 맞춰 주고

가장 중요한 텍스트의 색도 맞춰 줍니다 기능적인 부분을 보도록 하죠

우선 텍스트부터 추가하겠습니다 페이지에 Open Graph 메타데이터가 없는 경우에 대비하는 거죠 Web Inspector에서 웹 확장 프로그램 localized strings를 쓸 수 있는데 웹 확장 프로그램에서는 어디에든 쓸 수 있습니다 하지만 그러기 위해서는 같은 localized string 식별자를 localized string 파일에 추가해야 합니다

다음으로 넘어가죠

제가 JavaScript를 만들어서 inspectedWindow eval API에 제공할 겁니다 그리고 검사 페이지에서 제가 평가하는 거죠 저는 이 경우에 검사 페이지의 DOM을 확인하는데 일반적인 Open Graph 메타데이터를 보는 거죠 특히 제목이나 설명을 비롯해

이미지 같은 것들은 물론이고

검사 페이지 도큐먼트의 현재 준비 상태를 확인하고 모든 걸 합쳐서 반환값을 통해 DevTools 페이지로 다시 보냅니다 그 과정이 끝나면 각 프로퍼티에 해당하는 HTML 요소를 저장할 수 있습니다

그리고 수집된 데이터를 볼 수 있도록 설정할 수 있습니다

도큐먼트가 준비되지 않았다면 잠시 후에 다시 시도할 수 있죠

검사 페이지를 탐색할 때마다 이 과정을 다시 하고 싶기 때문에 devtools network onNavigated에 lister를 추가할 겁니다

완벽하게 된 것 같으니 다시 만들어 실험해 보겠습니다

제가 Web Inspector를 열거나 열려 있는 창을 볼 때 모든 페이지에서 Open Graph 제목 설명 및 이미지를 볼 수 있습니다 새롭고 강력한 Web Inspector 확장 프로그램 APIs 사용법에 대한 간단한 예시를 보여 드렸습니다 제 Open Graph 확장 프로그램은 아주 잘 실행되고 있습니다 Web Inspector 확장 프로그램의 DevTools 탭 페이지는 검사 페이지에서 평가할 수 있습니다 저는 결과 데이터를 가져와서 처리한 다음 빠른 접근을 위해 사용자에게 익숙한 형식으로 표시합니다 그렇다면 Web Inspector 확장 프로그램을 만들 때 좋은 사용자 경험을 만드는 방법은 무엇이 있을까요? DevTools 백그라운드 페이지에서 DevTools 탭 페이지를 생성하세요 이렇게 하면 Web Inspector에서 탭이 나타나는 걸 볼 수 있고 적절한 권한 프롬프트가 바로 보여질 겁니다 특정 호스트 권한을 요청하는 대신에 activeTab 권한을 사용하고 Web Inspector 확장 프로그램을 최대한 타깃으로 삼아야 합니다 CSS color-scheme 프로퍼티를 사용하거나 웹 확장 프로그램 DevTools 테마 API를 사용해서 Web Inspector의 전체적인 테마와 일치시킵니다 Web Inspector 확장 프로그램으로 새 디버깅 도구를 만드는 방법과 그걸 만들면서 염두에 둬야 할 몇 가지 사례를 보여 드렸습니다 Open Graph Web Inspector 확장 프로그램을 다운받고 이 세션과 관련된 리소스를 더 자세히 알아보세요

여러분의 의견은 언제든지 환영입니다 피드백 지원을 통해 버그와 기능 요청 사항을 보내 주십시오 Safari 개발자 포럼에 와서 얘기하셔도 됩니다 웹 확장 프로그램 커뮤니티 그룹에 가입하는 것도 웹 확장 프로그램의 미래 형성에 도움이 될 겁니다

Safari 웹 확장 프로그램의 새로운 기능을 확인하시고 온라인 자료를 통해 올해의 변경 사항도 알아보세요 여러분이 Web Inspector를 통해 사용자 지정 도구 만드는 법을 즐겁게 배우셨기를 바랍니다 여러분이 만들 Web Inspector 확장 프로그램이 기대되는군요 여러분이 할 수 있는 모든 방법을 동원해 보세요 시청해 주셔서 감사합니다 남은 WWDC 기간도 즐겁게 보내길 바랍니다