Chrome 살펴보기
chrome.i18n
chrome.i18n 인프라를 사용하여 전체 앱 또는 확장 프로그램에서 다국어화를 구현합니다. 확장 프로그램에 /_locales 디렉터리가 있는 경우 manifest 에서 "default_locale" 를 정의해야 합니다. 사용자에게 표시되는 모든 문자열을 messages.json 라는 파일에 배치해야 합니다. 새 언어를 추가할 때마다 /_locales/_localeCode_ 라는 디렉터리에 메시지 파일을 추가합니다. 여기서 localeCode
- Chrome 확장 프로그램
Windows의 Chromium 기반 브라우저에서 텍스트 렌더링 개선
Edge팀은 Chromium에서 Windows ClearType Tuner 값을 직접 따르는 지원을 추가하여 Windows의 Chromium 기반 브라우저에서 텍스트 렌더링을 개선했습니다.
- Chrome
chrome.storage
chrome.storage API를 사용하여 사용자 데이터의 변경사항을 저장, 검색, 추적합니다. 스토리지 API를 사용하려면 확장 프로그램 manifest 에서 "storage" 권한을 선언합니다. 예를 들면 다음과 같습니다. Storage API는 사용자 데이터와 상태를 유지하는 확장 프로그램별 방법을 제공합니다. 웹 플랫폼의 스토리지 API ( IndexedDB 및 Storage )와 유사하지만 확장 프로그램의 스토리지 요구사항을
- Chrome 확장 프로그램
chrome.storage
chrome.storage API를 사용하여 사용자 데이터의 변경사항을 저장, 검색, 추적합니다. Storage API는 사용자 데이터와 상태를 유지하는 확장 프로그램별 방법을 제공합니다. 웹 플랫폼의 스토리지 API ( IndexedDB 및 Storage )와 유사하지만 확장 프로그램의 스토리지 요구사항을 충족하도록 설계되었습니다. 다음은 몇 가지 주요 기능입니다. 확장 프로그램은 일부 컨텍스트 (팝업 및 기타 HTML 페이지)에서 [
- Chrome 확장 프로그램
인공지능
Chrome의 AI AI와 함께 하는 차세대 웹 시대에 오신 것을 환영합니다. 개발자가 AI를 통해 어떻게 강력한 웹 환경을 더 쉽게 빌드할 수 있는지 알아보세요. Chrome의 Gemini Nano로 실현할 수 있는 가능성을 새롭게 바꿔보세요. 기본 제공 AI Google은 Gemini 생태계의 가장 효율적인 모델인 Gemini Nano를 Chrome에 도입합니다. 클라이언트 측에서 작업 클라이언트 측 AI는 데이터 개인 정보를 보호하고 지연
Docs
빌드하는 모든 항목에 필요한 코드 샘플, 가이드, API 참조입니다.
Chrome for Developers
웹에서 구축, 성장, 혁신을 이루도록 지원합니다.
- Chrome
chrome.userScripts
userScripts API를 사용하여 사용자 스크립트 컨텍스트에서 사용자 스크립트를 실행합니다. User Scripts API( chrome.userScripts )를 사용하려면 스크립트를 실행하려는 사이트의 manifest.json에 "userScripts" 권한을 추가하고 "host_permissions" 를 추가합니다. 사용자 스크립트는 웹페이지의 모양이나 동작을 수정하기 위해 웹페이지에 삽입되는 코드 스니펫입니다. 콘텐츠 스크립트 및
- Chrome 확장 프로그램
chrome.printing
chrome.printing API를 사용하여 Chromebook에 설치된 프린터로 인쇄 작업을 전송합니다. 모든 chrome.printing 메서드와 이벤트에는 확장 프로그램 매니페스트 에서 "printing" 권한을 선언해야 합니다. 예를 들면 다음과 같습니다. 아래 예는 인쇄 네임스페이스의 각 메서드 사용을 보여줍니다. 이 코드는 extensions-samples GitHub 저장소의 api-samples/printing 에서 복사했거나
- Chrome 확장 프로그램
chrome.printing
chrome.printing API를 사용하여 Chromebook에 설치된 프린터로 인쇄 작업을 전송합니다. 모든 chrome.printing 메서드와 이벤트에는 확장 프로그램 매니페스트 에서 "printing" 권한을 선언해야 합니다. 예를 들면 다음과 같습니다. 아래 예는 인쇄 네임스페이스의 각 메서드 사용을 보여줍니다. 이 코드는 extensions-samples GitHub 저장소의 api-samples/printing 에서 복사했거나
- Chrome 확장 프로그램
미디어 재생 시 자동으로 PIP 모드로 전환
Chrome에서는 미디어를 재생하는 웹 앱이 PIP 모드를 자동으로 시작하도록 허용합니다.
- Chrome
Chrome 134 베타
Chrome에 제공될 최신 기능을 살펴보세요.
- Chrome
확장 프로그램 / 시작하기
Chrome 확장 프로그램을 시작하는 데 필요한 모든 기본사항
- Chrome 확장 프로그램
chrome.enterprise.platformKeys
chrome.enterprise.platformKeys API를 사용하여 키를 생성하고 이러한 키의 인증서를 설치합니다. 인증서는 플랫폼에서 관리하며 TLS 인증, 네트워크 액세스 또는 chrome.platformKeys를 통한 다른 확장 프로그램에 사용할 수 있습니다. 이 API를 사용하여 클라이언트 인증서를 등록하는 일반적인 단계는 다음과 같습니다. enterprise.platformKeys.getTokens 를 사용하여 사용 가능한 모든
- Chrome 확장 프로그램
chrome.enterprise.platformKeys
chrome.enterprise.platformKeys API를 사용하여 키를 생성하고 이러한 키의 인증서를 설치합니다. 인증서는 플랫폼에서 관리하며 TLS 인증, 네트워크 액세스 또는 chrome.platformKeys를 통한 다른 확장 프로그램에 사용할 수 있습니다. 이 API를 사용하여 클라이언트 인증서를 등록하는 일반적인 단계는 다음과 같습니다. enterprise.platformKeys.getTokens() 를 사용하여 사용 가능한
- Chrome 확장 프로그램
Chrome 133
CSS 고급 attr(), text-box-trim, scroll-state 컨테이너 쿼리 등
- Chrome
Chrome 133의 새로운 기능
Chrome 133이 출시됩니다. 흥미로운 새로운 CSS 기능과 그 밖에도 다양한 기능을 살펴보세요.
- Chrome
PWA용 탭으로 표시된 애플리케이션 모드
탭으로 구성된 애플리케이션 모드를 사용하면 프로그레시브 웹 앱 개발자가 독립형 PWA에 탭으로 표시된 문서 인터페이스를 추가할 수 있습니다.
Chrome 맞춤 탭에서 앱별 기록으로 사용자 참여도 높이기
Android용 Chrome 맞춤 탭의 앱별 기록 소개
- Chrome
임시 맞춤 탭으로 사용자의 웹 개인 정보 보호 개선
Android 앱에서 임시 맞춤 탭을 사용하는 방법
인증 탭을 사용하여 인증 간소화
Android 앱에서 전문 인증 탭을 사용하는 방법
앱별 기록으로 사용자의 탐색 환경 개선
Android 앱에서 앱별 기록을 사용하는 방법
Android용 인증 탭으로 웹 기반 로그인 흐름 개선
Android용 Auth 탭으로 웹 기반 인증 개선
- Chrome
chrome.runtime
chrome.runtime API를 사용하여 서비스 워커를 검색하고, 매니페스트에 관한 세부정보를 반환하고, 확장 프로그램 수명 주기의 이벤트를 리슨하고 응답합니다. 이 API를 사용하여 URL의 상대 경로를 정규화된 URL로 변환할 수도 있습니다. 런타임 API는 확장 프로그램에서 사용할 수 있는 여러 기능 영역을 지원하는 메서드를 제공합니다. 런타임 API의 대부분의 메서드는 nativeMessaging 권한이 필요한
- Chrome 확장 프로그램
chrome.permissions
chrome.permissions API를 사용하여 설치 시점이 아닌 런타임에 선언된 선택적 권한 을 요청하세요. 그러면 사용자가 권한이 필요한 이유를 이해하고 필요한 권한만 부여할 수 있습니다. 권한 경고는 API에서 부여된 기능을 설명하기 위해 존재하지만 이러한 경고 중 일부는 명확하지 않을 수 있습니다. Permissions API를 사용하면 개발자가 권한 경고를 설명하고 새로운 기능을 점진적으로 도입하여 사용자에게 확장 프로그램을 위험
- Chrome 확장 프로그램
chrome.permissions
chrome.permissions API를 사용하여 설치 시점이 아닌 런타임에 선언된 선택적 권한 을 요청하세요. 그러면 사용자가 권한이 필요한 이유를 이해하고 필요한 권한만 부여할 수 있습니다. 권한 경고는 API에서 부여된 기능을 설명하기 위해 존재하지만 이러한 경고 중 일부는 명확하지 않을 수 있습니다. Permissions API를 사용하면 개발자가 권한 경고를 설명하고 새로운 기능을 점진적으로 도입하여 사용자에게 확장 프로그램을 위험
- Chrome 확장 프로그램
Chrome 133 DevTools의 새로운 기능
영구 AI 채팅 기록, 향상된 탐색, 실적에서 무시 목록 및 스택 트레이스, 새로운 '새로운 기능' 패널 등이 추가되었습니다.
- Chrome
- Chrome DevTools
2025년 1월 Chrome 확장 프로그램 변경사항
Chrome 확장 프로그램의 최근 변경사항에 대한 개요와 개발자가 기대할 수 있는 곧 출시될 흥미로운 확장 프로그램 기능을 확인해 보세요.
- Chrome 확장 프로그램
- Chrome
WebGPU의 새로운 기능 (Chrome 133)
unorm8x4-bgra 및 1개 구성요소 정점 형식이 추가되어 정의되지 않은 값으로 알 수 없는 제한을 요청할 수 있습니다. WGSL 정렬 규칙 변경, 삭제로 인한 WGSL 성능 향상 등도 있습니다.
- Chrome
- WebGpu
chrome.bookmarks
chrome.bookmarks API를 사용하여 북마크를 만들고, 정리하고, 조작합니다. 맞춤 북마크 관리자 페이지를 만드는 데 사용할 수 있는 페이지 재정의 도 참고하세요. bookmarks API를 사용하려면 확장 프로그램 매니페스트 에서 '북마크' 권한을 선언해야 합니다. 예를 들면 다음과 같습니다. 북마크는 트리로 구성되며 트리의 각 노드는 북마크 또는 폴더( 그룹 이라고도 함)입니다. 트리의 각 노드는
- Chrome 확장 프로그램
chrome.bookmarks
이 권한은 경고를 트리거 합니다. chrome.bookmarks API를 사용하여 북마크를 만들고, 정리하고, 조작합니다. 맞춤 북마크 관리자 페이지를 만드는 데 사용할 수 있는 페이지 재정의 도 참고하세요. bookmarks API를 사용하려면 확장 프로그램 매니페스트 에서 '북마크' 권한을 선언해야 합니다. 예를 들면 다음과 같습니다. 북마크는 트리로 구성되며 트리의 각 노드는 북마크 또는 폴더( 그룹 이라고도 함)입니다. 트리의 각 노드는
- Chrome 확장 프로그램
Prompt API를 사용한 세션 관리 권장사항
이 가이드에서는 Prompt API를 사용한 세션 관리를 위한 권장사항을 소개합니다.
출시 노트
개발자에게 영향을 미치는 Chrome 변경사항 알아보기
- Chrome
Chrome의 새로운 기능
Chrome의 새로운 기능 도움말 및 블로그에서 Chrome의 최신 업데이트를 살펴보세요. 새로운 콘텐츠 및 문서에 대한 중요한 업데이트 article LLM이 응답을 스트리밍하는 방법 서버 및 클라이언트용 AI에서 스트리밍 데이터가 작동하는 방식을 알아볼 수 있는 새로운 문서입니다. article Chrome 웹 스토어 관련 알림 및 이의신청 Chrome 웹 스토어의 알림 및 이의신청 절차가 업데이트되었습니다. article 오리진 트라이얼의
Chrome 웹 스토어 정책 업데이트: 개발자를 위한 명확성과 일관성 보장
Chrome 웹 스토어는 개발자와 사용자를 위한 고품질의 신뢰할 수 있는 생태계를 조성하기 위해 최선을 다하고 있습니다. 이 목표에 따라 YouTube는 플랫폼 전반에서 명확성과 일관성을 제공하기 위해 설계된 일련의 정책 업데이트를 발표합니다. 이번 업데이트에서는 기능, 콘텐츠 표준, 개발자 가이드의 주요 영역을 다룹니다. YouTube는 이의신청 절차 를 간소화하여 더 효율적이고 투명하게 만들고 있습니다. 앞으로 개발자는 정책 위반당 한 번의
- Chrome
- Chrome 확장 프로그램
LLM이 응답을 스트리밍하는 방법
스트리밍의 정의와 AI 및 LLM에서의 작동 방식을 알아봅니다.
내장된 AI를 사용한 번역
내장된 Translator API를 사용하면 출처 언어에서 대상 언어로 임의의 콘텐츠를 번역할 수 있습니다. 오리진 트라이얼에 참여하여 API를 사용해 보세요.
패스키의 WebAuthn 기능 감지 간소화
`getClientCapabilities()` 를 사용하여 WebAuthn 기능을 감지하고 사용자에게 맞게 인증 워크플로를 조정하는 방법을 알아보세요.
- Chrome
- 패스키
스트리밍된 LLM 응답을 렌더링하기 위한 권장사항
이러한 프런트엔드 권장사항을 사용하여 Prompt API와 같이 스트리밍을 지원하는 API로 Gemini의 스트리밍 응답을 표시합니다.
에너지 절약 모드에서 화면 멈춤
Chrome 133부터 에너지 절약 모드가 활성화되어 있으면 CPU를 많이 사용하는 백그라운드 탭이 정지됩니다.
- Chrome
미디어
웹사이트와 웹 앱에 이미지, 동영상 등을 포함하는 방식을 개선합니다.
DevTools 팁
DevTools 팁
- Chrome DevTools
이제 iOS에서 Google 비밀번호 관리자의 패스키를 사용할 수 있습니다
이제 iOS 17 이상을 실행하는 Chrome에서 Google 비밀번호 관리자 (GPM)에서 패스키를 생성, 동기화하고 패스키로 인증할 수 있습니다. 이렇게 하면 Chrome이 설치된 모든 곳에서 GPM의 패스키를 사용할 수 있습니다.
- Chrome
- 패스키
CSS attr()가 업그레이드됨
이제 커스텀 속성을 포함한 모든 CSS 속성에 attr()를 사용할 수 있으며, 값을 문자열이 아닌 데이터 유형으로 파싱할 수 있습니다.
- Chrome
Chrome 133 베타
Chrome에 제공되는 최신 기능에 대해 알아보세요.
- Chrome
CSS scroll-state()
컨테이너 쿼리와 비슷하지만 중단된 쿼리, 스냅된 쿼리, 오버플로 쿼리에 적용됩니다.
- Chrome
Chrome Extensions
Chrome 확장 프로그램 개발 방법을 알아보세요.
- Chrome 확장 프로그램
Chrome DevTools에 Gemini를 도입한 방법
DevTools의 새로운 AI 지원 패널의 재미있고 흥미로운 사용 사례에 대해 알아보세요.
- Chrome
- Chrome DevTools
Chrome 132
대화상자의 ToggleEvent, 요소 수준 동영상 공유 지원, File System Access API가 Android 및 WebView 등을 지원합니다.
- Chrome
CSS text-box-trim
텍스트 콘텐츠 위와 아래의 여백을 줄여 시각적 균형을 유지합니다.
- Chrome
Chrome 132의 새로운 기능
Chrome 132가 출시됩니다. Dialog 요소는 ToggleEvent를 가져오고, 요소 수준 동영상 공유를 지원하며, File System Access API는 Android 및 WebView를 지원합니다.
- Chrome
chrome.sockets.udp
chrome.sockets.udp API를 사용하여 UDP 연결을 통해 네트워크를 통해 데이터를 전송하고 수신합니다. 이 API는 이전에 '소켓' API에 있던 UDP 기능을 대체합니다. 이 API를 사용하려면 다음 키를 매니페스트에서 선언해야 합니다. 숫자 새로 생성된 소켓의 ID입니다. 이 API에서 생성된 소켓 ID는 지원 중단된 [ socket ](../socket/) API와 같은 다른 API에서 생성된 소켓 ID와 호환되지 않습니다.
chrome.tabs
chrome.tabs API를 사용하여 브라우저의 탭 시스템과 상호작용합니다. 이 API를 사용하여 브라우저에서 탭을 만들고, 수정하고, 재정렬할 수 있습니다. Tabs API는 탭을 조작하고 관리하는 기능을 제공할 뿐만 아니라 탭의 언어 를 감지하고, 스크린샷 을 찍고, 탭의 콘텐츠 스크립트와 통신 할 수도 있습니다. 대부분의 기능은 사용 시 권한이 필요하지 않습니다. 예를 들어 새 탭을 만들거나 탭을 새로고침 하거나 다른 URL로 탐색 하는
- Chrome 확장 프로그램
chrome.tabs
chrome.tabs API를 사용하여 브라우저의 탭 시스템과 상호작용합니다. 이 API를 사용하여 브라우저에서 탭을 만들고, 수정하고, 재정렬할 수 있습니다. Tabs API는 탭을 조작하고 관리하는 기능을 제공할 뿐만 아니라 탭의 언어 를 감지하고, 스크린샷 을 찍고, 탭의 콘텐츠 스크립트와 통신 할 수도 있습니다. 대부분의 기능은 사용 시 권한이 필요하지 않습니다. 예를 들어 새 탭을 만들거나 탭을 새로고침 하거나 다른 URL로 탐색 하는
- Chrome 확장 프로그램
빌트인 AI 챌린지 수상자
Chrome에서 Gemini Nano를 사용해 새로운 가능성을 모색해 보라는 주제로 진행된 Built-in AI Challenge에서 수상한 앱과 확장 프로그램을 확인해 보세요.
- Chrome
모든 요소에서 동영상 스트림 캡처
Element Capture API는 현재 탭 캡처를 DOM 하위 트리 캡처로 변환하는 강력한 성능의 방법입니다.
웹 Vitals 확장 프로그램 지원이 종료됨
Web Vitals 확장 프로그램과 DevTools의 병합이 완료되었으며 확장 프로그램 지원이 종료되었습니다.
- Chrome
- Chrome DevTools
chrome.ttsEngine
chrome.ttsEngine API를 사용하여 확장 프로그램을 사용하여 텍스트 음성 변환(TTS) 엔진을 구현합니다. 확장 프로그램이 이 API를 사용하여 등록되면 확장 프로그램 또는 Chrome 앱에서 tts API를 사용하여 음성을 생성할 때 발음할 음성 및 기타 매개변수가 포함된 이벤트가 수신됩니다. 그러면 확장 프로그램은 사용 가능한 웹 기술을 사용하여 음성을 합성하고 출력하고, 호출 함수로 이벤트를 다시 전송하여 상태를 보고할 수
- Chrome 확장 프로그램
chrome.ttsEngine
chrome.ttsEngine API를 사용하여 확장 프로그램을 사용하여 텍스트 음성 변환(TTS) 엔진을 구현합니다. 확장 프로그램이 이 API를 사용하여 등록되면 확장 프로그램 또는 Chrome 앱에서 tts API를 사용하여 음성을 생성할 때 발화할 음성 및 기타 매개변수가 포함된 이벤트가 수신됩니다. 그러면 확장 프로그램은 사용 가능한 웹 기술을 사용하여 음성을 합성하고 출력하고, 호출 함수로 이벤트를 다시 전송하여 상태를 보고할 수
- Chrome 확장 프로그램
chrome.cookies
chrome.cookies API를 사용하여 쿠키를 쿼리하고 수정하며 쿠키가 변경될 때 알림을 받습니다. cookies API를 사용하려면 매니페스트에서 "cookies" 권한을 액세스하려는 쿠키가 있는 호스트의 호스트 권한 과 함께 선언합니다. 예를 들면 다음과 같습니다. 분할된 쿠키 를 사용하면 사이트에서 특정 쿠키가 최상위 프레임의 출처에 대해 키를 지정해야 한다고 표시할 수 있습니다. 즉, 예를 들어 사이트 A가 사이트 B 및 사이트
- Chrome 확장 프로그램
chrome.cookies
chrome.cookies API를 사용하여 쿠키를 쿼리하고 수정하며 쿠키가 변경될 때 알림을 받습니다. cookies API를 사용하려면 매니페스트에서 '쿠키' 권한과 액세스하려는 쿠키가 있는 호스트의 호스트 권한 을 선언해야 합니다. 예를 들면 다음과 같습니다. 분할된 쿠키 를 사용하면 사이트에서 특정 쿠키가 최상위 프레임의 출처에 대해 키를 지정해야 한다고 표시할 수 있습니다. 즉, 사이트 A가 사이트 B 및 사이트 C에 iframe을
- Chrome 확장 프로그램
chrome.appviewTag
appview 태그를 사용하여 Chrome 앱 내에 다른 Chrome 앱을 삽입합니다( 사용 참고). 객체 삽입할 앱이 삽입 결정을 내릴 때 사용할 수 있는 개발자 지정 데이터(선택사항)입니다. 문자열 삽입 요청을 보낸 앱의 ID입니다. void 삽입 요청을 허용합니다. allow 함수는 다음과 같습니다. 문자열 삽입할 콘텐츠를 지정합니다. void 삽입 요청을 방지합니다. deny 함수는 다음과 같습니다. 다른 앱을 삽입하도록 요청합니다.
XFO 또는 CSP로 클릭재킹 완화
클릭재킹 공격 완화에 대해 자세히 알아보세요.
WebGPU의 새로운 기능 (Chrome 132)
텍스처 뷰 사용, 32비트 부동 소수점 텍스처 혼합, GPUDevice adapterInfo 속성, 잘못된 형식으로 캔버스 컨텍스트 구성 시 JavaScript 오류 발생, 텍스처의 샘플러 제한 필터링, 확장된 하위 그룹 실험, 개발자 환경 개선, 16비트 정규화된 텍스처 형식의 실험적 지원 등
- Chrome
- WebGpu
Chrome 확장 프로그램의 새로운 기능
Chrome 확장 프로그램 플랫폼, 도움말, 정책의 최근 변경사항
- Chrome 확장 프로그램
WebGPU
가이드, 데모, 최신 뉴스를 통해 WebGPU를 알아보세요
Chrome으로 빌드
Chrome의 최신 안정화 버전 및 베타 버전에 포함된 기능을 확인하세요.
수입 지급
Chrome에서 최신 Payment API를 사용하는 방법 알아보기
개인정보 보호 및 보안
Chrome의 개인 정보 보호 및 보안 기능에 관해 알아보세요.
앱
기본 운영체제에 더 많이 액세스할 수 있는 환경을 만들기 위한 기술을 지원 중단했습니다.
인형 조종자
헤드리스 Chrome 또는 Chromium을 제어하는 상위 수준 API를 제공하는 Node.js 라이브러리
Android의 웹
Android에서 웹 앱을 개발하기 위한 Chrome의 기능에 대해 알아보세요.
chrome.certificateProvider
이 API를 사용하여 TLS 인증에 이러한 인증서를 사용할 수 있는 플랫폼에 인증서를 노출합니다. 이 API를 사용하여 클라이언트 인증서를 ChromeOS에 노출하는 일반적인 단계는 다음과 같습니다. 실제 단계 순서는 다를 수 있습니다. 예를 들어 인증서를 자동으로 선택하는 기업 정책이 사용되는 경우 사용자에게 인증서를 선택하라는 메시지가 표시되지 않습니다 ( AutoSelectCertificateForUrls 및 사용자를 위한 Chrome
- Chrome 확장 프로그램
chrome.extension
chrome.extension API에는 모든 확장 프로그램 페이지에서 사용할 수 있는 유틸리티가 있습니다. 메시지 전달 에 자세히 설명된 대로 확장 프로그램과 콘텐츠 스크립트 간에 또는 확장 프로그램 간에 메시지를 교환하는 지원이 포함됩니다. 확장 프로그램 뷰 유형입니다. '탭' "팝업" 시크릿 탭 내에서 실행되는 콘텐츠 스크립트와 시크릿 프로세스 내에서 실행되는 확장 프로그램 페이지에 true입니다. 후자는
- Chrome 확장 프로그램
등대
Lighthouse로 웹 성능 감사 자동화
Performance
Chrome의 성능 도구로 웹 애플리케이션의 성능을 최적화하세요.
chrome.system.display
system.display API를 사용하여 디스플레이 메타데이터를 쿼리합니다. 시스템에서 디스플레이를 감지하고 사용하는지 나타내는 enum입니다. 디스플레이가 시스템에 의해 감지되지 않으면 (연결 해제되었거나 절전 모드로 인해 연결 해제된 것으로 간주됨) '비활성'으로 간주됩니다. 이 상태는 예를 들어 모든 디스플레이의 연결이 끊겼을 때 기존 디스플레이를 유지하는 데 사용됩니다. 'active' '비활성' 숫자 디스플레이의 높이(픽셀)입니다.
- Chrome 확장 프로그램
chrome.system.display
system.display API를 사용하여 디스플레이 메타데이터를 쿼리합니다. 시스템에서 디스플레이를 감지하고 사용하는지 나타내는 enum입니다. 디스플레이가 시스템에 의해 감지되지 않으면 (연결 해제되었거나 절전 모드로 인해 연결 해제된 것으로 간주됨) '비활성'으로 간주됩니다. 이 상태는 예를 들어 모든 디스플레이의 연결이 끊겼을 때 기존 디스플레이를 유지하는 데 사용됩니다. 'active' '비활성' 숫자 디스플레이의 높이(픽셀)입니다.
- Chrome 확장 프로그램
chrome.action
chrome.action API를 사용하여 Chrome 툴바에서 확장 프로그램 아이콘을 제어합니다. 이 API를 사용하려면 다음 키를 매니페스트에서 선언해야 합니다. chrome.action API를 사용하려면 "manifest_version" 를 3 로 지정하고 매니페스트 파일 에 "action" 키를 포함합니다. "action" 키 (하위 요소 포함)는 선택사항입니다. 포함되지 않은 경우에도 확장 프로그램의 메뉴에 액세스할 수 있도록 확장
- Chrome 확장 프로그램
브라우저 지원
맞춤 탭 기능 및 브라우저 사용 가능 여부에 대한 개요입니다.
ID
웹 인증과 같은 Chrome의 ID 기능에 대해 알아보세요.
chrome.commands
commands API를 사용하여 브라우저 작업을 열거나 확장 프로그램에 명령을 전송하는 작업과 같이 확장 프로그램에서 작업을 트리거하는 단축키를 추가합니다. 이 API를 사용하려면 다음 키를 매니페스트에서 선언해야 합니다. Commands API를 사용하면 확장 프로그램 개발자가 특정 명령어를 정의하고 기본 키 조합에 바인딩할 수 있습니다. 확장 프로그램에서 허용하는 각 명령어는 확장 프로그램 매니페스트 에서 "commands" 객체의
- Chrome 확장 프로그램
원격 디버깅을 사용할 때는 작업이 지원되지 않습니다.
일부 WebDriver 명령어 (예: 브라우저 창 크기 조절)의 경우 Chrome 확장 프로그램을 브라우저에 로드해야 합니다. ChromeDriver는 일반적으로 새 Chrome 세션을 실행할 때마다 이 '자동화 확장 프로그램'을 로드합니다. 그러나 ChromeDriver는 새 Chrome 세션을 실행하는 대신 기존 Chrome 세션에 연결하도록 지시할 수 있습니다. 이는 Capabilities (ChromeOptions라고도 함) 객체의
ChromeOS
모든 ChromeOS 테스트 이미지에는 /usr/local/chromedriver/ 에 ChromeDriver 바이너리가 설치되어 있습니다. 바이너리는 해당 테스트 이미지의 Chrome과 동일한 버전으로 업데이트됩니다. 즉, 항상 ChromeDriver의 최신 빌드를 사용합니다. 테스트에서 ChromeDriver 바이너리의 안정적인 빌드를 실행할 것으로 예상되는 경우 테스트에서 자체 코드를 작성하여 특정 바이너리를 다운로드하고
WebView 개요
WebView 구성요소는 Chromium 오픈소스 프로젝트를 기반으로 합니다.
chrome.certificateProvider
이 API를 사용하여 TLS 인증에 이러한 인증서를 사용할 수 있는 플랫폼에 인증서를 노출합니다. 이 API를 사용하여 클라이언트 인증서를 ChromeOS에 노출하는 일반적인 단계는 다음과 같습니다. 실제 단계 순서는 다를 수 있습니다. 예를 들어 인증서를 자동으로 선택하는 기업 정책이 사용되는 경우 사용자에게 인증서를 선택하라는 메시지가 표시되지 않습니다 ( AutoSelectCertificateForUrls 및 사용자를 위한 Chrome
- Chrome 확장 프로그램
chrome.extension
chrome.extension API에는 모든 확장 프로그램 페이지에서 사용할 수 있는 유틸리티가 있습니다. 메시지 전달 에 자세히 설명된 대로 확장 프로그램과 콘텐츠 스크립트 간에 또는 확장 프로그램 간에 메시지를 교환하는 지원이 포함됩니다. 확장 프로그램 뷰 유형입니다. '탭' "팝업" 시크릿 탭 내에서 실행되는 콘텐츠 스크립트와 시크릿 프로세스 내에서 실행되는 확장 프로그램 페이지에 true입니다. 후자는
- Chrome 확장 프로그램
다운로드
이전 버전의 Chrome을 지원하는 ChromeDriver 버전은 다음과 같습니다. 적절한 버전의 ChromeDriver를 선택하는 방법에 관한 자세한 내용은 버전 선택 페이지를 참고하세요. Chrome 버전 114 지원 자세한 내용은 출시 노트 를 참고하세요. Chrome 버전 114 지원 자세한 내용은 출시 노트 를 참고하세요. Chrome 버전 113 지원 자세한 내용은 출시 노트 를 참고하세요. Chrome 버전 113 지원 자세한
성능 로그
ChromeDriver는 성능 로깅을 지원하므로 여기에서 '타임라인', '네트워크', '페이지' 도메인의 이벤트와 지정된 트레이스 카테고리의 트레이스 데이터 를 가져올 수 있습니다. 성능 로깅은 기본적으로 사용 설정되지 않습니다. 따라서 새 세션을 만들 때는 이를 사용 설정해야 합니다. 사용 설정하면 성능 로그에서 타임라인, 네트워크, 페이지 이벤트를 수집합니다. 추적을 사용 설정하거나 성능 로깅을 맞춤설정하려면 계속 읽어보세요. Michael
ChromeDriver가 다운됨
ChromeDriver 비정상 종료를 진단하고 수정하는 방법에는 몇 가지가 있습니다. 이는 ChromeDriver 비정상 종료에만 적용되며 Chrome 비정상 종료 또는 종료와는 다릅니다. Windows에서는 다음과 같은 내용이 표시될 수 있습니다. ChromeDriver 참여자가 문제를 재현하고 디버그하는 데 사용할 수 있는 재현 케이스를 만듭니다. 비정상 종료가 100% 발생하지 않아도 괜찮습니다. 재현 케이스에 버그를 신고합니다. 이
Android
최신 ChromeDriver용 바이너리 는 다양한 호스트 플랫폼용 zip 파일로 패키징됩니다. 이전 버전의 ChromeDriver는 다운로드 에서 확인할 수 있습니다. ChromeDriver는 Chrome 브라우저 (버전 30 이상) 및 웹 디버깅 및 JavaScript 를 사용 설정한 Android 4.4 (KitKat) 부터 WebView 기반 앱에서 테스트 실행을 지원합니다. 다음 위치에서 Chrome 앱을 설치할 수 있습니다. 안정화
Chrome이 바로 시작되지 않거나 다운됨
이는 특수 테스트 하네스 (예: IDE) 또는 연속 빌드 시스템 (예: Jenkins)을 사용하여 ChromeDriver 또는 Chrome을 실행할 때 자주 발생합니다. 일반 사용자 명령 프롬프트에서 테스트에서 사용하는 것과 동일한 Chrome 바이너리를 실행해 봅니다. chromedriver.log 파일에서 사용 중인 Chrome 바이너리를 확인합니다. Chrome에 특수 명령줄 스위치나 인수를 전달하는 경우에도 이를 포함해야 합니다.
모바일 에뮬레이션
Chrome을 사용하면 Chrome DevTools로 기기 모드 를 사용 설정하여 데스크톱 버전의 Chrome에서 휴대기기에서 Chrome을 에뮬레이션할 수 있습니다. 이 기능은 웹 개발 속도를 높이고 개발자가 실제 기기가 없어도 웹사이트가 모바일 기기에서 렌더링되는 방식을 빠르게 테스트할 수 있도록 지원합니다. ChromeDriver는 사전 값으로 지정된 'mobileEmulation' 기능으로 기기를 에뮬레이션할 수도 있습니다.
카나리아
ChromeDriver Canary에는 최신 ChromeDriver 기능이 포함되어 있습니다. 새 바이너리는 하루에 여러 번 빌드되고 제공됩니다. 개발자 및 얼리 어답터를 위해 설계되었으며 완전히 중단될 수도 있습니다. M115부터 Canary를 비롯한 출시 채널별 최신 Chrome + ChromeDriver 출시 버전을 테스트용 Chrome 사용 가능 여부 대시보드에서 사용할 수 있습니다. 자동 버전 다운로드의 경우 편리한 JSON
키보드 지원
현재 ChromeDriver는 미국 키보드가 구성된 시스템만 지원합니다. ChromeDriver가 이 상태를 감지하면 다음을 로깅합니다. 미국 키보드가 없는 사용자는 sendKeys 또는 TypeElement 명령어를 실행하는 동안 키가 누락될 수 있습니다. 해결 방법으로 이러한 사용자는 QWERTY 레이아웃이 있는 미국 키보드를 시스템 구성의 보조 옵션으로 추가하는 것이 좋습니다. 이렇게 하면 ChromeDriver에서 미국 키보드 구성을
보안 고려사항
ChromeDriver는 강력한 도구이며 잘못된 손에 들어가면 해를 입힐 수 있습니다. ChromeDriver를 사용하는 동안 다음 제안사항을 따르세요.
자동 완성 작동 방식: 실제 통계
Chrome 연구에 따르면 자동 완성 사용자는 양식을 더 빠르게 작성하고 중단율이 낮습니다.
- Chrome
맞춤설정 가능한 개발자 의견 양식의 선택 요청 결과
시간을 내어 의견을 제공하고 세부정보를 검토하며 표준을 수립하는 데 도움을 주셔서 감사합니다.
- Chrome
기본 제공 AI 시작하기
내장된 AI로 기능과 애플리케이션을 빌드하기 위한 요구사항을 알아봅니다.
내장 AI를 통한 언어 감지
Language Detector API는 웹 및 브라우저에서 기본 제공되는 언어 감지를 제공합니다.
할당 타임라인 도구 사용 방법
할당 타임라인 도구를 사용하여 제대로 가비지 컬렉션되지 않고 메모리를 계속 유지하는 객체를 찾습니다.
- Chrome DevTools
합성되지 않은 애니메이션 피하기
"합성되지 않은 애니메이션 피하기" Lighthouse 감사를 통과하는 방법
메모리 용어
이 섹션에서는 메모리 분석에 사용되는 일반적인 용어를 설명하며, 언어별로 다양한 메모리 프로파일링 도구에 적용할 수 있습니다.
- Chrome DevTools
DevTools로 성능 트레이스 기록 및 분석
DevTools로 성능 트레이스를 기록하고 분석합니다.
- Chrome
- Chrome DevTools
Chrome 132의 DevTools의 새로운 기능
Gemini를 사용하여 네트워크 요청, 소스 파일, 성능 트레이스를 디버그하고 AI 채팅 기록을 확인하는 등의 작업을 할 수 있습니다.
- Chrome DevTools
- Chrome
CSS 래핑 2024
Chrome DevRel팀과 스케이트보드를 타는 Chrome Dino와 함께 2024년에 Chrome 및 웹 플랫폼용으로 출시된 최신 CSS를 살펴보세요.
확장 프로그램 저장용량 보기 및 수정
Extension Storage 패널을 사용하여 확장 프로그램 저장소를 보고 수정하는 방법
- Chrome DevTools
chrome.syncFileSystem
chrome.syncFileSystem API를 사용하여 Google Drive에 데이터를 저장하고 동기화합니다. 이 API는 Google Drive에 저장된 임의의 사용자 문서에 액세스하기 위한 것이 아닙니다. 오프라인 및 캐싱 사용을 위해 앱별 동기화 가능한 저장소를 제공하므로 여러 클라이언트에서 동일한 데이터를 사용할 수 있습니다. 이 API 사용에 관한 자세한 내용은 데이터 관리 를 참고하세요. "last_write_win" '수동'
chrome.browser
chrome.browser API를 사용하여 현재 애플리케이션 및 Chrome 프로필과 연결된 Chrome 브라우저와 상호작용합니다. 문자열 새 탭이 처음 열릴 때 이동할 URL입니다. 현재 애플리케이션 및 Chrome 프로필과 연결된 브라우저 창에서 새 탭을 엽니다. Chrome 프로필의 브라우저 창이 열려 있지 않으면 새 탭을 만들기 전에 새 창이 열립니다. OpenTabOptions 탭을 여는 방법을 구성합니다. 함수 선택사항
chrome.bluetoothSocket
chrome.bluetoothSocket API를 사용하여 RFCOMM 및 L2CAP 연결을 통해 블루투스 기기로 데이터를 전송하고 수신합니다. 이 API를 사용하려면 다음 키를 매니페스트에서 선언해야 합니다. 'system_error' 시스템 오류가 발생했으며 연결을 복구할 수 없을 수 있습니다. "not_listening" 소켓이 수신 대기 중이 아닙니다. AcceptError 어떤 문제가 발생했는지 나타내는 오류 코드입니다. 문자열 오류
chrome.usb
chrome.usb API를 사용하여 연결된 USB 기기와 상호작용합니다. 이 API는 앱 컨텍스트 내에서 USB 작업에 액세스할 수 있도록 합니다. 이 API를 사용하면 앱이 하드웨어 기기의 드라이버로 작동할 수 있습니다. 이 API에서 생성된 오류는 runtime.lastError 를 설정하고 함수의 일반 콜백을 실행하여 보고됩니다. 이 경우 콜백의 일반 매개변수가 정의되지 않습니다. 부울 활성 구성인가요? 숫자 구성 번호입니다. 문자열
chrome.socket
chrome.socket API를 사용하여 TCP 및 UDP 연결을 통해 네트워크를 통해 데이터를 전송하고 수신합니다. 참고: Chrome 33부터 이 API는 sockets.udp, sockets.tcp, sockets.tcpServer API를 대신하여 지원 중단됩니다. 숫자 번호 선택사항 수락된 소켓의 ID입니다. 숫자 새로 생성된 소켓의 ID입니다. 문자열 사용 가능한 IPv4/6 주소입니다. 문자열 어댑터의 기본 이름입니다.
chrome.bluetooth
chrome.bluetooth API를 사용하여 블루투스 기기에 연결합니다. 모든 함수는 chrome.runtime.lastError를 통해 실패를 보고합니다. 이 API를 사용하려면 다음 키를 매니페스트에서 선언해야 합니다. 문자열 'XX:XX:XX:XX:XX:XX' 형식의 어댑터 주소입니다. 부울 어댑터를 사용할 수 있는지 (즉, 사용 설정 여부)를 나타냅니다. 부울 어댑터가 현재 검색 중인지 여부를 나타냅니다. 문자열 사람이 읽을 수 있는
chrome.bluetoothLowEnergy
chrome.bluetoothLowEnergy API는 일반 속성 프로필 (GATT) 을 사용하여 블루투스 스마트 (저전력) 기기와 통신하는 데 사용됩니다. 이 API를 사용하려면 다음 키를 매니페스트에서 선언해야 합니다. ManufacturerData [] 선택사항 광고 데이터의 '제조업체별 데이터' 입력란에 포함할 제조업체별 데이터 목록입니다. ServiceData [] 선택사항 광고 데이터의 '서비스 데이터' 필드에 포함할 서비스 데이터
chrome.app.runtime
chrome.app.runtime API를 사용하여 앱 수명 주기를 관리합니다. 앱 런타임은 앱 설치를 관리하고, 이벤트 페이지를 제어하며, 언제든지 앱을 종료할 수 있습니다. "new_note" 앱은 특정 작업(예: 새 메모 만들기)을 염두에 두고 실행할 수 있습니다. 앱이 실행된 작업 유형은 LaunchData 인스턴스의 actionData 필드 내에서 사용할 수 있습니다. "new_note" any 선택사항 삽입할 앱이 삽입 결정을 내릴
chrome.mdns
chrome.mdns API를 사용하여 mDNS를 통해 서비스를 검색합니다. NSD 사양(http://www.w3.org/TR/discovery-api/)의 기능 중 일부로 구성됩니다. 문자열 mDNS 광고 서비스의 IP 주소입니다. 문자열[] mDNS 광고 서비스의 메타데이터입니다. 문자열 mDNS 광고 서비스의 호스트:포트 쌍입니다. 문자열 mDNS 광고 서비스의 서비스 이름입니다. onServiceList 이벤트에 포함될 서비스 인스턴스의
chrome.webviewTag
webview 태그를 사용하여 네트워크를 통해 웹에서 실시간 콘텐츠를 적극적으로 로드하고 Chrome 앱에 삽입합니다. 앱은 webview 의 모양을 제어하고 웹 콘텐츠와 상호작용하고, 삽입된 웹페이지에서 탐색을 시작하고, 웹페이지 내에서 발생하는 오류 이벤트에 반응하는 등의 작업을 할 수 있습니다 ( 사용 참고). clearData 에서 삭제할 데이터를 결정하는 옵션입니다. 번호 선택사항 이 날짜 이후에 누적된 데이터를 지웁니다. 이 날짜는
chrome.fontSettings
chrome.fontSettings API를 사용하여 Chrome의 글꼴 설정을 관리합니다. Font Settings API를 사용하려면 확장 프로그램 매니페스트 에서 "fontSettings" 권한을 선언해야 합니다. 예를 들면 다음과 같습니다. Chrome에서는 일부 글꼴 설정이 특정 일반 글꼴 모음 및 언어 스크립트에 종속될 수 있습니다. 예를 들어 sans-serif 중국어 간체에 사용되는 글꼴은 serif 일본어에 사용되는 글꼴과 다를
- Chrome 확장 프로그램
chrome.serial
chrome.serial API를 사용하여 직렬 포트에 연결된 기기에서 읽고 씁니다. 번호 선택사항 ConnectionOptions.bitrate 를 참조하세요. 비표준 비트 전송률이 사용 중이거나 기본 기기를 쿼리하는 동안 오류가 발생한 경우 이 필드가 생략되거나 정확하지 않을 수 있습니다. 숫자 ConnectionOptions.bufferSize 보기 숫자 직렬 포트 연결의 ID입니다. 불리언 선택사항
Chrome 확장 프로그램의 Prompt API
Chrome 확장 프로그램에서 Prompt API의 무한한 가능성을 살펴보세요.
확장 프로그램 및 AI
AI로 확장 프로그램을 개발하는 방법 알아보기
- Chrome 확장 프로그램
성능 통계 패널 지원 중단
실험용 성능 통계 패널은 2025년 1월에 삭제되고 성능 패널 자체의 새로운 통계로 대체됩니다.
- Chrome
- Chrome DevTools
강력한 HSTS 정책 사용
강력한 HTTP Strict Transport Security (HSTS) 정책 구성에 대해 자세히 알아보기
Chrome DevTools
AI 지원에 관한 최신 소식 및 사용 사례를 살펴보세요.
- Chrome DevTools
chrome.desktopCapture
Desktop Capture API는 화면, 개별 창 또는 개별 탭의 콘텐츠를 캡처합니다. chooseDesktopMedia()에 사용되는 데스크톱 미디어 소스 집합을 정의하는 데 사용되는 enum입니다. "화면" 'window' '탭' 'audio' SelfCapturePreferenceEnum 을 미러링합니다. 'include' '제외' SystemAudioPreferenceEnum 을 미러링합니다. 'include' '제외'
- Chrome 확장 프로그램
chrome.documentScan
chrome.documentScan API를 사용하여 첨부된 문서 스캐너에서 이미지를 찾고 가져오세요.
- Chrome 확장 프로그램
chrome.declarativeContent
chrome.declarativeContent API를 사용하여 페이지 콘텐츠를 읽을 권한이 없어도 페이지 콘텐츠에 따라 작업을 실행할 수 있습니다. 선언적 콘텐츠 API를 사용하면 호스트 권한 을 추가하거나 콘텐츠 스크립트 를 삽입하지 않고도 웹페이지의 URL에 따라 확장 프로그램의 작업을 사용 설정하거나 CSS 선택기가 페이지의 요소와 일치하는 경우 확장 프로그램의 작업을 사용 설정할 수 있습니다. activeTab 권한을 사용하여 사용자가
- Chrome 확장 프로그램
chrome.dns
DNS 확인에는 chrome.dns API를 사용하세요. 이 API를 사용하려면 manifest 에서 "dns" 권한을 선언해야 합니다. 다음 코드는 resolve() 를 호출하여 example.com 의 IP 주소를 가져옵니다. service-worker.js: 문자열 선택사항 IP 주소 리터럴을 나타내는 문자열입니다. resultCode가 성공을 나타내는 경우에만 제공됩니다. 숫자 결과 코드입니다. 0은 성공을 나타냅니다. 지정된 호스트
- Chrome 확장 프로그램
chrome.system.storage
chrome.system.storage API를 사용하여 저장소 기기 정보를 쿼리하고 이동식 저장소 기기가 연결 및 분리될 때 알림을 받습니다. 'success' 추출 명령어가 성공적으로 실행되었습니다. 애플리케이션에서 사용자에게 기기를 분리하라는 메시지를 표시할 수 있습니다. "in_use" 다른 애플리케이션에서 기기를 사용 중입니다. 제거에 실패했습니다. 다른 애플리케이션에서 기기를 사용 중일 때는 사용자가 기기를 꺼내지 않아야 합니다.
- Chrome 확장 프로그램
chrome.alarms
chrome.alarms API를 사용하여 주기적으로 또는 향후 지정된 시간에 코드가 실행되도록 예약합니다. chrome.alarms API를 사용하려면 manifest 에서 "alarms" 권한을 선언합니다. 안정적인 동작을 보장하려면 API의 동작 방식을 이해하는 것이 좋습니다. 기기가 절전 모드일 때도 알람은 계속 실행됩니다. 하지만 알람은 기기를 깨우지 않습니다. 기기가 깨어나면 놓친 알람이 실행됩니다. 반복 알람은 최대 한 번 실행된
- Chrome 확장 프로그램
chrome.contentSettings
chrome.contentSettings API를 사용하여 웹사이트에서 쿠키, JavaScript, 플러그인과 같은 기능을 사용할 수 있도록 할지 여부를 제어하는 설정을 변경합니다. 더 일반적으로 콘텐츠 설정을 사용하면 전 세계적으로가 아니라 사이트별로 Chrome 동작을 맞춤설정할 수 있습니다. API를 사용하려면 확장 프로그램의 매니페스트에서 "contentSettings" 권한을 선언해야 합니다. 예를 들면 다음과 같습니다. 패턴을
- Chrome 확장 프로그램
chrome.audio
chrome.audio API는 사용자가 시스템에 연결된 오디오 기기에 관한 정보를 가져오고 이를 제어할 수 있도록 제공됩니다. 이 API는 현재 ChromeOS의 키오스크 모드에서만 사용할 수 있습니다. 문자열 기기 이름. DeviceType 기기 유형입니다. 문자열 사용자 친화적인 이름입니다 (예: 'USB 마이크'). 문자열 오디오 기기의 고유 식별자입니다. 부울 현재 활성 기기인 경우 true입니다. 숫자 기기의 음원 수준, 출력 볼륨,
- Chrome 확장 프로그램
chrome.contextMenus
chrome.contextMenus API를 사용하여 Google Chrome의 컨텍스트 메뉴에 항목을 추가합니다. 이미지, 하이퍼링크, 페이지와 같이 컨텍스트 메뉴 추가 항목이 적용되는 객체 유형을 선택할 수 있습니다. API를 사용하려면 확장 프로그램의 매니페스트에서 "contextMenus" 권한을 선언해야 합니다. 또한 메뉴 항목 옆에 표시할 16x16픽셀 아이콘을 지정해야 합니다. 예를 들면 다음과 같습니다. 컨텍스트 메뉴 항목은
- Chrome 확장 프로그램
CrUX 도구
CrUX 도구에 관한 기술 문서입니다.
- Chrome UX 보고서
chrome.declarativeNetRequest
chrome.declarativeNetRequest API는 선언적 규칙을 지정하여 네트워크 요청을 차단하거나 수정하는 데 사용됩니다. 이렇게 하면 확장 프로그램이 네트워크 요청을 가로채거나 콘텐츠를 보지 않고도 수정할 수 있으므로 개인 정보 보호가 강화됩니다. ' declarativeNetRequest ' 및 ' declarativeNetRequestWithHostAccess ' 권한은 동일한 기능을 제공합니다. 두 경우의 차이점은 권한이
- Chrome 확장 프로그램
chrome.devtools.panels
chrome.devtools.panels API를 사용하여 확장 프로그램을 개발자 도구 창 UI에 통합합니다. 자체 패널을 만들고, 기존 패널에 액세스하고, 사이드바를 추가합니다. 각 확장 프로그램 패널과 사이드바는 별도의 HTML 페이지로 표시됩니다. 개발자 도구 창에 표시되는 모든 확장 프로그램 페이지는 chrome.devtools API의 모든 부분과 다른 모든 확장 프로그램 API에 액세스할 수 있습니다.
- Chrome 확장 프로그램
chrome.fileBrowserHandler
chrome.fileBrowserHandler API를 사용하여 Chrome OS 파일 브라우저를 확장합니다. 예를 들어 이 API를 사용하여 사용자가 웹사이트에 파일을 업로드하도록 허용할 수 있습니다. 사용자가 Alt+Shift+M을 누르거나 SD 카드, USB 키, 외장 드라이브, 디지털 카메라와 같은 외부 저장소 기기를 연결하면 ChromeOS 파일 브라우저가 표시됩니다. 파일 브라우저는 외부 기기의 파일을 표시하는 것 외에도 사용자가
- Chrome 확장 프로그램
chrome.readingList
chrome.readingList API를 사용하여 읽기 목록 의 항목을 읽고 수정합니다. Reading List API를 사용하려면 확장 프로그램 매니페스트 파일에 "readingList" 권한을 추가합니다. manifest.json: Chrome에는 측면 패널에 읽기 목록이 있습니다. 이를 통해 사용자는 웹페이지를 저장하여 나중에 또는 오프라인으로 읽을 수 있습니다. Reading List API를 사용하여 기존 항목을 검색하고 목록에서
- Chrome 확장 프로그램
WebGPU의 다음 단계
웹용 GPU 워킹 그룹 회의에서 논의된 새로운 AI 및 렌더링 기능에 대해 알아보세요.
- Chrome
- WebGpu
동영상 접근성으로 Gemini API 개발자 대회 웹 부문 수상
Gemini API 개발자 대회 웹 어워드 수상자로 ViddyScribe를 선정했습니다. Gemini가 모든 동영상의 오디오 설명을 생성하여 웹에서 동영상에 대한 접근성을 높이는 데 어떻게 도움이 되는지 보여주었습니다.
- Chrome
새로운 확장 프로그램 메뉴 테스트가 시작됨에 따라 확장 프로그램 준비하기
새 확장 프로그램 메뉴에 맞게 확장 프로그램을 준비하는 방법
- Chrome
패스키
비밀번호를 더 쉽고 안전하게 대체할 수 있습니다.
chrome.networking.onc
chrome.networking.onc API는 네트워크 연결 (모바일 데이터, 이더넷, VPN 또는 Wi-Fi)을 구성하는 데 사용됩니다. 이 API는 자동 실행된 Chrome OS 키오스크 세션에서 사용할 수 있습니다. 네트워크 연결 구성은 개방형 네트워크 구성 (ONC) 사양에 따라 지정됩니다. 참고: 대부분의 사전 속성과 열거형 값은 JavaScript의 lowerCamelCase 규칙 대신 ONC 사양에 맞게
AI 지원 패널
AI를 활용하여 웹사이트 작동 방식 이해하기
- Chrome DevTools
번역사 API 오리진 트라이얼 참여
로컬 AI 모델을 사용하여 브라우저에서 실시간으로 텍스트를 번역합니다. 이제 사용자는 자신의 모국어로 참여할 수 있습니다.
- Chrome
소스에 대한 AI 지원
AI를 활용하여 웹사이트 리소스 이해하기
- Chrome DevTools
Chrome 132 베타
Chrome에 제공되는 최신 기능에 대해 알아보세요.
- Chrome
AI를 사용한 클라이언트 측 번역
전 세계 고객 지원을 지원하는 번역사 API에 대해 알아보세요.
성능을 위한 AI 지원
AI를 활용한 실적 프로필 이해하기
- Chrome DevTools
Chrome 데스크톱의 패스키용 Signal API
Chrome 데스크톱의 패스키용 Signal API 소개
- Chrome
- 패스키
네트워크용 AI 어시스턴스
AI를 활용하여 웹사이트의 네트워크 트래픽 이해하기
- Chrome DevTools
기본 제공 AI
기본 제공 AI는 사용자에게 강력한 모델을 제공하는 동시에 민감한 정보를 보호하고 지연 시간을 개선할 수 있는 최신 제품입니다.
성능 패널에서 직접 트레이스에 주석 추가
DevTools의 새로운 주석 기능을 사용하여 성능 트레이스를 더 쉽게 이해하는 방법을 알아보세요.
- Chrome
Summarizer API 오리진 트라이얼 참여하기
오리진 체험판에 참여하여 사용자가 긴 기사, 복잡한 문서 또는 활발한 채팅 대화를 간결하고 유용한 요약으로 요약할 수 있도록 지원하세요.
- Chrome
Signal API를 사용하여 패스키를 서버의 사용자 인증 정보와 일치시키기
WebAuthn Signal API를 사용하면 신뢰 당사자가 패스키 제공업체에 기존 사용자 인증 정보의 상태를 신호하여 패스키가 서버의 사용자 인증 정보와 일치하도록 할 수 있습니다.
- Chrome
- 패스키
Chrome 131
CSS 강조 표시 상속 기능이 변경되고, 세부정보 요소에 더 많은 CSS 스타일을 지정하고, 페이지 여백 상자를 사용한 더 쉬운 인쇄 레이아웃 등이 제공됩니다.
- Chrome
Chrome 131의 새로운 기능
Chrome 131이 출시됩니다. 세부정보 요소에 대한 CSS 스타일 지정, 페이지 여백 상자를 사용한 더 간편한 인쇄 레이아웃 등 다양한 기능이 추가되었습니다.
- Chrome
Chrome 확장 프로그램용 Prompt API 오리진 트라이얼에 참여하세요
Chrome 확장 프로그램용 Prompt API 오리진 트라이얼에 참여하고 Chrome에서 Gemini Nano에 액세스하세요.
- Chrome
내장된 AI로 요약
긴 기사, 복잡한 문서 또는 활발한 채팅 대화를 간결하고 통찰력 있는 요약으로 정리하세요.
CSS 및 UI
서체, 색상, 레이아웃 등의 주제에 관한 리소스를 찾아보세요.
매니페스트 - 샌드박스
경고: 버전 57부터 Chrome에서는 더 이상 샌드박스 처리된 페이지 내부에 외부 웹 콘텐츠 (삽입된 프레임 및 스크립트 포함)를 허용하지 않습니다. 대신 WebView 를 사용하세요. 샌드박스 처리된 고유 출처에서 제공할 앱 또는 확장 프로그램 페이지 모음과 함께 사용할 콘텐츠 보안 정책(선택사항)을 정의합니다. 샌드박스에는 두 가지 의미가 있습니다. 샌드박스 처리된 페이지에는 앱 또는 확장 프로그램의 나머지 부분에서 사용하는 콘텐츠 보안
저장소 영역에 관한 매니페스트
local 및 sync 저장소 영역과 달리 managed 저장소 영역은 그 구조를 JSON 스키마 로 선언해야 하며 Chrome에서 엄격하게 검증됩니다. 이 스키마는 "storage" 매니페스트 키의 "managed_schema" 속성으로 지정된 파일에 저장되어야 하며 앱에서 지원하는 엔터프라이즈 정책을 선언합니다. 정책은 옵션과 유사하지만 사용자 대신 시스템 관리자가 구성하므로 조직의 모든 사용자를 위해 앱을 사전 구성할 수 있습니다.
매니페스트 - 요구사항
앱 또는 확장 프로그램에 필요한 기술입니다. Chrome 웹 스토어와 같은 호스팅 사이트에서는 이 목록을 사용하여 사용자가 컴퓨터에서 작동하지 않는 앱이나 확장 프로그램을 설치하지 못하게 할 수 있습니다. 현재 지원되는 요구사항에는 '3D' 및 '플러그인'이 포함되며 향후 추가 요구사항 검사가 추가될 수 있습니다. '3D' 요구사항은 GPU 하드웨어 가속을 나타냅니다. 'webgl' 요구사항은 WebGL API 를 참조합니다. Chrome 3D
오리진 트라이얼 시작하기
신규 또는 실험용 웹 플랫폼 기능을 테스트합니다. 기능이 모든 사용자에게 제공되기 전에 웹 표준 커뮤니티에 기능의 사용성, 실용성, 효과에 대한 의견을 제공하세요.
스타일 지정 옵션 더보기 <details>
이제 새로운 ::details-content 가상 요소를 사용하여 디스플레이 유형을 설정하고 펼치고 접을 수 있는 부분의 컨테이너 스타일을 지정할 수 있습니다.
메모리 문제 해결
Chrome과 DevTools를 사용하여 페이지 성능에 영향을 미치는 메모리 문제(메모리 누수, 메모리 팽창, 잦은 가비지 컬렉션 등)를 찾는 방법을 알아보세요.
- Chrome DevTools
WebGPU의 새로운 기능 (Chrome 131)
WGSL, GPUCanvasContext getConfiguration(), 점 및 선 프리미티브의 클립 거리에는 깊이 편향, 하위 그룹의 포괄적인 스캔 내장 함수, 다중 그리기 간접에 관한 실험적 지원, 셰이더 모듈 컴파일 옵션 엄격한 수학 지원, GPUAdapter requestAdapterInfo() 삭제 등이 없어야 합니다.
- Chrome
- WebGpu
메모리 패널 개요
메모리 할당에 대한 유용한 정보를 얻고, 하위 수준의 메모리 문제를 조사하고, 가비지 컬렉션을 관리합니다.
- Chrome DevTools
원활한 사용자 인증 정보 공유로 사용자가 원활하게 로그인할 수 있도록 지원
원활한 사용자 인증 정보 공유를 통해 비밀번호 관리자에게 사용자가 Android 앱과 웹사이트에서 동일한 사용자 인증 정보를 사용하여 로그인할 수 있다는 신호를 안전하게 보낼 수 있습니다.
- Chrome
DevTools 맞춤설정
Chrome DevTools를 맞춤설정할 수 있는 방법 목록: 테마, 배치, 패널 순서, 언어 등 변경
- Chrome DevTools
성능 패널에서 실시간 Core Web Vitals 측정항목 모니터링
성능 패널에서 실시간 Core Web Vitals 측정항목을 모니터링합니다.
- Chrome DevTools
- Chrome
배지 참조
다양한 오버레이를 전환하고 배지를 사용하여 DOM 트리 탐색 속도를 높입니다.
- Chrome DevTools
DevTools의 새로운 기능, Chrome 131
Gemini로 CSS를 디버그하고, 결과에 주석을 달고, Performance 패널에서 유용한 정보를 얻고, 과도한 레이아웃 변경 및 합성되지 않은 애니메이션을 파악하는 등의 작업을 할 수 있습니다.
- Chrome
- Chrome DevTools
CSS를 사용하여 인쇄할 때 웹페이지의 여백에 콘텐츠 추가
웹페이지를 인쇄할 때 맞춤 머리글과 바닥글을 만듭니다.
- Chrome
사용자 필기 인식
필기 인식 API를 사용하면 웹 애플리케이션에서 고급 필기 인식 서비스를 사용하여 필기 입력의 텍스트를 실시간으로 인식할 수 있습니다.
WebGPU: 문제 해결 팁 및 수정사항
Chrome 브라우저에서 WebGPU가 사용 중지되거나 작동하지 않는 이유를 알아보세요.
런타임 성능 분석
Chrome DevTools에서 런타임 성능을 평가하는 방법을 알아보세요.
- Chrome DevTools
Chrome에서 --headless=old 삭제
Chrome 132에는 더 이상 이전 헤드리스 모드가 포함되지 않습니다. chrome-headless-shell 또는 새로운 Headless 모드로 이전하세요.
- Chrome
DevTools의 새로운 스크롤 배지: 스크롤 가능한 요소를 더 빠르게 찾기
DevTools의 새로운 스크롤 배지가 스크롤 가능한 요소의 디버깅을 간소화하는 방법과 이를 빌드한 방법을 알아보세요.
- Chrome
Cache-Control에 bfcache 사용 설정: no-store
Chrome에서는 Cache-Control: no-store를 사용하는 페이지에서 bfcache를 사용할 수 있도록 변경하고 있습니다. 개발자에게 어떤 영향을 미치는지 알아보세요.
Chrome 헤드리스 모드
이제 Chrome의 헤드리스 모드가 Chrome의 일반 '헤드리스' 모드에 더 가까워져 개발자에게 더욱 유용합니다.
- Chromium
DevTools AI 지원으로 할 수 있는 멋진 5가지 작업
DevTools의 새로운 AI 지원 패널의 재미있고 흥미로운 사용 사례에 대해 알아보세요.
- Chrome
기본 제공 AI API
기본 제공 AI는 사용자에게 강력한 모델을 제공하는 동시에 민감한 정보를 보호하고 지연 시간을 개선할 수 있는 최신 제품입니다.
Chrome 131 베타
최신 베타에서 Chrome에 제공될 기능을 살펴보세요.
- Chrome
API 참조 문서
Chrome 확장 프로그램에서 사용할 수 있는 모든 API에 대한 전체 참조입니다. 여기에는 아직 베타 및 개발 단계의 API뿐만 아니라 지원 중단된 Chrome 앱 플랫폼용 API가 포함됩니다.
- Chrome 확장 프로그램
Chrome 130
Chrome 130이 출시됩니다. 문서 PIP를 사용하면 PIP 창을 더 세부적으로 제어할 수 있고, CSS 중첩 선언을 사용하면 몇 가지 어려운 특수 사례를 수정할 수 있으며, 요소의 장식이 여러 줄로 분할되는 방식을 지정할 수 있습니다. 그 밖에도 다양한 기능이 있습니다.
- Chrome
Chrome 130의 새로운 기능
Chrome 130이 출시되었습니다. 문서 PIP 모드를 사용하면 PIP 모드를 더 세밀하게 제어할 수 있으며, CSS 중첩 선언은 몇 가지 까다로운 극단적인 사례를 해결하며, 여러 줄에 걸쳐 분할된 요소의 장식이 작동하는 방식을 지정할 수 있습니다. Pete LePage이 Chrome 130의 개발자를 위한 새로운 기능에 대해 자세히 설명합니다.
- Chrome
스타일 지정을 위한 AI 지원
DevTools에서 AI를 사용하여 웹사이트의 스타일이 지정되는 방식을 알아봅니다.
- Chrome DevTools
WebGPU의 새로운 기능 (Chrome 130)
이중 소스 블렌딩, Metal의 셰이더 컴파일 시간 개선, GPUAdapter requestAdapterInfo() 지원 중단 등
- Chrome
- WebGpu
chrome.clipboard
chrome.clipboard API는 사용자가 클립보드의 데이터에 액세스할 수 있도록 제공됩니다. 이는 오픈 웹 대안을 사용할 수 있을 때까지 chromeos 플랫폼 앱을 위한 임시 솔루션입니다. 오픈 웹 솔루션이 출시되면(2017년 4분기에 제공 예정) 지원이 중단될 예정입니다. 문자열 추가 데이터 항목의 콘텐츠입니다. type 가 'textPlain'인 경우 일반 텍스트 문자열입니다. type 이 'textHTML'인 경우 마크업 문자열
chrome.virtualKeyboard
chrome.virtualKeyboard API는 키오스크 세션에서 가상 키보드 레이아웃 및 동작을 구성하는 데 사용되는 키오스크 전용 API입니다. 불리언 선택사항 가상 키보드의 자동 완성 지원 여부입니다. 불리언 선택사항 가상 키보드의 자동 수정 지원 여부입니다. 불리언 선택사항 가상 키보드에서 필기 인식을 통한 입력을 제공할 수 있는지 여부입니다. 불리언 선택사항 가상 키보드의 맞춤법 검사 지원 여부입니다. 불리언 선택사항 가상 키보드에서
네트워크 활동 검사
Chrome DevTools에서 가장 많이 사용되는 네트워크 관련 기능에 대한 튜토리얼입니다.
- Chrome DevTools
긴 애니메이션 프레임 API
Long Animation Frames API (LoAF)는 Long Tasks API의 다음 반복이며 기여 분석을 통해 프레임 업데이트 지연을 측정할 수 있습니다.
AI 혁신
AI 혁신 탭 참조
- Chrome DevTools
2024년 10월 Chrome 확장 프로그램의 변경사항
Chrome 확장 프로그램의 최근 변경사항에 대한 개요와 개발자가 기대할 수 있는 곧 출시될 흥미로운 확장 프로그램 기능을 확인해 보세요.
- Chrome 확장 프로그램
- Chrome
네이티브 클라이언트
브라우저에서 컴파일된 C 및 C++ 코드를 실행하기 위한 샌드박스입니다. 이 기능은 지원 중단되었습니다.
Chrome 130의box-decoration-break 속성
Chrome 130에서는 접두사가 없는 Box-decoration-break가 완전히 지원됩니다.
- Chrome
비공개 네트워크 액세스 보류 중
비공개 네트워크 액세스 (PNA) 출시가 보류 중입니다.
- Chrome
CSS 선택 스타일 지정의 상속 변경사항
Chrome 131에서 CSS 강조표시 상속이 변경됩니다.
- Chrome
초기 미리보기로 사용할 수 있는 Translation API
이제 빌트인 AI 사전 체험 프로그램 참여자가 Translation API를 사용할 수 있습니다.
- Chrome
CSS 앵커 배치 API
앵커 배치 API를 사용하여 요소를 서로 상대적으로 배치합니다.
Chrome DevTools의 예측 포착: 예측이 어려운 이유 및 개선 방법
DevTools 디버거가 예외 포착 여부를 예측하는 방법을 알아봅니다.
- Chrome
WebAuthn: 인증자 에뮬레이션
Chrome DevTools에서 인증자 에뮬레이션 및 WebAuthn 디버그
- Chrome DevTools
Chrome 내장 AI 챌린지에 참가하기
Chrome에서 Gemini Nano로 무엇이 가능한지 다시 생각해 볼 수 있는 '기본 제공 AI 챌린지'가 시작됩니다.
- Chrome
기능 참조
Chrome DevTools의 Recorder 패널 기능에 대한 종합 참조 자료입니다.
- Chrome DevTools
검색: 로드된 모든 리소스에서 텍스트 찾기
검색 패널을 사용하여 로드된 모든 리소스에서 텍스트를 찾습니다.
- Chrome DevTools
Chrome 웹 스토어 개발자 대시보드 모바일 환경 개선
Chrome 웹 스토어 개발자 대시보드의 반응성과 모바일 친화성을 개선하는 일련의 UI 변경사항을 출시하게 되어 기쁩니다. 이번 업데이트를 통해 스토어 등록정보 실적을 모니터링하고, 등록정보를 변경하고, 스토어에서 확장 프로그램을 관리할 때 더 편리하고 접근하기 쉬운 환경을 제공할 수 있기를 바랍니다. 휴대기기에서 확장 프로그램의 스토어 등록정보 실적을 더 잘 볼 수 있도록 모든 차트 및 분석 페이지가 더 반응이 빨라지도록 업데이트되었습니다.
- Chrome
- Chrome 확장 프로그램
DevTools의 새로운 기능, Chrome 130
'실적' 패널에서 탐색할 수 있는 실시간 측정항목 및 탐색경로에 대한 추천, 새로워진 네트워크 필터, 정리된 HAR 내보내기 등
- Chrome
- Chrome DevTools
보안: 보안 문제 이해하기
보안 패널을 사용하여 페이지가 HTTPS로 완전히 보호되는지 확인합니다.
- Chrome DevTools
적용 범위: 사용되지 않는 자바스크립트 및 CSS 찾기
Chrome DevTools에서 사용되지 않는 자바스크립트 및 CSS 코드를 찾고 분석하는 방법
- Chrome DevTools
소스 패널 개요
Chrome DevTools의 Sources 패널에서 파일을 보고 편집하고, 스니펫을 만들고, 자바스크립트를 디버깅하고, 작업공간을 설정할 수 있습니다.
- Chrome DevTools
캐싱 이해하기: 캐시 검사, 삭제, 사용 중지
DevTools로 캐시를 검사하고 문제를 해결합니다.
- Chrome DevTools
- Chrome
레이어 패널: 웹사이트의 레이어를 살펴봅니다.
웹사이트를 구성하는 레이어를 검사합니다.
- Chrome DevTools
단일 페이지 애플리케이션의 동일 문서 보기 전환
단일 페이지 애플리케이션에서 사용할 동일 문서 보기 전환을 시작합니다.
이제 DevTools에서 웹 바이탈 확장 프로그램 사용
웹 Vitals 확장 프로그램이 Chrome DevTools의 성능 패널과 병합되며 2025년 1월에 독립형 지원이 종료됩니다.
- Chrome
- Chrome DevTools
콘솔 개요
Chrome DevTools 콘솔의 주요 용도는 메시지 로깅 및 자바스크립트 실행입니다.
- Chrome DevTools
웹 앱 매니페스트 ID 속성으로 PWA를 고유하게 식별
선택적 `id` 속성은 웹 앱 매니페스트 사양의 일부이며, 이 속성을 사용하여 PWA에 사용되는 식별자를 명시적으로 정의할 수 있습니다. 매니페스트에 `id` 속성을 추가하면 `start_url` 또는 매니페스트 위치의 종속성이 삭제되고 나중에 업데이트될 수 있습니다.
피드백 필요: CSS 석조물을 어떻게 정의해야 할까요?
제안된 두 가지 석조물 사양 비교.
- Chrome
초기 미리보기에 사용할 수 있는 작성기 및 재작성기 API
이제 EPP 참여자는 Chrome에서 쓰기 및 재작성 API로 프로토타입을 제작할 수 있습니다.
- Chrome
Chrome 130 베타
최신 Chrome 베타의 기능과 변경사항을 이용해 사이트를 테스트하세요.
- Chrome
Chrome 실험: 프로세스 공유
프로세스 공유 실험 및 Chrome DevTools의 영향' 살펴봤습니다
- Chrome
실적 패널: 웹사이트 실적 분석
웹사이트의 부하 및 런타임 성능 분석
- Chrome DevTools
Chrome 129의 새로운 기능
이제 Chrome 129가 출시됩니다. 긴 작업에서 생성할 수 있습니다. 성능을 개선하기 위해 고유 크기로 요소에 애니메이션을 적용할 수 있으며, 앵커 위치 지정 문법에 몇 가지 변경사항이 있습니다. 그 밖에도 많은 사항이 있습니다. 피트 르페이지가 Chrome 129의 개발자를 위한 새로운 기능에 관한 모든 세부정보를 제공합니다.
- Chrome
WebGPU의 새로운 기능(Chrome 129)
캔버스 톤 매핑 모드, 확장된 하위 그룹 지원 등 HDR 지원
- Chrome
- WebGpu
높이에 애니메이션 적용: auto; CSS에 (및 기타 고유한 크기 조정 키워드 포함)
`interpolate-size` 및 `calc-size()`를 사용하여 고유 크기 조정 키워드와 애니메이션 처리
DevTools에서 로컬 및 실제 사용자 Core Web Vitals 성능 모니터링
Chrome DevTools의 Performance 패널에는 로컬 Core Web Vitals 성능을 모니터링하고 이를 필드의 실제 사용자 데이터와 비교하는 새로운 방법이 있습니다.
- Chrome DevTools
- Chrome
웹 시리얼의 블루투스 RFCOMM 업데이트
Web Serial에서 블루투스 RFCOMM 직렬 포트를 사용할 수 있는 시점을 감지하는 방법을 알아봅니다.
- Chrome
화면 고정 및 사라지는 요소 검사
DevTools로 검사할 수 있도록 DOM의 요소를 고정합니다.
- Chrome DevTools
- Chrome
개발자 의견 요청: 맞춤설정 가능한 선택
새로운 맞춤설정 가능 선택 기능을 미리 살펴보세요.
- Chrome
키보드 잠금 및 포인터 잠금 API를 사용하려면 Chrome 131의 권한이 필요합니다.
Keyboard Lock API 를 사용하면 개발자가 양방향 웹사이트, 게임, 원격 데스크톱 또는 애플리케이션 스트리밍을 비롯한 다양한 사용 사례에 몰입도 높은 전체 화면 환경을 제공할 수 있습니다. 웹사이트에서 호스트 운영체제에서 허용하는 모든 사용 가능한 키를 사용할 수 있도록 하여 이를 실행합니다. Pointer Lock API 를 사용하면 데스크톱 애플리케이션이 포인터 아이콘을 숨기고 마우스 모션을 3D 세상을 둘러보는 것과 같은 다른
- Chrome
<동영상> 뿐만 아니라 모든 요소에 대한 PIP 모드
상시 사용 설정 창에 임의의 HTML 콘텐츠를 표시합니다.
출시 노트
CrUX 데이터 세트의 최신 변경사항에 관한 세부정보입니다.
- Chrome UX 보고서
매니페스트 - Nacl 모듈
MIME 유형에서 각 유형을 처리하는 Native Client 모듈로의 하나 이상의 매핑입니다. 대상 예를 들어 다음 스니펫에서 굵게 표시된 코드는 Native Client 모듈을 콘텐츠로 MIME 유형을 위한 핸들러를 정의합니다. 'path'의 값입니다. 확장 프로그램 내에 Native Client 매니페스트 (.nmf 파일)의 위치입니다. 를 참조하세요. Native Client 및.nmf 파일에 대한 자세한 내용은 Native Client
externally_connectable
externally_connectable 매니페스트 속성은 어떤 확장 프로그램, 앱, 웹페이지를 선언할 수 있는지 runtime.connect 및 runtime.sendMessage 를 통해 앱에 연결합니다. 메시지 전달에 관한 가이드는 교차 확장 프로그램 및 앱 메시지 및 메시지 보내기를 참고하세요. 웹페이지 를 확인하세요. 앱의 매니페스트에 externally_connectable 가 선언되지 않으면 모든 확장 프로그램 및 앱이 연결할 수
매니페스트 - 아이콘
확장 프로그램, 앱 또는 테마를 나타내는 하나 이상의 아이콘입니다. 항상 128x128 및 128x100의 아이콘; 설치 중에 그리고 Chrome 웹 스토어에서 사용합니다. 또한 확장 프로그램은 48x48 아이콘: 확장 프로그램 관리 페이지 (chrome://extensions)에 사용됩니다. 그 외에 확장 프로그램 페이지의 파비콘으로 사용할 16x16 아이콘을 지정할 수 있습니다. PNG가 투명도를 가장 잘 지원하므로 일반적으로 아이콘은
매니페스트 버전
패키지에 필요한 매니페스트 파일 형식의 버전을 지정하는 하나의 정수입니다. Chrome 기준 18, 개발자는 2 (따옴표 없이)를 지정하여 문서: Chrome 18부터 매니페스트 버전 1은 지원 중단 된 것으로 간주합니다. 버전 2는 아직 필수 는 아니지만 머지않은 미래에 지원 중단된 버전을 사용하는 패키지 지원을 중단할 예정임 매니페스트 버전도 있습니다 Google 어스로 바로 이동할 준비가 되지 않은 확장 프로그램, 애플리케이션 및
메모리 검사기: ArrayBuffer, TypedArray, DataView, Wasm 메모리를 검사합니다.
메모리 검사기를 사용하여 자바스크립트의 ArrayBuffer, TypedArray 또는 DataView와 C++ Wasm 앱의 WebAssembly.Memory를 검사합니다.
- Chrome DevTools
변경사항: HTML, CSS 및 자바스크립트 변경사항 추적
HTML, CSS 및 자바스크립트의 변경사항을 추적합니다.
- Chrome DevTools
앵커 위치 지정 문법 변경사항
알고 있어야 하는 앵커 위치 지정 API와 관련된 변경사항
- Chrome
명령어 메뉴에서 명령어 실행
명령어 메뉴 열기, 명령어 실행, 파일 열기, 기타 작업 확인 등에 관한 가이드입니다.
- Chrome DevTools
Chrome에서 웹사이트 간 사용자 인증 정보의 원활한 공유 지원
동일한 계정 관리 백엔드를 공유하는 여러 도메인을 사용하는 경우 이제 Digital Asset Links를 통해 도메인 간에 사용자 인증 정보를 원활하게 공유할 수 있으므로 사용자가 사용자 인증 정보를 한 번만 저장하고 Chrome 비밀번호 관리자에서 연결된 웹사이트로 추천하도록 할 수 있습니다.
Digital Credentials API 오리진 트라이얼 소개
Digital Credentials API의 오리진 트라이얼은 Chrome 128부터 시작됩니다. Digital Credentials API는 웹사이트에서 운전면허증 또는 디지털 지갑에 저장된 주민등록증과 같은 디지털 사용자 인증 정보를 통해 사용자에 대한 확인 가능한 정보를 선택적으로 요청할 수 있는 새로운 웹 플랫폼 API입니다.
- Chrome
DevTools의 새로운 기능, Chrome 129
실적의 검색 요청 > 네트워크, 자동 완성을 통해 주소 양식에 테스트 데이터를 사용하고, 녹음기 패널에서 Firefox용 Puppeteer로 내보내고, 성능 패널에서 관찰한 내용으로 성능 문제를 한눈에 파악하는 등 다양한 작업을 할 수 있습니다.
- Chrome DevTools
- Chrome
웹 플랫폼
Chrome의 작동 방식을 알아보고 오리진 트라이얼에 참여하며 어디서나 Chrome으로 빌드하세요.
Chrome의 WebAuthn을 위한 힌트, 관련 출처 요청, JSON 직렬화 도입
이제 Chrome의 WebAuthn에서 힌트, 관련 출처 요청, JSON 직렬화를 사용할 수 있음
- Chrome
chrome.privacy
chrome.privacy API를 사용하여 Chrome에서 사용자 개인 정보 보호에 영향을 줄 수 있는 기능의 사용을 제어합니다. 이 API는 Chrome의 구성을 가져오고 설정하기 위해 API 유형의 ChromeSetting 프로토타입 을 사용합니다. 'privacy(개인 정보 보호)'를 선언해야 합니다. 매니페스트 에 권한을 부여해야 API를 사용할 수 있습니다. 예를 들면 다음과 같습니다. Chrome 설정의 현재 값을 읽는 방법은
- Chrome 확장 프로그램
chrome.wallpaper
chrome.wallpaper API를 사용하여 ChromeOS 배경화면을 변경합니다. '배경화면'을 선언해야 합니다. 앱의 매니페스트 에서 사용할 권한 사용할 수 있습니다. 예를 들면 다음과 같습니다. 예를 들어 배경화면 이미지를 https://example.com/a_file.png 님, chrome.wallpaper.setWallpaper 님에게 전화를 걸 수 있습니다 다음과 같습니다. 지원되는 배경화면 레이아웃 "늘리기" 'CENTER'
- Chrome 확장 프로그램
chrome.scripting
chrome.scripting API를 사용하여 다른 컨텍스트에서 스크립트를 실행합니다. chrome.scripting API를 사용하려면 매니페스트 에서 "scripting" 권한과 스크립트를 삽입할 페이지의 호스트 권한을 선언합니다. "host_permissions" 키 또는 "activeTab" 권한을 사용하여 임시 호스트 권한을 부여합니다. 다음 예에서는 activeTab 권한을 사용합니다. chrome.scripting API를
- Chrome 확장 프로그램
chrome.system.storage
chrome.system.storage API를 사용하여 저장소 기기 정보를 쿼리하고 이동식 저장소 기기가 연결 및 분리될 때 알림을 받습니다. "success" 제거 명령어가 완료되었습니다. 애플리케이션에서 사용자에게 기기를 삭제하라는 메시지를 표시할 수 있습니다. "in_use" 다른 애플리케이션에서 기기를 사용 중입니다. 제거할 수 없습니다. 다른 애플리케이션에서 기기 처리가 완료될 때까지 사용자가 기기를 제거해서는 안 됩니다.
- Chrome 확장 프로그램
chrome.webAuthenticationProxy
chrome.webAuthenticationProxy API를 사용하면 원격 호스트에서 실행되는 원격 데스크톱 소프트웨어가 Web Authentication API (WebAuthn) 요청을 가로채 로컬 클라이언트에서 요청을 처리할 수 있습니다. 문자열 navigator.credentials.create() 에 전달되는 PublicKeyCredentialCreationOptions (JSON 문자열로 직렬화됨) 직렬화 형식은
- Chrome 확장 프로그램
chrome.enterprise.hardwarePlatform
chrome.enterprise.hardwarePlatform API를 사용하여 브라우저가 실행되는 하드웨어 플랫폼의 제조업체와 모델을 가져옵니다. 참고: 이 API는 기업 정책으로 설치된 확장 프로그램에서만 사용할 수 있습니다. 문자열 문자열 하드웨어 플랫폼의 제조업체와 모델을 가져오고 확장 프로그램이 승인된 경우 callback 를 통해 반환합니다. 함수 선택사항 callback 매개변수는 다음과 같습니다.
- Chrome 확장 프로그램
chrome.vpnProvider
chrome.vpnProvider API를 사용하여 VPN 클라이언트를 구현합니다. chrome.vpnProvider 의 일반적인 사용법은 다음과 같습니다. createConfig() 를 호출하여 VPN 구성을 만듭니다. VPN 구성은 ChromeOS UI에서 사용자에게 표시되는 영구 항목입니다. 사용자는 목록에서 VPN 구성을 선택하고 이에 연결하거나 연결을 해제할 수 있습니다. onPlatformMessage,
- Chrome 확장 프로그램
chrome.enterprise.deviceAttributes
chrome.enterprise.deviceAttributes API를 사용하여 기기 속성을 읽습니다. 참고: 이 API는 기업 정책으로 강제 설치된 확장 프로그램에서만 사용할 수 있습니다. 관리자가 주석 처리한 위치를 가져옵니다. 현재 사용자가 제휴되어 있지 않거나 관리자가 주석 처리한 위치를 설정하지 않은 경우 빈 문자열이 반환됩니다. 함수 선택사항 callback 매개변수는 다음과 같습니다. 문자열 프로미스<string>
- Chrome 확장 프로그램
chrome.systemLog
chrome.systemLog API를 사용하여 확장 프로그램에서 Chrome 시스템 로그를 기록합니다. 문자열 새 로그 레코드를 추가합니다. MessageOptions 로깅 옵션입니다. 함수 선택사항 callback 매개변수는 다음과 같습니다. 프로미스<void> 프로미스는 Manifest V3 이상에서 지원되지만 이전 버전과의 호환성입니다. 같은 함수 호출에서 두 가지를 모두 사용할 수는 없습니다. 이 프로미스는 콜백에 전달된
- Chrome 확장 프로그램
chrome.types
chrome.types API에는 Chrome용 유형 선언이 포함되어 있습니다. ChromeSetting 유형은 일반적인 함수 집합 ( get(), set(), clear() )을 제공합니다. Chrome 브라우저 설정을 위한 이벤트 게시자 ( onChange )가 있어야 합니다. 프록시 설정 예 는 이러한 함수의 용도를 보여줍니다. Chrome에서는 세 가지 다른 브라우저 설정 범위를 구분합니다. Chrome은 여러 레이어의 설정을
- Chrome 확장 프로그램
chrome.power
chrome.power API를 사용하여 시스템의 전원 관리 기능을 재정의합니다. 기본적으로 운영체제에서는 사용자가 비활성 상태일 때 화면을 어둡게 하고 결국에는 사용자가 있습니다. Power API를 사용하면 앱 또는 확장 프로그램이 시스템을 켜진 상태로 유지할 수 있습니다. 이 API를 사용하여 전원 관리가 사용 중지되는 Level 을 지정할 수 있습니다. "system" 수준은 시스템은 활성 상태로 유지되지만 화면을 어둡게 하거나 끌 수
- Chrome 확장 프로그램
chrome.system.memory
chrome.system.memory API 숫자 사용 가능한 용량의 크기(바이트)입니다. 숫자 물리적 메모리 용량의 총량(바이트)입니다. 실제 메모리 정보를 가져옵니다. 함수 선택사항 callback 매개변수는 다음과 같습니다. MemoryInfo Promise&lt; MemoryInfo &gt; 프로미스는 Manifest V3 이상에서 지원되지만 이전 버전과의 호환성입니다. 같은 함수 호출에서 두 가지를 모두 사용할 수는
- Chrome 확장 프로그램
chrome.enterprise.networkingAttributes
chrome.enterprise.networkingAttributes API를 사용하여 현재 네트워크에 관한 정보를 읽습니다. 참고: 이 API는 기업 정책으로 강제 설치된 확장 프로그램에서만 사용할 수 있습니다. 문자열( 선택사항 ) 기기의 로컬 IPv4 주소입니다 (구성되지 않은 경우 정의되지 않음). 문자열( 선택사항 ) 기기의 로컬 IPv6 주소입니다 (구성되지 않은 경우 정의되지 않음). 문자열 기기의 MAC 주소입니다. 기기 기본
- Chrome 확장 프로그램
chrome.topSites
chrome.topSites API를 사용하여 새 탭 페이지에 표시되는 인기 사이트 (예: 가장 많이 방문한 사이트)에 액세스합니다. 사용자가 맞춤설정한 단축키는 포함되지 않습니다. 'topSites'를 선언해야 합니다 이 API를 사용하려면 확장 프로그램의 매니페스트 에 권한을 부여해야 합니다. 이 API를 사용하려면 chrome-extension-samples 에서 topSites API 예시 를 설치하세요. 저장소 자주 방문한 URL을
- Chrome 확장 프로그램
chrome.proxy
chrome.proxy API를 사용하여 Chrome의 프록시 설정을 관리하세요. 이 API는 프록시 구성을 가져오고 설정하기 위해 API 유형의 ChromeSetting 프로토타입 을 사용합니다. 'proxy'를 선언해야 합니다. 프록시 설정을 사용하기 위한 확장 프로그램 매니페스트 의 권한 API에 액세스할 수 있습니다. 예를 들면 다음과 같습니다. 프록시 설정은 proxy.ProxyConfig 객체에 정의됩니다. Chrome의 프록시
- Chrome 확장 프로그램
chrome.devtools.recorder
chrome.devtools.recorder API를 사용하여 DevTools에서 Recorder 패널을 맞춤설정합니다. devtools.recorder API는 Chrome DevTools에서 Recorder 패널 을 확장할 수 있는 미리보기 기능입니다. Developer Tools API 사용에 관한 일반적인 소개는 DevTools API 요약 을 참조하세요. 확장 프로그램 플러그인을 등록하려면
- Chrome 확장 프로그램
chrome.devtools.performance
chrome.devtools.performance API를 사용하여 DevTools의 Performance 패널에서 상태 업데이트 기록을 리슨합니다. Developer Tools API 사용에 관한 일반적인 소개는 DevTools API 요약 을 참조하세요. chrome.devtools.performance API를 사용하면 개발자가 Chrome DevTools의 Performance 패널 패널의 기록 기능과 상호작용할 수 있습니다. 이
- Chrome 확장 프로그램
chrome.system.cpu
system.cpu API를 사용하여 CPU 메타데이터를 쿼리합니다. 문자열 프로세서의 아키텍처 이름입니다. 문자열[] 프로세서의 기능 일부를 나타내는 기능 코드 집합입니다. 현재 지원되는 코드는 'mmx', 'sse', 'sse2', 'sse3', 'ssse3', 'sse4_1', 'sse4_2', 'avx'입니다. 문자열 프로세서의 모델 이름입니다. 숫자 논리 프로세서 수입니다. ProcessorInfo [] 각 논리 프로세서에 관한
- Chrome 확장 프로그램
chrome.devtools.network
chrome.devtools.network API를 사용하여 Network 패널의 개발자 도구에서 표시한 네트워크 요청에 관한 정보를 검색합니다. 네트워크 요청 정보는 HTTP 보관 형식 ( HAR )으로 표시됩니다. 다음에 대한 설명: HAR은 이 문서의 범위에 포함되지 않습니다. HAR v1.2 사양 을 참고하세요. HAR 측면에서 chrome.devtools.network.getHAR() 메서드는 전체 HAR 로그 를 반환하지만
- Chrome 확장 프로그램
chrome.processes
chrome.processes API를 사용하여 브라우저의 프로세스와 상호작용합니다. 숫자 캐시에서 사용되는 부분(바이트)입니다. 숫자 캐시 크기(바이트) 숫자 선택사항 프로세스의 CPU 사용량에 대한 가장 최근 측정값으로, 프로세스의 모든 스레드별로 사용된 단일 CPU 코어의 백분율로 표시됩니다. 그러면 0부터 CpuInfo.numOfProcessors*100까지의 값이 제공되며, 다중 스레드 프로세스에서 100% 를 초과할 수 있습니다.
- Chrome 확장 프로그램
chrome.search
chrome.search API를 사용하여 기본 제공자를 통해 검색합니다. "CURRENT_TAB" 검색 결과가 활성 브라우저의 통화 탭 또는 탭에 표시되도록 지정합니다. "NEW_TAB" 검색 결과가 새 탭에 표시되도록 지정합니다. "NEW_WINDOW" 검색 결과가 새 창에 표시되도록 지정합니다. 처리 선택사항 검색 결과가 표시되어야 하는 위치입니다. 기본값은 CURRENT_TAB 입니다. 숫자 선택사항 검색 결과가 표시되어야 하는
- Chrome 확장 프로그램
chrome.devtools.inspectedWindow
chrome.devtools.inspectedWindow API를 사용하여 검사된 창과 상호작용합니다. 검사된 페이지의 탭 ID를 가져오거나 검사된 창의 컨텍스트에서 코드를 평가하거나 페이지를 새로고침하거나 페이지 내의 리소스 목록을 가져옵니다. Developer Tools API 사용에 관한 일반적인 소개는 DevTools API 요약 을 참조하세요. tabId 속성은 chrome.tabs.* 와 함께 사용할 수 있는 탭 식별자를
- Chrome 확장 프로그램
chrome.webNavigation
chrome.webNavigation API를 사용하여 진행 중인 내비게이션 요청의 상태에 관한 알림을 수신합니다. 모든 chrome.webNavigation 메서드와 이벤트를 사용하려면 "webNavigation" 권한을 선언해야 합니다. 확장 프로그램 매니페스트 에 있어야 합니다. 예를 들면 다음과 같습니다. 탐색이 성공적으로 완료되면 이벤트가 다음 순서로 실행됩니다. 프로세스 중에 발생하는 모든 오류로 인해 onErrorOccurred
- Chrome 확장 프로그램
chrome.tts
chrome.tts API를 사용하여 합성된 TTS (텍스트 음성 변환)를 재생합니다. 확장 프로그램이 음성 엔진을 구현할 수 있도록 하는 관련 ttsEngine API도 참고하세요. Chrome은 Windows (SAPI 5 사용), Mac OS X 및 ChromeOS에서 이 기능을 음성 합성 기능을 지원합니다. 모든 플랫폼에서 사용자는 대체 음성 엔진으로 등록하는 확장 프로그램을 설치합니다. 확장 프로그램에서 speak() 를 호출하여
- Chrome 확장 프로그램
chrome.printerProvider
chrome.printerProvider API는 인쇄 관리자에서 사용되는 이벤트를 노출하여 확장 프로그램으로 제어되는 프린터를 쿼리하고 기능을 쿼리하며 이러한 프린터에 인쇄 작업을 제출합니다. 문자열( 선택사항 ) 프린터의 사람이 읽을 수 있는 설명입니다. 문자열 고유한 프린터 ID입니다. 문자열 사람이 읽을 수 있는 프린터의 이름입니다. onPrintRequested 이벤트에 대한 응답으로 반환되는 오류 코드입니다. "OK" 작업이
- Chrome 확장 프로그램
chrome.printingMetrics
chrome.printingMetrics API를 사용하여 인쇄 사용에 관한 데이터를 가져옵니다. "BLACK_AND_WHITE" 흑백 모드가 사용되었음을 명시합니다. "COLOR" 색상 모드가 사용되었는지 지정합니다. "ONE_SIDED" 단면 인쇄가 사용되었음을 명시합니다. &quot;TWO_SIDED_LONG_EDGE&quot; 양면 인쇄가 사용되어 긴 쪽이 뒤집히도록 지정합니다.
- Chrome 확장 프로그램
Capabilities 및 ChromeOptions
기능은 ChromeDriver 세션을 맞춤설정하고 구성하는 데 사용할 수 있는 옵션입니다.
초기 미리보기에 언어 감지 API 사용 가능
이제 EPP 참여자는 Chrome에서 언어 감지 API로 프로토타입을 만들 수 있습니다.
- Chrome
Lighthouse: 웹사이트 속도 최적화
Chrome Lighthouse로 웹사이트를 더 빠르게 로드해 보세요.
- Chrome DevTools
chrome.webRequest
chrome.webRequest API를 사용하여 트래픽을 관찰 및 분석하고 진행 중인 요청을 가로채거나 차단하거나 수정하세요. 웹 요청을 사용하려면 확장 프로그램 매니페스트 에서 "webRequest" 권한을 선언해야 합니다. API와 필요한 호스트 권한 이 함께 있어야 합니다. 하위 리소스 요청을 가로채기 위해 확장 프로그램은 요청된 URL과 개시자 모두에 액세스할 수 있어야 합니다. 예를 들면 다음과 같습니다.
- Chrome 확장 프로그램
chrome.sidePanel
chrome.sidePanel API를 사용하여 브라우저의 측면 패널에 웹페이지의 기본 콘텐츠와 함께 콘텐츠를 호스팅합니다. Side Panel API를 사용하려면 확장 프로그램 매니페스트 파일에 "sidePanel" 권한을 추가합니다. manifest.json: Side Panel API를 사용하면 확장 프로그램이 측면 패널에 자체 UI를 표시하여 사용자의 탐색 여정을 보완하는 지속적인 환경을 지원할 수 있습니다. 일부 기능은 다음과
- Chrome 확장 프로그램
chrome.omnibox
검색주소창 API를 사용하면 Chrome 주소 표시줄(검색주소창이라고도 함)에 키워드를 등록할 수 있습니다. 사용자가 확장 프로그램의 키워드를 입력하면 사용자는 확장자가 포함됩니다. 각 키 입력은 확장 프로그램으로 전송되며, 이에 대한 응답으로 추천 항목을 제공할 수 있습니다. 추천은 다양한 방식으로 다채로운 형식을 지정할 수 있습니다. 사용자가 추천을 수락하면 확장 프로그램에 알림이 전송되고 조치를 취할 수 있습니다. 검색주소창 API를
- Chrome 확장 프로그램
chrome.pageAction
chrome.pageAction API를 사용하여 주소 표시줄 오른쪽에 있는 기본 Chrome 툴바에 아이콘을 추가합니다. 페이지 작업은 현재 페이지에서 수행할 수 있지만 모든 페이지에 적용되는 것은 아닌 작업을 나타냅니다. 비활성 상태에서 페이지 작업이 회색으로 표시됩니다. 예를 들면 다음과 같습니다. 다음 스크린샷의 RSS 아이콘은 RSS를 구독할 수 있는 페이지 작업을 나타냅니다. 피드할 수 있습니다. 숨겨진 페이지 작업은 회색으로
- Chrome 확장 프로그램
chrome.windows
chrome.windows API를 사용하여 브라우저 창과 상호작용합니다. 이 API를 사용하여 브라우저에서 창을 만들고 수정하고 재정렬할 수 있습니다. 요청 시 windows.Window 에는 tabs.Tab 객체의 배열이 포함됩니다. 다음을 수행해야 합니다. url 에 액세스해야 하는 경우 매니페스트 에서 "tabs" 권한을 선언합니다. tabs.Tab 의 pendingUrl, title 또는 favIconUrl 속성. 예를 들면 다음과
- Chrome 확장 프로그램
chrome.i18n
chrome.i18n 인프라를 사용하여 전체 앱 또는 확장 프로그램에 국제화를 구현합니다. 사용자에게 표시되는 모든 문자열을 messages.json 파일에 넣어야 합니다. 매번 새 언어를 추가하려면 _locales/_localeCode_ 라는 디렉터리에 메시지 파일을 추가합니다. 여기서 localeCode 는 영어의 경우 en 와 같은 코드입니다. 영어 ( en ), 스페인어를 지원하는 다국어 확장 프로그램의 파일 계층 구조는 다음과
- Chrome 확장 프로그램
chrome.browserAction
브라우저 작업을 사용하여 주소 표시줄 오른쪽에 있는 기본 Chrome 툴바에 아이콘을 추가합니다. 브라우저 작업에는 아이콘 외에도 도움말, 배지, 팝업 이 포함될 수 있습니다. 다음 그림에서 주소 표시줄 오른쪽의 여러 색상의 정사각형은 표시됩니다. 아이콘 아래에 팝업이 표시됩니다. 항상 활성 상태가 아닌 아이콘을 만들려면 브라우저 대신 페이지 작업 을 사용하세요. 있습니다. 다음과 같이 확장 프로그램 매니페스트 에 브라우저 작업을 등록합니다.
- Chrome 확장 프로그램
chrome.webRequest
chrome.webRequest API를 사용하여 트래픽을 관찰 및 분석하고 진행 중인 요청을 가로채거나 차단하거나 수정하세요. 웹 요청을 사용하려면 확장 프로그램 매니페스트 에서 "webRequest" 권한을 선언해야 합니다. API와 필요한 호스트 권한 이 함께 있어야 합니다. 하위 리소스 요청을 가로채기 위해 확장 프로그램은 요청된 URL과 개시자 모두에 액세스할 수 있어야 합니다. 예를 들면 다음과 같습니다. Chrome 108부터
- Chrome 확장 프로그램
chrome.fileBrowserHandler
chrome.fileBrowserHandler API를 사용하여 ChromeOS 파일 브라우저를 확장합니다. 예를 들어 이 API를 사용하여 사용자가 웹사이트에 파일을 업로드하도록 할 수 있습니다. 사용자가 Alt+Shift+M을 누르거나 SD 카드, USB 키, 외장 드라이브 또는 디지털 카메라와 같은 외부 저장소 기기를 연결하면 ChromeOS 파일 브라우저가 표시됩니다. 파일 브라우저는 외부 기기에 있는 파일을 표시하는 것 외에도 사용자가
- Chrome 확장 프로그램
chrome.devtools.panels
chrome.devtools.panels API를 사용하여 확장 프로그램을 개발자 도구 창 UI에 통합하세요. 자체 패널을 만들고 기존 패널에 액세스하고 사이드바를 추가할 수 있습니다. 이 API를 사용하려면 매니페스트 에서 다음 키를 선언해야 합니다. Developer Tools API 사용에 관한 일반적인 소개는 DevTools API 요약 을 참조하세요. 각 확장 프로그램 패널과 사이드바는 별도의 HTML 페이지로 표시됩니다. 모든 확장
- Chrome 확장 프로그램
매니페스트 파일 형식
모든 앱에는 manifest.json 이라는 JSON 형식의 매니페스트 파일이 있으며 확인할 수 있습니다 다음 코드는 앱에 대해 지원되는 매니페스트 필드와 각 필드에 관해 설명합니다.
chrome.system.cpu
system.cpu API를 사용하여 CPU 메타데이터를 쿼리합니다. 문자열 프로세서의 아키텍처 이름입니다. 문자열[] 프로세서의 기능 일부를 나타내는 기능 코드 집합입니다. 현재 지원되는 코드는 'mmx', 'sse', 'sse2', 'sse3', 'ssse3', 'sse4_1', 'sse4_2', 'avx'입니다. 문자열 프로세서의 모델 이름입니다. 숫자 논리 프로세서 수입니다. ProcessorInfo [] 각 논리 프로세서에 관한
- Chrome 확장 프로그램
chrome.enterprise.networkingAttributes
chrome.enterprise.networkingAttributes API를 사용하여 현재 네트워크에 관한 정보를 읽습니다. 참고: 이 API는 기업 정책으로 강제 설치된 확장 프로그램에서만 사용할 수 있습니다. 문자열( 선택사항 ) 기기의 로컬 IPv4 주소입니다 (구성되지 않은 경우 정의되지 않음). 문자열( 선택사항 ) 기기의 로컬 IPv6 주소입니다 (구성되지 않은 경우 정의되지 않음). 문자열 기기의 MAC 주소입니다. 기기 기본
- Chrome 확장 프로그램
chrome.gcm
chrome.gcm 를 사용하여 앱 및 확장 프로그램이 Firebase 클라우드 메시징 (FCM)을 통해 메시지를 주고받도록 사용 설정합니다. 메시지에 포함된 모든 키-값 쌍의 최대 크기 (바이트)입니다. 4096 FCM에 애플리케이션을 등록합니다. 등록 ID는 callback 에서 반환됩니다. register 가 동일한 senderIds 목록으로 다시 호출되면 동일한 등록 ID가 반환됩니다. 문자열[] 애플리케이션에 메시지를 보낼 수 있는
- Chrome 확장 프로그램
chrome.wallpaper
chrome.wallpaper API를 사용하여 ChromeOS 배경화면을 변경합니다. '배경화면'을 선언해야 합니다. 앱의 매니페스트 에서 사용할 권한 사용할 수 있습니다. 예를 들면 다음과 같습니다. 예를 들어 배경화면 이미지를 https://example.com/a_file.png 님, chrome.wallpaper.setWallpaper 님에게 전화를 걸 수 있습니다 다음과 같습니다. 지원되는 배경화면 레이아웃 "늘리기" 'CENTER'
- Chrome 확장 프로그램
chrome.platformKeys
chrome.platformKeys API를 사용하여 플랫폼에서 관리하는 클라이언트 인증서에 액세스합니다. 사용자 또는 정책이 권한을 부여하면 확장 프로그램이 맞춤 인증 프로토콜에서 이러한 인증서를 사용할 수 있습니다. 예: 이렇게 하면 서드 파티 VPN에서 플랫폼 관리 인증서를 사용할 수 있습니다 ( chrome.vpnProvider 참고). ArrayBuffer[] 서버에서 허용하는 인증 기관의 고유 이름 목록입니다. 각 항목은 DER로
- Chrome 확장 프로그램
chrome.input.ime
chrome.input.ime API를 사용하여 Chrome OS용 맞춤 IME를 구현합니다. 이렇게 하면 확장 프로그램에서 키 입력을 처리하고, 구성을 설정하며, 후보 창을 관리할 수 있습니다. 'input' 라벨을 선언해야 함 input.ime API를 사용할 수 있는 확장 프로그램 매니페스트 의 권한이 필요합니다. 예를 들면 다음과 같습니다. 다음 코드는 입력된 문자를 대문자로 변환하는 IME를 만듭니다. 보조 창의 버튼 ID입니다.
- Chrome 확장 프로그램
chrome.instanceID
chrome.instanceID 를 사용하여 인스턴스 ID 서비스에 액세스합니다. 앱 인스턴스 식별자를 재설정하고 연결된 모든 토큰을 취소합니다. 함수 선택사항 callback 매개변수는 다음과 같습니다. 프로미스<void> 프로미스는 Manifest V3 이상에서만 지원되며 다른 플랫폼에서는 콜백을 사용해야 합니다. 부여된 토큰을 취소합니다. 객체 deleteToken의 매개변수입니다. 문자열 토큰을 얻는 데 사용되는 승인된
- Chrome 확장 프로그램
chrome.loginState
chrome.loginState API를 사용하여 로그인 상태를 읽고 모니터링합니다. "SIGNIN_PROFILE" 확장 프로그램이 로그인 프로필에 있음을 지정합니다. "USER_PROFILE" 확장 프로그램이 사용자 프로필에 있음을 지정합니다. "UNKNOWN" 세션 상태를 알 수 없음을 지정합니다. "IN_OOBE_SCREEN" 사용자가 최초 사용 환경 화면에 있음을 지정합니다. "IN_LOGIN_SCREEN" 사용자가 로그인 화면에 있는지
- Chrome 확장 프로그램
chrome.printingMetrics
chrome.printingMetrics API를 사용하여 인쇄 사용에 관한 데이터를 가져옵니다. "BLACK_AND_WHITE" 흑백 모드가 사용되었음을 명시합니다. "COLOR" 색상 모드가 사용되었는지 지정합니다. "ONE_SIDED" 단면 인쇄가 사용되었음을 명시합니다. &quot;TWO_SIDED_LONG_EDGE&quot; 양면 인쇄가 사용되어 긴 쪽이 뒤집히도록 지정합니다.
- Chrome 확장 프로그램
chrome.history
chrome.history API를 사용하여 브라우저의 방문 페이지 기록과 상호작용합니다. 브라우저 방문 기록에서 URL을 추가, 삭제, 쿼리할 수 있습니다. 자체 버전으로 방문 기록 페이지를 재정의하려면 페이지 재정의 를 참조하세요. '기록'을 선언해야 합니다. 기록 API를 사용할 수 있는 확장 프로그램 매니페스트 의 권한을 요청합니다. 예를 들면 다음과 같습니다. History API는 전환 유형 을 사용하여 브라우저가 특정 URL로
- Chrome 확장 프로그램
chrome.devtools.inspectedWindow
chrome.devtools.inspectedWindow API를 사용하여 검사된 창과 상호작용합니다. 검사된 페이지의 탭 ID를 가져오거나 검사된 창의 컨텍스트에서 코드를 평가하거나 페이지를 새로고침하거나 페이지 내의 리소스 목록을 가져옵니다. 이 API를 사용하려면 매니페스트 에서 다음 키를 선언해야 합니다. chrome.devtools.inspectedWindow 를 사용하여 검사된 창과 상호작용: 다음의 탭 ID를 가져옵니다. 검사된
- Chrome 확장 프로그램
chrome.sessions
탐색 세션에서 탭과 창을 쿼리하고 복원하려면 chrome.sessions API를 사용합니다. 문자열 외부 기기의 이름입니다. 세션 [] 외부 기기의 열린 창 세션 목록으로, 최근 수정된 세션부터 가장 오래된 세션 순으로 정렬됩니다. 숫자 선택사항 요청된 목록에서 가져올 최대 항목 수입니다. 최대 항목 수 ( sessions.MAX_SESSION_RESULTS )를 가져오려면 이 매개변수를 생략합니다. 숫자 창 또는 탭이 닫히거나 수정된
- Chrome 확장 프로그램
chrome.processes
chrome.processes API를 사용하여 브라우저의 프로세스와 상호작용합니다. 숫자 캐시에서 사용되는 부분(바이트)입니다. 숫자 캐시 크기(바이트) 숫자 선택사항 프로세스의 CPU 사용량에 대한 가장 최근 측정값으로, 프로세스의 모든 스레드별로 사용된 단일 CPU 코어의 백분율로 표시됩니다. 그러면 0부터 CpuInfo.numOfProcessors*100까지의 값이 제공되며, 다중 스레드 프로세스에서 100% 를 초과할 수 있습니다.
- Chrome 확장 프로그램
chrome.dom
chrome.dom API를 사용하여 확장 프로그램용 특수 DOM API에 액세스 지정된 요소에서 호스팅하는 열린 섀도우 루트 또는 폐쇄형 섀도우 루트를 가져옵니다. 요소가 섀도우 루트를 연결하지 않으면 null을 반환합니다. HTMLElement 객체 https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot 를 참조하세요.
- Chrome 확장 프로그램
chrome.tts
chrome.tts API를 사용하여 합성된 TTS (텍스트 음성 변환)를 재생합니다. 확장 프로그램이 음성 엔진을 구현할 수 있도록 하는 관련 ttsEngine API도 참고하세요. Chrome은 Windows (SAPI 5 사용), Mac OS X 및 ChromeOS에서 기본 음성 지원을 제공하며 음성 합성 기능을 지원합니다. 모든 플랫폼에서 사용자는 대체 음성 엔진으로 등록하는 확장 프로그램을 설치합니다. 확장 프로그램에서 speak()
- Chrome 확장 프로그램
chrome.identity
chrome.identity API를 사용하여 OAuth2 액세스 토큰을 가져옵니다. 문자열 계정의 고유 식별자입니다. 이 ID는 계정을 유지하는 동안 변경되지 않습니다. "SYNC" 기본 계정에 동기화가 사용 설정되어 있음을 지정합니다. 'ANY' 기본 계정이 있음을 명시합니다(있는 경우). string[] 선택사항 확장 프로그램에 부여된 OAuth2 범위 목록입니다. 문자열( 선택사항 ) 요청과 연결된 특정 토큰입니다. 문자열 캐시에서
- Chrome 확장 프로그램
chrome.enterprise.hardwarePlatform
chrome.enterprise.hardwarePlatform API를 사용하여 브라우저가 실행되는 하드웨어 플랫폼의 제조업체와 모델을 가져옵니다. 참고: 이 API는 기업 정책으로 설치된 확장 프로그램에서만 사용할 수 있습니다. 문자열 문자열 하드웨어 플랫폼의 제조업체와 모델을 가져오고 확장 프로그램이 승인된 경우 callback 를 통해 반환합니다. 함수 선택사항 callback 매개변수는 다음과 같습니다.
- Chrome 확장 프로그램
chrome.devtools.recorder
chrome.devtools.recorder API를 사용하여 DevTools에서 Recorder 패널을 맞춤설정합니다. Developer Tools API 사용에 관한 일반적인 소개는 DevTools API 요약 을 참조하세요. devtools.recorder API는 Chrome DevTools에서 Recorder 패널 을 확장할 수 있는 미리보기 기능입니다. Chrome M105부터 내보내기 기능을 확장할 수 있습니다. Chrome
- Chrome 확장 프로그램
chrome.tabCapture
chrome.tabCapture API를 사용하여 탭 미디어 스트림과 상호작용합니다. chrome.tabCapture API를 사용하여 동영상 및 MediaStream 현재 탭의 오디오입니다. 다음과 같이 사용자가 확장 프로그램을 호출한 후에만 호출할 수 있습니다. 확장 프로그램의 작업 버튼 클릭 이는 Kubernetes의 activeTab 권한을 사용하여 객체를 변경할 수도 있습니다. 탭의 MediaStream 이 획득되면 해당 탭의 오디오가
- Chrome 확장 프로그램
chrome.webNavigation
chrome.webNavigation API를 사용하여 진행 중인 내비게이션 요청의 상태에 관한 알림을 수신합니다. 모든 chrome.webNavigation 메서드와 이벤트를 사용하려면 'webNavigation'을 선언해야 합니다. 권한 확장 프로그램 매니페스트 에서 확인할 수 있습니다. 예를 들면 다음과 같습니다. 탐색이 성공적으로 완료되면 이벤트가 다음 순서로 실행됩니다. 프로세스 중에 발생하는 모든 오류로 인해
- Chrome 확장 프로그램
chrome.topSites
chrome.topSites API를 사용하여 새 탭 페이지에 표시되는 인기 사이트 (예: 가장 많이 방문한 사이트)에 액세스합니다. 사용자가 맞춤설정한 단축키는 포함되지 않습니다. 'topSites'를 선언해야 합니다 이 API를 사용하려면 확장 프로그램의 매니페스트 에 권한을 부여해야 합니다. 이 API를 사용하려면 chrome-extension-samples 에서 topSites API 예시 를 설치하세요. 저장소 자주 방문한 URL을
- Chrome 확장 프로그램
chrome.management
chrome.management API는 설치된 앱과 확장 프로그램을 관리하는 방법을 제공합니다. '관리' 관리를 사용하기 위한 확장 프로그램 매니페스트 의 권한 API에 액세스할 수 있습니다. 예를 들면 다음과 같습니다. management.getPermissionWarningsByManifest, management.uninstallSelf, management.getSelf 에는 관리 권한이 필요하지 않습니다. 항목이 사용 중지된
- Chrome 확장 프로그램
chrome.idle
chrome.idle API를 사용하여 머신의 유휴 상태가 변경되는 시점을 감지합니다. '유휴'를 선언해야 합니다. 권한을 부여해야 유휴 API를 사용할 수 있습니다. 예를 들면 다음과 같습니다. "활성" '자리 비움' "잠김" 유휴 상태에서 화면이 자동으로 잠길 때까지 걸리는 시간(초)을 가져옵니다. 화면이 자동으로 잠기지 않는 경우 지속 시간이 0을 반환합니다. 현재 ChromeOS에서만 지원됩니다. 함수 선택사항 callback 매개변수는
- Chrome 확장 프로그램
chrome.search
chrome.search API를 사용하여 기본 제공자를 통해 검색합니다. "CURRENT_TAB" 검색 결과가 활성 브라우저의 통화 탭 또는 탭에 표시되도록 지정합니다. "NEW_TAB" 검색 결과가 새 탭에 표시되도록 지정합니다. "NEW_WINDOW" 검색 결과가 새 창에 표시되도록 지정합니다. 처리 선택사항 검색 결과가 표시되어야 하는 위치입니다. 기본값은 CURRENT_TAB 입니다. 숫자 선택사항 검색 결과가 표시되어야 하는
- Chrome 확장 프로그램
chrome.types
chrome.types API에는 Chrome용 유형 선언이 포함되어 있습니다. ChromeSetting 프로토타입은 일반적인 함수 세트 ( get(), set(), clear() )를 제공합니다. Chrome 브라우저 설정을 위한 이벤트 게시자 ( onChange )가 있어야 합니다. 프록시 설정 예 는 이러한 함수의 용도를 보여줍니다. Chrome에서는 세 가지 다른 브라우저 설정 범위를 구분합니다. Chrome은 여러 레이어의 설정을
- Chrome 확장 프로그램
chrome.printerProvider
chrome.printerProvider API는 인쇄 관리자에서 사용되는 이벤트를 노출하여 확장 프로그램으로 제어되는 프린터를 쿼리하고 기능을 쿼리하며 이러한 프린터에 인쇄 작업을 제출합니다. 문자열( 선택사항 ) 프린터의 사람이 읽을 수 있는 설명입니다. 문자열 고유한 프린터 ID입니다. 문자열 사람이 읽을 수 있는 프린터의 이름입니다. onPrintRequested 이벤트에 대한 응답으로 반환되는 오류 코드입니다. "OK" 작업이
- Chrome 확장 프로그램
chrome.enterprise.deviceAttributes
chrome.enterprise.deviceAttributes API를 사용하여 기기 속성을 읽습니다. 참고: 이 API는 기업 정책으로 강제 설치된 확장 프로그램에서만 사용할 수 있습니다. 관리자가 주석 처리한 위치를 가져옵니다. 현재 사용자가 제휴되어 있지 않거나 관리자가 주석 처리한 위치를 설정하지 않은 경우 빈 문자열이 반환됩니다. 함수 선택사항 callback 매개변수는 다음과 같습니다. 문자열 프로미스<string>
- Chrome 확장 프로그램
chrome.windows
chrome.windows API를 사용하여 브라우저 창과 상호작용합니다. 이 API를 사용하여 브라우저에서 창을 만들고 수정하고 재정렬할 수 있습니다. 요청 시 windows.Window 에는 tabs.Tab 객체의 배열이 포함됩니다. 다음을 수행해야 합니다. url 에 액세스해야 하는 경우 매니페스트 에서 "tabs" 권한을 선언합니다. tabs.Tab 의 pendingUrl, title 또는 favIconUrl 속성. 예를 들면 다음과
- Chrome 확장 프로그램
chrome.power
chrome.power API를 사용하여 시스템의 전원 관리 기능을 재정의합니다. 기본적으로 운영체제에서는 사용자가 비활성 상태일 때 화면을 어둡게 하고 결국에는 사용자가 있습니다. Power API를 사용하면 앱 또는 확장 프로그램이 시스템을 켜진 상태로 유지할 수 있습니다. 이 API를 사용하여 전원 관리가 사용 중지되는 Level 을 지정할 수 있습니다. "system" 수준은 시스템은 활성 상태로 유지되지만 화면을 어둡게 하거나 끌 수
- Chrome 확장 프로그램
chrome.systemLog
chrome.systemLog API를 사용하여 확장 프로그램에서 Chrome 시스템 로그를 기록합니다. 문자열 새 로그 레코드를 추가합니다. MessageOptions 로깅 옵션입니다. 함수 선택사항 callback 매개변수는 다음과 같습니다. 프로미스<void> 프로미스는 Manifest V3 이상에서만 지원되며 다른 플랫폼에서는 콜백을 사용해야 합니다.
- Chrome 확장 프로그램
chrome.pageCapture
탭을 MHTML로 저장하려면 chrome.pageCapture API를 사용합니다. MHTML은 대부분의 브라우저가 지원하는 표준 형식 입니다. 단일 파일로 캡슐화되어 모든 리소스 (CSS 파일, 이미지 등)가 포함되어 있습니다. 보안상의 이유로 MHTML 파일은 파일 시스템에서만 로드할 수 있으며 메인 프레임에서만 로드됩니다. 'pageCapture'를 선언해야 합니다. pageCapture를 사용할 수 있는 확장 프로그램 매니페스트 의
- Chrome 확장 프로그램
chrome.privacy
chrome.privacy API를 사용하여 Chrome에서 사용자 개인 정보 보호에 영향을 줄 수 있는 기능의 사용을 제어합니다. 이 API는 Chrome의 구성을 가져오고 설정하기 위해 API 유형의 ChromeSetting 프로토타입 을 사용합니다. 'privacy(개인 정보 보호)'를 선언해야 합니다. 매니페스트 에 권한을 부여해야 API를 사용할 수 있습니다. 예를 들면 다음과 같습니다. Chrome 설정의 현재 값을 읽는 방법은
- Chrome 확장 프로그램
chrome.fileSystemProvider
chrome.fileSystemProvider API를 사용하여 ChromeOS의 파일 관리자에서 액세스할 수 있는 파일 시스템을 만듭니다. 'fileSystemProvider'는 권한 및 섹션이 있어야 합니다. 예를 들면 다음과 같습니다. file_system_provider 섹션은 다음과 같이 선언해야 합니다. Files 앱은 관련 UI 요소를 적절하게 렌더링하기 위해 위의 정보를 사용합니다. 예를 들어 configurable 를 true로
- Chrome 확장 프로그램
chrome.notifications
chrome.notifications API에서 템플릿을 사용하여 리치 알림을 만들고 작업 표시줄에서 사용자에게 이러한 알림을 표시합니다. 문자열( 선택사항 ) Mac OS X 사용자에게 버튼 아이콘이 표시되지 않습니다. 문자열 문자열 이 항목에 대한 추가 세부정보입니다. 문자열 목록 알림의 한 항목의 제목입니다. 문자열( 선택사항 ) 앱 아이콘 마스크는 Mac OS X 사용자에게 표시되지 않습니다. 앱 아이콘 마스크의 URL입니다. URL에는
- Chrome 확장 프로그램
chrome.devtools.network
chrome.devtools.network API를 사용하여 Network 패널의 개발자 도구에서 표시한 네트워크 요청에 관한 정보를 검색합니다. 이 API를 사용하려면 매니페스트 에서 다음 키를 선언해야 합니다. Developer Tools API 사용에 관한 일반적인 소개는 DevTools API 요약 을 참조하세요. 네트워크 요청 정보는 HTTP 보관 형식 ( HAR )으로 표시됩니다. 다음에 대한 설명: HAR은 이 문서의 범위에
- Chrome 확장 프로그램
chrome.fontSettings
chrome.fontSettings API를 사용하여 Chrome의 글꼴 설정을 관리합니다. Font Settings API를 사용하려면 'fontSettings' 확장 프로그램의 권한 매니페스트 를 참조하세요. 예를 들면 다음과 같습니다. Chrome에서 일부 글꼴 설정이 특정 일반 글꼴 모음 및 언어에 종속되도록 허용 사용할 수 있습니다 예를 들어 Sans Serif 중국어 간체에 사용된 글꼴은 Serif 일본어에 사용됩니다.
- Chrome 확장 프로그램
chrome.downloads
이 권한은 경고를 트리거 합니다. chrome.downloads API를 사용하여 프로그래매틱 방식으로 다운로드를 시작, 모니터링, 조작, 검색합니다. 이 API를 사용하려면 확장 프로그램 매니페스트 에서 "downloads" 권한을 선언해야 합니다. examples/api/downloads 에서 chrome.downloads API를 사용하는 간단한 예를 확인할 수 있습니다. 디렉터리 다른 예와 소스 코드를 보는 데 도움이 필요하면 샘플 을
- Chrome 확장 프로그램
chrome.vpnProvider
chrome.vpnProvider API를 사용하여 VPN 클라이언트를 구현합니다. vpnProvider의 일반적인 사용법은 다음과 같습니다. createConfig 메서드를 사용하여 VPN 구성을 만듭니다. VPN 구성은 기본 ChromeOS UI에서 사용자에게 표시되는 영구 항목입니다. 사용자는 목록에서 VPN 구성을 선택하고 이에 연결하거나 연결을 해제할 수 있습니다. onPlatformMessage, onPacketReceived,
- Chrome 확장 프로그램
chrome.proxy
chrome.proxy API를 사용하여 Chrome의 프록시 설정을 관리하세요. 이 API는 프록시 구성을 가져오고 설정하기 위해 API 유형의 ChromeSetting 프로토타입 을 사용합니다. 'proxy'를 선언해야 합니다. 프록시 설정을 사용하기 위한 확장 프로그램 매니페스트 의 권한 API에 액세스할 수 있습니다. 예를 들면 다음과 같습니다. 프록시 설정은 proxy.ProxyConfig 객체에 정의됩니다. Chrome의 프록시
- Chrome 확장 프로그램
chrome.events
chrome.events 네임스페이스에는 API에서 흥미로운 상황이 발생할 때 알려주기 위해 이벤트를 전달하는 데 사용되는 공통 유형이 포함되어 있습니다. Event 는 흥미로운 상황이 발생할 때 알림을 받을 수 있는 객체입니다. 다음은 다음은 알람이 경과할 때마다 알림을 받도록 chrome.alarms.onAlarm 이벤트를 사용하는 예입니다. 이 예에서 볼 수 있듯이 addListener() 를 사용하여 알림을 등록합니다. 인수
- Chrome 확장 프로그램
chrome.events
chrome.events 네임스페이스에는 API에서 흥미로운 상황이 발생할 때 알려주기 위해 이벤트를 전달하는 데 사용되는 공통 유형이 포함되어 있습니다. Event 는 흥미로운 상황이 발생할 때 알림을 받을 수 있는 객체입니다. 다음은 다음은 알람이 경과할 때마다 알림을 받도록 chrome.alarms.onAlarm 이벤트를 사용하는 예입니다. 이 예에서 볼 수 있듯이 addListener() 를 사용하여 알림을 등록합니다. 인수
- Chrome 확장 프로그램
chrome.idle
chrome.idle API를 사용하여 머신의 유휴 상태가 변경되는 시점을 감지합니다. 유휴 API를 사용하려면 확장 프로그램의 매니페스트에서 "idle" 권한을 선언해야 합니다. 예를 들면 다음과 같습니다. "활성" '자리 비움' "잠김" 유휴 상태에서 화면이 자동으로 잠길 때까지 걸리는 시간(초)을 가져옵니다. 화면이 자동으로 잠기지 않는 경우 지속 시간이 0을 반환합니다. 현재 ChromeOS에서만 지원됩니다. 함수 선택사항
- Chrome 확장 프로그램
chrome.offscreen
offscreen API를 사용하여 오프스크린 문서를 만들고 관리합니다. Offscreen API를 사용하려면 확장 프로그램 매니페스트 에서 "offscreen" 권한을 선언합니다. 예를 들면 다음과 같습니다. 서비스 워커에는 DOM 액세스 권한이 없으며, 많은 웹사이트에는 콘텐츠 스크립트의 기능을 제한할 수 있습니다. Offscreen API를 사용하면 확장 프로그램에서 DOM을 사용할 수 있습니다. 새 창을 열거나 새 창을 열어 사용자
- Chrome 확장 프로그램
chrome.pageCapture
탭을 MHTML로 저장하려면 chrome.pageCapture API를 사용합니다. MHTML은 대부분의 브라우저가 지원하는 표준 형식 입니다. 단일 파일로 캡슐화되어 모든 리소스 (CSS 파일, 이미지 등)가 포함되어 있습니다. 보안상의 이유로 MHTML 파일은 파일 시스템에서만 로드할 수 있으며 메인 프레임에서만 로드됩니다. 'pageCapture'를 선언해야 합니다. pageCapture를 사용할 수 있는 확장 프로그램 매니페스트 의
- Chrome 확장 프로그램
chrome.fileSystemProvider
chrome.fileSystemProvider API를 사용하여 ChromeOS의 파일 관리자에서 액세스할 수 있는 파일 시스템을 만듭니다. 'fileSystemProvider'는 권한 및 섹션이 있어야 합니다. 예를 들면 다음과 같습니다. file_system_provider 섹션은 다음과 같이 선언해야 합니다. Files 앱은 관련 UI 요소를 적절하게 렌더링하기 위해 위의 정보를 사용합니다. 예를 들어 configurable 를 true로
- Chrome 확장 프로그램
chrome.dom
chrome.dom API를 사용하여 확장 프로그램용 특수 DOM API에 액세스 지정된 요소에서 호스팅하는 열린 섀도우 루트 또는 폐쇄형 섀도우 루트를 가져옵니다. 요소가 섀도우 루트를 연결하지 않으면 null을 반환합니다. HTMLElement 객체 https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot 를 참조하세요.
- Chrome 확장 프로그램
chrome.management
chrome.management API는 설치된 앱과 확장 프로그램을 관리하는 방법을 제공합니다. '관리' 관리를 사용하기 위한 확장 프로그램 매니페스트 의 권한 API에 액세스할 수 있습니다. 예를 들면 다음과 같습니다. management.getPermissionWarningsByManifest(), management.uninstallSelf(), management.getSelf() 에는 관리 권한이 필요하지 않습니다. 항목이 사용
- Chrome 확장 프로그램
chrome.omnibox
검색주소창 API를 사용하면 Chrome 주소 표시줄(검색주소창이라고도 함)에 키워드를 등록할 수 있습니다. 사용자가 확장 프로그램의 키워드를 입력하면 사용자는 확장자가 포함됩니다. 각 키 입력은 확장 프로그램으로 전송되며, 이에 대한 응답으로 추천 항목을 제공할 수 있습니다. 추천은 다양한 방식으로 다채로운 형식을 지정할 수 있습니다. 사용자가 추천을 수락하면 확장 프로그램에 알림이 전송되고 조치를 취할 수 있습니다. 이 API를 사용하려면
- Chrome 확장 프로그램
chrome.debugger
chrome.debugger API는 Chrome 원격 디버깅 프로토콜 의 대체 전송 역할을 합니다. chrome.debugger 를 사용하여 하나 이상의 탭에 연결하여 네트워크 상호작용을 계측하고 JavaScript를 디버그하고 DOM 및 CSS를 변경하는 등의 작업을 실행합니다. Debuggee 속성 tabId 를 사용하여 sendCommand 가 있는 탭을 타겟팅하고 onEvent 콜백에서 tabId 로 이벤트를 라우팅합니다. 이 API를
- Chrome 확장 프로그램
chrome.downloads
chrome.downloads API를 사용하여 프로그래매틱 방식으로 다운로드를 시작, 모니터링, 조작, 검색합니다. 이 API를 사용하려면 확장 프로그램 매니페스트 에서 "downloads" 권한을 선언해야 합니다. examples/api/downloads 에서 chrome.downloads API를 사용하는 간단한 예를 확인할 수 있습니다. 를 참조하세요. 다른 예와 소스 코드를 보는 데 도움이 필요하면 샘플 을 참조하세요. 불리언 선택사항
- Chrome 확장 프로그램
chrome.history
chrome.history API를 사용하여 브라우저의 방문 페이지 기록과 상호작용합니다. 브라우저 방문 기록에서 URL을 추가, 삭제, 쿼리할 수 있습니다. 자체 버전으로 방문 기록 페이지를 재정의하려면 페이지 재정의 를 참조하세요. 사용자의 브라우저 기록과 상호작용하려면 History API를 사용하세요. History API를 사용하려면 확장 프로그램 매니페스트 에서 "history" 권한을 선언합니다. 예를 들면 다음과 같습니다.
- Chrome 확장 프로그램
chrome.notifications
chrome.notifications API에서 템플릿을 사용하여 리치 알림을 만들고 작업 표시줄에서 사용자에게 이러한 알림을 표시합니다. 문자열( 선택사항 ) Mac OS X 사용자에게 버튼 아이콘이 표시되지 않습니다. 문자열 문자열 이 항목에 대한 추가 세부정보입니다. 문자열 목록 알림의 한 항목의 제목입니다. 문자열( 선택사항 ) 앱 아이콘 마스크는 Mac OS X 사용자에게 표시되지 않습니다. 앱 아이콘 마스크의 URL입니다. URL에는
- Chrome 확장 프로그램
chrome.gcm
chrome.gcm 를 사용하여 앱 및 확장 프로그램이 Firebase 클라우드 메시징 (FCM)을 통해 메시지를 주고받도록 사용 설정합니다. 메시지에 포함된 모든 키-값 쌍의 최대 크기 (바이트)입니다. 4096 FCM에 애플리케이션을 등록합니다. 등록 ID는 callback 에서 반환됩니다. register 가 동일한 senderIds 목록으로 다시 호출되면 동일한 등록 ID가 반환됩니다. 문자열[] 애플리케이션에 메시지를 보낼 수 있는
- Chrome 확장 프로그램
chrome.instanceID
chrome.instanceID 를 사용하여 인스턴스 ID 서비스에 액세스합니다. 앱 인스턴스 식별자를 재설정하고 연결된 모든 토큰을 취소합니다. 함수 선택사항 callback 매개변수는 다음과 같습니다. 프로미스<void> 프로미스는 Manifest V3 이상에서 지원되지만 이전 버전과의 호환성입니다. 같은 함수 호출에서 두 가지를 모두 사용할 수는 없습니다. 이 프로미스는 콜백에 전달된 것과 동일한 유형으로 확인됩니다. 부여된
- Chrome 확장 프로그램
chrome.loginState
chrome.loginState API를 사용하여 로그인 상태를 읽고 모니터링합니다. "SIGNIN_PROFILE" 확장 프로그램이 로그인 프로필에 있음을 지정합니다. "USER_PROFILE" 확장 프로그램이 사용자 프로필에 있음을 지정합니다. "UNKNOWN" 세션 상태를 알 수 없음을 지정합니다. "IN_OOBE_SCREEN" 사용자가 최초 사용 환경 화면에 있음을 지정합니다. "IN_LOGIN_SCREEN" 사용자가 로그인 화면에 있는지
- Chrome 확장 프로그램
chrome.platformKeys
chrome.platformKeys API를 사용하여 플랫폼에서 관리하는 클라이언트 인증서에 액세스합니다. 사용자 또는 정책이 권한을 부여하면 확장 프로그램이 맞춤 인증 프로토콜에서 이러한 인증서를 사용할 수 있습니다. 예: 이렇게 하면 서드 파티 VPN에서 플랫폼 관리 인증서를 사용할 수 있습니다 ( chrome.vpnProvider 참고). ArrayBuffer[] 서버에서 허용하는 인증 기관의 고유 이름 목록입니다. 각 항목은 DER로
- Chrome 확장 프로그램
chrome.identity
chrome.identity API를 사용하여 OAuth2 액세스 토큰을 가져옵니다. 문자열 계정의 고유 식별자입니다. 이 ID는 계정을 유지하는 동안 변경되지 않습니다. "SYNC" 기본 계정에 동기화가 사용 설정되어 있음을 지정합니다. 'ANY' 기본 계정이 있음을 명시합니다(있는 경우). string[] 선택사항 확장 프로그램에 부여된 OAuth2 범위 목록입니다. 문자열( 선택사항 ) 요청과 연결된 특정 토큰입니다. 문자열 캐시에서
- Chrome 확장 프로그램
chrome.sockets.tcp
chrome.sockets.tcp API를 사용하여 TCP 연결을 사용하여 네트워크를 통해 데이터를 주고받습니다. 이 API는 이전에 chrome.socket API에서 찾을 수 있었던 TCP 기능을 대체합니다. 이 API를 사용하려면 매니페스트 에서 다음 키를 선언해야 합니다. 숫자 새로 생성된 소켓의 ID입니다. 이 API에서 만든 소켓 ID는 지원 중단된 [ socket ](../socket/) API와 같이 다른 API에서 만든 소켓
chrome.hid
chrome.hid API를 사용하여 연결된 HID 기기와 상호작용합니다. 이 API는 앱 컨텍스트 내에서 HID 작업에 대한 액세스를 제공합니다. 이 API를 사용하면 앱이 하드웨어 기기용 드라이버로 작동할 수 있습니다. 이 API에서 생성된 오류는 runtime.lastError 를 설정하고 함수의 일반 콜백을 실행하여 보고됩니다. 이 경우 콜백의 일반 매개변수는 정의되지 않습니다. 숫자 선택사항 기기 제품 ID, 공급업체 ID가 일치하는
chrome.sockets.tcpServer
chrome.sockets.tcpServer API를 사용하여 TCP 연결을 사용하는 서버 애플리케이션을 만듭니다. 이 API는 이전에 chrome.socket API에서 찾을 수 있었던 TCP 기능을 대체합니다. 이 API를 사용하려면 매니페스트 에서 다음 키를 선언해야 합니다. 숫자 기본 네트워크 호출에서 반환된 결과 코드입니다. 숫자 서버 소켓 식별자입니다. 숫자 클라이언트 소켓 식별자, 즉 새로 설정한 연결의 소켓 식별자입니다. 이 소켓
chrome.system.network
chrome.system.network API를 사용합니다. 문자열 사용 가능한 IPv4/6 주소입니다. 문자열 어댑터의 기본 이름입니다. *nix에서는 일반적으로 'eth0', 'wlan0' 등입니다. 숫자 프리픽스 길이 이 시스템의 로컬 어댑터 정보를 검색합니다. 함수 선택사항 callback 매개변수는 다음과 같습니다. NetworkInterface [] 네트워크 인터페이스 정보를 포함하는 객체의 배열입니다. Promise&lt;
chrome.app.window
chrome.app.window API를 사용하여 창을 만듭니다. 창에는 제목 표시줄 및 크기 컨트롤이 있는 선택적인 프레임이 있습니다. Chrome 브라우저 창과는 연결되어 있지 않습니다. 이러한 옵션의 데모는 창 상태 샘플 을 참고하세요. 창 JavaScript 'window' 객체를 만듭니다. 문자열 창을 만들 때 사용한 ID입니다. 경계 창 콘텐츠의 위치, 크기, 제약 조건으로, 창 장식은 포함되지 않습니다. 이 속성은 Chrome
chrome.fileSystem
chrome.fileSystem API를 사용하여 사용자의 로컬 파일 시스템을 만들고, 읽고, 탐색하고, 작성합니다. 이 API를 사용하여 Chrome 앱은 사용자가 선택한 위치를 읽고 쓸 수 있습니다. 예를 들어 텍스트 편집기 앱은 API를 사용하여 로컬 문서를 읽고 쓸 수 있습니다. 모든 실패는 chrome.runtime.lastError를 통해 알림을 받습니다. 문자열( 선택사항 ) 이 옵션에 대한 텍스트 설명(선택사항)입니다. 없는 경우
chrome.mediaGalleries
chrome.mediaGalleries API를 사용하여 사용자의 로컬 디스크에 있는 미디어 파일 (오디오, 이미지, 동영상)에 액세스할 수 있습니다 (사용자의 동의 필요). 문자열 부울 문자열 수정된 갤러리를 식별합니다. GalleryChangeType 변경 이벤트의 유형입니다. &quot;contents_changed&quot; 갤러리 콘텐츠가 변경되었습니다. "watch_dropped" 기기가 분리되었거나 갤러리 권한이
로깅
기본적으로 ChromeDriver는 경고/오류만 stderr에 기록합니다. 디버깅 시 더 자세한 로깅을 사용하는 것이 도움이 됩니다. 상세 로깅을 사용 설정하려면 --verbose 을 chromedriver 서버에 전달하면 됩니다. --log-path 를 전달하여 로그가 파일에 기록되도록 할 수도 있습니다. 표준 오류입니다. 직접 chromedriver 서버를 시작하지 않는 경우 WebDriver 클라이언트 라이브러리를 통해 스위치를 전달해야
ChromeDriver 시작하기
이 페이지에서는 Chrome Driver를 사용하여 있습니다 (Windows/Mac/Linux). 다음 내용도 읽어 보세요. Android 시작하기 또는 ChromeOS 시작하기 ChromeDriver는 Selenium WebDriver가 Chrome을 제어하는 데 사용하는 별도의 실행 파일입니다. 이 버전은 WebDriver 참여자의 도움을 받아 Chromium팀에서 관리합니다. Selenium WebDriver에 대해 잘 모르는 경우,
Chrome 확장 프로그램
Chrome 확장 프로그램은 압축하거나 압축해제할 수 있습니다. 압축해제된 확장 프로그램을 압축하려면 chrome://extensions 에서 압축 버튼을 사용하거나 Chrome: "chrome.exe --pack-extension=C:\path\to\unpacked\extension --pack-extension-key=C:\myext.pem" 사용 패킹된 확장 프로그램의 압축을 해제하려면 파일을 추출합니다. 파일 형식을.crx 에서.zip
Chrome 129 베타
현재 베타의 기능을 자세히 설명한 이 게시물에서 다음 Chrome 출시 버전을 미리 확인하세요.
- Chrome
확장성 API를 통한 실적 데이터 맞춤설정
확장성 API를 사용한 성능 데이터 맞춤설정
- Chrome DevTools
chrome.browsingData
chrome.browsingData API를 사용하여 사용자의 로컬 프로필에서 인터넷 사용 기록을 삭제합니다. 이 API를 사용하려면 확장 프로그램 매니페스트 에서 "browsingData" 권한을 선언해야 합니다. 이 API의 가장 간단한 사용 사례는 사용자의 인터넷 사용 기록을 삭제하기 위한 시간 기반 메커니즘입니다. 코드는 사용자의 인터넷 사용 기록을 삭제해야 합니다. 이 타임스탬프는 유닉스 에포크 ( getTime() 메서드를 사용하여
- Chrome 확장 프로그램
chrome.system.memory
chrome.system.memory API 숫자 사용 가능한 용량의 크기(바이트)입니다. 숫자 물리적 메모리 용량의 총량(바이트)입니다. 실제 메모리 정보를 가져옵니다. 함수 선택사항 callback 매개변수는 다음과 같습니다. MemoryInfo Promise&lt; MemoryInfo &gt; 프로미스는 Manifest V3 이상에서만 지원되며 다른 플랫폼에서는 콜백을 사용해야 합니다.
- Chrome 확장 프로그램
chrome.desktopCapture
Desktop Capture API는 화면 콘텐츠, 개별 창 또는 개별 탭을 캡처합니다. ChooseDesktopMedia()에서 사용되는 데스크톱 미디어 소스 집합을 정의하는 데 사용되는 열거형입니다. "화면" "창" "탭" "오디오" SelfCapturePreferenceEnum 을 미러링합니다. "포함" "제외" SystemAudioPreferenceEnum 을 미러링합니다. "포함" "제외" ChooseDesktopMedia()로 표시된
- Chrome 확장 프로그램
chrome.dns
DNS 확인에는 chrome.dns API를 사용합니다. 이 API를 사용하려면 매니페스트 에서 "dns" 권한을 선언해야 합니다. 다음 코드는 resolve() 를 호출하여 example.com 의 IP 주소를 검색합니다. service-worker.js: 문자열( 선택사항 ) IP 주소 리터럴을 나타내는 문자열입니다. resultCode가 성공을 나타내는 경우에만 제공됩니다. 숫자 결과 코드입니다. 0은 성공을 나타냅니다. 지정된 호스트
- Chrome 확장 프로그램
chrome.documentScan
chrome.documentScan API를 사용하여 첨부된 문서 스캐너에서 이미지를 찾고 가져옵니다. Document Scan API는 앱과 확장 프로그램이 문서 콘텐츠를 표시하는 문서입니다. 문자열 cancelScan() 에 전달된 것과 동일한 작업 핸들을 제공합니다. OperationResult 백엔드의 취소 스캔 결과입니다. 결과가 OperationResult.SUCCESS 또는 OperationResult.CANCELLED 이면 스캔이
- Chrome 확장 프로그램
chrome.declarativeWebRequest
참고: 이 API는 지원 중단되었습니다. 대신 declarativeNetRequest API를 확인하세요. chrome.declarativeWebRequest API를 사용하여 진행 중인 요청을 가로채거나 차단하거나 수정합니다. JavaScript 엔진이 아닌 브라우저에서 평가되는 규칙을 등록할 수 있으므로 왕복 지연 시간이 줄어들고 효율성이 높아지므로 chrome.webRequest API 보다 훨씬 빠릅니다.
- Chrome 확장 프로그램
API 참조 문서
Chrome 확장 프로그램에서 사용할 수 있는 모든 API에 대한 전체 참조입니다. 여기에는 아직 베타 및 개발 단계의 API뿐만 아니라 지원 중단된 Chrome 앱 플랫폼용 API가 포함됩니다.
- Chrome 확장 프로그램
Chrome DevTools
Chrome DevTools로 웹 애플리케이션을 디버그하고 최적화하세요.
- Chrome DevTools
Chrome 128의 새로운 기능
Chrome 128이 출시되었습니다. 줄바꿈이 있는 루비 요소의 개선된 디스플레이로 Promise.try는 Promise 체인을 더 쉽게 시작하고 PointerEvent 인터페이스를 확장하여 여러 펜을 고유하게 식별할 수 있으며 그 밖에도 많은 기능이 있습니다. 아드리아나 자라가 개발자를 위한 Chrome 128의 새로운 기능에 관한 모든 세부정보를 제공합니다.
- Chrome
Chromium 접근성 성능 개선
Ahmed Elwasefi가 Google Summer of Code를 통해 Chromium 참여자가 된 과정을 공유하는 게시물입니다.
- Chrome
WebGPU로 앱 빌드
웹 및 특정 플랫폼용 WebGPU로 앱을 빌드하는 방법을 알아봅니다.
WebGPU의 새로운 기능 (Chrome 128)
하위 그룹을 실험하고, 선과 점의 깊이 편향 설정을 지원 중단하고, preventDefault인 경우, 캡처되지 않은 오류 DevTools 경고를 숨기고, WGSL이 샘플링을 먼저 보간하는 등의 작업을 수행합니다.
- Chrome
- WebGpu
미디어: 미디어 플레이어 정보 보기 및 디버그
미디어 패널을 사용하여 브라우저 탭별로 정보를 보고 미디어 플레이어를 디버깅합니다.
- Chrome DevTools
Chrome 128
Chrome 128이 2024년 8월 20일에 출시되기 시작했으며 CSS ruby-align 속성인 Promise.try 외에도 다양한 기능이 있습니다.
- Chrome
File System Observer API 오리진 트라이얼
Chrome팀은 개발자에게 파일 시스템의 변경사항을 알려주는 새로운 File System Observer API를 실험하고 있습니다.
- Chrome
chrome.declarativeNetRequest
chrome.declarativeNetRequest API는 선언적 규칙을 지정하여 네트워크 요청을 차단하거나 수정하는 데 사용합니다. 이를 통해 확장 프로그램이 네트워크 요청을 가로채서 콘텐츠를 보지 않고도 네트워크 요청을 수정할 수 있으므로 개인 정보 보호가 강화됩니다. declarativeNetRequestFeedback host_permissions 위에 설명된 권한 외에도 특정 유형의 규칙 세트(특히 정적 규칙 세트)에서는
- Chrome 확장 프로그램
chrome.contentSettings
chrome.contentSettings API를 사용하여 웹사이트에서 쿠키, JavaScript, 플러그인과 같은 기능을 사용할 수 있는지 여부를 제어하는 설정을 변경하세요. 일반적으로 콘텐츠 설정을 사용하면 Chrome의 동작을 전역이 아닌 사이트별로 맞춤설정할 수 있습니다. 'contentSettings' 권한을 부여해야 API를 사용할 수 있습니다. 예를 들면 다음과 같습니다. 패턴을 사용하여 각 콘텐츠 설정이 영향을 주는 웹사이트를
- Chrome 확장 프로그램
chrome.contextMenus
chrome.contextMenus API를 사용하여 Chrome 컨텍스트 메뉴에 항목을 추가하세요. 이미지, 하이퍼링크, 페이지 등 컨텍스트 메뉴에 추가할 객체의 유형을 선택할 수 있습니다. 컨텍스트 메뉴 항목은 file://이 있는 문서를 포함하여 모든 문서 (또는 문서 내 프레임)에 표시될 수 있습니다. 또는 chrome:// URL로 구성됩니다. 항목을 표시할 수 있는 문서를 제어하려면 create() 또는 update() 메서드를
- Chrome 확장 프로그램
chrome.alarms
chrome.alarms API를 사용하여 코드가 주기적으로 또는 향후 특정 시간에 실행되도록 예약합니다. chrome.alarms API를 사용하려면 매니페스트 에서 "alarms" 권한을 선언합니다. 다음 예는 알람을 사용하고 알람에 응답하는 방법을 보여줍니다. 이 API를 사용해 보려면 chrome-extension-samples 에서 Alarm API 예 설치 저장소 다음 예에서는 확장 프로그램이 설치될 때 서비스 워커에 알람을
- Chrome 확장 프로그램
chrome.debugger
chrome.debugger API는 Chrome 원격 디버깅 프로토콜 의 대체 전송 역할을 합니다. chrome.debugger 를 사용하여 하나 이상의 탭에 연결하여 네트워크 상호작용을 계측하고 JavaScript를 디버그하고 DOM 및 CSS를 변경하는 등의 작업을 실행합니다. Debuggee 속성 tabId 를 사용하여 sendCommand 가 있는 탭을 타겟팅하고 onEvent 콜백에서 tabId 로 이벤트를 라우팅합니다. 보안상의
- Chrome 확장 프로그램
chrome.audio
chrome.audio API는 사용자가 시스템에 연결된 오디오 기기에 관한 정보를 얻고 이를 제어할 수 있도록 제공됩니다. 이 API는 현재 ChromeOS용 키오스크 모드에서만 사용할 수 있습니다. 문자열 기기 이름. DeviceType 기기 유형입니다. 문자열 사용자 친화적인 이름 (예: 'USB 마이크')입니다. 문자열 오디오 기기의 고유 식별자입니다. 부울 현재 활성 기기인 경우 true입니다. 숫자 기기의 사운드 레벨, 출력용 볼륨,
- Chrome 확장 프로그램
chrome.declarativeContent
chrome.declarativeContent API를 사용하면 페이지 콘텐츠를 읽을 수 있는 권한 없이 페이지 콘텐츠에 따라 작업을 수행할 수 있습니다. 선언적 콘텐츠 API를 사용하면 CSS 선택자가 페이지의 요소와 일치하는 경우 호스트 권한 을 추가하거나 콘텐츠 스크립트 를 삽입할 수 있습니다. activeTab 권한을 사용하여 사용자가 작업을 수행합니다. 규칙은 조건과 작업으로 구성됩니다. 조건 중 하나라도 충족되면 모든
- Chrome 확장 프로그램
chrome.commands
명령어 API를 사용하여 확장 프로그램에서 작업(예: 브라우저 작업을 열거나 확장 프로그램에 명령어를 전송하는 작업)을 트리거하는 단축키를 추가합니다. 이 API를 사용하려면 매니페스트 에서 다음 키를 선언해야 합니다. Commands API를 사용하면 확장 프로그램 개발자가 특정 명령어를 정의하고 이를 기본값에 바인딩할 수 있습니다. 키 조합을 사용할 수 있습니다. 확장 프로그램에서 허용하는 각 명령어는 확장 프로그램의 매니페스트 에 있는
- Chrome 확장 프로그램
chrome.browsingData
chrome.browsingData API를 사용하여 사용자의 로컬 프로필에서 인터넷 사용 기록을 삭제합니다. 'browsingData'를 선언해야 합니다. 확장 프로그램 매니페스트 의 권한이 있어야 이 API를 사용할 수 있습니다. 이 API의 가장 간단한 사용 사례는 사용자의 인터넷 사용 기록을 삭제하기 위한 시간 기반 메커니즘입니다. 코드는 사용자의 인터넷 사용 기록을 삭제해야 합니다. 이 타임스탬프는 유닉스 에포크 ( getTime
- Chrome 확장 프로그램
File System Access API: 로컬 파일 액세스 간소화
개발자는 File System Access API를 사용하여 IDE, 사진 및 동영상 편집기, 텍스트 편집기 등 사용자 로컬 기기의 파일과 상호작용하는 강력한 웹 앱을 빌드할 수 있습니다. 사용자가 웹 앱에 액세스 권한을 부여하면 이 API를 사용하여 사용자 기기의 파일 및 폴더에 대한 변경사항을 직접 읽거나 저장할 수 있습니다.
Summarization API 사전 체험판 사용 가능
이제 EPP 참여자는 Chrome에서 Gemini Nano의 Summary API를 사용하여 프로토타입을 제작할 수 있습니다.
- Chrome
Snap 이벤트 스크롤
두 가지 새로운 JavaScript 이벤트인 스크롤SnapChange와 ScrollSnap Changes가 도입되었습니다.
- Chrome
소프트 탐색 측정 실험
Chrome 팀은 단일 페이지 애플리케이션에서 사용하는 소프트 탐색을 더 잘 측정하기 위해 노력하고 있으며, 이제 사이트에서 이를 실험할 수 있도록 플래그 뒤의 새 API를 사용할 수 있습니다.
DevTools로 스크린샷을 캡처하는 4가지 방법
DevTools로 스크린샷을 캡처하는 독특한 4가지 방법을 알아보세요.
- Chrome DevTools
- Chrome
DevTools의 새로운 기능, Chrome 128
콘솔 통계가 유럽에서 제공되고 향상된 네트워크 트랙 및 API를 통해 실적 패널에서 트랙을 맞춤설정하는 등 다양한 기능이 제공됩니다.
- Chrome DevTools
- Chrome
Firefox, Chrome, Puppeteer에서 WebDriver BiDi를 사용하세요.
Puppeteer 23에서는 Firefox 129 이상을 안정적으로 지원하며 WebDriver BiDi를 기반으로 Chrome 및 Firefox 자동화를 위한 통합 API를 제공합니다.
- Chrome
Blog
Chrome 개발자 관계팀의 최신 소식
- Chrome
Android용 Chrome의 패스키 UX 업데이트
이제 Android용 Chrome에 인증 관리자가 통합되어 Android 14 이상에서 서드 파티 비밀번호 관리자가 패스키를 제공할 수 있습니다.
- Chrome
Chrome에서 기본 제공되는 AI 실험에 참여하기
기본 제공 AI, Prompt API, Chrome의 AI 요금제에 관한 업데이트입니다.
- Chrome
작성자 정의 CSS 이름 및 Shadow DOM: 사양 및 실제
CSS의 Shadow DOM에 사용되는 작성자 정의 이름의 현재 상호 운용성 상태를 설명합니다.
정규 표현식 이상의 기능: Chrome DevTools에서 CSS 값 파싱 향상
DevTools팀이 Styles 탭에 스타일이 표시되는 방식을 어떻게 개선했는지 알아보세요.
- Chrome
이제 BrowserStack에서 WebDriver BiDi를 사용하여 자동화 가능
BrowserStack은 WebDriver BiDi 지원: 이벤트 기반 자동화를 통해 Selenium Grid 테스트를 향상시킵니다.
- Chrome
Early Hints와 함께 서버 분석 시간을 이용해 페이지 로드 속도 향상
서버가 중요한 하위 리소스에 대한 힌트를 브라우저에 보내는 방법을 알아봅니다.
CrUX API
CrUX API에 대한 요청을 작성하고 응답을 파싱하는 방법을 알아봅니다.
- Chrome UX 보고서
CrUX 기록 API
CrUX History API를 사용하여 지난 6개월간의 과거 CrUX 트렌드를 쿼리하는 방법을 알아보세요.
- Chrome UX 보고서
네트워크 패널: 네트워크 부하 및 리소스 분석
네트워크 부하 및 리소스 분석
- Chrome DevTools
줄바꿈 가능 <ruby> CSS 루비 정렬 속성을 사용하여
줄바꿈 가능한 루비 요소 및 CSS 루비 정렬 속성
- Chrome
샘플
Chrome 확장 프로그램 샘플은 GitHub 에서 확인할 수 있습니다.
- Chrome 확장 프로그램
앱 게시
할 일
- Chrome 확장 프로그램
매니페스트 - 버전
이 확장 프로그램의 버전을 나타내는 1~4개의 점으로 구분된 정수입니다. 몇 가지 규칙이 정수에 적용됩니다. 정수는 0에서 65535 사이여야 합니다(0과 65535 사이의 값 포함). 0이 아닌 정수는 0으로 시작할 수 없습니다. 예를 들어 99999와 032는 모두 유효하지 않습니다. 다음은 유효한 버전의 몇 가지 예입니다. 자동 업데이트 시스템은 버전을 비교하여 설치된 확장 프로그램을 업데이트해야 하는지 확인합니다. 게시된 확장 프로그램에
매니페스트 - 기본 언어
이 확장 프로그램의 기본 문자열이 포함된 _locales 의 하위 디렉터리를 지정합니다. 이 필드는 _locales 디렉터리가 있는 확장 프로그램에 필수 이며 _locales 디렉터리가 없는 확장 프로그램에는 없어야 합니다. 자세한 내용은 다국어화 를 참고하세요.
매니페스트 - 오프라인 사용 설정됨
앱 또는 확장 프로그램이 오프라인에서 작동할 것으로 예상되는지 여부 Chrome에서 앱이 오프라인 상태임을 감지하면 이 필드가 true로 설정된 앱은 새 탭 페이지에 강조표시됩니다. Chrome 35부터는 앱이 오프라인 사용이 설정된 것으로 간주하며, 권한을 요청하지 않는 한 "offline_enabled" 의 기본값은 true 입니다. "webview" 이 경우 네트워크 연결이 필요한 것으로 가정하고 "offline_enabled" 의
업데이트: 이벤트 페이지 및 백그라운드 페이지
매니페스트 - 최소 Chrome 버전
확장 프로그램, 앱 또는 테마에 필요한 Chrome 버전입니다(있는 경우). 이 문자열의 형식은 version 필드의 형식과 동일합니다.
작업 상자 스트림
RouteHandlerCallbackOptions StreamSource | Promise< StreamSource > 응답 ReadableStream BodyInit 여러 개의 소스 프로미스를 사용합니다. 각 프로미스는 Response, ReadableStream 또는 BodyInit 로 확인될 수 있습니다. 스트림이 완료될 때 신호를 보내는 프로미스와 함께 각 스트림의 데이터가 순서대로 반환된 ReadableStream을 노출하는
매니페스트 - 설명
확장 프로그램을 설명하는 일반 텍스트 문자열 (HTML 또는 다른 형식 없음, 132자 이하, 영문 기준)입니다. 설명은 브라우저의 확장 프로그램 관리 UI 및 Chrome 웹 스토어 모두에 적합해야 합니다. 이 필드에 언어별 문자열을 지정할 수 있습니다. 자세한 내용은 다국어화 를 참고하세요.
매니페스트 - 키
이 값은 개발 중에 로드될 때 확장 프로그램, 앱 또는 테마의 고유 ID를 제어하는 데 사용할 수 있습니다. 적절한 키 값을 가져오려면 먼저.crx 파일에서 확장 프로그램을 설치합니다. 확장 프로그램을 업로드 하거나 수동으로 패키징 해야 할 수도 있습니다. 그런 다음 사용자 데이터 디렉터리 에서 Default/Extensions/_<extensionId>_/_<versionString>_/manifest.json 파일을
매니페스트 - 이름 및 닉네임
name 및 short_name 매니페스트 속성은 앱을 식별하는 짧은 일반 텍스트 문자열입니다. 두 필드에 모두 언어별 문자열을 지정할 수 있습니다. 자세한 내용은 국제화 를 참고하세요. name (최대 45자)는 앱의 기본 식별자이며 필수 입력란입니다. 이 메시지는 다음 위치에 표시됩니다. short_name (최대 12자 권장)은 앱 이름의 짧은 버전입니다. 이는 선택적인 필드이며, 지정하지 않으면 name 이 사용되지만 잘릴 수
사용 중지된 웹 기능
Chrome 앱은 웹 플랫폼을 사용하지만 일부 웹 기능은 사용 중지되었거나 다른 방식으로 사용됩니다. 주된 이유는 보안 문제를 방지하고 프로그래밍 관행을 개선하기 위함입니다. 다음은 웹 플랫폼의 사용 중지된 기능 및 가능한 해결 방법을 요약한 내용입니다.
Chrome 128 베타
현재 베타의 기능을 자세히 설명한 이 게시물에서 다음 Chrome 출시 버전을 미리 확인하세요.
- Chrome
사용자가 가치 있는 앱을 설치하도록 Chrome을 지원하는 방법
Chrome의 내부 사용자 연구에 따르면 많은 사용자가 웹 앱 설치를 중요하게 생각하는 것으로 나타났습니다. 다음과 같은 여러 가지 이점이 있습니다. Chrome과 웹 개발자가 새로운 머신러닝 프로모션 기능을 비롯한 다양한 방법으로 도움을 줄 수 있습니다. 이 게시물에서는 사용자가 앱을 설치하는 방법을 간략하게 설명합니다. Chrome의 설치 가능성 기준 을 충족하는 앱은 Chrome 데스크톱 브라우저의 주소 표시줄에 설치 아이콘을 자동으로
- Chrome
Chrome 127
Chrome 127은 2024년 7월 23일에 출시되기 시작하며 CSS font-size-Adjust, 키보드 포커스 가능 스크롤 컨테이너를 포함하며 그 외에도 다양한 기능이 제공됩니다.
- Chrome
Chrome 127의 새로운 기능
Chrome 127이 이제 출시됩니다. 글꼴 크기 조정을 지원하여 사용자 활성화가 Document Picture-in-Picture API, 키보드 포커스 가능 스크롤 컨테이너 등에 전파되었습니다. 아드리아나 자라가 개발자를 위한 Chrome 127의 새로운 기능에 관한 모든 세부정보를 제공합니다.
- Chrome
WebGPU의 새로운 기능 (Chrome 127)
Android의 OpenGL ES 실험 지원, GPUAdapter 정보 속성, WebAssembly 상호 운용성 개선 등
- Chrome
- WebGpu
읽기 흐름 및 디스플레이: 콘텐츠 요소에 관한 개발자 의견 요청
Google에서 읽기 흐름이 요구사항을 충족하는지 확인할 수 있도록 도와주세요.
- Chrome
환경설정
환경설정 탭 참조입니다.
- Chrome DevTools
네트워크 기능 참조
Chrome DevTools 네트워크 패널 기능에 관한 종합 레퍼런스입니다.
- Chrome DevTools
Recorder 패널: 사용자 플로우 기록 및 측정
사용자 플로우를 분석하고 기록합니다.
- Chrome DevTools
뷰 전환에 관한 오해
점점 더 많은 사람들이 View Transition API를 살펴보기 시작하면서 몇 가지 오해를 바로잡을 때입니다.
- Chrome
Chrome 확장 프로그램: 중요 정책 업데이트
이번 공지에는 고품질 제품 개발을 장려하고, 사기 행위를 방지하고, 정보에 입각한 사용자 동의를 보장하도록 설계된 개발자 프로그램 정책 페이지의 업데이트 내용이 포함됩니다.
- Chrome 확장 프로그램
- Chrome
Chrome 확장 프로그램은 어떻게 되나요?
Chrome 확장 프로그램의 최근 변경사항과 개발자가 기대할 수 있는 향후 확장 프로그램 기능에 대한 개요입니다.
- Chrome 확장 프로그램
- Chrome
DevTools의 새로운 기능, Chrome 127
Elements에서의 CSS 앵커 위치 지정, 소스의 향상된 'Never Pause Here', 새로운 스크롤 맞추기 이벤트 리스너, 업데이트된 네트워크 제한 사전 설정 등
- Chrome
- Chrome DevTools
검사 모드: 신속하게 요소 속성 분석
웹 앱의 요소 검사
- Chrome DevTools
성능 기능 참조
Chrome DevTools에서 성능을 기록하고 분석하는 모든 방법에 관한 참고 자료입니다.
- Chrome DevTools
이제 Long Animation Frame API가 제공되었습니다.
Long Animation Frame API (LoAF)는 Chrome 123에서 출시되었으며 이제 이 새로운 API를 최대한 활용하는 데 도움이 되는 도구와 가이드도 업데이트했습니다.
- Chrome
YouTube에 신뢰할 수 있는 유형 추가
YouTube는 교차 사이트 스크립팅 공격을 방지하기 위해 신뢰할 수 있는 유형으로 플랫폼 보안을 강화하고 있지만, 확장 프로그램에 영향을 미칠 수도 있습니다.
- Chrome
- Chrome 확장 프로그램
과도한 DOM 크기 피하기
큰 DOM이 웹페이지 성능을 어떻게 저하시키는지, 로드 시 DOM의 크기를 줄이는 방법에 대해 알아보세요.
즉각적인 페이지 탐색을 위해 Chrome에서 페이지 사전 렌더링
Chrome팀은 사용자가 이동할 가능성이 있는 향후 페이지의 전체 사전 렌더링을 다시 가져오는 옵션을 연구해 왔습니다.
Chrome 웹 스토어 비하인드 스토리: 신뢰와 안전에 관한 질문
Chrome 웹 스토어에서 리뷰를 담당하는 팀과 이야기를 나누었습니다.
- Chrome 확장 프로그램
- Chrome
스토리지 버킷을 사용한 IndexedDB 최대 성능
Chrome팀은 IndexedDB (IDB) 구현을 위해 성능 관련 여러 가지 사항을 개선했습니다.
- Chrome
Chrome 127 베타
베타를 다운로드하여 Chrome에 제공되는 최신 기능을 테스트해 보세요.
- Chrome
새 HTML <permission> 요소에 대한 오리진 트라이얼
Chrome팀은 사용자에게 강력한 기능에 대한 액세스를 요청할 수 있는 새로운 선언적 HTML <permission> 요소를 실험하고 있습니다.
- Chrome
브라우저에서 AI 모델 캐시
향후 AI 기반 애플리케이션을 더 빠르게 출시하려면 모델 데이터를 기기 내에 명시적으로 캐시합니다.
WebGPU의 새로운 기능 (Chrome 126)
maxTextureArrayLayers 제한 확대, Vulkan 백엔드의 버퍼 업로드 최적화, 셰이더 컴파일 시간 개선, 제출된 명령어 버퍼는 고유해야 하며, Dawn 업데이트 등이 있습니다.
- Chrome
- WebGpu
Chrome 126
2024년 6월 11일에 Chrome 126이 출시되기 시작할 예정입니다. 교차 문서 뷰 전환, CloseWatcher API 다시 사용 설정, Gamepad API 트리거 럼블 등이 포함되어 있습니다.
- Chrome
CSS 및 웹 UI의 최신 소식: I/O 2024 요약
Google I/O 2024에서 발표된 CSS 및 웹 UI 관련 공지사항을 모두 읽어보세요.
- Chrome
Chrome 126의 새로운 기능
이제 Chrome 126이 출시됩니다. ViewTransitions API에서 문서 간 전환을 지원하면서 CloseWatcher API가 다시 사용 설정되고 Gamepad API에 대해 트리거 럼블을 실행했으며 그 밖에도 훨씬 더 많은 기능이 제공됩니다. 아드리아나 하라가 Chrome 126의 개발자를 위한 새로운 기능을 자세히 알아보세요.
- Chrome
언로드 이벤트 지원 중단
로드 취소 이벤트는 Chrome 117부터 점진적으로 지원 중단됩니다. 정책 변경의 의미와 사이트 및 기업에서 이에 대비할 수 있는 방법에 대해 알아보세요.
DevTools에서 성능 워크플로를 맞춤설정하는 3가지 새로운 기능
성능 패널을 깔끔하게 정리하고 가장 필요한 정보에 집중하는 데 도움이 되는 최신 기능에 대해 알아보세요.
- Chrome DevTools
- Chrome
Chrome UX Report
CrUX 측정항목에 관한 기술 문서입니다.
- Chrome UX 보고서
프로토콜 모니터: CDP 요청 보기 및 전송
CDP 요청 및 응답을 모니터링합니다.
- Chrome DevTools
스타일 재계산 이벤트 중에 CSS 선택자 성능 분석
스타일 재계산 이벤트 중에 CSS 선택자 성능을 분석합니다.
- Chrome DevTools
운영 가능한 광고 확장 변경사항에 대한 검토 건너뛰기
개발자가 선언적 Net Request API를 사용하여 요건을 충족하는 Manifest V3 확장 프로그램 변경사항에 대한 검토 절차를 건너뛸 수 있는 새로운 기능을 발표하게 되어 기쁩니다.
- Chrome
너비 또는 초기 배율이 포함된 태그가 없음
Lighthouse 감사의 '너비 또는 초기 크기인 태그가 없음'에 대해 알아보세요.
네트워크 조건: 사용자 에이전트 문자열 재정의
네트워크 조건 패널을 사용하여 다른 브라우저를 에뮬레이션하는 방법을 알아봅니다.
- Chrome DevTools
DevTools의 새로운 기능, Chrome 126
향상된 트랙 구성 모드, Flame Chart의 무시 목록, 성능 패널에서 CPU 20회 제한 등이 있습니다.
- Chrome DevTools
- Chrome
Google I/O 2024의 Chrome 확장 프로그램
또 다른 Google I/O에서 흥미로운 확장 프로그램 업데이트를 모두 다루었습니다.
- Chrome
자바스크립트 디버그
Chrome DevTools를 사용하여 자바스크립트 버그를 찾고 수정하는 방법을 알아보세요.
- Chrome DevTools
Chrome DevTools로 추측 규칙 디버그하기
향후 페이지 탐색을 미리 가져오고 사전 렌더링하는 데 사용되는 예측 규칙을 디버그하는 Chrome DevTools 기능에 관해 자세히 알아보세요.
- Chrome DevTools
빠른 소스 패널
소스 파일을 보고 다른 도구에 액세스할 수 있습니다.
- Chrome DevTools
클라이언트 측 웹 AI로 유용한 제품 리뷰 유도
다음 Codelab에서는 클라이언트 측 AI를 제공합니다. AI 개발 지식, 서버 또는 API 키가 필요하지 않습니다.
JavaScript 프레임워크의 새로운 기능 (2024년 5월)
이 문서에서는 JavaScript 프레임워크 생태계의 최근 상황을 간략하게 설명합니다.
- Chrome
I/O 2024 Web AI 요약: 차세대 웹 앱을 위한 새로운 모델, 도구, API
I/O 2024에서 발표된 Web AI 요약 내용을 읽어보세요. 차기 웹 앱을 위한 새로운 모델, 도구, API를 알아보세요.
- Chrome
- WebGpu
성능 모니터 패널
웹사이트의 런타임 성능을 실시간으로 분석하세요.
- Chrome DevTools
더 빠른 웹 AI를 위한 WebAssembly 및 WebGPU 개선사항 1부
파트 1/2. WebAssembly 및 WebGPU 개선사항이 웹에서 머신러닝 성능을 개선하는 방법을 알아봅니다.
- Chrome
Chrome 126 베타
Chrome 126 베타에는 Gamepad API trigger-rumble 확장 프로그램 및 기타 기능과 함께 문서 간 뷰 전환이 포함되어 있습니다.
- Chrome
뷰 전환의 새로운 기능 (Google I/O 2024 업데이트)
MPA를 위한 문서 간 뷰 전환, 활성 유형을 사용한 선택적 뷰 전환, 뷰 전환 클래스를 사용한 애니메이션 스타일 공유를 발표합니다.
- Chrome
더 빠른 웹 AI를 위한 WebAssembly 및 WebGPU 개선사항, 2부
파트 2/2. WebAssembly 및 WebGPU 개선사항을 통해 웹에서 머신러닝 성능을 개선하는 방법을 알아보세요.
- Chrome
AI로 제품 리뷰 평가하기
온디바이스 AI는 사용자에게 강력한 모델을 제공하는 동시에 민감한 정보를 보호하고 지연 시간을 개선할 수 있는 최신 제품입니다.
Async Clipboard API를 위한 SVG 지원
Async Clipboard API는 이제 SVG 이미지를 처리할 수 있습니다.
- Chrome
Windows에 UIA 지원 도입
Chrome 126부터 Windows UI 자동화 프레임워크가 지원됩니다.
- Chrome
DevTools 도움말: 네트워크 응답 재정의 및 모의 처리
DevTools를 사용하여 네트워크 응답을 재정의하고 모의 처리하는 방법을 알아봅니다.
- Chrome
- Chrome DevTools
Chrome 125
2024년 5월 14일에 Chrome 125가 출시되기 시작했습니다. CSS 앵커 포지셔닝, Compute Pressure API, 새로운 기준 기능 등이 포함되어 있습니다.
- Chrome
Google I/O 2024에서 발표한 10가지 업데이트: 모든 웹 개발자를 위한 AI 기능 활용
Google I/O 개발자 기조연설과 세션에서 흥미로운 기능들을 살펴보세요.
- Chrome
클라이언트 측 AI를 선택해야 하는 경우
클라이언트 측 AI는 민감한 정보를 보호하고 지연 시간을 개선하는 동시에 사용자에게 강력한 모델을 제공하는 최신 기능입니다.
로컬에서 웹 콘텐츠 및 HTTP 응답 헤더 재정의
로컬 재정의를 사용하여 원격 리소스를 모의 처리하고 페이지 로드 시 DevTools에서 변경한 내용을 유지합니다.
- Chrome DevTools
Chrome 125의 새로운 기능
이제 Chrome 125가 출시됩니다. CSS Anchor Positioning API, Compute Pressure API, Storage Access API로 확장 등이 가능합니다. 아드리아나 하라가 Chrome 125의 개발자를 위한 새로운 기능에 관해 자세히 알아보세요.
- Chrome
Spotify가 Picture-in-Picture API를 사용하여 Spotify 소형 플레이어를 빌드한 방법
Spotify Miniplayer가 '캔버스 해킹'에서 Document Picture-in-Picture API를 통해 지원되는 향상된 환경으로 전환된 과정을 알아보세요.
- Chrome
CSS 앵커 배치 API 소개
새 앵커 배치 API를 사용하여 요소를 서로 비교하여 배치합니다.
- Chrome
콘솔 통계를 통해 오류 및 경고 더 잘 이해하기
Gemini를 통해 콘솔의 오류와 경고를 더 잘 이해할 수 있습니다.
- Chrome DevTools
원활하고 자동화된 테스트를 위한 Chrome 도구
Puppeteer, Chrome Headless, Chrome for Testing 및 Chrome 도구팀이 제공하는 기타 리소스에 관한 간략한 개요입니다.
- Chrome
Chrome으로 기업에 테스트 구현
엔터프라이즈 환경에서 테스트를 통해 문제를 해결하는 방법 알아보기
- Chrome
DevTools의 새로운 기능, Chrome 125
콘솔의 오류 원인, 성능의 CSS 선택자 통계, 네트워크의 사전 힌트 헤더 등
- Chrome DevTools
- Chrome
:has() 우수사례
:has()를 사용하여 Policybazaar 및 Tokopedia가 어떤 이점을 누릴 수 있는지 알아보세요.
- Chrome
전자상거래 사이트에서 CSS 및 UI 기능이 중요한 이유는 무엇인가요?
뷰 전환, 스크롤 기반 애니메이션, Popover API 등 최신 CSS 및 UI 기능을 구현하여 전자상거래 사이트가 어떤 이점을 얻을 수 있는지 알아보세요.
- Chrome
WebGPU의 새로운 기능 (Chrome 125)
개발 중인 하위 그룹이 3D 텍스처 슬라이스로 렌더링됩니다.
- Chrome
- WebGpu
컨테이너 쿼리 우수사례
redBus 및 Tokopedia의 컨테이너 쿼리의 이점을 알아보세요.
- Chrome
전환 우수사례 보기
redBus, Policybazaar, Tokopedia는 모두 View Transition API를 사용하며 더 나은 성능과 매끄러운 UI의 이점을 누릴 수 있습니다.
- Chrome
스크롤 기반 애니메이션 우수사례
Policybazaar, redBus, Tokopedia를 통해 스크롤 기반 애니메이션의 이점을 살펴보세요.
- Chrome
'스크롤 기반 애니메이션 활용' 소개
스크롤 기반 애니메이션에 대해 자세히 알아볼 수 있는 10부작 동영상 과정
- Chrome
WebGPU 개요
WebGPU를 사용하면 웹에서 고성능 3D 그래픽과 데이터 병렬 계산을 수행할 수 있습니다.
- WebGpu
CSS 석조술을 위한 대안 제안
다양한 사양으로 석조물과 그리드를 정의하기 위한 제안
- Chrome
매니페스트 - 최소 Chrome 버전
manifest.json의 minimum_chrome_version 속성에 관한 참조 문서입니다.
- Chrome 확장 프로그램
팝오버 우수사례
Tokopedia는 Popover API를 사용하여 애플리케이션의 코드 양을 줄입니다.
- Chrome
비보안 컨텍스트용 비공개 네트워크 액세스 (PNA) 지원 중단 체험판이 종료됩니다. PNA 권한 메시지를 구현하세요.
HTTPS로 변환할 수 없는 웹사이트에서 비공개 네트워크 기기에 액세스하려면 권한 메시지를 사용하여 혼합 콘텐츠 검사를 완화해야 합니다.
- Chrome
캡처된 탭 스크롤 및 확대/축소
Captured Surface Control API를 사용하면 웹 앱에서 캡처된 탭을 스크롤하고 확대/축소할 수 있습니다.
WebAudio: WebAudio API 측정항목 보기
WebAudio 패널에서 WebAudio API 측정항목 보기
- Chrome DevTools
매니페스트 - 무료 체험 토큰
manifest.json의 try_tokens 속성에 대한 참조 문서입니다.
- Chrome 확장 프로그램
Chrome 125 베타
CSS 앵커 위치 지정, CSS 계단식 함수, Compute Pressure API 등
- Chrome
HTTPS 사용 안함
HTTPS로 웹사이트를 보호하는 방법을 알아보세요.
사이트가 여러 브라우저에서 작동함
Workbox를 사용하여 웹페이지가 여러 브라우저에서 작동하는지 확인하는 방법을 알아보세요.
현재 페이지가 오프라인에서 200으로 응답하지 않음
프로그레시브 웹 앱을 오프라인에서 작동하는 방법 알아보기
자동 완성: 저장된 주소 검사 및 디버그
자동 완성 패널을 사용하여 Chrome에 저장된 주소를 검사하고 디버그합니다.
- Chrome DevTools
주소 표시줄에 테마 색상을 설정하지 않음
프로그레시브 웹 앱에 주소 표시줄 테마 색상을 설정하는 방법을 알아보세요.
각 페이지에 URL이 있음
Lighthouse '페이지마다 URL' 감사에 관해 알아보세요.
폴더블 API의 오리진 트라이얼
폴더블 API는 개발자가 폴더블 기기를 타겟팅하는 데 도움이 되도록 설계된 Chrome의 두 API입니다.
- Chrome
자바스크립트를 사용할 수 없는 경우 대체 콘텐츠를 제공하지 않음
자바스크립트를 사용할 수 없을 때 사용자가 웹페이지의 일부 콘텐츠를 볼 수 있도록 하는 방법을 알아보세요.
페이지 전환 시 네트워크에서 차단되는 느낌이 들지 않음
네트워크 속도가 느린 경우에도 웹페이지 간에 원활하게 전환하는 방법을 알아보세요.
제한
탭 참조 제한
- Chrome DevTools
콘텐츠의 크기가 표시 영역에 알맞지 않음
모바일 화면에 맞게 웹페이지 콘텐츠의 크기를 조정하는 방법을 알아봅니다.
Chrome 확장 프로그램은 어떻게 되나요?
Chrome 확장 프로그램의 최근 변경사항과 개발자가 기대할 수 있는 향후 확장 프로그램 기능에 대한 개요입니다.
- Chrome
- Chrome 확장 프로그램
HTTP 트래픽을 HTTPS로 리디렉션하지 않음
모든 페이지를 HTTPS로 리디렉션하여 사이트 보안을 강화하는 방법을 알아보세요.
페이지 및 start_url을 제어하는 서비스 워커를 등록하지 않음
오프라인 기능, 푸시 알림, 설치 가능 여부와 같은 프로그레시브 웹 앱 기능을 지원하는 서비스 워커를 등록하는 방법을 알아봅니다.
모바일 네트워크의 페이지 로드가 충분히 빠르지 않음
모바일 네트워크에서 웹페이지를 빠르게 로드하는 방법에 대해 알아보세요.
애니메이션: CSS 애니메이션 효과 검사 및 수정
Animations 패널을 사용하여 애니메이션을 검사하고 수정합니다.
- Chrome DevTools
매니페스트에 마스크 가능한 아이콘이 없음
PWA에 마스크 가능한 아이콘 지원을 추가하는 방법을 알아봅니다.
이제 MIDI 기기에 액세스하려면 사용자 권한이 필요합니다.
이제 Chrome은 권한 메시지 뒤에 전체 웹 MIDI API를 제어합니다.
- Chrome
오프라인일 때 start_url이 200으로 응답하지 않음
오프라인에서 앱에 액세스할 수 있도록 프로그레시브 웹 앱의 start_url을 구성하는 방법을 알아보세요.
Chrome 124의 새로운 기능
이제 Chrome 124가 출시됩니다. JavaScript에서 선언적 Shadow DOM을 사용할 수 있도록 하는 두 개의 새로운 API가 있습니다. 웹 소켓에서 스트림을 사용할 수 있습니다. 뷰 전환이 약간 개선됩니다. 그 밖에도 많은 기능이 제공됩니다. Pete LePage는 Chrome 124의 개발자를 위한 새로운 기능을 자세히 설명합니다.
- Chrome
웹 앱 매니페스트가 설치 가능 요구사항을 충족하지 않습니다.
프로그레시브 웹 앱을 설치 가능하게 만드는 방법을 알아보세요.
맞춤 스플래시 화면에 맞게 구성되지 않음
프로그레시브 웹 앱용 맞춤 스플래시 화면을 만드는 방법을 알아보세요.
Chrome 124
2024년 4월 16일에 Chrome 124가 출시되기 시작했으며, setHTMLUnsafe, WebSockets의 스트림 등의 다양한 기능을 제공합니다.
- Chrome
유효한 apple-touch-icon을 제공하지 않음
프로그레시브 웹 앱이 iOS 홈 화면에 표시할 아이콘을 지정하는 방법에 대해 알아봅니다.
View Transition API를 사용한 원활한 전환
View Transition API를 사용하면 웹사이트 뷰 간에 전환을 추가할 수 있습니다.
다중 페이지 애플리케이션의 문서 간 보기 전환
다중 페이지 애플리케이션 (MPA)에서 사용할 문서 간 보기 전환을 시작하세요.
재미있고 강력한 기능: Chrome DevTools 소개
DevTools가 웹 애플리케이션 개발을 어떻게 개선할 수 있는지 알아보세요.
- Chrome DevTools
- Chrome
이제 CrUX에서 탐색 유형을 사용할 수 있습니다.
Chrome 사용자 환경 보고서 (CrUX)의 새로운 navigation_types 측정항목과 이 측정항목을 사용하여 웹 성능 측정항목을 설명하고 최적화하는 방법을 알아보세요.
- Chrome
Chrome 웹 스토어 개발자 대시보드의 버전 롤백
이번 주에는 개발자가 Chrome 웹 스토어에서 확장 프로그램을 이전에 게시된 버전으로 롤백할 수 있는 새로운 기능을 출시하게 되었습니다. Google의 목표는 특히 Manifest V3로 전환할 때 개발자가 업데이트를 게시할 때 더 안심할 수 있도록 하는 것입니다. 이제 버그 수정사항이 포함된 새 버전의 확장 프로그램을 제출하고 검토를 통과할 때까지 기다릴 필요가 없습니다. 대신 더보기 메뉴 또는 항목의 패키지 페이지를 통해 롤백을 시작할 수
- Chrome
- Chrome 확장 프로그램
BigQuery의 CrUX
BigQuery의 CrUX 데이터 세트가 구성되는 방식을 알아봅니다.
- Chrome UX 보고서
WebGPU의 새로운 기능 (Chrome 124)
읽기 전용 및 읽기-쓰기 저장소 텍스처, 서비스 워커 및 공유 워커 지원, 새로운 어댑터 정보 속성, 버그 수정
- Chrome
- WebGpu
PageSpeed Insights에서 Chrome UX 보고서 데이터를 보는 방법
PageSpeed Insights (PSI)는 웹 개발자가 페이지 성능의 정의와 개선 방법을 이해할 수 있게 해주는 도구입니다. 이 가이드에서는 PSI를 사용하여 CrUX에서 유용한 정보를 추출하고 사용자 환경을 더 잘 이해하는 방법을 알아봅니다.
- Chrome UX 보고서
CrUX 가이드
따라 하기 쉬운 가이드를 통해 CrUX 사용 방법을 알아보세요.
- Chrome UX 보고서
웹폰트가 로드되는 동안 텍스트가 계속 표시되는지 확인
웹페이지 텍스트가 사용자에게 항상 표시되도록 font-display API를 사용하는 방법을 알아봅니다.
JS 프로파일러 지원 중단, Performance 패널로 CPU 프로파일링
CPU 성능 프로파일링의 미래에 대해 알아보고 JavaScript 프로파일러를 지원 중단하는 이유와 지원 중단 방식에 대해 알아보세요.
- Chrome
DevTools의 새로운 기능, Chrome 124
스크롤 기반 애니메이션 지원, 새로운 자동 완성 패널, 네트워크 제한 시 WebRTC의 새로운 옵션 등을 지원합니다.
- Chrome DevTools
- Chrome
뒤로-앞으로 캐시 notRestoredReasons API
문서에 있는 프레임이 탐색 시 뒤로-앞으로 캐시를 사용하지 못하도록 차단되었는지에 대한 정보를 보고합니다.
성능 패널로 Node.js 성능 프로파일링
성능 패널을 사용하여 Node.js 애플리케이션 성능을 프로파일링하는 방법을 알아봅니다.
- Chrome DevTools
WebAssembly JavaScript Promise Integration (JSPI), 오리진 트라이얼 시작
JSPI (JavaScript Promise Integration)는 WebAssembly로 컴파일된 동기 순차 코드가 비동기 웹 API에 액세스할 수 있도록 하는 API입니다.
- Chrome
fetchLater API 오리진 트라이얼
페이지가 닫혀 있어도 완료되는 지연된 가져오기를 요청하는 새로운 API인 fetchLater API(현재 오리진 트라이얼에 포함)에 대해 알아보세요.
- Chrome
네트워크 요청: 네트워크 요청을 차단하여 사이트 테스트
사이트에서 누락된 리소스를 어떻게 처리하는지 테스트하세요.
- Chrome DevTools
키보드 포커스 가능 스크롤러
tabindex 값이 설정되지 않고 포커스 가능 하위 요소가 없는 스크롤러를 포커스 가능하게 만들기 위한 변경사항이 출시됩니다.
- Chrome
Chrome 124 베타
Writesuggestions HTML 속성, WebSocketStream API, 우선순위 HTTP 요청 헤더 등
- Chrome
Chrome 123의 새로운 기능
Chrome 123이 출시됩니다. 새로운 밝은 어두운 기능, Long Animation Frames API, Service Worker Static Routing API 등 아드리아나 하라가 Chrome 123의 개발자를 위한 새로운 기능에 관해 자세히 알아보세요.
- Chrome
비공개 네트워크 액세스: 웹 작업자 및 탐색 가져오기에 대한 확장된 보호
웹 작업자를 위한 비공개 네트워크 액세스의 주요 보안 메커니즘, 탐색 가져오기, 예정된 보호 기능에 대해 알아보세요. 이 도움말에서는 웹사이트 소유자가 사설 네트워크를 사용하는 경우 취해야 할 조치에 대해서도 다룹니다.
- Chrome
Service Worker Static Routing API를 사용해 특정 경로에 대해 서비스 워커를 우회
Chrome 123부터 제공되는 이 새로운 API를 사용하는 방법을 알아보세요.
- Chrome
2024년 이후의 성능 도구
DevTools의 Performance 패널을 개선하기 위한 Chrome팀의 계획에 대해 알아보세요.
- Chrome DevTools
- Chrome
확장 프로그램 요청 숨기기 및 더 많은 네트워크 패널 개선사항
웹 디버깅 환경을 간소화하도록 설계된 Chrome DevTools Network 패널의 최신 개선사항을 살펴보세요.
- Chrome DevTools
- Chrome
요소 패널 개요
DOM을 즉시 변경합니다.
- Chrome DevTools
CSS 기능 참조
Chrome DevTools에서 CSS를 보고 변경하기 위한 새로운 워크플로를 살펴보세요.
- Chrome DevTools
중단점을 사용하여 코드 일시중지
Chrome DevTools에서 코드를 일시중지하는 모든 방법을 알아보세요.
- Chrome DevTools
WebGPU의 새로운 기능 (Chrome 123)
DP4a 내장 함수는 WGSL의 복합 요소 역참조를 위한 구문 슈가, 제한되지 않은 포인터 매개변수 등을 지원합니다.
- Chrome
- WebGpu
CSS 보기 및 변경
Chrome DevTools를 사용하여 페이지의 CSS를 확인하고 변경하는 방법을 알아보세요.
- Chrome DevTools
기타 효과 적용: 자동 어두운 테마 사용 설정, 포커스 에뮬레이션 등
광고 프레임을 강조표시하고, 페이지에 포커스를 에뮬레이션하고, 로컬 글꼴 및 이미지 형식을 사용 중지하고, 자동 어두운 테마를 사용 설정하고, 시각 장애를 에뮬레이션할 수 있습니다.
- Chrome DevTools
이전 헤드리스 Chrome을 chrome-headless-shell로 다운로드
이제 기존 헤드리스 Chrome을 모든 사용자 대상 Chrome 출시를 위한 독립형 바이너리로 다운로드할 수 있습니다.
- Chrome
공유 사전으로 압축 효율성 극대화
웹 압축은 공유 사전 압축으로 크게 향상되고 있습니다. 이 정의가 무엇인지, 어떻게 작동하는지, 웹에서 정적 및 동적 리소스 모두를 위한 표준 압축보다 로드 시간을 훨씬 더 단축할 수 있는 방법을 알아보세요.
- Chrome
애플리케이션 패널 개요
브라우저에서 바로 웹 앱에 대한 중요한 정보를 가져옵니다.
- Chrome DevTools
새로운 기능 개요
Chrome DevTools의 최신 기능 살펴보기
- Chrome DevTools
인터페이스 국제화
chrome.i18n API를 사용하여 인터페이스를 여러 언어로 렌더링합니다.
- Chrome 확장 프로그램
Speculation Rules API 개선
플랫폼의 문서 규칙, 즉시 설정, 한도, 추측 규칙 지원 등 Speculation Rules API의 최신 업데이트에 관한 세부정보입니다.
- Chrome
확장 프로그램의 접근성 향상
많은 사용자에게 접근성은 말 그대로 사용자 인터페이스이며, 접근성 기능은 다른 많은 사람들에게도 유용합니다.
- Chrome 확장 프로그램
DevTools의 새로운 기능 (Chrome 123)
이스터 에그, 요소 > 스타일의 페이지 에뮬레이션, 새로운 Lighthouse 감사 등
- Chrome DevTools
- Chrome
Chrome 확장 프로그램: 서비스 워커 정지 테스트를 위한 여정
이 게시물에서 Eyeo 팀은 확장 프로그램 서비스 워커를 테스트하는 문제에 대한 여정을 공유합니다. 특히 서비스 워커가 정지되었을 때 Chrome 확장 프로그램이 올바르게 작동하는지 확인하는 방법을 알아야 합니다.
- Chrome
- Chrome 확장 프로그램
서드 파티 라이브러리 관리를 위한 Next.js 패키지
@next/third-parties 라이브러리를 사용하여 인기 있는 서드 파티 리소스의 로드를 최적화하는 방법을 알아보세요.
- Chrome
블록 및 테이블 레이아웃에서 콘텐츠 정렬 지원
Chrome 123부터 Flex 또는 그리드 컨테이너를 만들지 않고 align-content를 사용하여 항목을 정렬합니다.
- Chrome
Chrome 123 베타
CSS Light-dark() 색상 함수, 블록의 align-content, 필드 크기 조정 속성, pagereveal 이벤트
- Chrome
Chrome 122의 새로운 기능
이제 Chrome 122가 출시됩니다. 새로운 Storage Buckets API를 사용하면 DevTools Performance 패널이 업데이트되고, Async Clipboard API를 사용하여 HTML을 읽을 수 있는 정리되지 않은 옵션 등이 제공됩니다. 아드리아나 하라가 Chrome 122의 개발자를 위한 새로운 기능에 관해 자세히 알아보세요.
- Chrome
단축키
Chrome DevTools 단축키에 대한 표준 문서입니다.
- Chrome DevTools
기기 모드로 휴대기기 시뮬레이션
Chrome의 기기 모드에서 가상 기기를 사용하여 모바일 중심 웹사이트를 구축하세요.
- Chrome DevTools
CSS ::backdrop 상속 변경사항
Chrome 122부터 `::backdrop` 요소는 원래 요소에서 속성을 상속합니다.
- Chrome
확장 프로그램 아이콘 구성
확장 프로그램을 사용하려면 툴바에서 한 개 이상의 아이콘이 필요합니다.
- Chrome 확장 프로그램
Chrome Extensions
미정
- Chrome 확장 프로그램
perf-ception을 통해 400% 더 빠른 성능 패널
DevTools의 성능 패널은 웹 앱의 성능 문제를 진단, 디버그 및 수정하는 강력한 도구입니다. 이번 시간에는 DevTools의 Performance 패널을 사용하여 Performance 패널 자체의 성능을 개선한 방법과 현저한 개선을 달성한 방법을 안내해 드리겠습니다.
- Chrome
WebUSB 사용
비표준 USB (Universal Serial Bus) 호환 기기를 웹에 노출하는 WebUSB API는 확장 프로그램에서 사용할 수 있습니다.
- Chrome 확장 프로그램
WebHID 사용
HID (Human Interface Device) 호환 기기를 웹에 노출하는 WebHID API는 확장 프로그램에서 사용할 수 있습니다.
- Chrome 확장 프로그램
Manifest V3로 이전
Manifest V2 확장 프로그램을 Manifest V3 확장 프로그램으로 변환하는 방법에 관한 가이드입니다.
- Chrome 확장 프로그램
매니페스트 - 콘텐츠 보안 정책
manifest.json의 콘텐츠 보안 정책 속성에 대한 참조 문서입니다.
- Chrome 확장 프로그램
WebGPU의 새로운 기능 (Chrome 122)
개발 중인 호환성 모드, maxVertexAttributes 제한 증가, Dawn 업데이트
- Chrome
- WebGpu
CSS 필드 크기 조정
수정 가능한 콘텐츠로 요소의 크기를 자동으로 조정하는 한 줄의 코드입니다.
힙 스냅샷 기록
힙 프로파일러로 힙 스냅샷을 기록하고 메모리 누수를 찾는 방법을 알아봅니다.
- Chrome DevTools
chrome.runtime
chrome.runtime API를 사용하여 서비스 워커를 검색하고, 매니페스트에 관한 세부정보를 반환하고, 확장 프로그램 수명 주기의 이벤트를 리슨하고 응답합니다. 이 API를 사용하여 URL의 상대 경로를 정규화된 URL로 변환할 수도 있습니다. 이 API의 대부분의 구성원에는 권한이 필요 없습니다. 이 권한은 connectNative(), sendNativeMessage(), onNativeConnect 에 필요합니다. 다음 예는
- Chrome 확장 프로그램
권한 선언
manifest.json에서 권한 속성의 유효한 값에 관한 개요
- Chrome 확장 프로그램
웹 푸시 사용
Chrome 확장 프로그램에서 웹 푸시를 사용하는 방법에 대한 단계별 가이드
- Chrome 확장 프로그램
권한 경고 가이드라인
Chrome 확장 프로그램에서 권한 경고가 작동하는 방식
- Chrome 확장 프로그램
EditContext API를 사용하여 맞춤 웹 편집 환경을 빌드하는 새로운 방법 소개
EditContext는 Chrome 및 Edge에서 출시되는 새로운 API로, 개발자가 브라우저에서 고급 텍스트 수정 기능을 빌드하는 데 도움이 됩니다. 이 게시물에서 자세히 알아보세요.
- Chrome
DevTools의 새로운 기능 (Chrome 122)
서드 파티 쿠키의 단계적 경고(네트워크 및 애플리케이션) 패널, 네트워크 패널의 향상된 디버깅, 성능 패널의 탐색경로 등
- Chrome
- Chrome DevTools
DevTools 팁: 더 빠른 페이지 로드를 위한 추측 탐색 디버깅
추측 로드로 웹 탐색 속도를 높이고 이를 디버그하는 방법을 알아보세요.
- Chrome
- Chrome DevTools
명령어에 응답
확장 프로그램에서 커스텀 키 조합에 응답합니다.
- Chrome 확장 프로그램
데스크톱 Chrome의 SharedArrayBuffer 지원 중단 체험판이 Chrome 124로 연장되었습니다.
Chrome 데스크톱에서 교차 출처 분리 없이 SharedArrayBuffer 지원 중단 체험판이 Chrome 124까지 연장됩니다.
- Chrome
Chrome 122 베타
Chrome 122 베타에서는 Iterator 도우미, 메서드 설정, Storage Buckets API, Async Clipboard API에서 처리되지 않은 HTML 읽기 등을 제공합니다.
- Chrome
확장 프로그램으로 녹음기 맞춤설정
확장 프로그램을 설치하여 녹음기를 맞춤설정하고 통합합니다.
- Chrome DevTools
Chrome 121의 새로운 기능
이제 Chrome 121이 출시됩니다. CSS 업데이트를 통해 Speculation Rules API가 개선되었으며, Element Capture API의 오리진 트라이얼 등 다양한 기능이 추가되었습니다. 아드리아나 하라가 Chrome 121의 개발자를 위한 새로운 기능에 관해 자세히 알아보세요.
- Chrome
Chrome 확장 프로그램은 어떻게 되나요?
Chrome 확장 프로그램의 최근 변경사항과 개발자가 기대할 수 있는 향후 확장 프로그램 기능에 대한 개요입니다.
- Chrome 확장 프로그램
- Chrome
검색주소창에서 작업 트리거
검색주소창에서 작업을 실행합니다.
- Chrome 확장 프로그램
WebGPU의 새로운 기능 (Chrome 121)
Android에서 WebGPU 지원, 셰이더 컴파일에 DXC 사용, 컴퓨팅 및 렌더 패스의 타임스탬프 쿼리, 셰이더 모듈의 기본 진입점, GPUExternalTexture 색상 공간으로 display-p3 지원, 메모리 힙 정보 등을 지원합니다.
- Chrome
- WebGpu
Angular SSR로 DOM에 안전하게 액세스
Angular에서 DOM을 SSR과 안전하게 함께 사용하는 방법을 알아봅니다.
- Chrome
스크롤바 스타일 지정
`scrollbar-width` 및 `scrollbar-color` 속성을 사용하여 스크롤바의 스타일을 지정합니다.
Puppeteer로 웹 블루투스 테스트
Puppeteer를 사용하여 Chrome에서 Web Bluetooth API를 사용하는 기능을 테스트할 수 있습니다.
- Chrome
chrome.gcm으로 Firebase 클라우드 메시징 (FCM) 사용
chrome.gcm에서 Firebase 메시징을 사용하는 방법에 관한 단계별 안내
- Chrome 확장 프로그램
웹 AI 모델 테스트 강화: WebGPU, WebGL, 헤드리스 Chrome
브라우저 테스트를 지속적으로 자동화하고 애플리케이션 성능을 개선하는 방법에 대한 Google Cloud 솔루션을 살펴보세요.
- Chrome
- WebGpu
Google Colab에서 웹 AI 모델 테스트하기
표준화된 하드웨어 설정 내에서 확장 가능하고 자동화 가능성을 유지하면서 클라이언트 측의 브라우저 기반 AI 모델을 테스트하는 방법을 알아보세요.
- WebGpu
양식 컨트롤 요소의 CSS 세로 쓰기 모드
Chrome에 국제 CSS 기능이 새로 추가되었습니다.
- Chrome
작업 구현
툴바를 클릭하는 사용자에게 응답합니다.
- Chrome 확장 프로그램
File System Access API의 영구 권한
이 게시물에서는 File System Access API의 영구 권한을 관리하는 방법을 설명합니다. 또한 현재 문제 상태와 해결 중인 과제를 간단히 요약한 내용을 제공합니다.
- Chrome
색상 선택 도구를 사용하여 HD 및 HD가 아닌 색상 검사 및 디버그
요소 > 스타일의 색상 선택 도구를 사용하여 HD 및 HD가 아닌 색상을 검사하고 디버그하는 방법을 알아보세요.
- Chrome DevTools
DevTools 도움말: 색상 작성
클릭 몇 번으로 색상을 만드는 방법을 알아보세요.
- Chrome DevTools
- Chrome
DevTools 도움말: 가져오기 우선순위 디버깅
가져오기 우선순위를 디버그하는 방법을 알아봅니다.
- Chrome
- Chrome DevTools
CSS text-wrap: balance
균형 잡힌 텍스트 블록을 위해 줄바꿈을 직접 작성하는 기존의 타이포그래피 기법이 CSS에 도입되었습니다.
웹 앱 범위 확장 프로그램
Chrome 122부터 scope_extensions 앱 매니페스트 멤버의 오리진 트라이얼을 구독하여 여러 하위 도메인과 최상위 도메인을 제어하는 사이트를 단일 웹 앱으로 표시할 수 있습니다.
WebDriver BiDi의 강력한 기능 활용하기: Puppeteer를 통한 Chrome 및 Firefox 자동화
이제 Puppeteer가 Firefox와 호환됩니다. 🎉 그런데, 아직 안 되었나요? 🤔 Puppeteer의 새로운 프로토콜인 WebDriver BiDi를 자세히 살펴보고 이 흥미로운 개발이 Firefox 자동화 워크플로에 무엇을 의미하는지 알아보겠습니다.
- Chrome
컨텍스트 메뉴 빌드
사용자가 확장 프로그램 기능을 호출할 수 있는 창인 팝업을 구현합니다.
- Chrome 확장 프로그램
원격 호스팅 코드 위반 처리
서비스 워커는 확장 프로그램이 필요할 때만 실행되도록 지원하여 리소스를 절약합니다.
- Chrome 확장 프로그램
Chrome에서 Android 인텐트 사용
Android 인텐트를 사용하여 웹페이지에서 직접 앱을 실행합니다.
Android의 Chrome
Android용 Chrome의 개발자 기능 전체 목록은 chromestatus.com 을 참고하세요. Play 스토어에서 Chrome 을 다운로드하세요. 사용자가 한 기기에서 Chrome에 로그인하면 다른 기기에서 Chrome에 로그인할 때 해당 세션의 탭과 방문 기록을 사용할 수 있습니다. URL뿐만 아니라 Chrome 인스턴스 간에 전체 페이지 콘텐츠가 동기화되므로 사용자는 탑승권이나 로그인이 필요한 사이트의 도움말을 보기 위해 사용자 인증
팝업 추가
사용자가 확장 프로그램 기능을 호출할 수 있는 창인 팝업을 구현합니다.
- Chrome 확장 프로그램
새로운 INP 측정항목에 대한 최신 프레임워크의 성능
이 게시물에서는 새로운 INP 측정항목과 프레임워크 기반 웹사이트 간의 관련성과 이 측정항목을 최적화하는 프레임워크를 지원하기 위한 Aurora의 노력에 대해 설명합니다.
Chrome은 프리미엄 태블릿에서 기본적으로 데스크톱 모드를 사용 설정합니다.
Chrome은 프리미엄 태블릿에서 기본적으로 데스크톱 모드를 사용 설정하여 Android 태블릿 생태계에 맞게 조정되었습니다.
- Chrome
아코디언 전용 아코디언
`이름` 이 같은 여러 `` 요소로 전용 아코디언을 만듭니다.
WebGPU의 새로운 기능
최신 WebGPU 변경 사항을 알아보세요.
- WebGpu
DevTools의 새로운 기능 (Chrome 121)
Elements의 @font-palette-values 지원, 향상된 소스 맵 지원, 향상된 성능 > 상호작용 추적 등이 추가되었습니다.
- Chrome DevTools
- Chrome
지역 캡처로 탭 공유 개선
이제 웹 플랫폼에는 동영상 트랙 자르기를 위한 성능이 뛰어나고 강력한 방법인 지역 캡처 기능이 함께 제공됩니다.
WebGPU의 새로운 기능 (Chrome 120)
WGSL의 16비트 부동 소수점 값 지원, 제한 증가, 깊이 스텐실 상태 변경, 어댑터 정보 업데이트 등
- Chrome
- WebGpu
CSS 래핑: 2023년
2023년은 CSS에게 엄청난 한 해였습니다. 올해 Chrome 및 웹 플랫폼 전반에 걸쳐 무엇이 도입되었는지 알아보세요.
- Chrome
DevTools 도움말: bfcache 디버깅
bfcache를 디버그하고 페이지를 즉시 로드하는 방법을 알아보세요.
- Chrome
- Chrome DevTools
쿠키 보기, 추가, 수정 및 삭제
Chrome DevTools를 사용하여 페이지의 HTTP 쿠키를 보고, 추가하고, 수정하고, 삭제하는 방법을 알아보세요.
- Chrome DevTools
프레임 세부정보 보기
프레임 세부정보를 봅니다.
- Chrome DevTools
Chrome 120의 새로운 기능
Chrome 120이 지금 출시됩니다. 닫기 요청을 처리할 때 일관된 환경을 제공하는 CloseWatcher API를 사용하면 세부정보 요소, 권한 정책 위반 보고서를 사용하여 아코디언 패턴을 간단하게 구현할 수 있으며 그 밖에도 더 많은 기능을 이용할 수 있습니다.
- Chrome
Chrome DevTools가 자체 XSS 공격을 방어하는 데 도움이 되는 방법
Chrome DevTools가 경험이 없는 DevTools 사용자를 위해 코드 붙여넣기를 차단하여 자체 XSS 공격을 완화하는 방법을 알아보세요.
- Chrome DevTools
- Chrome
DevTools 팁: DOM이란 무엇인가요? HTML과 DOM 비교
DevTools로 DOM을 디버그하는 방법을 알아보세요.
- Chrome
- Chrome DevTools
비공개 네트워크 액세스 권한 메시지 오리진 트라이얼: HTTPS를 사용하는 웹사이트를 마이그레이션하는 경로
Chrome에서 PNA (비공개 네트워크 액세스) 사양에 따라 비보안 공개 웹사이트에서 비공개 네트워크 엔드포인트에 액세스하는 기능이 지원 중단됩니다.
- Chrome
포트 포워딩으로 로컬 서버 및 Chrome 인스턴스에 액세스
개발용 컴퓨터 웹 서버에서 사이트를 호스팅한 다음 Android 기기에서 콘텐츠에 액세스합니다.
- Chrome DevTools
Chrome의 설치 가능 여부 기준 다시 확인
앞으로 몇 달 안에 Chrome은 개발자 및 사용자 환경을 개선하기 위해 앱 설치 기준을 간소화하는 것을 목표로 실험을 진행할 예정입니다. 이 게시물에서는 예상되는 변경사항과 이러한 실험을 진행하는 이유를 설명합니다.
- Chrome
CSS의 4가지 새로운 국제 기능 소개
Chrome에 네 가지 새로운 국제 CSS 기능이 추가됩니다.
- Chrome
페이지 수명 주기 API
Page Lifecycle API는 모바일 운영체제에서 흔히 볼 수 있는 앱 수명 주기 기능을 웹에 제공합니다. 이제 브라우저에서 백그라운드 페이지를 안전하게 정지하고 삭제하여 리소스를 절약할 수 있으며, 개발자는 사용자 환경에 영향을 미치지 않고 이러한 개입을 안전하게 처리할 수 있습니다.
무시 목록
목록 탭 참조를 무시합니다.
- Chrome DevTools
Async Clipboard API의 정리되지 않은 HTML
Chrome 120부터 Async Clipboard API에서 정리되지 않은 새로운 옵션을 사용할 수 있습니다. 이 가이드에서 사용 방법을 알아보세요.
Manifest V3로의 전환 재개
작년 12월, Google은 개발자 의견을 수렴하고 이전 문제 에 더 나은 솔루션을 제공하기 위해 Manifest V2의 예정된 지원 중단을 일시중지했습니다. 이러한 의견을 바탕으로 이러한 격차를 해소 하기 위해 다음과 같이 Manifest V3에 여러 변경사항을 적용했습니다. 이 격차를 해소하는 것 외에도 올해 초에 출시된 Side Panel API, 현재 베타 버전인 Reading List API 와 같은 새로운 기능도 플랫폼에
- Chrome 확장 프로그램
- Chrome
화상 회의 웹 앱의 자동 PIP 모드
Chrome을 사용하면 화상 회의 웹 앱이 자동으로 PIP 모드를 시작할 수 있습니다.
- Chrome
Angular NgOptimizedImage 지시어의 새로운 기능
Angular 앱의 이미지 성능을 더욱 개선하는 Angular NgOptimizedImage 지시어에 포함된 새로운 기능에 관해 알아보세요.
- Chrome
Manifest V3의 콘텐츠 필터링 개선
Google은 지난 1년 동안 MV3 확장 프로그램 플랫폼을 개선하는 방법에 관해 여러 콘텐츠 차단 확장 프로그램의 공급업체와 적극적으로 논의해 왔습니다. 이러한 논의를 바탕으로, 그중 많은 부분이 다른 브라우저와 공동작업으로 WebExtensions 커뮤니티 그룹 ( WECG )에서 이루어졌으며, 상당한 개선사항을 출시할 수 있었습니다. 필터 규칙 세트는 일반적으로 목록으로 그룹화됩니다. 예를 들어 더 일반적인 목록에는 모든 사용자에게
- Chrome
- Chrome 확장 프로그램
Service Worker Static Routing API 오리진 트라이얼
서비스 워커의 경로 처리 여부를 선언적으로 지정하는 새로운 API인 서비스 워커 정적 라우팅 (현재 오리진 트라이얼에 포함)의 첫 번째 단계에 대해 알아보세요.
- Chrome
DevTools의 새로운 기능 (Chrome 120)
문제 패널에 보고된 서드 파티 쿠키 단계적 지원 중단 문제, 쿠키에 대한 개인 정보 보호 샌드박스 분석 도구, 애플리케이션 패널의 유효한 콘텐츠 보안 정책, 향상된 애니메이션 디버깅, 향상된 무시 목록 등
- Chrome
- Chrome DevTools
CSS 중첩 완화 구문 업데이트
Chrome 120에서 미리보기 중첩이 사용 설정되었습니다.
- Chrome
WebGPU 생태계 캡처
WebGPU 생태계가 어떻게 JavaScript, C++, Rust 영역을 넘어 확장되는지 알아보세요.
- Chrome
- WebGpu
IndexedDB의 기본 내구성 모드 변경
IndexedDB의 내구성 모드가 Chrome 121부터 엄격에서 완화로 변경됩니다.
- Chrome
확장 프로그램용 Chrome 120의 새로운 기능
Chrome 확장 프로그램 개발자를 위한 Chrome 120의 중요 변경사항을 요약한 내용입니다.
- Chrome
- Chrome 확장 프로그램
file_handlers
manifest.json의 file_handlers 속성에 대한 참조 문서입니다.
- Chrome 확장 프로그램
Chrome OS에서 파일 처리
Chrome 확장 프로그램 서비스 워커, 팝업, 측면 패널 또는 콘텐츠 스크립트에서 파일을 여는 방법
- Chrome 확장 프로그램
Chrome 120 베타
CSS 마스킹, CSS 중첩에 대한 완화된 규칙, Media Session API의 Enterpictureinpicture 작업인 요소로 아코디언 패턴을 만듭니다.
- Chrome
WebAssembly 가비지 컬렉션 (WasmGC)이 이제 Chrome에서 기본적으로 사용 설정됨
프로그래밍 언어에는 가비지 컬렉션 프로그래밍 언어와 수동 메모리 관리가 필요한 프로그래밍 언어의 두 가지 유형이 있습니다. WebAssembly 가비지 컬렉션을 사용하면 가비지 컬렉션 언어를 WebAssembly로 포팅할 수 있습니다.
- Chrome
Chrome 119의 새로운 기능
Chrome 119가 출시됩니다. 이미 저장소에 있는 쿠키의 만료일 상한이 업데이트됨 CSS에는 새로운 의사 클래스, 상대 색상 구문, 광고 크기 매크로와 같은 Fenced Frame의 개선사항이 포함되었으며, 그 외에도 많은 기능이 있습니다.
- Chrome
CSS 선호 투명도
불투명한 UI를 선호하는 사용자를 위해 최적화하고 조정합니다.
- Chrome
WebGPU (Chrome 119)의 새로운 기능
필터링 가능한 32비트 부동 텍스처, unorm10-10-10-2 버텍스 형식, rgb10a2uint 텍스처 형식 등
- Chrome
- WebGpu
요소 선택: 가로 규칙 추가
확장된 요소 선택 기능을 통해 시각적 가로 나누기를 지원하여 그룹화를 개선하는 방법을 알아보세요.
- Chrome
CSS 텍스트 줄바꿈: 예쁜
빠른 속도의 아름다움을 위해 최적화된 텍스트 줄바꿈을 선택하세요.
- Chrome
Chrome 확장 프로그램은 어떻게 되나요?
Chrome 확장 프로그램의 최근 변경사항과 개발자가 기대할 수 있는 향후 확장 프로그램 기능에 대한 개요입니다.
- Chrome
- Chrome 확장 프로그램
Chromium Issue Tracker 이전
2024년 1월에 Chromium 문제 추적이 Google Issue Tracker에서 제공하는 도구로 이전됩니다.
- Chrome
Sanitizer API 지원 중단
향후 사양 업데이트를 따라잡기 위해 현재 Sanitizer API 구현은 Chrome 119부터 지원 중단됩니다.
- Chrome
웹에서 블루투스를 통해 직렬
Web Serial API에 블루투스 RFCOMM 서비스 지원이 추가되었습니다.
- Chrome
Puppeteer로 Chrome 확장 프로그램 테스트
Puppeteer를 사용하여 Chrome 확장 프로그램의 자동 테스트를 작성하는 방법
- Chrome 확장 프로그램
Chrome 확장 프로그램에 대한 엔드 투 엔드 테스트
확장 프로그램의 엔드 투 엔드 테스트를 작성하는 방법
- Chrome 확장 프로그램
Chrome 확장 프로그램 단위 테스트
확장 프로그램의 단위 테스트를 작성하는 방법
- Chrome 확장 프로그램
버그 찾기 및 팔로우하기
이미 버그 또는 기능 요청이 신고되었는지 확인합니다.
- Chrome 확장 프로그램
확장 프로그램 버그 신고
확장 프로그램 버그 또는 문서 관련 문제를 신고하는 방법
- Chrome 확장 프로그램
CSS 상대 색상 구문
다른 색상 채널과 값을 기반으로 새 색상을 만듭니다.
- Chrome
Chrome 118의 새로운 기능
Chrome 118이 출시됩니다. @scope css 규칙을 사용하여 구성요소 내에서 특정 스타일을 선언합니다. 새로운 미디어 기능인 Preferreds-reduced-transparency를 사용하세요. DevTools의 Sources 패널에는 개선되었으며 이 외에도 많은 기능이 있습니다.
- Chrome
DevTools의 새로운 기능 (Chrome 119)
스타일의 @속성 섹션 개선, 기기 목록 업데이트, 소스의 Pretiting 인쇄 개선 및 콘솔의 자동 완성
- Chrome DevTools
- Chrome
브라우저에서 파일 작업을 하기 위한 API 개선
FileSystemSyncAccessHandle의 여러 리더 및 작성자와 FileSystemWritableFileStream의 독점 작성자를 지원합니다. 출처 비공개 파일 시스템 (버킷 파일 시스템이라고도 함)을 사용하면 개발자가 최대 읽기 및 쓰기 성능에 최적화된 파일에 액세스할 수 있습니다. 이는 FileSystemSyncAccessHandle 객체를 통해 이루어집니다. 현재 동일한 파일 항목에 대해 여러 개의
- Chrome
전체 화면 팝업 창의 새로운 오리진 트라이얼
이제 한 단계만으로 전체 화면 모드에서 팝업 창을 열 수 있는 새로운 오리진 트라이얼을 사용할 수 있습니다.
- Chrome
Chrome 119 베타
Chrome 119 베타에서는 CSS 상대 색상 구문, 새로운 의사 클래스 등이 제공됩니다.
- Chrome
CSS @scope at-rule로 선택자의 도달범위 제한
@scope를 사용하여 DOM의 제한된 하위 트리 내에서만 요소를 선택하는 방법을 알아보세요.
DevTools 팁: Chrome 확장 프로그램 디버깅
DevTools를 사용하여 Chrome 확장 프로그램을 디버그하는 방법을 알아보세요.
- Chrome
- Chrome 확장 프로그램
- Chrome DevTools
WebGPU의 새로운 기능 (Chrome 118)
copyExternalImageToTexture용 확장 소스 지원, 읽기-쓰기 및 읽기 전용 저장소 텍스처를 위한 실험적 지원 등을 제공합니다.
- Chrome
- WebGpu
이제 Chrome에서 macOS의 iCloud 키체인에서 패스키를 지원합니다.
macOS용 Chrome에서 iCloud 키체인에서 패스키 지원을 시작합니다. 이를 통해 사용자가 iCloud 키체인에서 패스키를 만들고 Apple 기기 간에 동기화할 수 있습니다.
- Chrome
뷰 전환을 통한 원활한 탐색
CyberAgent, RedBus, Nykaa, PolicyBazaar에서 뷰 전환을 구현한 방법과 이유를 자세히 알아봅니다.
- Chrome
Google에서는 개발자를 위한 Chrome입니다.
Chrome 탄생 15주년을 맞이했으며 개발자에게 신뢰할 수 있고 유용한 파트너로서의 역할을 축하합니다.
- Chrome
WebGL에서 WebGPU까지
WebGPU로 마이그레이션하는 WebGL 개발자를 위한 몇 가지 팁을 알아보세요.
- Chrome
DevTools의 새로운 기능 (Chrome 118)
요소 > 스타일의 맞춤 속성에 관한 새로운 섹션, 더욱 다양해진 지역 재정의 개선, 향상된 검색, 소스의 간소화된 작업공간 등.
- Chrome
- Chrome DevTools
Chrome 118 베타
CSS의 범위가 지정된 스타일, 추가 미디어 기능, 키보드에 포커스를 맞출 수 있는 스크롤 컨테이너 등
- Chrome
Chrome 117의 새로운 기능
Chrome 117이 출시됩니다. 매끄러운 시작 및 종료 애니메이션을 쉽게 추가할 수 있는 세 가지 새로운 CSS 기능, 고차 데이터 세트를 계산하는 배열 그룹화, devtools는 로컬 재정의를 더 쉽게 만들어주며 그 밖에도 많은 기능을 제공합니다.
- Chrome
Chrome 앱에서 전환
Chrome 패키지 또는 호스팅된 앱을 이전하는 방법
WebGPU의 새로운 기능 (Chrome 117)
버텍스 버퍼를 설정 해제하고 그룹을 바인딩하고 분실된 기기가 작동하는 것처럼 보이게 하는 등의 작업을 할 수 있습니다.
- Chrome
- WebGpu
확장 프로그램 게시
새로운 Manifest V3 확장 프로그램 게시에 관한 안내
- Chrome 확장 프로그램
Google 프로그래밍 경진대회(Summer of Code) 및 크롬 확장 프로그램
Google 프로그래밍 경진대회(Summer of Code) 참가에 대한 경험과 조언을 제공합니다.
- Chrome 확장 프로그램
- Chrome
DevTools 팁: 스니펫 및 라이브 표현식
스니펫을 사용하여 자주 사용하는 코드를 실행하고 실시간 표현식을 사용하여 값을 실시간으로 확인할 수 있습니다.
- Chrome DevTools
- Chrome
더 빠른 Chrome 출시 (약 2개월)
Chrome 119부터 출시와 안정화 버전 출시 사이의 시간이 단축됩니다.
- Chrome
Astro View 전환
Chrome이 API를 구축할 때 Astro 커뮤니티에서 어떻게 뷰 전환을 수용했는지, 그리고 Astro의 영구 섬에 최고 수준의 지원을 제공하기 위한 여정을 강조합니다.
- Chrome
Scheduler.yield 오리진 트라이얼 소개
`scheduler.yield` 는 현재 오리진 트라이얼 단계에 있는 Scheduler API에 새로 추가된 API로, 더욱 반응성이 높은 사용자 환경을 위해 작업을 세분화하는 새로운 접근 방식입니다. 스케줄링 API에 관해 제안된 이 추가 기능의 이점을 이해하고 오리진 트라이얼에 등록하여 유용한 정보와 의견을 얻으세요.
- Chrome
새로운 명령어 편집기로 Chrome Devtools 프로토콜 (CDP) 명령어를 효율적으로 만드세요.
Chrome Devtools Protocol (CDP) 명령을 더 쉽게 입력할 수 있도록 DevTools에 새로운 사용자 친화적인 편집기가 도입되었습니다. 이제 개발자가 JSON을 사용할 필요가 없습니다.
- Chrome
Lighthouse 11의 새로운 기능
새로운 접근성 변경사항 및 감사 업데이트가 적용된 Lighthouse 11 출시
- Chrome
DevTools의 새로운 기능 (Chrome 117)
XHR/가져오기 요청을 재정의하고 네트워크 패널에서 확장 프로그램 요청을 숨기고, 성능 패널에서 가져오기 우선순위의 변경사항을 확인하고, 여러 가지 UI를 개선하고, 새로운 색상과 실험적인 기능 등을 확인해 보세요.
- Chrome DevTools
- Chrome
chrome://extensions 페이지에 안전 확인 도입
Chrome 117부터 Chrome은 사용자가 설치한 확장 프로그램이 더 이상 Chrome 웹 스토어에 없는 경우 사용자에게 사전에 강조표시합니다.
- Chrome 확장 프로그램
- Chrome
Chrome 117 베타
CSS, 배열 그룹화, 반복자 도우미 등을 위한 CSS 그리드 서브그리드, 시작 및 나가기 애니메이션 지원
- Chrome
원활한 시작 및 종료 애니메이션을 위한 4가지 새로운 CSS 기능
최상위 레이어와 개별적인 애니메이션을 원활하게 전환할 수 있는 새로운 기능을 알아보세요.
- Chrome
Chrome 116의 새로운 기능
Chrome 116이 출시됩니다. 문서 그림 API를 사용하여 사용자의 생산성을 높일 수 있습니다. 이제 DevTools에서 누락된 스타일시트를 더욱 쉽게 디버그할 수 있으며, 그 밖에도 많은 기능이 제공됩니다.
- Chrome
매니페스트 - 콘텐츠 스크립트
manifest.json의 "content_scripts" 속성에 대한 참조 문서입니다.
- Chrome 확장 프로그램
제한사항 속성으로 팝업 상호작용 보안 설정
팝업과 상호작용하는 동안 교차 출처 격리 및 교차 사이트 유출을 방지합니다.
- Chrome
WebGPU의 새로운 기능 (Chrome 116)
WebCodecs 통합, 동영상 재생 개선 등.
- Chrome
- WebGpu
Chrome의 일회성 권한
"이 시간 허용"은 Chrome에서 권한 부여를 위한 일회성 옵션입니다. 처음에는 데스크톱에서 위치정보, 카메라, 마이크에만 사용할 수 있습니다.
- Chrome
DevTools 팁: 중단점 및 로그 지점
중단점과 로그 지점을 사용하여 쉽게 디버그하세요.
- Chrome DevTools
- Chrome
TWA를 위한 PostMessage
Chrome 115부터 신뢰할 수 있는 웹 활동 (TWA)에서 postMessage를 사용하여 메시지를 보낼 수 있습니다. 이 문서에서는 앱과 웹 간에 통신하는 데 필요한 설정을 안내합니다.
확장 프로그램용 Chrome 116의 새로운 기능
Chrome 확장 프로그램 개발자를 위한 Chrome 116의 중요 변경사항을 요약합니다.
- Chrome
- Chrome 확장 프로그램
Chrome 116 베타
CSS 모션 경로, 뒤로-앞으로 캐시 NotRestoredReason API, Document PIP 모드 등
- Chrome
iOS 16.4 이상에서 Chrome 웹사이트 디버깅
iOS에서 Chrome용 Safari Web Inspector 디버깅을 사용하는 방법을 알아보세요.
- Chrome
Chrome 115의 새로운 기능
ScrollTimeline 및 ViewTimeline을 사용하여 사용자 환경을 향상하는 스크롤 기반 애니메이션을 만듭니다. 분리 프레임은 다른 개인 정보 보호 샌드박스 API와 함께 작동하여 관련 콘텐츠를 삽입하는 동시에 불필요한 컨텍스트 공유를 방지합니다. Topics API를 사용하면 브라우저에서 사용자의 개인 정보를 보호하면서 사용자의 관심분야에 관한 정보를 서드 파티와 공유할 수 있으며 그 밖에도 다양한 기능이 제공됩니다.
- Chrome
Chrome 확장 프로그램은 어떻게 되나요?
올해 지금까지 Chrome 확장 프로그램의 변경사항과 개발자가 기대할 수 있는 향후 확장 프로그램 기능에 대한 개요입니다.
- Chrome 확장 프로그램
- Chrome
스크롤 기반 애니메이션 성능에 관한 우수사례
새 API는 스크롤 기반 애니메이션을 구현하는 기존 방법보다 훨씬 원활합니다.
- Chrome
DevTools 팁: 녹음기로 사용자 플로우 녹화 및 재생
DevTools의 Recorder 패널을 사용하여 사용자 흐름을 녹화, 재생, 디버그하는 방법을 알아봅니다.
- Chrome
- Chrome DevTools
서비스 워커에서 WebSocket 사용
Chrome 확장 프로그램에서 WebSocket에 연결하는 방법에 대한 단계별 안내입니다.
- Chrome 확장 프로그램
WebRTC: 기존 getStats() 이전 가이드
iOS에서 Chrome용 Safari Web Inspector 디버깅을 사용하는 방법을 알아보세요.
- Chrome
DevTools 팁: 로컬 및 세션 저장소
애플리케이션 > 로컬 저장소 및 세션 저장소를 사용하여 키-값 쌍을 디버깅합니다.
- Chrome
- Chrome DevTools
DevTools의 새로운 기능 (Chrome 116)
누락된 스타일시트 문제를 더 빠르게 식별하고 디버그하는 데 도움이 되는 여러 가지 개선사항이 DevTools에 적용되었습니다. 네트워크 패널은 Initiator 열에 로드되지 않은 스타일시트를 참조하는 정확한 줄에 대한 링크를 일관되게 채웁니다. 문제 패널에는 잘못된 URL, 요청 실패, 잘못 배치된 @import 문을 비롯한 모든 스타일시트 로드 문제가 표시됩니다. Chromium 문제: 1440626, 1442198, 1453611 요소
- Chrome DevTools
- Chrome
위치정보 사용
Chrome 확장 프로그램 서비스 워커, 팝업, 측면 패널 또는 콘텐츠 스크립트에서 위치정보를 사용하는 방법
- Chrome 확장 프로그램
WebGPU의 새로운 기능 (Chrome 115)
지원되는 WGSL 언어 확장 프로그램, Direct3D 11의 실험적 지원 등이 포함되어 있습니다.
- Chrome
- WebGpu
Chrome for Testing: 브라우저 자동화를 위한 안정적인 다운로드
Chrome for Testing은 특히 웹 앱 테스트 및 자동화 사용 사례를 대상으로 하는 새로운 Chrome 버전입니다.
- Chrome
- Chrome for Testing
C/C++ WebAssembly 디버그
Chrome DevTools를 사용하여 C/C++ WebAssembly에서 버그를 찾고 수정하는 방법을 알아보세요.
- Chrome DevTools
Photoshop에서 메모리에 들어갈 수 있는 것보다 큰 파일로 작업하던 문제를 해결한 방법
Adobe가 대표적인 Photoshop 앱의 웹 버전에서 사용자가 가장 큰 파일도 수정할 수 있도록 한 방법을 알아보세요. 이 도움말은 동영상으로도 제공됩니다. 2021년 Adobe는 Chrome 엔지니어링팀과 협력하여 Photoshop 버전을 웹에 제공 했습니다. 이 소프트웨어는 SIMD, 원본 비공개 파일 시스템 의 고성능 저장소, 캔버스의 P3 색상 공간, Lit 을 사용한 웹 구성요소와 같은 기능을 통해 WebAssembly를 혁신적으로
- Chrome
벡터 이미지 편집 앱 Boxy SVG에서 사용자가 좋아하는 로컬 글꼴을 선택할 수 있도록 Local Font Access API를 사용하는 방법
로컬 글꼴 액세스 API는 이름, 스타일, 모음과 같은 상위 수준 세부정보와 기본 글꼴 파일의 원시 바이트를 비롯하여 로컬에 설치된 사용자의 글꼴 데이터에 액세스하는 메커니즘을 제공합니다. SVG 편집 앱 Boxy SVG에서 이 API를 사용하는 방법을 알아봅니다. 이 도움말은 동영상으로도 제공됩니다. Boxy SVG 는 벡터 그래픽 편집기입니다. 주요 사용 사례는 삽화, 로고, 아이콘, 기타 그래픽 디자인 요소를 만들기 위해 SVG 파일
- Chrome
WebGPU (Chrome 114)의 새로운 기능
자바스크립트 최적화 등
- Chrome
- WebGpu
변형 이벤트가 Chrome에서 삭제됩니다.
변형 이벤트의 지원 중단 및 예정된 삭제를 발표하고 2024년 7월 삭제 전에 코드를 마이그레이션하는 방법을 공유합니다.
- Chrome
SVG 요소의 데이터 URL에서 이전
데이터 지원: SVG 요소의 URL이 삭제됩니다. 다른 서비스로 이전하는 것이 좋습니다.
- Chrome
Chrome 115 베타
CSS 표시 속성, WebGPU용 WGSLLanguageFeatures, HTTPS 업그레이드 등에 대한 여러 키워드
- Chrome
새로운 Side Panel API를 사용하여 우수한 사용자 환경 설계
Chrome 확장 프로그램용 새로운 Side Panel API를 소개합니다.
- Chrome
Chrome 114의 새로운 기능
Chrome 114가 출시됩니다. Chrome 114가 출시됩니다. 텍스트 줄바꿈: 균형 있는 텍스트 레이아웃, 독립적인 파티션 상태가 있는 쿠키, 새로운 Popover API를 통해 그 어느 때보다 쉽게 팝오버를 수행할 수 있으며 그 밖에도 다양한 기능이 제공됩니다.
- Chrome
게임 편집기인 Construct 3에서 사용자가 File System Access API를 사용하여 게임을 저장할 수 있게 하는 방법
File System Access API를 사용하면 읽기, 쓰기, 파일 관리 기능을 사용할 수 있습니다. Construct 3에서 이 API를 사용하는 방법을 알아봅니다. 이 도움말은 동영상으로도 제공됩니다. Construct 3 는 토마스와 애슐리 굴렌 형제가 개발한 게임 편집기입니다. 현재 게임 편집기의 세 번째 버전에서는 이전에 Windows 및 NW.js 용으로 빌드한 후 두 가지 모두 완전히 '브라우저가 새로운 운영체제라고 [베팅]'
- Chrome
DevTools의 새로운 기능 (Chrome 115)
요소 패널에 하위 그리드 의 새 subgrid 배지가 추가되었습니다. 이 기능은 현재 Chrome Canary에서 실험용으로 제공됩니다. 하위 그리드이므로 상위 요소에서 트랙의 수와 크기를 상속받는 중첩된 그리드를 검사하고 디버그하려면 배지를 클릭합니다. 표시 영역의 요소 위에 열, 행, 숫자를 표시하는 오버레이를 전환합니다. 요소 패널의 모든 배지 목록은 배지 참조 를 참고하세요. Chromium 문제: 1442536 요소 > 스타일
- Chrome
- Chrome DevTools
Chrome에서 document.domain 수정이 사용 중지됩니다.
웹사이트에서 document.domain 설정을 사용하는 경우 조치가 필요합니다.
- Chrome
두 번째 Compute Pressure 오리진 트라이얼 발표
웹 개발자가 컴퓨팅 압력을 모니터링할 수 있는 Chrome의 새로운 오리진 트라이얼입니다.
- Chrome
linear() 이징 함수를 사용하여 CSS에서 복잡한 애니메이션 곡선 만들기
점 사이에 선형으로 보간되는 CSS의 이징 함수인 linear()를 도입하여 바운스 및 스프링 효과를 다시 만들 수 있습니다.
DevTools 팁: 작업공간
Workspace를 사용하여 DevTools에서 변경한 내용을 로컬 소스 파일에 저장합니다.
- Chrome DevTools
- Chrome
매니페스트 - 백그라운드
manifest.json의 백그라운드 속성에 대한 참조 문서입니다.
- Chrome 확장 프로그램
팝오버 API 소개
새로운 팝오버 API를 사용하여 도움말, 메뉴 등을 빌드하는 방법을 알아보세요.
- Chrome
LEGO® Education에서 웹 블루투스 및 Web Serial API를 사용하는 방법
LEGO Education은 웹을 활용하여 LEGO 모델과 컴퓨터를 최대한 간단하게 연결합니다.
- Chrome
Aurora의 새로운 기능
Chrome Aurora팀의 최근 소식과 2023년 로드맵을 알아보세요.
- Chrome
3D 모델 편집기 Blockbench가 EyeDropper API를 사용하여 사용자가 어디서나 색상을 선택할 수 있도록 하는 방법
EyeDropper API는 사용자가 브라우저 창 외부 등 화면에서 색상을 샘플링할 수 있는 스포이트 도구를 만드는 메커니즘을 제공합니다. 3D 모델 편집기 Blockbench가 코드베이스에서 이 API를 사용하는 방법을 알아봅니다. 이 도움말은 동영상으로도 제공됩니다. Blockbench 는 픽셀 아트 텍스처가 있는 로우 폴리 모델을 위한 무료의 최신 모델 편집기입니다. Minecraft 를 플레이한 적이 있다면 Blockbench로 만든
- Chrome
이미지 편집 앱 Photopea에서 File Handling API를 사용하여 사용자가 파일 탐색기에서 파일을 열 수 있도록 하는 방법
File Handling API를 사용하면 웹 애플리케이션이 애플리케이션에서 지원할 수 있는 파일 형식의 파일 핸들러로 등록할 수 있습니다. 이미지 편집 애플리케이션 Photopea에서 이 API를 사용하는 방법을 알아보세요. 이 도움말은 동영상으로도 제공됩니다. Photopea 는 이반 쿠츠키르 가 개발한 무료 온라인 이미지 편집기입니다. 이반은 2012년에 앱 개발을 시작했으며 Photopea에 추가한 주요 기능을 공유하는 블로그 를
- Chrome
Storage 버킷 오리진 트라이얼 사용 가능
Storage Standard는 영구 저장용량 및 할당량의 추정치를 위한 API와 플랫폼 저장소 아키텍처를 정의합니다. 메모리 압박 시의 영구 저장소 제거를 보다 예측 가능하게 하는 API를 실험하고 있습니다. Chrome 115부터 Chrome 118까지 실행되는 오리진 트라이얼에서 Storage Buckets API를 사용해 보세요.
- Chrome
웹 SQL 지원 중단 타임라인 업데이트됨
Web SQL은 Chromium 119에서 완전히 삭제되었습니다.
- Chrome
CSS 및 UI의 새로운 기능: I/O 2023 에디션
Google I/O 2023에서 놓쳐서는 안 될 주요 CSS 및 UI 기능 20가지를 소개합니다.
- Chrome
Android 2023 웹의 새로운 기능
Android에 웹을 가져오는 도구를 업데이트합니다. 개인 정보 보호 기능이 개선되고 WebView의 대형 화면 지원 개선, 맞춤 탭의 부분 맞춤 탭, PWA의 간편한 설치 및 통합 기능, TWA를 위한 Play 스토어 결제 관리 등이 제공됩니다.
- Chrome
WebGPU: 브라우저에서 최신 GPU 액세스 활용
WebGPU가 GPU의 성능을 활용해 머신러닝 성능과 그래픽 렌더링을 개선하는 방법을 알아보세요.
- Chrome
iframe 간에 자동 완성 공유: 초기 제안
일부 양식의 경우 iframe에 입력란이 있어 브라우저 자동 완성에 문제가 발생합니다. 공유 자동 완성을 사용하면 상위 프레임에서 교차 출처 iframe의 신뢰성을 지정하여 사용자에게 더 나은 자동 완성 환경을 지원할 수 있습니다.
- Chrome
Google I/O의 10가지 업데이트
Google I/O 2023에서 공유한 주요 업데이트와 새로운 출시를 통해 개발자가 사용자에게 강력한 환경을 더 쉽게 제공할 수 있도록 지원하는 방법을 알아보세요.
- Chrome
Chrome DevTools로 양식 문제 찾기
Chrome DevTools 팀은 양식 문제를 찾고 자동 완성을 디버그하는 데 도움이 되는 새로운 기능을 추가로 구축하고 있습니다. 이러한 기능은 초기 설계 및 구현 단계에 있으므로 여러분의 테스트와 의견이 필요합니다.
- Chrome
WebDriver BiDi: 2023년 상태 업데이트
이 도움말에서는 2023년 WebDriver BiDi의 새로운 기능을 간략하게 설명합니다.
- Chrome
Google I/O 준비
나만의 일정목록을 만들어 Google I/O를 준비하세요.
- Chrome
스크롤 기반 애니메이션으로 스크롤 시 요소에 애니메이션 적용
스크롤 타임라인 및 뷰 타임라인을 사용하여 선언적 방식으로 스크롤 기반 애니메이션을 만드는 방법을 알아보세요.
DevTools의 새로운 기능 (Chrome 114)
DevTools는 기본적으로 설정 > 실험 > WebAssembly 디버깅: DWARF 지원 사용 설정 을 사용 설정합니다. 자세한 내용은 최신 도구로 WebAssembly 디버깅 을 참고하세요. 이 실험을 통해 Wasm 앱에서 실행을 일시중지하고 C 및 C++ 코드를 디버그할 수 있으며, 모든 디버깅 정보를 사용할 수 있습니다. Wasm 디버깅을 테스트하려면 C/C++ DevTools 지원 (DWARF) 확장 프로그램 을 설치하고
- Chrome DevTools
- Chrome
Chrome 113의 새로운 기능
Chrome 113이 출시됩니다. WebGPU를 사용하면 웹에서 고성능 3D 그래픽과 데이터 병렬 계산을 수행할 수 있습니다. 이제 devtools는 개인 정보 보호 샌드박스의 일부인 네트워크 응답 헤더, 퍼스트 파티 세트를 재정의할 수 있습니다. 이를 통해 조직은 관련 사이트의 출시가 시작되었음을 선언할 수 있으며, 그 밖에도 다양한 기능이 제공됩니다.
- Chrome
Chrome 114 베타
CSS 헤드라인 균형 조정, CHIPS, 스크롤 엔드 이벤트, 팝오버
- Chrome
확장 프로그램 서비스 워커 정보
확장 프로그램 서비스 워커는 확장 프로그램의 중앙 이벤트 핸들러입니다. 이 점이 웹 서비스 워커와 차별화되는 요소입니다.
- Chrome 확장 프로그램
서비스 워커의 이벤트
확장 프로그램 서비스 워커는 표준 서비스 워커 이벤트 및 확장 프로그램 API의 여러 이벤트에 모두 응답합니다.
- Chrome 확장 프로그램
확장 프로그램 서비스 워커 수명 주기
확장 서비스 워커는 표준 서비스 워커 이벤트 및 확장 네임스페이스의 이벤트 모두에 응답합니다. 확장 프로그램을 사용할 때 한 유형이 다른 유형을 따르는 경우가 많기 때문에 함께 표시됩니다.
- Chrome 확장 프로그램
확장 프로그램 서비스 워커 기본사항
확장 서비스 워커는 웹 서비스 워커와 다른 방식으로 설치되고 업데이트됩니다.
- Chrome 확장 프로그램
카메라 배경 흐리게 처리
웹 개발자가 카메라 배경 블러를 제어할 수 있는 Chrome의 새로운 오리진 트라이얼입니다.
- Chrome
더 빠른 AV1 인코딩으로 영상 통화 개선
Chrome 113에서는 Chrome 오픈 미디어팀의 AV1 소프트웨어 인코더 개선사항이 포함되어 있습니다.
- Chrome
WebGPU의 새로운 기능 (Chrome 113)
WebGPU는 오리진 트라이얼에 WebCodecs가 통합된 상태로 Chrome에 제공됩니다.
- Chrome
- WebGpu
CSS 미디어 쿼리 업데이트
화면의 새로고침 빈도 기능에 맞게 UI를 조정합니다.
DevTools 팁: DevTools의 소스 맵
DevTools에서 소스 맵을 사용하여 배포하는 대신 원본 코드를 디버그합니다.
- Chrome
- Chrome DevTools
개발자 리소스: 소스 맵 보기 및 수동으로 로드
개발자 리소스 패널을 사용하여 소스 맵이 성공적으로 로드되었는지 확인하고 수동으로 로드합니다.
- Chrome DevTools
사용자 참여도 측정
맞춤 탭에서 사용자 참여도를 측정하는 방법
맞춤 상호작용 추가
맞춤 탭에 맞춤 작업을 추가하는 방법
준비 및 프리패치: 맞춤 탭 서비스 사용
사용자 환경을 개선하기 위해 맞춤 탭 서비스를 활용하는 방법을 알아봅니다.
부분적인 맞춤 탭으로 멀티태스킹
사용자가 웹 콘텐츠를 보는 동안 앱과 상호작용할 수 있도록 부분적인 맞춤 탭을 사용하는 방법을 알아봅니다.
UI 맞춤설정
앱의 디자인과 분위기에 맞게 맞춤 탭을 만드는 방법
시작하기
Android 앱에서 맞춤 탭을 실행하는 방법
데스크톱에서 더욱 풍부한 UI 설치 가능
휴대기기 및 앱 스토어는 사용자가 소프트웨어를 검색, 평가, 설치하는 방식을 변화시켰습니다. 이제 웹 앱은 개발자가 설치 시점에 앱을 강조표시할 수 있는 노출 영역을 제공합니다.
- Chrome
돌아보기: 테스트 자동화의 진화
웹 테스트 자동화의 발전 여정
- Chrome
오디오 녹음 및 화면 캡처
탭, 창, 화면에서 오디오 또는 동영상을 녹음하는 방법
- Chrome 확장 프로그램
Chromium Chronicle #33: 뷰 AnimationBuilder
뷰에서 레이어 기반 애니메이션을 사용하면 성능을 개선하고 버벅거림이 될 수 있지만 설정하기가 다소 어렵습니다. 이 AnimationBuilder 드림 클래스는 복잡성을 크게 줄이고 레이어의 가독성을 개선할 수 있습니다. 있습니다. 다음 두 영역 사이의 연속 크로스 페이드를 애니메이션해야 한다고 가정해 봅시다. 뷰(예: 다음 이미지) 다음은 레이어 애니메이션 API를 직접 사용하여 이를 수행할 수 있는 방법의 예입니다. 다음은
- Chrome
CSS 레이아웃과 소스 순서 연결 해제 해결
문서 소스에서 연결이 끊긴 순서로 항목을 정렬하는 레이아웃 메서드 문제에 관한 제안된 솔루션에 관한 의견이 필요합니다.
- Chrome
DevTools의 새로운 기능 (Chrome 113)
이제 네트워크 패널에서 응답 헤더를 재정의할 수 있습니다. 이전에는 HTTP 응답 헤더를 실험하려면 웹 서버에 액세스해야 했습니다. 응답 헤더 재정의를 사용하면 다음을 포함하되 이에 국한되지 않는 다양한 헤더의 수정사항을 로컬에서 프로토타입할 수 있습니다. 헤더를 재정의하려면 네트워크 > 헤더 > 응답 헤더 로 이동하여 헤더 값 위로 마우스를 가져간 다음 아이콘을 클릭하고 수정합니다. 맞춤 헤더를 추가할 수도 있습니다. 한곳에서 모든
- Chrome DevTools
- Chrome
새로운 Breakpoints 사이드바를 사용하여 더 빠르게 디버그하는 방법
중단점 삭제 또는 사용 중지와 같은 일반적인 작업을 더 쉽게 수행할 수 있도록 중단점 사이드바를 다시 디자인하여 클릭 한 번으로 작업을 수행할 수 있도록 했습니다.
- Chrome DevTools
- Chrome
Chrome에 WebGPU 제공
Chrome팀은 웹에서 고성능 3D 그래픽과 데이터 병렬 계산을 지원하는 WebGPU를 출시합니다.
- Chrome
- WebGpu
Chrome 113 베타
새로운 CSS 미디어 기능, linear() 이징 함수 및 WebGPU가 추가되었습니다.
- Chrome
더 빠른 Chrome 출시
Chrome 114부터 출시를 위한 브랜치와 안정화 버전 출시 사이의 시간이 줄어듭니다.
- Chrome
Chrome 112의 새로운 기능
Chrome 112가 출시됩니다. 이제 CSS는 중첩 규칙을 지원하고, 대화상자 요소에 초기 포커스를 설정하는 알고리즘이 업데이트되었으며, 서비스 워커의 노옵(no-op) 가져오기 핸들러를 앞으로 건너뛰어 탐색 속도를 높이고, 이외에도 많은 기능을 지원합니다.
- Chrome
서비스 워커로 이벤트 처리
확장 프로그램 서비스 워커를 만들고 디버그하는 방법을 알아봅니다.
- Chrome 확장 프로그램
DevTools 팁: 소스 맵이란 무엇인가요?
소스 맵이 배포 대신 원본 코드를 디버그하는 데 어떻게 도움이 되는지 알아보세요.
- Chrome
- Chrome DevTools
ignoreList 소스 맵 확장 프로그램
ignoreList 소스 맵 확장 프로그램을 사용하여 Chrome DevTools의 디버깅 환경을 개선합니다.
- Chrome
Web SQL에서 SQLite Wasm으로: 데이터베이스 이전 가이드
출처 비공개 파일 시스템을 기반으로 하는 SQLite Wasm을 사용하면 지원 중단된 Web SQL 데이터베이스 기술을 다목적으로 대체할 수 있습니다. 이 도움말에서는 웹 SQL에서 SQLite Wasm으로 데이터를 마이그레이션하는 방법을 안내합니다. Web SQL 지원 중단 및 삭제 게시물에서 Web SQL 데이터베이스 기술의 지원 중단을 발표했습니다. 기술 자체는 지원 중단될 수 있지만 기술에서 다루는 사용 사례는 그렇지 않습니다. 따라서
- Chrome
Fastly와의 파트너십 - FLEDGE의 k-익명성 서버를 위한 Oblivious HTTP 릴레이
Google은 Fastly와 협력하여 FLEDGE용 k-익명성 서버를 구현함으로써 Chrome의 개인 정보 보호 조치를 개선하고 있습니다. 이 구현에서 OHTTP 릴레이를 통해 데이터가 릴레이되는 경우 Google 서버는 최종 사용자의 IP 주소를 수신하지 않습니다. k-익명성 서버는 FLEDGE의 전체 구현을 향한 점진적인 단계입니다.
- Chrome
WebView에서 X-Requested-With 헤더를 전송하도록 선택하여 사용자 개인 정보 보호 개선
Google은 X-Requested-With 헤더가 전송되는 시점을 제한하여 사용자 개인 정보를 보호하고자 합니다.
- Chrome
코드 업데이트
세 섹션 중 첫 번째 섹션에서는 확장 서비스 워커의 일부가 아닌 코드에 필요한 변경사항을 설명합니다.
- Chrome 확장 프로그램
매니페스트 업데이트
Manifest.json 파일은 Manifest V2와 약간 다른 형식이 필요합니다.
- Chrome 확장 프로그램
Chrome 112 베타
CSS 중첩, animation-composition, FormData 생성자의 제출자 매개변수
- Chrome
서비스 워커로 마이그레이션
서비스 워커는 확장 프로그램이 필요할 때만 실행되도록 지원하여 리소스를 절약합니다.
- Chrome 확장 프로그램
차단 웹 요청 리스너 교체
세 섹션 중 두 번째 섹션은 확장 서비스 워커의 일부가 아닌 코드에 필요한 변경사항을 설명합니다.
- Chrome 확장 프로그램
DevTools의 새로운 기능 (Chrome 112)
Recorder 에서는 확장 프로그램을 사용하여 DevTools에 삽입할 수 있는 맞춤 재생 옵션을 지원합니다. 예시 확장 프로그램 을 사용해 봅니다. 새 맞춤 재생 옵션을 선택하여 맞춤 재생 UI를 엽니다. 필요에 맞게 Recorder 를 맞춤설정하고 도구와 통합하려면 자체 확장 프로그램을 개발해 보세요. chrome.devtools.recorder API 를 살펴보고 확장 프로그램 예시 를 더 확인해 보세요. Chromium 문제:
- Chrome DevTools
- Chrome
Chrome 111에서 SPA 뷰 전환 도입
View Transition API는 단일 페이지 앱 내에서 페이지 전환을 허용하며, 나중에 다중 페이지 앱을 포함합니다.
- Chrome
확장 프로그램 보안 개선
확장 서비스 워커의 일부가 아닌 코드에 필요한 변경사항을 설명하는 세 섹션 중 마지막 섹션.
- Chrome 확장 프로그램
CSS 중첩
즐겨 사용하는 CSS 전처리기 기능 중 하나인 중첩 스타일 규칙이 이제 이 언어에 내장되어 있습니다.
Chrome 111의 새로운 기능
Chrome 111이 출시됩니다. View Transitions API를 사용해 단일 페이지 앱에서 세련된 전환을 만들고 CSS 색상 수준 4를 지원하여 색상을 한 단계 더 발전시키세요. 새로운 색상 기능을 최대한 활용할 수 있는 스타일 패널의 새로운 도구를 살펴보세요. 이외에도 많은 기능이 있습니다.
- Chrome
Project Fugu API 쇼케이스의 새로운 홈
Project Fugu API 쇼케이스는 Project Fugu의 일부인 API를 사용하는 앱 모음입니다. Google의 교차 회사 기능 프로젝트 (코드명 Project Fugu )는 웹 앱이 플랫폼별 앱에서 할 수 있는 모든 작업을 할 수 있도록 하는 것을 목표로 합니다. Google 외에도 Microsoft, Intel, 삼성 등 여러 기업이 프로젝트 파트너로 참여하고 있습니다. 이 프로젝트는 사용자 보안, 개인 정보 보호, 신뢰, 기타
- Chrome
개인 정보 보호가 중요합니다. 이제 사용자가 화면을 더 현명하게 공유합니다.
우리는 촉구 이론을 사용하여 화상 회의 중에 사용자가 자지를 쓰지 않도록 했습니다.
- Chrome
CSS 앵커 포지셔닝으로 요소 서로 연결
요소를 트릭 없이 적응형 방식으로 배치하는 데 도움이 되는 새로운 API가 웹 플랫폼에 도입됩니다.
- Chrome
CHIPS의 발전을 위한 업계와의 협력
CHIPS를 구현하는 과정에서 Chrome팀이 당면한 두 가지 과제와 제안 설계를 발전시키는 데 커뮤니티의 의견이 얼마나 중요한 역할을 했는지 살펴봅니다.
- Chrome
글꼴 대체를 위한 프레임워크 도구
Next.js, Nuxt.js 및 기타 라이브러리가 CLS 없이 대체 글꼴 CSS를 생성하는 데 어떻게 도움이 되는지 알아보세요.
- Chrome
기본 메시지
Chrome 확장 프로그램에서 기본 애플리케이션과 메시지를 교환합니다.
- Chrome 확장 프로그램
표준 논의에서 행동 표준 개선
더욱 전문적이고 존중하며 포용적인 토론을 장려하는 Chrome팀의 목표
- Chrome
스타일 쿼리 시작하기
개발자는 스타일 쿼리를 통해 @container 규칙을 사용하여 상위 요소의 스타일 값을 쿼리할 수 있습니다. Chrome 111에서 CSS 맞춤 속성의 스타일 쿼리가 안정적으로 출시됩니다. 시작하는 방법을 알아보세요.
DevTools 팁: CSS 문제 발견
Styles 및 Computed 창을 사용하여 DevTools의 CSS 문제를 탐색합니다.
- Chrome
- Chrome DevTools
Chrome 확장 프로그램 관련 도움말 보기
문서에서 다루지 않은 질문에 대한 도움말을 찾을 수 있는 위치
- Chrome 확장 프로그램
위치
위치 탭 참조입니다.
- Chrome DevTools
기기
기기 탭 참조입니다.
- Chrome DevTools
단축어
바로가기 탭 참조입니다.
- Chrome DevTools
실험
실험 탭 참조입니다.
- Chrome DevTools
DevTools의 새로운 기능 (Chrome 111)
HD 색상, 향상된 중단점 UX 등을 디버깅합니다.
- Chrome DevTools
- Chrome
작업공간
작업공간 탭 참조입니다.
- Chrome DevTools
설정 개요
설정 개요
- Chrome DevTools
글꼴 대체 개선
새로운 `size-Adjust` 및 글꼴 측정항목 재정의를 통해 개발자는 웹 글꼴과 근접하게 일치하는 글꼴 대체를 만들 수 있습니다. 이렇게 하면 레이아웃 변경이 줄어듭니다.
- Chrome
Chrome 111 베타
새로운 CSS 색상 유형 및 색상 공간, CSS 삼각함수 및 View Transitions API
- Chrome
Lighthouse 10의 새로운 기능
채점 및 감사가 새로워진 Lighthouse 10이 출시되었습니다.
- Chrome
WebHID를 사용하여 Stadia 컨트롤러와 대화하기
플래시된 Stadia 컨트롤러는 표준 게임패드처럼 작동하므로 Gamepad API를 사용하여 일부 버튼에만 액세스할 수 있습니다. 이제 WebHID를 사용하여 누락된 버튼에 액세스할 수 있습니다. Stadia가 종료된 이후 많은 사람들이 컨트롤러가 쓰레기 매립장에 버려지는 쓸모없는 하드웨어가 될 것이라고 우려했습니다. 다행히 Stadia팀은 Stadia 블루투스 모드 페이지로 이동하여 컨트롤러에 플래시할 수 있는 맞춤 펌웨어를 제공하여
- Chrome
Chrome 플래그란 무엇인가요?
Chrome에서 추가 디버깅 도구를 사용 설정하거나 새로운 기능 또는 실험적 기능을 사용해 보세요.
Chrome 110의 새로운 기능
Chrome 110이 출시됩니다. 새로운 :picture-in-picture 유사 클래스를 사용하여 PIP 요소에 맞춤 스타일을 추가하고, launch_handler로 웹 앱 실행 동작을 설정하며, iframe에서 사용자 인증 정보가 없는 속성을 사용하여 교차 출처 삽입 정책을 설정하지 않은 서드 파티 콘텐츠를 삽입하는 등 다양한 기능을 제공합니다.
- Chrome
CrUX History API 사용 방법
CrUX History API와 이를 사용하여 사용자 환경 동향을 추적하는 방법을 알아보세요.
- Chrome UX 보고서
DevTools의 새로운 기능 (Chrome 110)
새로고침 시 성능 패널을 지우고 녹음기에서 코드를 보고 강조표시하는 등의 작업을 합니다.
- Chrome DevTools
- Chrome
서드 파티 iframe의 Web Share API에 관한 새로운 요구사항
개인 정보 보호 및 보안을 강화하기 위해 이제 서드 파티 iframe의 Web Share API 호출을 명시적으로 허용해야 합니다. 이 도움말에서는 Web Share API의 잠재적 브레이킹 체인지를 설명합니다. 이 변경사항은 이미 Firefox에 적용되었으며 Chrome 110부터 적용될 예정이며 곧 Safari에도 적용 될 예정입니다. Web Share API 를 사용하면 텍스트, URL 또는 파일을 공유할 수 있습니다. 가장 간단한 형태의
- Chrome
Chromium Chronicle #32: 패치 차이에 유의하기
Chromium 개발자가 n-day 악용 가능성을 줄이는 방법을 알아보세요.
- Chrome
고화질 CSS 색상 가이드
CSS 색상 4는 광범위한 색상 도구와 기능을 웹에 제공합니다.
새로운 CSS 색상 공간 소개
CSS 색상 4는 더 많은 색상, 조작 기능, 개선된 그라데이션 등 폭넓은 색상 영역 도구와 기능을 웹에 제공합니다.
- Chrome
PIP 모드의 미래
상시 사용 설정 창에서 임의의 HTML 콘텐츠를 사용할 수 있는 Chrome 오리진 트라이얼에 관한 소식입니다.
- Chrome
더 많은 색상과 새로운 공간에 액세스하세요.
CSS 색상 4는 광범위한 색상 도구와 기능을 웹에 제공합니다.
HD CSS 색상으로 이전
CSS 색상 4는 광범위한 색상 도구와 기능을 웹에 제공합니다.
비공개 네트워크 액세스 업데이트: 지원 중단 체험판 연장 발표
Chrome에서는 비공개 네트워크 액세스 사양에 따라 비보안 공개 웹사이트에서 비공개 네트워크 엔드포인트에 액세스하는 기능이 지원 중단됩니다. 지원 중단 체험판은 Chrome 113까지 제공됩니다.
- Chrome
CSS color-mix()
지원되는 색상 공간의 색상을 CSS에서 바로 혼합할 수 있습니다.
- Chrome
DevTools 팁: PWA 디버깅
DevTools로 프로그레시브 웹 앱을 디버그하세요.
- Chrome DevTools
- Chrome
확장 서비스 워커 수명 연장
확장 프로그램 서비스 워커가 이벤트를 수신하는 한 계속 활성 상태를 유지할 수 있습니다. 이렇게 하면 확장 프로그램 서비스 워커의 안정성이 향상되지만 피해야 할 문제가 있습니다.
- Chrome
- Chrome 확장 프로그램
Manifest V3의 화면 밖 문서
Chrome 확장 프로그램 개발을 위한 Offscreen Documents API를 소개합니다.
- Chrome 확장 프로그램
- Chrome
DevTools의 새로운 기능
최신 DevTools 변경사항을 알아보세요.
- Chrome DevTools
Chrome Android의 웹 앱용 기본 오프라인 페이지
Chrome 109부터는 Android에 설치된 웹 앱에 자체 오프라인 환경이 없는 경우 브라우저에서 앱이 현재 오프라인 상태임을 나타내는 기본 페이지가 자동으로 생성됩니다.
- Chrome
새 자바스크립트 이벤트인 Scrollend
시간 제한 함수를 삭제하고 버그를 없애세요. 여기 정말 필요한 이벤트가 있습니다. scrollend입니다.
- Chrome
CSS 초기 문자로 감소 한도 관리
드롭 캡의 스타일을 지정할 수 있는 흥미로운 해결 방법을 더 이상 사용하지 마세요.
- Chrome
유용한 웹 기능 발견
브라우저에서 지원하는 고급 웹 기능은 무엇인가요? 이러한 기능을 사용하는 웹 앱은 무엇일까요? 이러한 질문에 답하려면 브라우저 테스트 사이트와 브라우저 확장 프로그램을 확인해 보세요. Project Fugu는 웹 기능의 격차를 메우기 위한 기업 간 노력으로, 웹에서 새로운 유형의 애플리케이션을 실행할 수 있도록 합니다. 더 구체적으로 말하자면, 이는 앱 개발자가 이전에는 불가능했던 사용 사례를 지원하는 데 사용할 수 있는 새 API를 브라우저에
- Chrome
쿠키 만료 및 최대 기간 속성의 상한선
Chrome 출시 M104 (2022년 8월)부터 쿠키에서 더 이상 만료일을 향후 400일 이후로 설정할 수 없습니다.
- Chrome
Chrome 110 베타
CSS 초기 문자, 웹 앱 실행 핸들러, FedCM API를 위한 교차 출처 iframe 지원 등
- Chrome
페이지를 뒤로-앞으로 캐시에서 복원할 수 있는지 확인합니다.
Lighthouse를 사용하여 뒤로-앞으로 캐시에서 페이지를 복원할 수 있는지 테스트하는 방법
사용자 인증 정보가 없는 iframe: COEP 환경에 간편하게 iframe 삽입
사용자 인증 정보가 없는 iframe은 Chrome 110에서 구현됩니다. 이를 통해 개발자는 새로운 임시 컨텍스트를 사용하여 서드 파티 iframe에서 문서를 로드할 수 있습니다. 따라서 더 이상 COEP 삽입 규칙이 적용되지 않습니다. 이제 COEP를 사용하는 개발자는 COEP 자체를 사용하지 않는 타사 iframe을 삽입할 수 있습니다.
- Chrome
원본 비공개 파일 시스템에서 지원하는 브라우저에 있는 SQLite Wasm
SQLite를 사용하여 웹에서 모든 스토리지 요구사항을 성능적으로 처리하세요. SQLite 는 널리 사용되고 있는 오픈소스 의 경량 삽입형 관계형 데이터베이스 관리 시스템입니다. 많은 개발자가 이를 사용하여 사용하기 쉬운 구조화된 방식으로 데이터를 저장합니다. 크기가 작고 메모리 요구사항이 낮기 때문에 SQLite는 휴대기기, 데스크톱 애플리케이션, 웹브라우저에서 데이터베이스 엔진으로 사용되는 경우가 많습니다. SQLite의 핵심 기능 중
- Chrome
웹 오디오에서 대상 출력 장치 변경
웹 오디오에서 프로그래매틱 방식으로 오디오 출력 대상을 변경하는 방법을 알아보세요.
- Chrome
파비콘을 가져오는 중
웹사이트의 파비콘을 만드는 방법
- Chrome 확장 프로그램
DevTools의 새로운 기능 (Chrome 109)
녹음기에서 단계를 스크립트로 복사하고 공연 녹음 파일의 실제 함수 이름 등을 복사합니다.
- Chrome DevTools
- Chrome
Chrome 109의 새로운 기능
Chrome 109가 출시됩니다. 이제 Android에서 Origin Private File System API를 사용할 수 있고, CSS에 일련의 새로운 속성이 있으며, MathML 코어를 지원하여 HTML에 수학 표기법을 쉽게 추가할 수 있으며, 그 밖에도 훨씬 더 많은 기능이 있습니다.
- Chrome
DevTools 팁: Project Fugu API 디버깅
DevTools를 사용하여 Project Fugu API를 디버그합니다.
- Chrome DevTools
- Chrome
RenderingNG 심층 분석: LayoutNG 블록 조각화
이제 LayoutNG의 블록 조각화가 완료되었습니다. 이 도움말에서 작동 원리와 중요성에 대해 알아보세요.
- Chromium
Chrome 110에서 출시 일정 변경
Chrome 110부터 초기 공개 버전이 소수의 사용자를 대상으로 출시됩니다.
- Chrome
Chrome 변형 이해하기
Chrome이 새로운 브라우저 기능을 테스트하는 메커니즘
Chrome 출시 채널이란 무엇인가요?
Chrome에서 카나리아, 개발자, 베타, 안정화 출시 채널을 사용하여 새로운 기능을 테스트하고 업데이트를 출시하는 방법을 알아보세요.
CSS 중첩 구문 선택 도움말
CSS Working Group은 CSS의 중첩을 정의하는 최선의 방법을 두고 논쟁을 계속하고 있습니다. CSS 작성자라면 도움이 필요합니다.
- Chrome
Chrome Dev Insider: 10년 후
Chrome 웹 플랫폼팀의 업데이트 소식으로 개발자들이 의견과 대화, 업데이트를 공유하기 위해 비하인드 스토리를 들려줍니다.
- Chrome
Chrome 웹 스토어 정책 업데이트
Chrome은 Chrome 웹 스토어의 개발자 프로그램 정책을 업데이트하여 지휘하는 주 구성원을 명시하고 정책 시행에 대한 자세한 맥락을 제공하며 정책을 더 쉽게 이해할 수 있도록 하고 있습니다.
- Chrome 확장 프로그램
- Chrome
광고 관련성 극대화
서드 파티 쿠키를 사용하지 않는 광고 관련성에 관한 개인 정보 보호 샌드박스에 관한 새로운 문서입니다.
- Chrome
Chrome의 메모리 및 에너지 절약 모드에 대해 개발자가 알아야 할 사항
페이지에서 Chrome의 새로운 메모리 및 에너지 절약 모드를 원활하게 처리하는 방법을 알아보세요.
- Chrome
DevTools 팁: Device Mode
DevTools의 Device Mode로 모바일 기기를 시뮬레이션합니다.
- Chrome
- Chrome DevTools
Chrome 109 베타
MathML, getDisplayMedia()에 대한 조건부 포커스, Android의 Origin Private File System 등.
- Chrome
Chrome Android에서 보안 결제 확인
보안 결제 확인은 패스키의 힘을 빌려 피싱을 방지하는 결제 확인 기능을 웹에서 제공합니다. 이 기능은 Chrome 109부터 Chrome Android에서 사용할 수 있습니다.
- Chrome
WebAuthn 패스키 자동 완성을 사용한 양식에서 비밀번호 없는 로그인
WebAuthn 조건부 UI는 브라우저의 양식 자동 완성 기능을 활용하여 사용자가 기존의 비밀번호 기반 흐름에서 패스키로 원활하게 로그인할 수 있도록 합니다.
Chrome 확장 프로그램: 빠른 탐색을 지원하도록 API 확장
뒤로-앞으로 캐시를 지원하고 탐색을 미리 로드하는 확장 프로그램 API를 업데이트했습니다.
- Chrome
Chrome 108의 새로운 기능
Chrome 108이 출시 중입니다. 숫자 형식을 지정할 때 더 세밀하게 제어할 수 있는 새로운 Intl API를 추가했습니다. 새로운 팝업 API의 오리진 트라이얼이 있어 사용자에게 중요한 콘텐츠를 쉽게 표시할 수 있습니다. CSS 몇 가지 사항이 개선되었습니다. 이외에도 다양한 기능이 있습니다.
- Chrome
조건부 포커스로 화면 공유 개선
웹에서 화면을 공유할 때 탭 또는 창에 조건부로 포커스를 맞춥니다.
Chrome 109의 화면 공유 개선
웹의 두 가지 화면 공유 개선사항(화면 공유 시 탭 포커스를 제어하는 메커니즘과 로컬 오디오 재생을 제어하는 메커니즘)에 관한 세부정보
- Chrome
DevTools 팁: CSS 개선사항 확인
CSS 개요 패널을 사용하여 잠재적인 CSS 개선사항을 확인하세요.
- Chrome
- Chrome DevTools
잘못된 CSS, 재정의된 CSS, 비활성 CSS 찾기
CSS 속성의 문제를 한눈에 파악하세요.
- Chrome DevTools
매니페스트 - OAuth2
manifest.json의 OAuth2 속성에 대한 참조 문서입니다.
- Chrome 확장 프로그램
CrUX 대시보드
CrUX 대시보드를 사용하여 BigQuery CrUX 데이터 시각화하기
- Chrome UX 보고서
DevTools 팁: 더 빠른 DevTools 탐색
바로가기와 설정을 사용한 더 빠른 DevTools 탐색으로 워크플로 속도를 높이는 방법을 알아보세요.
- Chrome
- Chrome DevTools
모든 스토리지가 동일하게 생성되는 것은 아님: 스토리지 버킷 도입
Storage Buckets는 과도한 메모리 압박 하에서 영구 스토리지 제거를 보다 예측 가능하게 하는 API입니다.
- Chrome
Chrome 웹 스토어 정책 업데이트
Chrome은 Chrome 웹 스토어의 개발자 프로그램 정책을 업데이트하여 지휘하는 주 구성원을 명시하고 정책 시행에 대한 자세한 맥락을 제공하며 정책을 더 쉽게 이해할 수 있도록 하고 있습니다.
- Chrome
- Chrome 확장 프로그램
매니페스트 - input_components
manifest.json의 input_components 속성에 대한 참조 문서입니다.
- Chrome 확장 프로그램
Chrome 108 베타
새로운 CSS 표시 영역 단위, Federated Credential Management API, 가변 COLRv1 글꼴 등이 추가되었습니다.
- Chrome
Android용 Chrome에 적용될 표시 영역 크기 조절 동작 변경사항에 대비하기
Chrome 108의 표시 영역 크기 조절 동작에 적용되는 변경사항, Chrome이 이렇게 변경하는 이유, 사용자가 대비할 수 있는 작업을 알아봅니다.
- Chrome
Payment Handler API의 CanMakePayment 이벤트 동작 업데이트
Payment Handler API의 `canmakepayment` 서비스 워커 이벤트는 사용자가 설치된 결제 앱에 카드가 등록되어 있는지 판매자에게 알려줍니다. Chrome은 이벤트에 연결된 속성을 삭제하고 있습니다.
- Chrome
DevTools의 새로운 기능 (Chrome 108)
비활성 CSS 속성, 녹음기의 새로운 XPath 및 텍스트 선택기 등에 관한 힌트를 확인하세요.
- Chrome DevTools
- Chrome
DevTools 팁: DevTools를 여는 다양한 방법
Chrome DevTools를 여는 모든 방법을 알아보세요.
- Chrome DevTools
- Chrome
브레이킹 체인지: AccessHandles의 동기화 메서드
Emscripten과 같은 컨텍스트에서 AccessHandles 작업을 단순화하기 위해 FileSystemSyncAccessHandle 인터페이스의 메서드를 동기식으로 만듭니다.
- Chrome
Chrome 107의 새로운 기능
Chrome 107이 출시됩니다. Screen Capture API에는 화면 공유 환경을 개선하는 새로운 속성이 있습니다.이제 페이지의 리소스가 렌더링을 차단하는지 정확하게 식별할 수 있습니다.오리진 트라이얼에서 선언적 PendingBeacon API를 사용하여 백엔드 서버로 데이터를 전송하는 새로운 방법이 있습니다. 이외에도 다양한 기능이 있습니다.
- Chrome
웹사이트 가독성 개선
DevTools로 저대비 텍스트를 찾아 수정하세요.
- Chrome DevTools
DevTools 팁: 저대비 텍스트 찾기 및 수정
Chrome DevTools를 사용하여 저대비 텍스트를 찾아 수정하는 방법을 알아보세요.
- Chrome DevTools
- Chrome
신뢰 토큰의 이름이 비공개 상태 토큰으로 변경됨
개인 정보 보호 및 유틸리티 이점을 더 잘 설명하기 위해 Trust Token API의 이름이 Private State Token API로 변경됩니다.
- Chrome
고급 웹 앱 펀드 - 2022년 10월 업데이트
Google은 Advanced Web Apps Fund를 통해 11개 프로젝트를 후원하고 Open Collective를 통해 10만 달러 이상을 분배했습니다. 이는 이 작업의 중요성을 인식하고 더 많은 사람이 이 프로젝트에 시간을 투자할 수 있도록 하기 위함입니다.
- Chrome
Chrome DevTools Recorder 이상의 사용자 플로우 맞춤설정 및 자동화
Chrome DevTools Recorder 이상의 사용자 플로우를 맞춤설정하고 자동화하는 방법을 알아봅니다.
- Chrome
컨테이너 쿼리 폴리필 내부
이전 브라우저에서 컨테이너 쿼리 폴리필이 컨테이너 쿼리를 어떻게 지원하는지 알아보세요.
- Chrome
CSS 중첩 설문조사 결과의 구문 선택 도움말
7,590명의 개발자 의견 결과를 확인하세요.
- Chrome
Chrome 확장 프로그램 개발 여정을 시작하는 새로운 방법
Chrome 개발자 학습 여정을 시작하는 더 나은 방법입니다.
- Chrome 확장 프로그램
- Chrome
CSS의 대체된 요소에서 오버플로 변경
원치 않는 오버플로를 일으킬 수 있는 CSS 동작 변경에 대한 고급 경고입니다.
- Chrome
Chrome Dev Insider: 프레임워크 생태계를 통한 성능 확장
Chrome 웹 플랫폼팀의 업데이트 소식으로 개발자들이 의견과 대화, 업데이트를 공유하기 위해 비하인드 스토리를 들려줍니다.
- Chrome
탭 관리
탭 그룹을 사용하여 프로그래매틱 방식으로 탭을 정리하는 방법을 알아보세요.
- Chrome 확장 프로그램
Hello World 확장 프로그램
첫 번째 Hello World Chrome 확장 프로그램을 만듭니다.
- Chrome 확장 프로그램
Fugu 프로젝트가 '완료'되었나요?
이 문서에서는 새로운 기능을 구현하는 것에서 기존 기능을 다듬고 개선하는 것으로 Project Fugu팀이 중점을 옮기는 데 중점을 둡니다.
- Chrome
모든 페이지에서 스크립트 실행
기존 웹페이지에 새 요소를 자동으로 추가하는 방법을 알아보세요.
- Chrome 확장 프로그램
활성 탭에 스크립트 삽입
현재 페이지의 스타일을 간소화하는 방법을 알아봅니다.
- Chrome 확장 프로그램
매니페스트 - 작성자
manifest.json의 작성자 이름 속성에 대한 참조 문서입니다.
- Chrome 확장 프로그램
화면 공유 시 과도한 공유 방지
이제 웹 플랫폼에는 개인 정보 보호 화면 공유를 위한 추가 관리 기능이 제공됩니다.
- Chrome
Payment Handler API에 CSP connect-src 필요
CSP를 사용하는 경우 Payment Handler API 사용자가 `connect-src` 지시어에 결제 엔드포인트를 추가해야 합니다.
- Chrome
Chrome 107 베타
Screen Capture API, CSS 그리드 템플릿 속성 보간 등에 추가된 기능
- Chrome
개인 정보 보호 화면 공유 제어
웹의 개인 정보가 보호되는 화면 공유 제어 기능을 통해 사용자가 과도한 공유를 하지 않도록 안내하세요.
Manifest V3로의 전환에 관한 추가 세부정보
확장 프로그램을 Manifest V3로 이전하는 계획에 관한 새로운 세부정보
- Chrome
- Chrome 확장 프로그램
DevTools 팁: 사용자 플로우 기록 수정, 디버그, 내보내기
Recorder 패널과 확장 프로그램을 사용하여 사용자 플로우 기록을 수정, 디버그, 내보냅니다.
- Chrome DevTools
- Chrome
Chrome 106의 새로운 기능
Chrome 106이 출시 중입니다. 숫자 형식을 지정할 때 더 세밀하게 제어할 수 있는 새로운 Intl API를 추가했습니다. 새로운 팝업 API의 오리진 트라이얼이 있어 사용자에게 중요한 콘텐츠를 쉽게 표시할 수 있습니다. CSS 몇 가지 사항이 개선되었습니다. 이외에도 다양한 기능이 있습니다.
- Chrome
Chrome이 수십억 사용자를 위해 업데이트를 준비하는 방법
"Chrome 출시팀의 기술 프로그램 관리자와 대화를 나누며 각 버전이 원활하게 진행되는지 확인하는 방법을 알아봅니다."
- Chrome
DevTools의 새로운 기능 (Chrome 107)
단축키를 맞춤설정하고 Memory Inspector에서 C/C+ 객체를 강조표시하는 등의 작업을 할 수 있습니다.
- Chrome
- Chrome DevTools
DevTools의 새로운 기능 (Chrome 106)
성능 통계의 최신 웹 디버깅, LCP 타이밍 분석 등에 대한 지원이 개선되었습니다.
- Chrome
- Chrome DevTools
폴리필이 대대적으로 업데이트되는 동안 컨테이너 쿼리가 안정적인 브라우저에 도입되기 시작함
"컨테이너 쿼리를 사용하면 구성요소가 내부에 맞는 공간에 따라 반응형 스타일 지정 정보를 소유할 수 있습니다. 이 기능은 최신 브라우저에 도입되기 시작했으며 폴리필 지원을 위해 대대적인 업데이트가 이루어졌습니다."
- Chrome
팝업: 다시 떠오르고 있습니다.
새로운 내장 API가 플랫폼에 도입되면서 문제가 있는 패턴이 훨씬 더 쉬워졌습니다.
- Chrome
C/C++ 디버깅을 위해 Memory Inspector 확장
Memory Inspector를 사용하여 C/C++ WebAssembly 앱 디버깅을 개선한 방법을 알아보세요.
- Chrome
익명 iframe 오리진 트라이얼: COEP 환경에 간편하게 iframe 삽입
이제 COEP를 사용하는 개발자는 COEP 자체를 사용하지 않는 타사 iframe을 삽입할 수 있습니다. 익명 iframe 오리진 트라이얼을 Chrome 버전 106~108로 테스트할 수 있습니다.
- Chrome
DevTools 팁: CSS Flexbox 검사 및 디버그 방법
Chrome DevTools를 사용하여 CSS Flexbox 레이아웃을 검사, 수정, 디버그하는 방법을 알아봅니다.
- Chrome
- Chrome DevTools
Chrome 106 지원 중단 및 삭제
계획 수립에 참고할 수 있도록 Chrome 106의 지원 중단 및 삭제에 관한 요약입니다.
- Chrome
Chrome DevTools의 최신 웹 디버깅
번들러, 프레임워크, 서드 파티 코드로 작업할 때 디버깅 및 프로파일링 환경을 개선하는 Chrome DevTools의 최신 변경사항을 살펴보세요.
- Chrome
웹 SQL 지원 중단 및 삭제
웹 SQL은 2009년 4월에 처음 제안되었고 2010년 11월에 폐기되었습니다. 처음에는 안전하지 않은 컨텍스트에서 단계를 거쳐 Chrome 119를 기준으로 완전히 삭제되었습니다.
- Chrome
우수사례: DevTools를 사용한 Angular 디버깅 개선
Chrome DevTools와 Angular팀은 Angular를 테스트 파일럿으로 사용하여 더 나은 디버깅 환경을 제공하기 위해 협력했습니다. 다른 프레임워크에도 유사한 변경사항을 제공할 수 있습니다.
- Chrome
Chrome 105의 새로운 기능
Chrome 105가 출시되고 있습니다. 컨테이너 쿼리와 :has()는 반응형 천국에서 일치됩니다. 새로운 Sanitizer API는 임의의 문자열을 위한 강력한 프로세서를 제공하여 교차 사이트 스크립팅 취약점을 줄여줍니다. Google에서는 WebSQL에 대한 지원 중단을 위해 한 걸음 더 나아갑니다. 그 밖에도 많은 기능이 제공됩니다.
- Chrome
압축 스트림 API를 사용하여 브라우저에서 압축 및 압축 해제
자체 압축 또는 압축 해제 라이브러리를 제공할 필요가 없는 더 작은 웹 앱 작성 Compression Streams API 는 gzip 또는 deflate (또는 deflate-raw) 형식을 사용하여 데이터 스트림을 압축 및 압축 해제하는 데 사용됩니다. 압축이 내장된 JavaScript 애플리케이션은 압축 라이브러리를 포함할 필요가 없으므로 애플리케이션의 다운로드 크기가 더 작아집니다. 이제 안정적인 Chrome 및 Safari
- Chrome
Angular Image 지침으로 이미지 최적화
Angular 앱의 이미지에 기본 제공 성능 최적화 기법을 적용하는 새로운 Angular 이미지 지시어 (NgOptimizedImage)를 소개합니다.
- Chrome
DevTools 팁: 콘솔 단축키를 사용하여 워크플로 속도를 높이는 방법
Console Utilities API에서 제공하는 단축키를 사용하여 최근 요소를 빠르게 참조하고, 객체를 쿼리하고, 이벤트 및 함수 호출을 모니터링하는 등의 작업을 합니다.
- Chrome DevTools
- Chrome
최상위 레이어 소개: Z-색인:10000에 대한 솔루션
플랫폼에 내장된 구성요소와 API가 새로 도입됨에 따라 우리가 사용할 수 있는 '최상위 레이어'는 무엇인가요?
- Chrome
Chrome에서 HTTP/2 서버 푸시 삭제
HTTP/2 서버 푸시는 Chrome 106에서 기본적으로 사용 중지됩니다.
- Chrome
DevTools 팁: CSS 그리드 검사 방법
Chrome DevTools를 사용하여 CSS 그리드 레이아웃을 확인하고 변경하는 방법을 알아보세요.
- Chrome DevTools
- Chrome
브라우저에서 서드 파티 리소스의 로드를 최적화할 수 있나요?
웹에서 서드 파티 리소스의 로드 개선을 위한 변경사항 추진
- Chrome
DevTools의 새로운 기능 (Chrome 105)
녹음기의 단계별 재생 및 마우스오버 이벤트, 성능 통계 패널의 LCP 등을 지원합니다.
- Chrome
- Chrome DevTools
DevTools 팁: CSS 애니메이션을 검사하고 수정하는 방법
애니메이션 탭을 사용하여 CSS 애니메이션, 전환 등을 검사하고 수정할 수 있습니다.
- Chrome
- Chrome DevTools
Chrome 105 지원 중단 및 삭제
계획 수립에 참고할 수 있도록 Chrome 105의 지원 중단 및 삭제에 관한 요약입니다.
- Chrome
DevTools 팁: 웹사이트 성능에 대한 활용 가능한 분석 정보 얻기
새로운 실적 통계 패널을 통해 웹사이트 실적에 대한 활용 가능한 분석 정보를 얻으세요.
- Chrome
- Chrome DevTools
@container 및 :has(): Chromium 105에 도입된 두 가지 강력한 새 반응형 API
"컨테이너 쿼리와 :has()는 반응형 천국에서 일치됩니다. 다행히 Chromium 105에서는 이 두 기능이 함께 제공됩니다. 이 릴리스는 많은 요청이 있었던 반응형 인터페이스와 관련하여 두 가지 기능을 갖춘 대규모 릴리스입니다."
- Chrome
:has(): 계열 선택기
Chromium 105에 :has()가 도입되었습니다. CSS에 제공하는 몇 가지 멋진 기회를 살펴보겠습니다.
- Chrome
Chrome 105의 NavigationEvent 변경사항
Navigation API가 NavigationEvent에서 2개의 새로운 메서드를 가져옵니다. interactive()는 conversion생활()을 대체하고 scroll()은 rememberScroll()을 대체합니다.
- Chrome
Chrome 104의 새로운 기능
Chrome 104가 출시됩니다. getDisplayMedia()를 사용하여 현재 탭을 캡처할 때 지역 캡처는 자르기 영역을 지정합니다. 수학적 비교 연산자를 사용하여 미디어 쿼리 구문을 작성할 수 있습니다. Shared Element Transitions가 오리진 트라이얼을 시작합니다. 그 밖에도 많은 기능이 제공됩니다.
- Chrome
Async Clipboard API를 위한 웹 맞춤 형식
웹 맞춤 형식을 사용하면 웹사이트에서 표준 형식을 사용하여 임의의 정리되지 않은 페이로드를 읽고 쓸 수 있으며 애플리케이션은 이러한 페이로드를 지원하도록 선택할 수 있습니다.
- Chrome
DevTools 팁: 콘솔에서 메시지를 로깅하는 방법
콘솔을 사용하여 변수, 객체, 메시지를 로깅하고 메시지를 필터링 및 그룹화하는 등의 작업을 수행합니다.
- Chrome DevTools
- Chrome
Chrome 웹 스토어 개발자 대시보드에서 웹로그 분석 기능 개선
Google은 Chrome 웹 스토어 개발자 대시보드를 위해 개선된 항목 분석 환경을 출시합니다. 새 대시보드는 한눈에 이해하기 쉽고 가장 유용한 정보를 미리 통합합니다.
- Chrome
- Chrome 확장 프로그램
CSS 중첩 구문 선택 도움말
두 가지 경쟁 구문이 사양 후보에 통과해야 하는 구문을 결정하는 데 여러분의 도움이 필요합니다.
- Chrome
Chrome DevTools의 최상위 레이어 지원
최상위 레이어를 살펴보고 Chrome DevTools에서 상단 레이어를 어떻게 구현했는지 알아보세요.
- Chrome
2022년 Chrome 웹 프레임워크 자금 지원 관련 업데이트
Chrome의 웹 프레임워크 자금 지원 수혜자에 관한 소식을 공유하고 있습니다.
- Chrome
DevTools 팁: DevTools로 CSS 사용자 환경설정 미디어 기능을 에뮬레이트하는 방법
렌더링 탭을 사용하면 사용자의 환경설정을 에뮬레이션하고 웹사이트의 사용자 적응형 동작을 테스트할 수 있습니다.
- Chrome
- Chrome DevTools
DevTools의 새로운 기능 (Chrome 104)
디버깅 중 프레임 다시 시작, Recorder 패널의 느린 재생 옵션 등
- Chrome DevTools
- Chrome
Chrome Dev Insider: CSS 및 UI 버전
Chrome 웹 플랫폼팀의 업데이트 소식으로 개발자들이 의견과 대화, 업데이트를 공유하기 위해 비하인드 스토리를 들려줍니다.
- Chrome
데스크톱 사이트용으로 서명된 교환 출시
최근 출시된 기타 기능과 함께 데스크톱의 Chromium 브라우저에 대한 Signed Exchanges 지원이 발표됩니다.
- Chrome
DevTools 팁: CSS 컨테이너 쿼리 검사 방법
DevTools로 CSS 컨테이너 쿼리를 검사하고 디버그합니다.
- Chrome
- Chrome DevTools
CSS 컨테이너 쿼리 검사 및 디버그
Chrome DevTools를 사용하여 CSS 컨테이너 쿼리를 검사, 수정, 디버그하는 방법을 알아보세요.
- Chrome DevTools
Chrome 104 지원 중단 및 삭제
계획 수립에 도움이 되도록 Chrome 104의 지원 중단 및 삭제에 관한 요약입니다.
- Chrome
Chrome 103의 새로운 기능
Chrome 103이 출시됩니다. 새로운 HTTP 상태 코드가 추가되었습니다. 이 코드는 페이지가 도달하기도 전에 브라우저에서 어떤 콘텐츠를 미리 로드할지 결정하는 데 도움을 줍니다. Local Font Access API는 웹 애플리케이션이 사용자의 컴퓨터에 설치된 글꼴을 열거하고 사용할 수 있는 기능을 제공합니다. 비동기 API에서 시간 제한을 구현하는 더 쉬운 방법이 있습니다. 그 밖에도 많은 기능이 제공됩니다.
- Chrome
DevTools의 새로운 기능 (Chrome 103)
더블클릭 및 마우스 오른쪽 버튼 클릭 이벤트, Lighthouse 사용자 흐름을 측정하는 새로운 옵션 등을 기록합니다.
- Chrome
- Chrome DevTools
접근성 기능 참조
Chrome DevTools의 접근성 기능에 관한 종합 참조 문서입니다.
- Chrome DevTools
Chrome 102의 새로운 기능
Chrome 102가 출시됩니다. 설치된 PWA는 파일 핸들러로 등록될 수 있으므로 사용자가 디스크에서 직접 파일을 쉽게 열 수 있습니다. inert 속성을 사용하면 DOM의 일부를 inert로 표시할 수 있습니다. Navigation API를 사용하면 단일 페이지 앱이 URL 탐색 및 업데이트를 더 쉽게 처리할 수 있습니다. 이 외에도 다양한 기능이 있습니다.
- Chrome
실적 통계를 구축한 방법 및 이유
실적 통계 패널을 만든 방법과 이유
- Chrome
보안 결제 확인 등록
고객이 판매자로부터 직접 카드 발급기관이나 은행에 직접 인증할 수 있도록 SPC의 등록 프로토콜과 절차를 구현합니다.
WebAssembly 이전 가이드
크로스 브라우저 WebAssembly 지원의 가속도를 감안하여 앞으로는 WebAssembly에 네이티브 코드 작업을 집중하고 2019년 4분기에 PNaCl 지원을 중단할 계획입니다(Chrome 앱 제외). Google은 역동적인 WebAssembly 생태계 신규 및 기존의 고성능 기기에 더 적합 PNaCl 사용량이 지원 중단을 당할 만큼 충분히 적지 않다는 사실을 확인합니다. Chrome 76부터 공개 웹의 PNaCl은 웹 개발자가 기본적으로
안전한 결제 확인
결제 서비스 제공업체를 통한 안전한 인증을 허용하기 위해 제안된 웹 표준에 대한 높은 수준의 개요
보안 결제 확인으로 인증
SPC용 인증 프로토콜을 구현하여 고객 거래를 검증합니다.
Chrome 103 지원 중단 및 삭제
계획 수립에 도움이 되도록 Chrome 103의 지원 중단 및 삭제에 관한 요약입니다.
- Chrome
Interaction to Next Paint (INP) 도구 지원
Chrome 성능 도구에서 Interaction to Next Paint(다음 페인트와의 상호작용)를 지원합니다.
- Chrome
스트림이 포함된 더 빠른 다중 페이지 애플리케이션
작업 상자 스트림을 사용하여 서비스 워커 캐시의 부분 마크업과 네트워크의 부분 콘텐츠를 사용하여 거의 즉시 렌더링되는 빠른 환경을 만드는 다중 페이지 애플리케이션을 만드는 방법을 알아봅니다.
네트워크 관리자용 Chrome의 비공개 미리 가져오기 프록시
미리 가져온 탐색에서 콘텐츠를 필터링하는 방법에 관한 개요입니다.
크로스 사이트 미리 가져오기를 통한 LCP 속도 향상
즉시 사용할 수 있는 기술을 소개합니다.
- Chrome
Chrome의 비공개 미리 가져오기 프록시
크로스 사이트 미리 가져오기로 최대 콘텐츠 렌더링 시간 (LCP) 속도 향상
- Chrome
더 빠르게 WebAssembly 디버깅
대규모 애플리케이션에서 WebAssembly 디버깅 속도를 높이는 방법
- Chrome
DevTools의 새로운 기능 (Chrome 102)
새로운 성능 통계 패널, 밝은 테마/어두운 테마를 에뮬레이션하는 바로가기 등이 추가되었습니다.
- Chrome
- Chrome DevTools
캡처 핸들로 탭 공유 개선
이제 웹 플랫폼에 캡처 핸들이 제공됩니다. 캡처 핸들은 캡처된 웹 앱이 선택된 경우 캡처된 웹 앱이 캡처된 웹 앱을 인체공학적으로 자신 있게 식별할 수 있도록 해 줍니다.
Advanced Web Apps Fund
더욱 강력한 웹을 만드는 개발자를 지원하는 Advanced Web Apps Fund 발표
- Chrome
DOM 객체의 속성 보기
DOM 객체의 속성을 보고 필터링합니다.
- Chrome DevTools
뒤로-앞으로 캐시 테스트
페이지가 뒤로-앞으로 캐싱에 최적화되어 있는지 확인하세요.
- Chrome DevTools
Chrome 101의 새로운 기능
Chrome 101은 현재 hwb 표기법으로 색상을 지정하는 새로운 메서드로 출시되고 있으며, 우선순위 가져오기는 브라우저에 리소스를 다운로드하는 이상적인 순서를 암시하는 방법을 제공합니다. 이 외에도 다양한 기능이 있습니다.
- Chrome
hidden=until-found를 사용하여 축소된 콘텐츠에 액세스할 수 있도록 하기
이 새로운 속성 값을 통해 아코디언 섹션 내의 콘텐츠를 찾아서 연결할 수 있는 방법입니다.
서명된 교환을 사용하여 LCP 최적화
서명된 교환은 웹 개발자가 Google 검색과 같은 SXG 리퍼러에서 오는 페이지 로드 속도를 크게 개선할 수 있는 방법입니다. 체크박스로 사용 설정하는 것만으로도 이점을 얻을 수 있지만 추가 단계를 통해 최대한 활용할 수도 있습니다.
- Chrome
권한 정책으로 브라우저 기능 제어
페이지 및 삽입된 서드 파티 iframe이 브라우저 기능에 액세스하는 방식을 관리합니다.
RenderingNG 심층 분석: BlinkNG
BlinkNG와 Blink 코드의 조직 및 구조와 관련하여 오랫동안 지속된 문제를 해결한 다양한 하위 프로젝트에 대해 알아보세요.
- Chromium
렌더링 성능 문제 발견
다시 그리기, 레이아웃 변경, 레이어 및 타일, 스크롤 문제, 렌더링 통계와 코어 웹 바이탈을 확인하세요.
- Chrome DevTools
사이트에 안전하게 콘텐츠 삽입하기
콘텐츠를 삽입하는 데 사용되는 여러 HTML 요소와 보안을 위해 최적화하는 방법에 대해 알아보세요.
- Chrome
렌더링 탭 개요
웹 콘텐츠 렌더링에 영향을 미치는 옵션 모음을 알아봅니다.
- Chrome DevTools
Chrome Dev Insider 소개
Chrome 웹 플랫폼팀의 새로운 시리즈로 개발자들이 자신의 관점과 대화, 업데이트를 공유하는 비하인드 스토리를 들려줍니다.
- Chrome
CSS 미디어 기능 에뮬레이션
Preferreds-color-scheme, 미디어 유형, force-colors, refers-contrast, refers-reduced-motion, color-gamut을 에뮬레이션합니다.
- Chrome DevTools
DevTools의 새로운 기능 (Chrome 101)
JSON으로 사용자 플로우 가져오기 및 내보내기, hwb() 색상 지원, 스타일 창에서 캐스케이드 레이어 보기 등
- Chrome
- Chrome DevTools
Chrome 101 지원 중단 및 삭제
계획 수립에 참고할 수 있도록 Chrome 101의 지원 중단 및 삭제에 관한 요약입니다.
- Chrome
Chrome 102 지원 중단 및 삭제
계획 수립에 참고할 수 있도록 Chrome 102의 지원 중단 및 삭제에 관한 요약입니다.
- Chrome
#100CoolWebMoments로 Chrome 100주년 기념하기
Google은 Chrome 버전 100 출시를 기념하여 다음과 같은 새로운 기능을 출시하고 있습니다.
- Chrome
Chrome 100의 새로운 기능
Chrome 100은 현재 3자리 버전 번호로 출시되고 있습니다. Chrome 첫 출시 이후 한 걸음 더 나아간 후 #100CoolWebMoments를 기념하세요. 사용자 에이전트 문자열에 몇 가지 중요한 변경사항이 있습니다. Multi-Screen Window Placement API를 사용하면 사용자 컴퓨터에 연결된 디스플레이를 열거하고 특정 화면에 창을 배치할 수 있습니다. 이 외에도 다양한 기능이 있습니다.
- Chrome
실적 통계: 웹사이트 실적에 대한 활용 가능한 분석 정보 얻기
실적 통계 패널에서 웹사이트 실적에 대한 활용 가능한 분석 정보를 얻으세요.
- Chrome DevTools
DevTools의 새로운 기능 (Chrome 100)
규칙에서 @supports를 확인 및 수정하고, 녹음 파일의 이름을 변경하고, 녹화 선택기를 맞춤설정하는 등의 작업을 할 수 있습니다.
- Chrome
- Chrome DevTools
Chrome 100의 지원 중단 및 삭제
계획 수립에 도움이 되도록 Chrome 100의 지원 중단 및 삭제에 관한 요약입니다.
- Chrome
Canvas2D는 항상 여러분입니다.
API 다음 도어가 새롭게 단장합니다.
- Chrome
Chrome 99의 새로운 기능
Chrome 99가 지금 출시됩니다. CSS 캐스케이드 레이어를 사용하면 CSS를 더 세부적으로 제어할 수 있으며 스타일별 특이성 충돌을 방지할 수 있습니다. showPicker() 메서드를 사용하면 날짜, 색상, 데이터 목록과 같은 입력 요소의 브라우저 선택 도구를 프로그래매틱 방식으로 표시할 수 있습니다. Chrome 및 Firefox 버전 100이 몇 주밖에 남지 않았습니다. 이 외에도 다양한 기능이 있습니다.
- Chrome
Next.js에서 서드 파티 스크립트 로드 최적화
이 도움말에서는 Next.js 스크립트 구성요소에 대해 설명하고 타사 스크립트의 시퀀싱을 개선하는 데 이 구성요소를 사용하는 방법을 보여줍니다.
- Chrome
DevTools의 새로운 기능 (Chrome 99)
WebSocket 요청 제한, 새로운 Reporting API 창, 콘솔 스타일 지정 등
- Chrome
CSS Flexbox 레이아웃 검사 및 디버그
Chrome DevTools를 사용하여 CSS Flexbox 레이아웃을 검사, 수정, 디버그하는 방법을 알아봅니다.
- Chrome DevTools
Chrome 99 지원 중단 및 삭제
계획에 도움이 되도록 Chrome 99의 지원 중단 및 삭제에 관한 요약입니다.
- Chrome
플러그인 사용
Workbox는 기성품이 많은 유틸리티를 제공하지만 애플리케이션 요구사항을 충족하기 위해 이를 확장해야 하는 경우도 있습니다. 이때 Workbox의 플러그인 아키텍처가 유용합니다.
Chrome 98의 새로운 기능
Chrome 98이 출시됩니다. Auto Dark Theme 오리진 트라이얼에 가입했다면 요소별로 새로운 기능을 선택 해제할 수 있습니다. 이제 COLRv0 글꼴 형식이 진화한 COLRv1이 지원됩니다. 이외에도 다양한 기능이 있습니다.
- Chrome
브라우저에 캐스케이드 레이어가 추가됩니다.
"캐스케이드 레이어는 코드의 단계적 우선순위를 관리하는 데 도움이 되는 새로운 CSS API로, 곧 모든 최신 브라우저에 적용됩니다."
- Chrome
Chromium Chronicle #28: iOS에서 Chrome 시작하기
Chrome iOS 앱에 포함된 코드로 작업하는 방법을 알아보세요.
- Chrome
권한 요청 칩
Chrome 98에서는 위치 표시줄에 권한을 위한 전용 공간이 추가되어, 결정에 대한 지속적 거부를 줄이기 위해 프롬프트의 부담을 덜어줍니다.
- Chrome
날짜, 시간, 색상, 파일의 브라우저 선택 도구 표시
이제 웹 플랫폼에 브라우저 선택 도구를 표시하는 표준 방식이 제공됩니다.
- Chrome
DevTools의 새로운 기능 (Chrome 98)
전체 페이지 접근성 트리, 변경사항 탭에서 더욱 정확한 변경사항 적용 등
- Chrome
동일 출처 정책을 완화하기 위해 Chrome에서 document.domain을 수정할 수 없게 됩니다.
웹사이트에서 `document.domain` 설정을 사용하는 경우 조치가 필요합니다.
- Chrome
Chrome 98 지원 중단 및 삭제
계획 수립에 도움이 되도록 Chrome 98의 지원 중단 및 삭제에 관한 요약입니다.
- Chrome
Chrome 98의 COLRv1 색상 그라데이션 벡터 글꼴
Chrome 98에서 Chrome팀과 Fonts팀은 COLRv1에 대한 지원을 추가했습니다. COLRv1은 그라데이션을 추가하고 합성 및 블렌딩을 추가하여 색상 글꼴을 널리 퍼뜨리기 위해 COLRv0 글꼴 형식을 발전시켰습니다. 또한 잘 압축되는 선명하고 간결한 글꼴 파일을 위한 내부 도형 재사용을 개선했습니다.
- Chrome
비공개 네트워크 액세스: 프리플라이트 도입
Chrome에서는 비공개 네트워크 액세스 사양에 따라 비보안 공개 웹사이트에서 비공개 네트워크 엔드포인트에 액세스하는 기능이 지원 중단됩니다. 아래 내용을 참고하여 권장 조치를 확인하세요.
- Chrome
Chrome 97의 새로운 기능
Chrome 97이 출시됩니다. 웹 전송을 사용하여 클라이언트와 서버 간에 실시간 메시지를 보내는 새로운 옵션이 추가되었습니다. 기능 감지를 사용하여 브라우저에서 지원하는 스크립트 유형을 확인할 수 있습니다. JavaScript는 더 좋아지고 그 밖에도 많이 있습니다.
- Chrome
핸들러 API 실행
시작 핸들러를 사용하면 앱이 실행되는 방식을 제어할 수 있습니다(예: 앱에서 기존 창을 사용할지, 새 창을 사용할지, 선택한 창을 실행 URL로 이동할지 여부).
Chrome DevTools의 전체 접근성 트리
DevTools의 새로운 전체 페이지 접근성 트리와 이 트리의 디자인과 구현을 검토합니다.
- Chrome
대체 응답 관리
사용자에게 네트워크 장애가 발생하거나 오프라인 상태가 되는 경우가 있습니다. 이러한 상황에 적응하고 대체 응답을 제공하는 방법을 알아보세요.
즉시 서비스 워커 업데이트 처리
서비스 워커를 업데이트할 때 사용자에게 이를 알리는 것이 좋은 경우가 있습니다. 지금부터 이를 처리하는 방법을 알아보겠습니다.
런타임 중 리소스 캐싱
교차 출처 리소스를 포함하여 런타임 중에 리소스 캐싱을 처리하는 방법을 알아봅니다.
다시 온라인 상태가 되면 요청 재시도
사용자가 오프라인 상태가 되는 경우가 있습니다. 이러한 변화에 적응하는 방법을 알아보고 사용자가 온라인에 다시 연결될 때 요청을 재개하도록 지원하세요.
캐시된 오디오 및 동영상 제공
서비스 워커에서 오디오 및 동영상 리소스 요청을 처리하는 것은 어려운 일입니다. workbox-range-request를 사용하여 이러한 요청을 예측 가능한 방식으로 처리하는 방법을 알아봅니다.
작업 상자 창 사용
사용자가 오프라인 상태가 되는 경우가 있습니다. 이러한 변화에 적응하는 방법을 알아보고 사용자가 온라인에 다시 연결될 때 요청을 재개하도록 지원하세요.
네트워크 시간 초과 강제 적용
네트워크 연결이 느릴 경우 강제로 네트워크 시간 제한을 설정하는 방법과 타이밍을 맞추는 방법을 알아봅니다.
창에서 캐시 액세스
캐시 인스턴스에 액세스하는 것은 서비스 워커 범위로 제한되지 않습니다. 창 컨텍스트에서 액세스할 수도 있으며 이 도움말에서는 그 방법을 알아봅니다.
DevTools의 새로운 기능 (Chrome 97)
새로운 녹음기 패널, 기기 모드에서 기기 목록 새로고침 등이 추가되었습니다.
- Chrome
개발자가 강력하고 설치 가능한 웹 앱을 빌드하도록 지원
Chrome에 추가된 PWA 기능의 영향을 살펴봅니다.
- Chrome
Chrome 97 지원 중단 및 삭제
계획에 도움이 되도록 Chrome 97의 지원 중단 및 삭제에 관한 요약입니다.
- Chrome
Chrome 96의 새로운 기능
Chrome 96이 출시됩니다. 웹 앱 매니페스트에는 두 개의 새로운 속성이 있습니다. id 속성을 사용하면 PWA의 고유 ID를 지정할 수 있으며, 프로토콜_handlers 속성을 사용하면 PWA를 설치 시 프로토콜 핸들러로 자동 등록할 수 있습니다. 리소스 다운로드에 가져오기 우선순위를 지정할 수 있는 새로운 오리진 트라이얼이 출시되었습니다. 이 외에도 다양한 기능이 있습니다.
- Chrome
Lighthouse 9.0의 새로운 기능
Lighthouse 9.0에서는 사용자 플로우에 대한 지원 미리보기 및 업데이트된 보고서가 함께 제공됩니다.
- Chrome
문제 해결 및 로깅
Workbox의 로깅 기능과 브라우저 내 서비스 워커 디버깅 도구를 살펴봅니다.
사전 캐싱 없이 Workbox 사용
Workbox-build 없이 Workbox에서 서비스 워커를 빌드하는 방법
Workbox로 사전 캐싱
Workbox를 사용하여 서비스 워커에서 애셋을 사전 캐시하는 방법을 알아봅니다.
네트워크 중심 HTML을 위한 탐색 미리 로드
Navigation 미리 로드의 정의, 탐색 속도를 더 빠르게 하는 방법, Workbox에서 이 기능을 사용하는 방법을 알아봅니다.
사전 캐싱 권장사항 및 금지사항
사전 캐싱의 해야 할 일과 하지 말아야 할 일에 대해 알아보세요.
프레임워크 통합
Workbox와 통합되는 프레임워크 및 플러그인에 대한 빠른 참조
Workbox 사용 방법
Workbox를 사용하는 몇 가지 방법을 익혀 보세요.
서비스 워커 및 애플리케이션 셸 모델
SPA에서 애플리케이션 셸 모델을 서비스 워커와 페어링하는 방법
사용자 플로우 기록, 재생, 측정
Recorder 패널에서 사용자 플로우를 녹화, 재생, 측정하고 단계를 수정합니다.
- Chrome DevTools
Chrome DevTools에서 CSP 및 신뢰할 수 있는 유형 디버깅 구현
Chrome DevTools에서 콘텐츠 보안 정책 및 신뢰할 수 있는 유형의 디버깅 문제를 구현하는 방법
- Chrome
사용자 에이전트 문자열에서 Chrome 메이저 버전을 100으로 강제 설정합니다.
Chrome 버전 번호가 곧 2자리에서 3자리로 변경되어 사용자 에이전트 (UA) 문자열을 파싱하는 모든 코드에 영향을 미칠 수 있습니다. Chrome 96~99에서 사용할 수 있는 기능 플래그를 사용하면 UA 문자열의 메이저 버전 번호를 100으로 강제하여 조기 테스트를 수행할 수 있습니다.
- Chrome
EyeDropper API를 사용하여 화면의 픽셀 색상 선택
창의적인 애플리케이션 개발자는 EyeDropper API를 사용하여 사용자가 브라우저 외부의 픽셀을 포함하여 화면의 픽셀에서 색상을 선택할 수 있는 선택 도구를 구현할 수 있습니다.
DevTools의 새로운 기능 (Chrome 96)
새로운 CSS 개요 패널, CSS 선호 미디어 및 Chrome의 자동 어두운 모드 에뮬레이션 등
- Chrome
효과적인 이미지 구성요소 빌드
이미지는 웹 애플리케이션에서 성능 병목 현상의 일반적인 원인이며 최적화의 핵심 영역입니다. 이 문서에서는 Google의 Aurora 팀이 개발자 친화적인 인터페이스를 사용하여 여러 최적화 기능이 내장된 Next.js의 강력한 이미지 구성요소를 어떻게 설계했는지 설명합니다. 이 게시물에서는 구성요소의 설계 방식과 그 과정에서 얻은 교훈을 설명합니다.
CSS 개요: 잠재적 CSS 개선 사항 파악
CSS 개요 패널에서 CSS를 개선할 수 있는 방법을 찾아보세요.
- Chrome DevTools
Chrome 96 지원 중단 및 삭제
계획 수립에 도움이 되도록 Chrome 96의 지원 중단 및 삭제에 관한 요약입니다.
- Chrome
자동 어두운 테마
밝은 테마의 사이트를 위해 어두운 테마를 자동 생성합니다.
- Chrome
아키텍처별로 다양한 서비스 워커 전략 사용
두 가지 웹사이트 아키텍처에 대해 소개합니다.
서비스 워커 개발 환경 개선
서비스 워커를 사용할 때 발생할 수 있는 로컬 개발 문제를 해결하는 방법
버그가 있는 서비스 워커 삭제
문제를 일으키는 서비스 워커를 수정하는 방법
서비스 워커 배포에 대한 기대치
배포된 서비스 워커가 웹사이트에 미치는 영향 이해
Reporting API를 사용하여 웹 애플리케이션 모니터링
Reporting API를 사용하여 보안 위반, 지원 중단된 API 호출 등을 모니터링할 수 있습니다.
Reporting API v1로 이전
Reporting API의 새 버전을 사용할 수 있습니다. 새 API는 더 가볍고 여러 브라우저에서 지원될 가능성이 높습니다.
- Chrome
Chrome 95의 새로운 기능
Chrome 95가 지금 출시됩니다. URLPattern이 브라우저에 내장되어 있어 라우팅이 더 간편해집니다. Eye Dropper API는 색상을 선택하는 기본 도구를 제공합니다. 이제 축소된 UA 문자열을 받을 수 있는 새로운 오리진 트라이얼이 있으며, 그 외에도 훨씬 더 많은 기능이 제공됩니다.
- Chrome
RenderingNG 심층 분석: LayoutNG
LayoutNG의 대규모 아키텍처 변경으로 다양한 유형의 버그와 성능 문제를 줄이고 완화하는 방법
- Chromium
Chromium Chronicle #25: 스레드 안전 주석
Clang의 정적 분석 프레임워크가 스레드 안전 증명의 수고를 어떻게 덜어가는지 알아보세요.
- Chrome
Chrome 사용자 기기 특성 보고서
개발자들은 자신이 어떤 유형의 잠재고객을 대상으로 하고 있는지 끊임없이 궁금해합니다. RAM이 얼마나 되나요? 어떤 종류의 Wi-Fi를 사용 중인가요? 새로운 보고서에서는 다양한 국가 및 플랫폼에 대한 답변을 제공합니다.
- Chrome
2021년 3분기 Chrome 웹 스토어 정책 업데이트
확장 프로그램의 품질을 높게 유지하고 개발자 환경을 일관되게 유지하기 위해 보안 요구사항을 업데이트하고 몇 가지 정책을 더욱 명확히 합니다.
- Chrome
- Chrome 확장 프로그램
서비스 워커 개요
서비스 워커의 개요입니다.
Workbox란 무엇인가요?
일반적인 서비스 워커 라우팅 및 캐싱을 간소화하는 모듈 모음인 Workbox를 소개합니다.
서비스 워커 캐싱 전략
서비스 워커의 캐싱 개요
서비스 워커의 삶
오프라인 애플리케이션을 가능하게 하는 서비스 워커의 동작 방식 이해
Chrome 확장 프로그램을 Manifest V3로 전환
확장 프로그램을 Manifest V3로 이동하기 위한 계획에 관한 세부정보 공유
- Chrome 확장 프로그램
- Chrome
Chrome 95 지원 중단 및 삭제
계획 수립에 도움이 되도록 Chrome 95의 지원 중단 및 삭제에 관한 요약입니다.
- Chrome
Chrome 94의 새로운 기능
Chrome 94가 출시됩니다. `` 요소의 기본 색상 공간이 이제 공식적으로 SRGB로 정의되며 Display P3로 변경할 수 있습니다. 내장된 오디오 및 동영상 코덱에 액세스하는 새로운 낮은 수준의 방법이 있으며 이는 스트리밍 게임, 동영상 편집기 등에 중요합니다. WebGPU가 오리진 트라이얼을 시작합니다. 이 외에도 다양한 기능이 있습니다.
- Chrome
DevTools의 새로운 기능 (Chrome 95)
새로운 CSS 길이 작성 도구, 문제 탭의 숨기기 문제, 속성 표시 개선 등 여러 기능이 추가되었습니다.
- Chrome
자세히 알아보기: VideoNG
최신 재생 시스템에 대해 알아보고 Chromium이 매일 수억 시간의 시청 시간을 지원하는 방식을 알아보세요.
- Chromium
DevTools에서 CSS 인프라 현대화
DevTools에서 CSS 인프라를 연구하고 업데이트한 방법
- Chrome
VirtualKeyboard API를 사용한 완전한 제어
터치 기기의 가상 키보드가 표시될 때 브라우저가 콘텐츠 오클루전을 처리하는 것을 스스로 관리합니다.
Lighthouse 8.4의 새로운 기능
이제 Lighthouse 8.4가 모바일 표시 영역 없이 LCP 이미지의 지연 로드와 FID 실패를 방지합니다.
- Chrome
Chrome 93의 새로운 기능
Chrome 93이 출시됩니다. 이제 자바스크립트 모듈과 마찬가지로 import 문을 사용하여 CSS 스타일 시트를 로드할 수 있습니다. 설치된 PWA는 URL 핸들러로 등록될 수 있으므로 사용자가 PWA로 바로 이동할 수 있습니다. Multi-Screen Window Placement API가 개발자 의견을 토대로 업데이트되었으며 두 번째 오리진 트라이얼이 시작됩니다. 안정적인 출시 주기가 4주로 단축됩니다. 그 밖에도 많은 기능이 제공됩니다.
- Chrome
Chrome 93의 지원 중단 및 삭제
계획 수립에 도움이 되도록 Chrome 93의 지원 중단 및 삭제에 관한 요약입니다.
- Chrome
Chrome 94 지원 중단 및 삭제
계획 수립에 도움이 되도록 Chrome 94의 지원 중단 및 삭제에 관한 요약입니다.
- Chrome
비공개 네트워크 액세스 업데이트: 지원 중단 체험판 소개
Chrome은 Chrome 94에서 비공개 네트워크 액세스 사양의 일부로 비보안 공개 웹사이트에서 비공개 네트워크 엔드포인트에 액세스하는 기능이 지원 중단됩니다. 아래 내용을 참고하여 권장 조치를 확인하세요.
- Chrome
Chromium Chronicle #24: StrongAlias, IdType 및 TokenType
동일한 유형이 호환되지 않는 도메인의 값을 나타내기도 하여 버그를 유발할 수 있습니다. 다행히 Chromium의 //base를 사용하면 명시적이고 구분되는 유형을 쉽게 도입할 수 있습니다.
- Chrome
최신 클라이언트 측 라우팅: Navigation API
단일 페이지 애플리케이션을 빌드하는 향상된 기능을 추가하는 새 API인 Navigation API에 대해 알아봅니다.
RenderingNG의 주요 데이터 구조
RenderNG 아키텍처의 구성요소와 렌더링 파이프라인이 이를 통해 흐르는 방식을 이해합니다.
- Chromium
DevTools의 새로운 기능 (Chrome 94)
원하는 언어로 DevTools, 새로운 Nest Hub 기기, 새로운 CSS 컨테이너 쿼리 배지 등을 사용해 보세요.
- Chrome
DevTools의 CSS 그리드 도구
DevTools에서 CSS 그리드 도구 지원을 설계하고 구현한 방법
- Chrome DevTools
- Chrome
DevTools의 CSS 그리드 도구
DevTools에서 CSS 그리드 도구 지원을 설계하고 구현한 방법
Chrome 92의 지원 중단 및 삭제
계획 수립에 도움이 되도록 Chrome 92의 지원 중단 및 삭제에 관한 요약입니다.
- Chrome
Chrome 오리진 트라이얼 문제 해결하기
메타 태그, 헤더, 스크립트의 시도 토큰과 관련된 일반적인 문제를 해결합니다. Chrome DevTools의 디버깅 지원에 대해서도 알아봅니다.
교차 출처 삽입 정책
manifest.json의 cross_origin_embedder_policy 속성에 대한 참조 문서입니다.
- Chrome 확장 프로그램
교차 출처 오프너 정책
manifest.json의 cross_origin_opener_policy 속성에 대한 참조 문서입니다.
- Chrome 확장 프로그램
교차 출처 격리
확장 프로그램의 교차 출처 분리 개요
- Chrome 확장 프로그램
Chrome 91의 지원 중단 및 삭제
계획 수립에 도움이 되도록 Chrome 91의 지원 중단 및 삭제에 관한 요약입니다.
- Chrome
교차 출처 삽입 정책
manifest.json의 cross_origin_embedder_policy 속성에 대한 참조 문서입니다.
- Chrome 확장 프로그램
교차 출처 오프너 정책
manifest.json의 cross_origin_opener_policy 속성에 대한 참조 문서입니다.
- Chrome 확장 프로그램
OS 로그인 시 PWA 자동 시작
많은 운영체제에서 사용자가 로그인할 때 애플리케이션을 자동으로 실행하는 기능을 제공합니다. 이제 설치된 웹 애플리케이션에서 이 기능을 사용할 수 있습니다.
- Chrome
same-origin으로의 Wasm 모듈 공유 제한
동일한 사이트 환경 간에 WebAssembly 모듈을 공유하는 경우 동일한 출처로 제한됩니다.
- Chrome
COEP를 사용하여 CORP 헤더 없이 교차 출처 리소스 로드: 사용자 인증 정보 없음
'Cross-Origin-Embedder-Policy: credentialsless'는 Chrome 93부터 오리진 트라이얼에 제공됩니다. 이 새로운 값을 사용하면 사용자 인증 정보가 없는 요청을 전송하여 교차 출처 리소스가 `CORP: 교차 출처` 헤더로 응답할 필요 없이 웹페이지에서 교차 출처 분리를 사용할 수 있습니다.
- Chrome
WebDriver BiDi - 교차 브라우저 자동화의 미래
WebDriver BiDi의 정의와 브라우저 간 자동화의 미래인 이유 알아보기
- Chrome
Chromium Chronicle #23: Chrome 인프라의 확인된 빌드
Google은 Chrome과 인프라를 위한 정책 시행 확인을 구현하여 보안을 위한 특정 최소 기준을 충족하는지 확인할 수 있었습니다.
- Chrome
WebOTP API를 사용하여 데스크톱에서 전화번호 인증
Chrome 93부터 웹사이트에서 데스크톱 Chrome을 통해 전화번호를 인증할 수 있습니다.
DevTools의 새로운 기능 (Chrome 93)
수정 가능한 CSS 컨테이너 쿼리, 웹 번들 미리보기, 콘솔에서 문자열 처리 개선 등
- Chrome
RenderingNG 아키텍처
렌더링 아키텍처의 구성요소와 렌더링 파이프라인이 이를 통해 흐르는 방식을 알아봅니다.
- Chromium
웹 플랫폼으로 라우팅을 가져오는 URLPattern
공통 패턴 일치 사용 사례를 표준화하는 접근 방식
Android 개념 (웹 개발자용)
Android 및 Play를 처음 접하는 웹 개발자를 위한 관련 핵심 Android 개념입니다.
Chrome 확장 프로그램: 더 안전하고 일관성 있는 웹 스토어를 위한 확장 프로그램 정책 설명
확장 프로그램의 품질을 높게 유지하고 개발자 환경을 일관되게 유지하기 위해 보안 요구사항을 업데이트하고 몇 가지 정책을 더욱 명확히 합니다.
- Chrome
- Chrome 확장 프로그램
Chromium Chronicle #22: Know Thy (Depot) 도구
Depot Tools는 Chromium 코드베이스 및 관련 프로젝트에 기여하는 개발자의 워크플로를 간소화하기 위해 Git을 기반으로 빌드된 도구 모음입니다.
- Chrome
자바스크립트 프레임워크에서 리소스 인라인 처리
Aurora 프로젝트와 협력하여 JavaScript 프레임워크에 구현된 최신 최적화에 대해 알아보세요.
Manifest V3의 확장 프로그램 작업
Chrome 확장 프로그램에는 수년 동안 브라우저 및 페이지 작업 API가 있었지만 Manifest V3는 둘 다 일반 Actions API로 대체했습니다. 이 게시물에서는 이러한 API의 역사와 Manifest V3의 변경사항을 살펴봅니다.
- Chrome
RenderingNG
2021년에는 주로 Chromium의 차세대 렌더링 아키텍처인 RenderingNG의 설계, 빌드, 출시 과정을 완료했습니다.
- Chromium
앱을 위한 고성능 스토리지: Storage Foundation API
Storage Foundation API는 버퍼와 오프셋을 통해 저장된 데이터에 직접 액세스할 수 있는, 기본 파일 시스템과 유사한 Storage API를 제안했습니다.
TablesNG, 상호 운용성 향상을 위해 72가지 Chromium 버그 해결
-- 표를 위한 새로운 렌더링 엔진을 사용하면 웹에서 표 형식 데이터를 작성할 때 일관성이 높아집니다.
- Chrome
CSP가 XSS 공격에 효과적인지 확인
엄격한 콘텐츠 보안 정책 (CSP)으로 교차 사이트 스크립팅 (XSS) 공격을 방지하는 방법을 알아보세요.
Aurora 소개
이 도움말에서는 오픈소스 프레임워크와 긴밀하게 협업하기 위한 Chrome 이니셔티브인 Aurora를 소개합니다.
프레임워크 적합성
이 문서에서는 Google 내부 프레임워크에서 사용되는 방법론인 적합성과 Google에서 이를 자바스크립트 프레임워크 생태계로 오픈소스로 제공할 계획인 방법에 대해 설명합니다.
- Chrome
Memory Inspector 소개
이 도움말에서는 Chrome 91에서 출시된 Memory Inspector를 소개합니다. ArrayBuffer, TypedArray, DataView, Wasm 메모리를 검사할 수 있습니다.
- Chrome
CSS 그리드 레이아웃 검사
Chrome DevTools를 사용하여 CSS 그리드를 보고 변경하는 방법을 알아보세요.
- Chrome DevTools
chrome.scripting 소개
Scripting API는 스크립팅에 중점을 둔 새로운 Manifest V3 API입니다. 이러한 변화가 생긴 이유와 어떤 차이가 있는지 자세히 살펴보겠습니다.
- Chrome
Compute Pressure API
Compute 압력은 시스템에 가해지는 압력을 나타내는 대략적인 상태를 제공합니다. 이를 통해 구현 시 적절한 기본 하드웨어 측정항목을 사용하여 시스템이 감당할 수 없는 스트레스를 받지 않는 한 사용 가능한 모든 처리 능력을 활용할 수 있도록 할 수 있습니다.
URL 핸들러로서의 PWA
PWA를 URL 핸들러로 등록한 후 사용자가 등록된 URL 패턴 중 하나와 일치하는 하이퍼링크를 클릭하면 등록된 PWA가 열립니다.
DevTools의 새로운 기능 (Chrome 92)
CSS 그리드 편집기, 콘솔에서의 const 재선언 지원, 소스 순서 뷰어 등.
- Chrome
Chromium Chronicle #21: ChromeOS 엔드 투 엔드 UI 자동화
Tast는 Chrome a11y (접근성) 트리를 사용하여 ChromeOS UI를 제어하는 새로운 UI 라이브러리로 만들어졌습니다. 이 라이브러리를 사용하면 개발자가 모든 UI 노출 영역에 대한 엔드 투 엔드 테스트를 쉽게 만들 수 있습니다.
- Chrome
Chrome 91의 새로운 기능
Chrome 91이 출시됩니다. 파일과 상호작용하는 웹 앱에서 이제 File System Access API를 사용할 때 파일 이름과 디렉터리를 제안할 수 있습니다. 클립보드에 있는 파일을 읽을 수도 있습니다. 사이트에 도메인이 두 개 이상 있고 도메인이 동일한 계정 관리 백엔드를 공유하는 경우, Chrome에 도메인이 동일함을 알려 비밀번호 관리자가 올바른 사용자 인증 정보를 추천할 수 있습니다. 또한 I/O의 모든 동영상을 현재 이용할 수 있으며 훨씬 더 많은 동영상이 제공됩니다.
- Chrome
선언적 링크 캡처로 범위 내 링크가 PWA를 여는 방법을 선택합니다.
선언적 링크 캡처는 "capture_links"라는 웹 앱 매니페스트 속성에 대한 제안입니다. 이를 통해 개발자는 브라우저가 탐색 범위 밖의 컨텍스트에서 애플리케이션 탐색 범위 내에 있는 URL로 이동하도록 요청받을 때 발생해야 하는 작업을 선언적으로 결정할 수 있습니다.
Chromium에서 브라우저 플래그를 설정하는 방법
Chromium에서 도입하는 일부 새 API의 경우 실험을 위해 브라우저 플래그를 설정해야 합니다. Google Chrome, Microsoft Edge 등 다양한 Chromium 파생 상품에서 이를 실행하는 방법을 알아보세요.
- Chrome
오프라인 우선의 신뢰할 수 있는 웹 활동
사용자가 앱을 처음 열었을 때 인터넷에 연결되어 있지 않은 경우 대체 오프라인 화면을 표시하는 방법
PWA의 URL 프로토콜 핸들러 등록
PWA를 프로토콜 핸들러로 등록한 후, 사용자가 브라우저나 플랫폼별 앱에서 mailto, 비트코인 또는 웹 음악과 같은 특정 스키마가 포함된 하이퍼링크를 클릭하면 등록된 PWA가 열리고 URL을 수신합니다.
Chrome DevTools 스택 트레이스의 속도를 10배 높인 방법
Chrome DevTools 스택 트레이스의 속도를 10배 향상한 방법
- Chrome
MediaStreamTrack용 삽입 가능한 스트림
MediaStreamTrack의 삽입 가능한 스트림은 MediaStreamTrack의 콘텐츠를 조작하거나 새 콘텐츠를 생성하는 데 사용할 수 있는 스트림으로 노출하는 것입니다.
Chromium Chronicle #20: 벤치마킹 테스트 하네스
벤치마크를 추가하면 손쉽게 성능 회귀를 방지하고 성능을 개선할 수 있습니다.
- Chrome
확장 프로그램 매니페스트 변환기
확장 프로그램을 Manifest V3로 변환하는 오픈소스 도구 서비스 워커를 사용하도록 조정하거나 일부 스크립트 삽입을 사용하는 등 비기계적 변경사항이 포함된 코드는 여전히 수동으로 업데이트해야 합니다.
- Chrome
더욱 다양해진 PWA 설치 UI
리치 설치 UI를 소개하고 구현 방법에 대한 안내를 제공합니다.
- Chrome
교차 출처 격리 제한에 맞춰 타이머 정렬
Chrome 91부터 명시적 타이머의 해상도는 교차 출처 분리 없이 플랫폼 전반에서 100마이크로초로 제한됩니다.
- Chrome
DevTools의 새로운 기능 (Chrome 91)
Web Vitals 정보 팝업, CSS 스크롤 스냅 시각화, 새로운 메모리 검사기 등 다양한 기능을 제공합니다.
- Chrome
Manifest V3용 웹 액세스 가능 리소스
Manifest V3용 웹 액세스 가능 리소스가 출시되었습니다. 이제 `manifest.json` 에서 권한 정의를 지원합니다. 개발자는 요청하는 사이트 출처 또는 확장 프로그램 ID를 기준으로 리소스를 제한할 수 있습니다.
- Chrome
Chrome 90의 새로운 기능
Chrome 90이 출시됩니다. CSS 오버플로 속성에 새로운 값이 있습니다. Feature Policy API의 이름이 권한 정책으로 변경되었습니다. 또한 HTML에서 직접 Shadow DOM을 구현하고 사용하는 새로운 방법이 있습니다. 그 밖에도 많은 기능이 제공됩니다.
- Chrome
DevTools 아키텍처 업데이트: DevTools를 TypeScript로 이전
클로저 컴파일러 유형 검사기에서 TypeScript로 Chrome DevTools를 이전하는 방법
- Chrome
Chromium Chronicle #19: CLion을 사용한 더 빠른 개발
CLion IDE를 통해 여러 기호를 탐색하고 코드베이스를 검색하는 등의 작업을 할 수 있습니다.
- Chrome
Chrome 90의 지원 중단 및 삭제
계획 수립에 도움이 되도록 Chrome 90의 지원 중단 및 삭제에 관한 요약입니다.
- Chrome
BigQuery의 CrUX 보고서에 순위 규모 추가
BigQuery에서 CrUX 보고서에 순위 규모 추가.
- Chrome
VersionHistory API 가이드
VersionHistory 웹 서비스 API를 사용하여 Chrome 버전 기록 정보에 프로그래밍 방식으로 액세스하는 방법에 대한 안내 가이드입니다.
VersionHistory API 예시
VersionHistory 웹 서비스 API의 사용 예
VersionHistory API 참조
VersionHistory 웹 서비스 API에 대한 기술 참조 정보입니다.
Chrome의 출시 주기 단축
Google은 올해 말 출시 주기를 단축하고 현재의 6주 주기에서 4주마다 새로운 버전의 Chrome을 공개 버전 채널로 출시할 계획입니다.
- Chrome
Chrome 89의 새로운 기능
Chrome 89가 출시됩니다. WebHID, WebNFC 및 Web Serial은 오리진 트라이얼을 마치고 이제 정식 버전으로 제공됩니다. Google에서는 일부 개발자가 PWA 설치 가능 여부를 확인하는 데 사용했던 허점을 닫고 있습니다. 웹 공유 및 웹 공유 타겟이 데스크톱에 출시됩니다. 이 외에도 다양한 기능이 있습니다.
- Chrome
DevTools의 새로운 기능 (Chrome 90)
CSS Flexbox에 대한 디버깅 지원, 페이지의 성능 주의 표시, 문제 탭 업데이트 등을 지원합니다.
- Chrome
DevTools에서 CSS-in-JS 지원
DevTools에서 CSS-in-JS를 지원하는 방법과 일반 CSS와의 차이점
DevTools에서 CSS-in-JS 지원
DevTools에서 CSS-in-JS를 지원하는 방법과 일반 CSS와의 차이점
- Chrome DevTools
- Chrome
미래의 디스플레이 모드 준비
개발자는 display_override 속성을 사용하여 PWA가 표시되어야 하는 모드의 맞춤 대체 체인을 정의할 수 있습니다.
하드웨어 가속 애니메이션 기능 업데이트
Chromium은 SVG 애니메이션, 백분율 기반 변환, 클립 경로, 배경 이미지 등에 대한 하드웨어 가속 기능을 업데이트하고 있습니다.
- Chrome
Chromium Chronicle #18: Chromium 코드 적용 범위
테스트 적용 범위는 특정 테스트 모음이 실행될 때 소스 코드가 얼마나 많이 실행되는지 측정합니다.
- Chrome
Console에서 메시지 서식 및 스타일 지정
콘솔에서 메시지의 서식을 지정하고 메시지의 스타일을 지정하는 방법을 알아보세요.
- Chrome DevTools
2021년 세계 모국어의 날
국제 모국어의 날은 매년 2월 21일에 전 세계에서 문화적 다양성을 기념하는 행사입니다. 이 단체는 전 세계에서 사용되는 언어의 보존과 보호를 장려하며 다국어주의에 찬사를 보냅니다.
- Chrome
프로그레시브 웹 앱 오프라인 지원 감지 개선
오프라인 지원 확인은 처음부터 PWA 설치 가능 기준의 일부였습니다.
- Chrome
DevTools 시작 시간 단축
프런트엔드에서 메시지 전달의 DevTools 성능 오버헤드를 줄입니다.
- Chrome
Chrome 89의 지원 중단 및 삭제
계획에 도움이 되도록 Chrome 89의 지원 중단 및 삭제에 관한 요약입니다.
- Chrome
Chromium Chronicle #17: 브라우저 테스트 믹스
브라우저 테스트를 작성할 때 사용자가 수동으로 할 수 있는 설정 작업을 프로그래밍 방식으로 수행하고 싶은 경우가 많습니다. 이를 위해 믹스인은 간단한 브라우저 테스트 설정을 재사용 가능한 방식으로 실행하기 위한 도구 모음입니다.
- Chrome
Google Play 결제를 통해 Digital Goods API 및 Payment Request API로 결제 받기
PWA에서 디지털 상품 API, Payment Request API, 신뢰할 수 있는 웹 활동을 사용하여 Google Play 결제를 통해 결제 받기
클라이언트 힌트로 리소스 선택 자동화
이미지 최적화는 어려운 일이며 자동화는 성공의 열쇠입니다.
- Chrome
Puppeteer를 TypeScript로 이전
Puppeteer를 TypeScript로 이전하는 방법
- Chrome
DevTools의 새로운 기능 (Chrome 89)
신뢰할 수 있는 유형 위반에 대한 디버깅 지원, 표시 영역 밖의 노드 스크린샷 캡처, 네트워크 요청을 위한 새로운 신뢰 토큰 탭 등
- Chrome
Chrome 88의 새로운 기능
Chrome 88이 출시됩니다. 이제 매니페스트 v3를 사용하여 Chrome 웹 스토어에 확장 프로그램을 업로드할 수 있습니다. 가로세로 비율 CSS 속성을 사용하면 모든 요소의 가로세로 비율을 쉽게 설정할 수 있습니다. 이제 신뢰할 수 있는 웹 활동에서 Play 결제를 사용할 수 있으며 그 밖에도 다양한 기능이 제공됩니다. 자세히 알아보고 Chrome 88 개발자를 위한 새로운 기능을 살펴보겠습니다.
- Chrome
Android Chrome 88 및 데스크톱 Chrome 92의 SharedArrayBuffer 업데이트
SharedArrayBuffer는 Android Chrome 88에서 출시됩니다. 교차 출처 분리 페이지에만 사용할 수 있습니다. 데스크톱 Chrome 92부터는 교차 출처 분리 페이지에서만 사용할 수 있습니다. 오리진 트라이얼에 등록하여 데스크톱 Chrome 113까지 현재 동작을 유지할 수 있습니다.
- Chrome
Chrome 88부터 체인으로 연결된 JS 타이머의 과도한 제한
강도 조절은 페이지가 5분 이상 숨겨졌거나, 페이지가 30초 이상 무음 상태이고, WebRTC가 사용되지 않고, 타이머 체인이 5개 이상인 경우에 적용됩니다.
- Chrome
Chromium Chronicle #16: 데스크톱에서 Google Apps 업데이트하기
데스크톱에서 Chrome이 어떻게 최신 상태로 유지되는지 궁금하신가요? 아니면 Chromebook, Chromecast, Android에 업데이트가 어떻게 제공되나요?
- Chrome
최신 도구로 WebAssembly 디버깅
Chrome DevTools의 WebAssembly용 새로운 디버깅 환경에 대한 단계별 개요입니다.
- Chrome
DevTools 아키텍처 업데이트: 웹 구성요소로 마이그레이션
Chrome DevTools를 Web Components로 이전하는 이유와 방법을 알아봅니다.
- Chrome
Chrome 88 지원 중단 및 삭제
계획 수립에 도움이 되도록 Chrome 88의 지원 중단 및 삭제에 관한 요약입니다.
- Chrome
새로운 developer.chrome.com에 오신 것을 환영합니다.
사이트 개편 및 2021년 계획 요약
- Chrome
Google Play 결제 사용
Google Play 결제에서는 카탈로그, 가격 및 정기 결제, 보고서를 관리하는 도구와 Play 스토어에서 제공하는 결제 흐름을 제공합니다.
Web In Play의 새로운 기능
신뢰할 수 있는 웹 활동을 사용하는 웹 애플리케이션의 새로운 기능에 대해 알아보세요.
Play 스토어에 앱 추가
Play 스토어에 TWA 추가
퍼사드로 서드 파티 리소스 지연 로드
퍼사드가 있는 서드 파티 리소스를 지연 로드하는 기회를 알아봅니다.
Chromium Chronicle #15: 대상 공개 상태 제한
Chromium에서는 다른 곳에서 유용하지만 숨겨진 제한사항이 있을 수 있는 하나의 구성요소를 위해 작성된 코드를 찾는 것이 일반적입니다. 안전을 위해 대상 공개 상태를 제한하여 위험한 기능에 대한 외부 액세스를 제한합니다.
- Chrome
신뢰할 수 있는 웹 활동에서 Play 결제 사용
Google Play 결제를 신뢰할 수 있는 웹 활동 프로젝트에 통합하는 방법을 알아보세요.
Blink Renderer의 색각이상 시뮬레이션
DevTools와 Blink Renderer에 색각이상 시뮬레이션을 구현한 이유와 방법
- Chromium
isInputPending()을 사용한 JS 예약 개선
로드 성능과 입력 반응성 사이의 절충점을 피하는 데 도움이 될 수 있는 새로운 JavaScript API.
Chrome 87의 새로운 기능
Chrome 87이 출시됩니다. 이제 웹캠을 지원하는 웹캠에서 화면 이동, 기울이기, 확대/축소를 제어할 수 있고, 범위 지정 요청과 서비스 워커에 많은 해결 방법이 필요하지 않으며, font Access API가 오리진 트라이얼을 시작하는 등 다양한 기능을 제공합니다. 자세히 알아보고 Chrome 87 개발자를 위한 새로운 기능을 살펴보겠습니다.
- Chrome
작업 상자 레시피
개별 패키지에서 직접 설정할 필요 없이 일반적인 워크박스 패턴을 쉽게 사용할 수 있습니다.
DevTools의 새로운 기능 (Chrome 88)
새로운 CSS 각도 시각화 도구, 지원되지 않는 이미지 유형 및 저장용량 할당량 에뮬레이션, 새로운 웹 바이탈 레인 등
- Chrome
신뢰할 수 있는 웹 활동에서 웹 공유 타겟 사용
신뢰할 수 있는 웹 활동을 사용하여 프로젝트에서 웹 공유 타겟을 사용 설정하는 방법을 알아보세요.
Puppetaria: 접근성 중심 Puppeteer 스크립트
Puppetaria - 접근성을 우선으로 하는 Puppeteer 스크립트로, CSS 선택자를 사용하는 대신 접근성 트리 쿼리를 기반으로 대체 쿼리 핸들러를 허용합니다.
- Chrome
의견 요청: 사설 네트워크의 CORS (RFC1918)
클라이언트의 내부 네트워크에 있는 기기와 서버가 대규모로 웹에 노출되면 악의적인 공격에 취약해집니다. CORS-RFC1918은 기본적으로 브라우저에서 공개 네트워크의 요청을 차단하고 내부 기기에서 이러한 요청을 선택하도록 요구하는 제안입니다.
- Chrome
Manifest V2 정보
Chrome 확장 프로그램 개발자를 위한 문서입니다.
- Chrome 확장 프로그램
Chromium Chronicle #14: 폭포식 구조에 테스트 추가
Chrome의 새로운 기능에 대한 회귀를 감지하고 싶으신가요? 폭포식 구조, Chrome의 연속 빌드 및 테스트 인프라에 테스트를 추가하세요.
- Chrome
설치된 웹 애플리케이션을 파일 핸들러로 허용
앱을 운영체제에 파일 핸들러로 등록합니다. 이제 웹 앱이 파일을 읽고 쓸 수 있으므로 다음 논리적 단계는 개발자가 이러한 웹 앱을 앱에서 만들고 처리할 수 있는 파일의 파일 핸들러로 선언하도록 하는 것입니다. File Handling API를 사용하면 바로 이 작업을 할 수 있습니다. 텍스트 편집기 앱을 파일 핸들러로 등록하고 설치한 후 macOS에서.txt 파일을 마우스 오른쪽 버튼으로 클릭하고 '정보 가져오기'를 선택하여 OS에 항상 이
Chrome DevTools WebAuthn 탭을 빌드한 방법
개발자가 인증자를 에뮬레이션하고, 기능을 맞춤설정하고, 상태를 검사할 수 있도록 Chrome DevTools WebAuthn 탭을 빌드한 방법
Chrome 87 지원 중단 및 삭제
계획 수립에 도움이 되도록 Chrome 87의 지원 중단 및 삭제에 관한 요약입니다.
- Chrome
WebCodecs로 동영상 처리
인코딩된 동영상이나 오디오의 프레임 및 혼합되지 않은 청크와 같은 동영상 스트림의 구성요소를 사용합니다.
Chrome 86의 새로운 기능
Chrome 86이 출시됩니다. 이제 File System Access API를 안정적으로 사용할 수 있습니다. 웹 HID 및 멀티스크린 창 배치 API의 새로운 오리진 트라이얼이 있습니다. CSS에 새로운 기능이 몇 가지 추가되었습니다. 자세히 알아보고 Chrome 86의 개발자를 위한 새로운 기능을 살펴보겠습니다.
- Chrome
캐시를 파티셔닝하여 보안 및 개인 정보 보호 확보
Chrome의 HTTP 캐시 파티셔닝은 보안 및 개인 정보 보호 강화에 도움이 됩니다.
- Chrome
서드 파티 오리진 트라이얼
삽입된 콘텐츠 제공자가 여러 사이트에서 신규 또는 실험적 웹 플랫폼 기능을 테스트하는 방법에 대해 알아보세요.
DevTools의 새로운 기능 (Chrome 87)
새로운 CSS 그리드 디버깅 도구, Web Authn 탭, 이동 가능한 도구 및 Computed 사이드바 창
- Chrome
Chrome DevTools 문제 탭을 구축한 방법
문제 발견 및 해결에 관한 개발자 환경을 개선하기 위해 Chrome DevTools Issues 탭을 구축한 방법
- Chrome
센서: 기기 센서 에뮬레이션
센서 패널을 사용하여 위치정보를 재정의하고, 기기 방향을 시뮬레이션하고, 강제 터치하고, 유휴 상태를 에뮬레이션합니다.
- Chrome DevTools
Workbox v5에서 v6으로 이전
Workbox v5에서 v6으로 이전하기 위한 가이드입니다.
일반적이지 않은 HID 기기에 연결
WebHID API를 사용하면 웹사이트에서 대체 보조 키보드와 이국적인 게임패드에 액세스할 수 있습니다.
Window Management API로 여러 디스플레이 관리
Window Management API를 사용하면 머신에 연결된 디스플레이를 열거하고 특정 화면에 창을 배치할 수 있습니다.
DevTools 아키텍처 업데이트: 자바스크립트 모듈로 이전
Chrome DevTools를 자바스크립트 모듈로 이전하는 방법
- Chrome
Chrome 86 지원 중단 및 삭제
계획에 도움이 되도록 Chrome 86의 지원 중단 및 삭제에 관한 요약입니다.
- Chrome
Chrome 85의 새로운 기능
Chrome 85가 출시됩니다. 콘텐츠 가시성: 자동을 사용하여 렌더링 성능을 개선할 수 있습니다. 이제 CSS에서 CSS 속성을 설정할 수 있습니다. 이제 getInstalledRelatedApps() API로 Windows 앱 또는 PWA가 설치되어 있는지 확인할 수 있습니다. 앱 아이콘 바로가기는 Windows에서도 작동합니다 (현재는). 가져오기 업로드 스트리밍에 대한 오리진 트라이얼이 있습니다. 그 외 다양한 기능 자세히 알아보고 Chrome 85의 개발자를 위한 새로운 기능을 살펴보겠습니다.
- Chrome
로컬 글꼴로 고급 서체 사용
Local Font Access API는 사용자의 설치된 로컬 글꼴을 열거하고 다양한 TrueType/OpenType 테이블에 대한 하위 수준 액세스를 제공합니다.
DevTools의 새로운 기능 (Chrome 86)
새 미디어 패널, 노드 스크린샷 캡처, 문제 탭 업데이트, 누락된 로컬 글꼴, 비활성 사용자, preferreds-reduced-data 에뮬레이션
- Chrome
추가 HTTP 요청 헤더 추가
맞춤 탭 인텐트에 HTTP CORS 헤더를 추가하는 방법에 대한 가이드입니다.
직렬 포트 읽기 및 쓰기
Web Serial API는 웹사이트가 직렬 장치와 통신할 수 있도록 하여 웹과 실제 세계를 연결합니다.
Chrome의 새로운 기본 리퍼러 정책 - strict-origin-when-cross-origin
Chrome의 새로운 기본 리퍼러 정책 - strict-origin-when-cross-origin
- Chrome
Keyboard Lock API로 키 캡처
Keyboard Lock API를 사용하면 웹사이트에서 일반적으로 기본 운영체제에 예약되는 키를 캡처할 수 있습니다. 전체 화면 몰입형 환경 (예: 게임 또는 원격 액세스 앱)을 제공하는 웹 애플리케이션용입니다.
브라우저-fs-access 라이브러리로 파일과 디렉터리 읽기 및 쓰기
모든 최신 브라우저는 로컬 파일과 디렉터리를 읽을 수 있습니다. 그러나 진정한 쓰기 액세스, 즉 파일 다운로드 이상의 권한은 File System Access API를 구현하는 브라우저로 제한됩니다. 이 게시물에서는 File System Access API 상의 추상화 계층 역할을 하고 파일 처리를 위한 기존 접근 방식으로 투명하게 대체하는 브라우저-fs-access라는 지원 라이브러리를 소개합니다.
Chrome 85의 지원 중단 및 삭제
계획 수립에 도움이 되도록 Chrome 85의 지원 중단 및 삭제에 관한 요약입니다.
- Chrome
fetch API를 사용한 스트리밍 요청
Chromium은 현재 버전 105부터 업로드 스트리밍을 지원하므로 전신을 사용할 수 있게 되기 전에 요청을 시작할 수 있습니다.
Houdini - CSS 이해하기
Houdini는 CSS 엔진의 내부 기능을 개발자에게 노출하는 API 모음입니다.
Chrome 84의 새로운 기능
Chrome 84가 출시됩니다. 사용자는 앱 아이콘 바로가기를 사용하여 앱 내에서 일반적인 작업을 시작할 수 있습니다. Web Animations API는 이전에 지원되지 않았던 다양한 기능을 추가로 지원합니다. Wake Lock 및 Content Indexing API가 오리진 트라이얼에서 더 이상 제공되지 않습니다. 유휴 상태 감지 및 SIMD에 대한 새로운 오리진 트라이얼이 있습니다. 이외에도 다양한 기능이 있습니다. 자세히 알아보고 Chrome 84의 개발자를 위한 새로운 기능을 살펴보겠습니다.
- Chrome
Android 11에서 맞춤 탭 사용
Android 11에서 맞춤 탭을 사용하는 방법
- Chrome
사용하지 않는 자바스크립트 삭제하기
Lighthouse의 "사용하지 않는 자바스크립트 삭제" 감사를 통과하는 방법을 알아보세요.
DevTools의 새로운 기능 (Chrome 85)
CSS-in-JS 프레임워크, Lighthouse 6.0, 새로운 자바스크립트 기능 등을 위한 스타일 편집
- Chrome
사용자 에이전트 클라이언트 힌트를 사용한 사용자 개인 정보 보호 및 개발자 환경 개선
User-Agent Client Hints는 Client Hints API의 새로운 확장으로, 개발자가 개인 정보를 보호하고 인체공학적인 방식으로 사용자의 브라우저에 대한 정보에 액세스할 수 있도록 지원합니다. 클라이언트 힌트를 사용하면 개발자가 User-Agent (UA) 문자열에서 파싱할 필요 없이 사용자의 기기 또는 조건에 관한 정보를 적극적으로 요청할 수 있습니다. 이 대체 경로를 제공하는 것은 결국 User-Agent 문자열 세부사항을
CrUX API 사용 방법
Chrome UX Report API를 사용하여 수백만 개의 웹사이트에서 실제 사용자 환경 데이터에 RESTful로 액세스하는 방법을 알아보세요.
- Chrome UX 보고서
Looker Studio에서 CrUX 대시보드를 빌드하는 방법
Looker Studio는 Chrome UX 보고서와 같은 빅데이터 소스를 바탕으로 대시보드를 빌드할 수 있는 강력한 데이터 시각화 도구입니다. 이 가이드에서는 나만의 맞춤 CrUX 대시보드를 만들어 출처의 사용자 환경을 추적하는 방법을 알아봅니다.
- Chrome UX 보고서
CrUX BigQuery 데이터 세트를 사용하는 방법
이 가이드에서는 BigQuery를 사용하여 CrUX 데이터 세트에 쿼리를 작성하여 웹에서 사용자 경험 상태에 대한 유용한 결과를 추출하는 방법을 알아봅니다.
- Chrome UX 보고서
WebTransport 사용
WebTransport는 지연 시간이 짧은 양방향, 클라이언트-서버 메시징 기능을 제공하는 API입니다. 사용 사례와 향후 구현 방식에 대한 의견을 제공하는 방법에 대해 자세히 알아보세요.
Chrome 84 지원 중단 및 삭제
계획 수립에 도움이 되도록 Chrome 84의 지원 중단 및 삭제에 관한 요약입니다.
- Chrome
Chrome 83의 새로운 기능
Chrome 83이 출시됩니다. 신뢰할 수 있는 유형에 대한 지원을 추가하여 교차 사이트 스크립팅 취약점을 방지합니다. 양식 요소가 중요한 변화를 줍니다. 메모리 누수를 감지하는 새로운 방법이 있습니다. 또한 네이티브 파일 시스템 API는 추가된 기능과 함께 새로운 오리진 트라이얼을 시작합니다. 자세히 알아보고 Chrome 83의 개발자를 위한 새로운 기능을 살펴보겠습니다.
- Chrome
Lighthouse 6.0의 새로운 기능
새로운 측정항목, 실적 점수 업데이트, 새로운 감사 등 오늘 Lighthouse 6.0이 출시됩니다. Lighthouse 는 개발자가 사이트의 사용자 환경을 개선할 수 있는 기회와 진단을 제공하는 자동화된 웹사이트 감사 도구입니다. Chrome DevTools, npm (Node 모듈 및 CLI로), 브라우저 확장 프로그램 ( Chrome 및 Firefox )으로 사용할 수 있습니다. PageSpeed Insights 를 비롯한 많은
- Chrome
Idle Detection API로 비활성 사용자 감지
유휴 상태 감지 API는 키보드, 마우스, 화면과의 상호작용 부족, 화면 보호기 활성화, 화면 잠금, 다른 화면으로의 이동 등을 나타내는 유휴 상태가 되면 개발자에게 알립니다. 개발자가 정의한 기준점에 따라 알림이 트리거됩니다.
과도한 광고 개입 처리
과도한 광고 개입 처리
- Chrome
문제: 문제 찾기 및 해결
문제 패널을 사용하여 웹사이트의 문제를 찾아 해결하세요.
- Chrome DevTools
DevTools의 새로운 기능 (Chrome 84)
새로운 문제 탭, 검사 모드 도움말의 접근성 정보 등
- Chrome
문자 집합 선언이 누락되었거나 HTML에서 너무 늦게 발생합니다.
HTML에 문자 인코딩 선언을 추가하는 방법을 알아봅니다.
Chrome 83의 지원 중단 및 삭제
계획 수립에 도움이 되도록 Chrome 83의 지원 중단 및 삭제에 관한 요약입니다.
- Chrome
Chrome 81의 새로운 기능
Chrome 81이 출시됩니다. 오리진 트라이얼에서 종료된 앱 아이콘 배지입니다. 이제 브라우저에서 증강 현실 히트 테스트를 사용할 수 있습니다. 웹 NFC가 오리진 트라이얼을 시작합니다. 조정된 Chrome 출시 일정에 관한 업데이트도 있습니다. 자세히 알아보고 Chrome 81의 개발자를 위한 새로운 기능을 살펴보겠습니다.
- Chrome
WebSocketStream: 스트림을 WebSocket API와 통합
WebSocketStream은 스트림을 WebSocket API와 통합합니다. 이렇게 하면 앱이 수신된 메시지에 백프레셔를 적용할 수 있습니다.
Chromium Chronicle #13: RR을 사용한 시간 이동 디버깅
디버거에서 동일한 테스트를 반복해서 실행하면서 코드의 상태가 어떻게 잘못되었는지 알아내려고 하시나요? 여러분을 위한 도구가 있습니다. RR은 실행 트레이스를 기록하여 쉽게 뒤로 가거나, 역방향으로 실행하고, 변수 값이 변경된 부분 또는 객체에서 함수가 마지막으로 호출된 시점을 확인할 수 있습니다.
- Chrome
DevTools의 새로운 기능 (Chrome 83)
색각 이상, 언어, COOP 및 COEP 디버깅 등을 에뮬레이션합니다.
- Chrome
Chrome 81의 지원 중단 및 삭제
계획 수립에 도움이 되도록 Chrome 81의 지원 중단 및 삭제에 관한 요약입니다.
- Chrome
Android용 Chrome에서 NFC 기기와 상호작용
이제 Android용 Chrome에서 NFC 태그를 읽고 쓸 수 있습니다.
Chrome 사용자 환경 보고서에 알림 권한 데이터 추가하기
Google은 사이트 소유자가 알림 권한 측정항목을 이해할 수 있도록 이 데이터를 20201년 데이터 세트의 Chrome 사용자 환경 보고서 (CrUX)에 추가할 예정입니다. 이를 통해 사이트 소유자는 해당 사이트 및 카테고리 내의 유사한 사이트에 대한 일반적인 사용자 알림 권한 응답을 더 잘 이해할 수 있습니다.
- Chrome
Chromium Chronicle #10: Pixel 테스트로 UI 회귀 포착
Chrome의 테스트 전략은 자동화된 기능 정확성 테스트와 수동 테스트에 크게 의존하지만 둘 다 사소한 UI 회귀를 안정적으로 포착하지 않습니다. 픽셀 테스트를 사용하여 데스크톱 브라우저 UI 테스트를 자동화할 수 있습니다.
- Chrome
레이 오브 더 랜드
신뢰할 수 있는 웹 활동을 만들기 위한 라이브러리 및 도구에 대한 개요입니다.
Chrome 80의 새로운 기능
Chrome 80은 현재 출시 중이며 개발자를 위한 많은 새로운 기능이 포함되어 있습니다. worker의 모듈, JavaScript의 선택적 체이닝, 새로운 오리진 트라이얼, 오리진 트라이얼이 종료된 기능 등이 지원됩니다. 자세히 알아보고 Chrome 80의 개발자를 위한 새로운 기능을 살펴보겠습니다.
- Chrome
통합 가이드
Android 앱에서 신뢰할 수 있는 웹 활동을 사용하는 방법을 알아봅니다.
Android 맞춤 탭 개요
Android 앱에서 URL을 열 때 Android 맞춤 탭을 사용하는 것이 가장 좋은 경우를 알아보세요.
Custom Tab 하위 수준 API 사용
AndroidX 브라우저 지원 라이브러리 없이 맞춤 탭을 사용하는 방법을 알아보세요.
WebView에서 링크의 맞춤 탭 열기
더 나은 사용자 환경을 위해 WebView와 맞춤 탭을 결합합니다.
개요
신뢰할 수 있는 웹 활동을 통해 프로그레시브 웹 앱을 Android 앱에 원활하게 통합하는 방법을 알아보세요.
Android 기기에 맞춤 탭을 지원하는 브라우저가 있는지 확인
Android 기기에 맞춤 탭을 지원하는 브라우저가 있는지 확인하는 방법을 알아보세요.
DevTools의 새로운 기능 (Chrome 81)
Device Mode의 Moto G4, 새로운 쿠키 관련 기능 등이 추가되었습니다.
- Chrome
다중 출처 신뢰할 수 있는 웹 활동
신뢰할 수 있는 웹 활동을 사용하여 여러 개의 원본을 전체 화면으로 열 수 있도록 지원하는 하나의 애플리케이션을 만드는 방법
쿼리 매개변수를 사용하여 신뢰할 수 있는 웹 액티비티에 정보 전달
신뢰할 수 있는 웹 활동을 시작할 때 네이티브 셸에서 웹 애플리케이션으로 정보를 전달하는 방법
android-browser-helper는 신뢰할 수 있는 웹 활동을 빌드하기 위한 새로운 라이브러리입니다.
신뢰할 수 있는 웹 활동을 빌드하기 위한 새 라이브러리인 android-browser-helper가 도입되었습니다.
콘텐츠가 포함된 최대 페인트
Lighthouse의 최대 콘텐츠 렌더링 시간 측정항목과 측정 및 최적화 방법을 알아보세요.
Chrome 80의 지원 중단 및 삭제
계획 수립에 도움이 되도록 Chrome 80의 지원 중단 및 삭제에 관한 요약입니다.
- Chrome
Workbox v4에서 v5로 이전
Workbox v4에서 v5로의 마이그레이션 가이드입니다.
Chromium Chronicle #9: ClusterFuzz
ClusterFuzz에서 발견한 우선순위가 높은 보안 버그를 수정하라는 요청을 받을 수도 있습니다. 기본 설명 이러한 버그를 심각하게 받아들여야 할까요? 무엇을 도와드릴까요?
- Chrome
Content Indexing API를 사용하여 오프라인 사용이 가능한 페이지의 색인 생성
PWA에서는 기사와 미디어 파일을 캐시할 수 있지만, 사용자는 페이지가 오프라인일 때 작동한다는 것을 어떻게 알 수 있을까요? Content Indexing API가 이 질문에 대한 한 가지 답입니다. 색인이 PWA 및 기타 설치된 PWA의 콘텐츠로 채워지면 지원되는 브라우저의 전용 영역에 표시됩니다.
Chrome 79의 새로운 기능
Chrome 79가 출시됩니다. Android에 프로그레시브 웹 앱을 설치하면 마스크 가능한 아이콘에 대한 지원이 제공됩니다. 이제 WebXR Device API로 몰입형 환경을 만들 수 있습니다. Wake Lock API 및 rendersubtree 속성의 오리진 트라이얼이 시작됩니다. 또한 Chrome Dev Summit 2019의 모든 동영상이 현재 온라인에 게시되었습니다. 자세히 알아보고 Chrome 79 개발자를 위한 새로운 기능을 살펴보겠습니다.
- Chrome
DevTools의 새로운 기능 (Chrome 80)
콘솔에서 let 및 클래스 재선언을 지원하고 WebAssembly 디버깅 등을 개선했습니다.
- Chrome
Chrome DevTools의 WebAssembly 디버깅 개선
DevTools 내에서 소스 언어로 코드를 단계별로 실행하고 중단점을 설정하며 스택 트레이스를 리졸브합니다.
- Chrome
Chromium Chronicle #8: GWP-ASan: 야생에서 버그 감지
GWP-ASan은 야생에서 사용하도록 설계된 힙 전용 메모리 오류 감지기입니다. 이 함수는 use-after-free, 버퍼 오버플로/언더플로 및 double free를 감지합니다. ASan과 달리 스택 또는 전역에서 오류를 감지하지 않습니다.
- Chrome
웹 번들 시작하기
웹 번들을 사용하면 블루투스를 통해 웹사이트를 단일 파일로 공유하고 원본 컨텍스트에서 오프라인으로 실행할 수 있습니다.
Periodic Background Sync API를 통한 더욱 풍부한 오프라인 환경
주기적 백그라운드 동기화를 사용하면 웹 애플리케이션이 백그라운드에서 데이터를 주기적으로 동기화하여 웹 앱을 iOS/Android/데스크톱 앱의 동작에 더 가깝게 만들 수 있습니다.
Web Share Target API를 사용하여 공유 데이터 수신
휴대기기나 데스크톱 기기에서 공유 버튼을 클릭하고 앱을 선택한 다음 공유할 사용자를 선택하면 간단하게 공유할 수 있습니다. Web Share Target API를 사용하면 설치된 웹 앱을 기본 운영체제에 등록하여 공유 콘텐츠를 수신할 수 있습니다.
Chrome 79 지원 중단 및 삭제
계획 수립에 도움이 되도록 Chrome 79의 지원 중단 및 삭제에 관한 요약입니다.
- Chrome
Chromium Chronicle #7: 사전 처리 소스
단일 Chromium 소스 파일을 직접 컴파일하면 개발자가 컴파일러 최적화 옵션을 실험하거나 미묘한 매크로 세부정보를 이해하거나 컴파일러 버그를 최소화할 수 있습니다. 이번 달에는 소스를 사전 처리하는 방법을 살펴보겠습니다.
- Chrome
알림 트리거 API
개발자는 Notification Triggers API를 사용하여 네트워크 연결이 필요하지 않은 로컬 알림을 예약할 수 있으므로 캘린더 앱과 같은 사용 사례에 이상적입니다.
Chrome 78의 새로운 기능
Chrome 78이 출시됩니다. 이제 CSS 변수의 "유형"을 제공할 수 있습니다. 이제 importScripts()로 가져온 스크립트에 바이트 단위 검사가 수행되므로 더 최신 서비스 워커를 사용할 수 있습니다. 또한 Native File System과 SMS Receiver를 포함하여 몇 가지 깔끔한 새 기능을 제공하는 새로운 오리진 트라이얼 두 가지에 대한 세부정보도 확인할 수 있었습니다. 또한 2019년 11월 11일부터 12일까지 Chrome DevSummit이 개최됩니다. 자세히 알아보고 Chrome 78 개발자를 위한 새로운 기능을 알아보겠습니다.
- Chrome
DevTools의 새로운 기능 (Chrome 79)
쿠키가 차단된 이유를 디버그하고 preferreds-color-scheme(어두움, 코드 적용 범위 업데이트 등)을 시뮬레이션합니다.
- Chrome
총 차단 시간
Lighthouse의 총 차단 시간 측정항목과 측정 및 최적화 방법을 알아보세요.
WebOTP API로 웹에서 전화번호 인증
SMS를 통해 전송된 OTP를 찾고, 기억하고, 입력하는 것은 번거로운 일입니다. WebOTP API는 사용자의 OTP 워크플로를 간소화합니다.
Chromium Chronicle #6: Monorail' Grid View
Chrome의 문제 추적기인 Monorail은 Kanban 스타일 보드에서 문제를 시각화할 수 있는 그리드 보기를 제공합니다. 이 에피소드에서는 그리드 모드 사용 방법을 설명합니다.
- Chrome
Chrome 78 지원 중단 및 삭제
계획 수립에 도움이 되도록 Chrome 78의 지원 중단 및 삭제에 관한 요약입니다.
- Chrome
Lighthouse 성능 점수
Lighthouse에서 페이지의 전체 성능 점수를 생성하는 방법을 알아보세요.
Lighthouse 접근성 점수
Lighthouse에서 페이지의 접근성 점수를 생성하는 방법을 알아봅니다.
최신 서비스 워커(기본)
서비스 워커 스크립트의 업데이트를 확인하는 HTTP 요청은 더 이상 HTTP 캐시로 처리되지 않으며 가져온 스크립트가 서비스 워커 업데이트 흐름을 트리거할 수 있습니다.
- Chrome
Chrome 77의 새로운 기능
Chrome 77이 출시됩니다. 최대 콘텐츠 렌더링 시간을 사용하여 사이트의 실적을 추적하는 더 좋은 방법이 있습니다. Forms에 새로운 기능이 추가되었습니다. 네이티브 지연 로드를 사용해 보세요. Chrome DevSummit은 2019년 11월 11일부터 12일까지 개최됩니다. 그 외 다양한 기능 자세히 알아보고 Chrome 77 개발자를 위한 새로운 기능을 살펴보겠습니다.
- Chrome
백그라운드 서비스 디버그
백그라운드 가져오기, 백그라운드 동기화, 알림, 푸시 메시지 등 보고서를 확인하고 백그라운드 서비스를 디버그합니다.
- Chrome DevTools
DevTools의 새로운 기능 (Chrome 78)
감사 패널의 Lighthouse 5.2 및 Performance 패널의 최대 콘텐츠가 포함된 페인트
- Chrome
웹에서 GPU 컴퓨팅 시작하기
이 게시물에서는 예시를 통해 실험용 WebGPU API를 살펴보고 GPU를 사용하여 데이터 병렬 계산을 시작하는 데 도움을 줍니다.
빠른 시작 가이드
기본적인 신뢰할 수 있는 웹 활동을 빌드하기 위한 가이드입니다.
Chromium Chronicle #5: 샌드박스 외부에서 코딩하기
모든 코드에 버그가 있습니다. Chrome 브라우저 프로세스에는 샌드박스가 없으므로 이러한 버그로 인해 악성 코드에 전체 기기에 대한 전체 액세스 권한이 부여될 수 있습니다. 이 에피소드에서는 샌드박스 없이 코딩 시 권장사항과 주의사항을 설명합니다.
- Chrome
ReportingObserver API로 코드 상태 파악
ReportingObserver는 사이트에서 지원 중단된 API를 사용하거나 브라우저 개입이 발생하면 이를 알려줍니다. 기본 기능은 원래 Chrome 69에 포함되어 있었습니다. Chrome 84부터는 작업자에서 사용할 수 있습니다. 아주 간단합니다.
Chrome 77 지원 중단 및 삭제
계획 수립에 도움이 되도록 Chrome 77의 지원 중단 및 삭제에 관한 요약입니다.
- Chrome
웹용 연락처 선택 도구
사용자의 연락처에 액세스하는 것은 거의 새 시대부터 iOS/Android 앱의 기능이었습니다. Contact Picker API는 사용자가 연락처 목록에서 항목을 선택하고 선택한 연락처의 제한된 세부정보를 웹사이트와 공유할 수 있도록 하는 주문형 API입니다. 사용자는 이 서비스를 통해 자신이 원할 때 원하는 정보만 공유할 수 있고, 친구 및 가족과 더 쉽게 연락하고 소통할 수 있습니다.
Chrome 76의 새로운 기능
Chrome 76이 출시됩니다. Preferred-color-scheme 미디어 쿼리 지원을 추가하여 웹사이트에 어두운 모드를 구현합니다. 검색주소창의 설치 버튼으로 데스크톱에서 프로그레시브 웹 앱을 더 쉽게 설치할 수 있습니다. 모바일에 미니 정보 표시줄이 표시되지 않도록 하는 방법입니다. WebAPK 업데이트 빈도를 높입니다. 그 외 다양한 기능 자세히 알아보고 Chrome 76 개발자를 위한 새로운 기능을 살펴보겠습니다.
- Chrome
Chromium Chronicle #4: WPT로 웹 플랫폼 기능 테스트
웹 플랫폼 테스트 (WPT)는 GitHub를 통해 다른 브라우저와 공유되므로 웹에 노출된 기능을 테스트하는 데 선호되는 방법입니다. 이번 달에는 WPT 권장사항을 살펴보겠습니다.
- Chrome
DevTools의 새로운 기능 (Chrome 77)
요소 스타일을 복사하고 레이아웃 이동을 시각화하는 등의 작업을 합니다.
- Chrome
Chrome 75의 미디어 업데이트
암호화된 미디어 및 동영상 요소 "playsInline" 속성 힌트 지원에서 원활하고 전력 효율이 높을지 여부를 예측합니다.
- Chrome
웹 구성요소 업데이트 - v1 API로 업그레이드할 시간이 더 많음
Web Components v0 사용자는 v1로 업그레이드할 시간이 더 많지만, 충분한 시간을 갖고 테스트하시기 바랍니다.
- Chrome
Chromium Chronicle #3: Gerrit의 코드 적용 범위
테스트는 버그와 회귀를 찾아내고, 더 나은 디자인을 적용하고, 코드를 더 쉽게 유지관리할 수 있게 하므로 매우 중요합니다. 이번 달에는 Gerrit으로 철저한 테스트를 수행하는 방법에 대해 알아봅니다.
- Chrome
Chrome 76 지원 중단 및 삭제
계획 수립에 도움이 되도록 Chrome 76의 지원 중단 및 삭제에 관한 요약입니다.
- Chrome
WebAPK를 더 자주 업데이트
Chrome 76부터 WebAPK가 더 자주 업데이트됩니다.
- Chrome
LayoutNG
Chromium의 새로운 레이아웃 엔진
- Chrome
Chrome 75의 새로운 기능
Chrome 75가 단계적으로 출시되고 있습니다. 캔버스 요소의 지연 시간을 줄이는 새로운 방법이 있습니다. 이제 웹 앱에서 시스템 수준 공유 시트를 사용하여 설치된 다른 앱에 파일을 공유할 수 있습니다. Google I/O의 모든 강연은 YouTube 채널에 있습니다. 그 외 다양한 기능 자세히 알아보고 Chrome 75 개발자를 위한 새로운 기능을 알아보겠습니다.
- Chrome
DevTools의 새로운 기능 (Chrome 76)
CSS 값 자동 완성, 네트워크 설정을 위한 새로운 UI 등이 제공됩니다.
- Chrome
Chromium Chronicle #2: 테스트 결함 방지
불안정 테스트는 Chrome에서 흔히 발생하는 문제입니다. 다른 개발자의 생산성에 영향을 미치며 시간이 지남에 따라 사용 중지됩니다. 이번 달에는 테스트 결함에 대처하는 방법을 살펴봅니다.
- Chrome
Chrome 76에서는 홈 화면에 추가 미니 정보 표시줄을 숨길 수 있습니다.
Chrome 76에서 PWA의 미니 정보 표시줄에 더 많은 제어 기능이 추가되었습니다.
- Chrome
모델 뷰어를 사용한 증강 현실
3D 모델을 웹페이지에 선언적으로 추가할 수 있는 model-viewer 웹 구성 요소를 2월에 도입했습니다. 이제 ar 속성이 추가되어 Android에서 AR이 지원된다는 소식을 발표합니다.
- Chrome
페인트 유지 - 동일 출처 탐색에서 흰색 플래시 감소
페인트 유지에 관한 간단한 개요. 동일 출처 탐색에서 흰색 깜박임을 줄이는 Chrome 기능
- Chrome
여러 번의 페이지 리디렉션 피하기
페이지 리디렉션이 웹페이지의 로드 속도를 저하시키는 이유와 이를 방지하는 방법에 대해 알아보세요.
키보드 포커스 가능 대화형 컨트롤
키보드 사용자가 액세스할 수 있도록 웹페이지의 맞춤 컨트롤을 포커스 가능하게 만드는 방법을 알아보세요.
자바스크립트 실행 시간 단축
자바스크립트 실행으로 인해 페이지 성능이 어떻게 저하되는지와 속도를 높이는 방법을 알아보세요.
페이지 로드 시 알림 권한 요청
우수한 사용자 환경을 제공하는 방식으로 책임감 있게 알림 권한을 요청하는 방법을 알아보세요.
애니메이션 콘텐츠에 동영상 형식 사용
효율적인 애니메이션 콘텐츠 감사에 관해 알아보세요.
요청 수를 낮게 유지하고 전송 크기를 작게 유지
많은 리소스 수와 큰 전송 크기가 로드 성능에 미치는 영향을 알아봅니다. 요청 수와 전송 크기를 줄이기 위한 전략을 알아봅니다.
최대 최초 입력 반응 시간 가능성
Lighthouse의 지원 중단된 최대 첫 입력 지연 시간 측정항목과 측정 및 최적화 방법을 알아보세요.
중요 요청 체이닝 방지
중요한 요청 체인의 정의, 웹페이지 성능에 미치는 영향, 그 영향을 줄이는 방법을 알아보세요.
감지된 자바스크립트 라이브러리
Lighthouse의 진단 "감지된 자바스크립트 라이브러리" 감사에 대해 알아보세요.
페이지 로드 시 위치정보 권한 요청
우수한 사용자 환경을 제공하는 방식으로 위치정보 권한을 책임감 있게 요청하는 방법을 알아보세요.
탭 타겟의 크기가 적절하지 않음
"탭 타겟 크기가 적절하지 않음" Lighthouse 감사에 대해 알아보세요.
효율적인 캐시 정책을 사용하여 정적 애셋 제공
웹페이지의 정적 리소스를 캐시하여 재방문자의 성능과 안정성을 개선하는 방법을 알아보세요.
document.write() 사용
document.write()를 피하여 페이지 로드 시간을 향상하는 방법을 알아보세요.
서드 파티 코드의 영향 감소
광고 네트워크 및 분석 서비스와 같은 서드 파티 코드가 페이지 로드 성능에 미치는 영향과 서드 파티 코드를 최적화하는 방법을 알아보세요.
맞춤 컨트롤에 ARIA 역할이 있음
보조 기술에서 해석할 수 있도록 맞춤 컨트롤에 ARIA를 추가하여 접근성을 개선하는 방법을 알아보세요.
페이지에 논리적 탭 순서가 있음
탭 정지를 논리적인 순서로 배치하여 키보드 사용자가 웹페이지를 더 쉽게 탐색할 수 있도록 하는 방법을 알아봅니다.
상호작용 시작 시간
Lighthouse의 상호작용 시작 시간 측정항목과 이 측정항목을 측정하고 최적화하는 방법을 알아보세요.
페이지의 시각적 순서가 DOM 순서를 따릅니다.
Visual-order-follows-dom 감사에 관해 자세히 알아보세요.
맞춤 컨트롤에는 연결된 라벨이 있습니다.
모든 맞춤 컨트롤에 보조 기술 사용자가 액세스할 수 있는 라벨이 있는지 확인하여 접근성을 개선하는 방법을 알아봅니다.
패시브 리스너를 사용하여 스크롤 성능 개선
패시브 이벤트 리스너를 피하여 페이지의 스크롤 응답성을 개선하는 방법을 알아보세요.
오프스크린 이미지 지연
오프스크린 이미지 감사에 대해 알아보세요.
효율적으로 이미지 인코딩
use-Optimized-images 감사에 대해 알아봅니다.
상호작용 요소는 요소의 목적과 상태를 나타냅니다.
맞춤 컨트롤의 목적과 상태를 모든 사용자에게 명확하게 표시하여 웹페이지에서 맞춤 컨트롤의 접근성을 개선하는 방법을 알아보세요.
교차 출처 대상 링크가 안전하지 않음
다른 호스트의 리소스에 안전하게 연결하는 방법을 알아봅니다.
사용하지 않는 CSS 삭제
unused-css-rules 감사에 대해 알아보기
주요 요청 미리 로드
use-rel-preload 감사에 대해 알아봅니다.
첫 번째 CPU 유휴 상태
Lighthouse의 지원 중단된 첫 번째 CPU 유휴 측정항목 및 최적화 방법을 알아보세요.
기본 스레드 작업 최소화
브라우저의 기본 스레드에 관해 알아보고 웹페이지를 최적화하여 기본 스레드 로드를 줄이고 성능을 개선하는 방법을 알아보세요.
문서에 메타 설명이 없습니다.
"문서에 메타 설명이 없음" Lighthouse 감사에 관해 알아보세요.
페이지에 HTML doctype이 없으므로 쿼크 모드가 트리거됩니다.
이전 브라우저에서 페이지가 쿼크 모드를 실행하지 않도록 하는 방법을 알아보세요.
CSS 축소
unminified-css 감사에 관해 알아보세요.
애플리케이션 캐시 사용
지원 중단된 Application Cache에서 Cache API로 웹페이지를 이전하는 방법을 알아보세요.
자바스크립트를 축소하세요.
축소되지 않은 자바스크립트 감사에 대해 알아보세요.
지원 중단된 API 사용
웹페이지에서 지원 중단된 API를 삭제하고 대체하는 방법을 알아봅니다.
탐색 기능을 개선하는 데 사용되는 HTML5 랜드마크 요소
키보드 사용자가 탐색에 사용할 수 있는 랜드마크를 제공하여 웹페이지의 접근성을 개선하는 방법을 알아보세요.
모든 리소스에 HTTP/2를 사용하지 않음
페이지 로드 시간에 HTTP/2가 중요한 이유와 서버에서 HTTP/2를 사용 설정하는 방법에 대해 알아보세요.
Chrome 75 지원 중단 및 삭제
계획 수립에 도움이 되도록 Chrome 75의 지원 중단 및 삭제에 관한 요약입니다.
- Chrome
텍스트 압축 사용
텍스트 압축을 사용 설정하여 페이지 로드 성능을 개선하는 방법을 알아보세요.
문서가 플러그인을 사용함
"문서의 플러그인 사용" Lighthouse 감사에 관해 알아보세요.
화면 밖 콘텐츠가 보조 기술에서 숨겨집니다.
보조 기술에서 화면 밖 콘텐츠를 숨겨 보조 기술 사용자의 접근성을 개선하는 방법을 알아보세요.
사용자 시간 표시 및 측정
User Timing API를 사용하여 웹페이지의 실제 성능 데이터를 얻는 방법을 알아보세요.
방대한 네트워크 페이로드 방지
사용자에게 제공하는 리소스의 총 파일 크기를 줄여 웹페이지의 로드 시간을 개선하는 방법에 대해 알아보세요.
브라우저 오류가 콘솔에 로깅되었습니다.
브라우저 오류를 확인하고 수정하는 방법을 알아보세요.
속도 색인
Lighthouse의 속도 색인 측정항목과 최적화 방법을 알아보세요.
가로세로 비율이 잘못된 이미지를 표시합니다.
올바른 가로세로 비율로 반응형 이미지를 표시하는 방법 알아보기
서버 응답 시간 단축
서버 응답 시간 감사에 대해 알아봅니다.
알려진 보안 취약점이 있는 프런트엔드 JavaScript 라이브러리 포함
알려진 취약점이 있는 자바스크립트 라이브러리를 교체하여 페이지의 보안을 강화하는 방법을 알아보세요.
문서에 유효한 rel=canonical이 없습니다.
"문서에 유효한 rel=canonical" Lighthouse 감사가 없음에 대해 알아보세요.
적절한 이미지 크기 조정
use-response-images 감사에 대해 알아보기
링크에 설명 텍스트가 없음
"링크에 설명 텍스트가 없음" Lighthouse 감사에 대해 알아보세요.
사용자 포커스가 실수로 특정 리전에 갇히지 않음
포커스가 페이지의 영역에 갇히지 않도록 하여 키보드 사용자의 접근성을 개선하는 방법을 알아보세요.
렌더링 차단 리소스 제거
렌더링 차단 리소스 감사에 대해 알아봅니다.
페이지의 색인 생성이 차단됨
"페이지의 색인 생성이 차단됨" Lighthouse 감사에 관해 알아보세요.
콘텐츠가 포함된 첫 페인트
Lighthouse의 콘텐츠가 포함된 첫 페인트 측정항목과 측정 및 최적화 방법을 알아보세요.
문서가 읽을 수 있는 글꼴 크기를 사용하지 않음
"문서에서 읽을 수 있는 글꼴 크기를 사용하지 않음" Lighthouse 감사의 방법을 알아보세요.
필수 원본에 사전 연결
use-rel-preconnect 감사에 대해 알아봅니다.
구조화된 데이터가 유효함
"구조화된 데이터가 유효함" Lighthouse 감사에 관해 알아보세요.
robots.txt가 유효하지 않음
"robots.txt가 유효하지 않음" Lighthouse 감사에 대해 알아보세요.
사용자의 포커스가 페이지에 추가된 새 콘텐츠에 집중됨
새로 추가된 콘텐츠로 포커스를 이동하여 보조 기술 사용자가 웹 앱 상태 변경사항을 이해할 수 있도록 하는 방법을 알아보세요.
유의미한 첫 페인트
Lighthouse의 지원 중단된 첫 번째 의미 있는 페인트 측정항목과 측정 및 최적화 방법을 알아보세요.
예상 입력 지연 시간
Lighthouse의 예상 입력 지연 시간 측정항목과 측정 및 최적화 방법을 알아보세요.
문서에 유효한 hreflang이 없음
"문서에 유효한 hreflang" Lighthouse 감사가 없음
사용자가 입력란에 붙여넣지 못하도록 차단
사용자가 입력란에 붙여넣을 수 있도록 허용하여 사이트 로그인 화면의 사용자 환경을 개선하는 방법을 알아보세요.
비동기식 힌트를 사용한 짧은 지연 시간 렌더링
웹용으로 빌드된 스타일러스 기반 그리기 애플리케이션은 웹페이지에서 그래픽 업데이트를 DOM과 동기화해야 하므로 지연 시간 문제가 발생합니다. 컨텍스트의 비동기화된 힌트는 DOM을 우회하여 지연 시간을 없앱니다.
- Chrome
페이지에 실패한 HTTP 상태 코드가 있음
"페이지에 실패한 HTTP 상태 코드" Lighthouse 감사에 관해 알아보세요.
최신 형식으로 이미지 제공
uses-webp-images 감사에 대해 알아보기
Chrome 74의 새로운 기능
Google I/O에 맞춰 Chrome 74가 출시되었습니다. 비공개 클래스 필드에 대한 지원을 추가하고, 사용자가 모션 감소 환경을 요청한 시점을 감지할 수 있도록 해주며 CSS 전환 이벤트 지원을 추가합니다. 자세히 알아보고 Chrome 74 개발자를 위한 새로운 기능을 살펴보겠습니다.
- Chrome
Console의 메시지 로그
콘솔에 메시지를 로깅하는 방법을 알아봅니다.
- Chrome DevTools
실시간 표현식을 사용하여 자바스크립트 값을 실시간으로 확인
콘솔에 동일한 자바스크립트 표현식을 반복적으로 입력하는 경우 실시간 표현식을 대신 사용해 보세요.
- Chrome DevTools
콘솔 기능 참조
Chrome DevTools의 콘솔 UI와 관련된 모든 기능과 동작에 대한 종합 참조 자료입니다.
- Chrome DevTools
DevTools의 새로운 기능 (Chrome 75)
의미 있는 자동 완성 사전 설정 값, 명령 메뉴에서 사이트 데이터 삭제 등을 지원합니다.
- Chrome
Chromium Chronicle #1: 작업 예약 권장사항
Chrome팀은 브라우저를 빌드하는 개발자인 Chromium 개발자를 위해 특별히 제작된 월간 시리즈인 Chromium Chronicle을 소개하게 되어 기쁘게 생각합니다. 이번 달에는 작업 예약 권장사항을 살펴봅니다.
- Chrome
지원 중단됨: Chrome DevTools로 애플리케이션 캐시 데이터 보기
Chrome DevTools의 애플리케이션 패널에서 애플리케이션 캐시 데이터를 보는 방법
- Chrome DevTools
캐시 데이터 보기
Chrome DevTools의 Application 패널에서 캐시 데이터를 보는 방법
- Chrome DevTools
웹 SQL 데이터 보기
Chrome DevTools의 Application 패널에서 웹 SQL 데이터를 보는 방법
- Chrome DevTools
Chrome 74 지원 중단 및 삭제
계획 수립에 도움이 되도록 Chrome 74의 지원 중단 및 삭제에 관한 요약입니다.
- Chrome
현재 선택한 DOM 노드
현재 선택된 DOM 노드를 가져오는 빠른 콘솔 바로가기에 대해 알아보세요.
- Chrome
IndexedDB 데이터 보기 및 변경
애플리케이션 패널과 스니펫을 사용하여 IndexedDB 데이터를 보고 변경하는 방법
- Chrome DevTools
세션 저장소 보기 및 수정
Session Storage 창과 Console에서 `sessionStorage` 를 보고 수정하는 방법
- Chrome DevTools
로컬 저장소 보기 및 수정
Local Storage 창과 콘솔에서 `localStorage` 를 보고 수정하는 방법
- Chrome DevTools
Chrome 73의 새로운 기능
Chrome 73에서는 서명된 HTTP 교환을 통해 포팅 가능한 콘텐츠를 더 쉽게 만들 수 있습니다. 구성 가능한 스타일시트를 사용하면 동적으로 스타일을 변경하는 것이 훨씬 쉬워집니다. 또한 Mac의 프로그레시브 웹 앱에 대한 지원을 추가하여 모든 데스크톱 및 모바일 플랫폼에서 PWA에 대한 지원을 제공하므로, 설치할 수 있는 앱을 쉽게 만들 수 있고, 웹을 통해 전달될 수 있습니다. 자세히 알아보고 Chrome 73 개발자를 위한 새로운 기능을 살펴보겠습니다.
- Chrome
KV Storage - 웹 최초의 내장 모듈
새로운 KV Storage API, 기본 제공 모듈, 가져오기 지도를 소개합니다.
- Chrome
DevTools의 새로운 기능 (Chrome 74)
CSS 속성, Lighthouse v4, WebSocket 바이너리 메시지 뷰어 등의 영향을 받는 노드를 강조표시합니다.
- Chrome
DOM 보기 및 변경 시작하기
노드 보기, 노드 검색, 노드 수정, 콘솔에서 노드 참조, 노드 변경 시 중단하는 방법 등을 설명합니다.
- Chrome DevTools
웹 개발 생태계팀 - 2월 마무리
웹 개발자 생태계팀에서 어떤 일이 벌어지고 있는지 돌아보는 2월을 마무리합니다.
- Chrome
Workbox v3에서 v4로 이전
Workbox v3에서 v4로의 마이그레이션 가이드입니다.
작업 상자-창
서비스 워커를 등록하고, 업데이트를 관리하고, 수명 주기 이벤트에 응답하는 데 도움이 되는 모듈입니다.
앱의 JavaScript에서 핫 패스를 WebAssembly로 대체
WebAssembly가 제공하는 한 가지 주요 이점은 브라우저 전반에서 _예측 가능한_ 성능입니다. 하지만 JavaScript로 작성된 핫 패스를 WebAssembly로 변환하려면 어떻게 해야 할까요?
- Chrome
String.prototype.matchAll()을 통한 일치 결과 개선
Chrome 73에는 String.prototype.matchAll() 메서드가 도입되었습니다. match()와 유사하게 동작하지만, 특히 그룹 캡처에 액세스해야 하는 경우 일치를 반복하는 간단한 방법을 제공합니다.
- Chrome
기본적으로 휠 스크롤을 빠르게 만들기
스크롤 반응성은 모바일에서 사용자의 웹사이트 참여에 중요하지만, 휠 이벤트 리스너는 종종 심각한 스크롤 성능 문제를 일으킵니다. Google에서 사용자와 개발자가 기본적으로 속도를 높일 수 있도록 지원하는 방법을 알아보세요.
- Chrome
Chrome 73 지원 중단 및 삭제
계획 수립에 도움이 되도록 Chrome 73의 지원 중단 및 삭제에 관한 요약입니다.
- Chrome
Chrome 73의 미디어 업데이트
하드웨어 미디어 키 지원, HDCP 정책 확인, PIP 모드 오리진 트라이얼 등
- Chrome
매우 빠른 템플릿 및 웹 구성요소 - lit-html & LitElement
lit-html과 LitElement는 빠르고 가벼운 템플릿과 상호 운용 가능한 구성요소를 최신 웹에 제공합니다.
- Chrome
가까운 오리진 트라이얼에서 RTCQuicTransport 제공 (Chrome 73)
RTCQuicTransport는 QUIC 프로토콜을 사용하여 원격 피어와 임의의 데이터를 교환할 수 있는 새로운 웹 플랫폼 API입니다.
- Chrome
자바스크립트 사용 중지
명령어 메뉴를 열고 자바스크립트 사용 중지 명령어를 실행합니다.
- Chrome DevTools
Chrome 72의 새로운 기능
Chrome 72에서는 자바스크립트로 공개 클래스 필드를 만드는 작업이 훨씬 더 깔끔해지고 페이지가 새로운 User Activation API로 활성화되었는지 확인할 수 있고, 목록 현지화가 훨씬 쉬워지고 훨씬 더 많은 기능이 제공됩니다. 자세히 알아보고 Chrome 72의 개발자를 위한 새로운 기능을 살펴보겠습니다.
- Chrome
Lighthouse용 프로토타입 스택 팩 프로토타입 제작
Stack Packs는 일반화된 조언만 표시하는 대신 Lighthouse를 확장하여 특정 도구에 관한 추가 메시지를 포함합니다.
- Chrome
DevTools의 새로운 기능 (Chrome 73)
로그 지점, 검사 모드의 자세한 도움말 등
- Chrome
API 간에 사용자 활성화를 일관되게 만들기
Chrome 버전 72에서 제공되는 사용자 활성화 v2는 모든 활성화 제한 API의 사용자 활성화 가용성을 완료하여 많은 사용자 활성화 불일치 문제를 해결합니다.
- Chrome
Shape Detection API: 사진 한 장이 천 마디의 단어, 얼굴, 바코드보다 낫습니다.
Shape Detection API는 이미지의 얼굴, 바코드, 텍스트를 감지합니다.
WebUSB용 기기 빌드
WebUSB API를 최대한 활용할 수 있는 기기를 빌드합니다. 이 도움말에서는 WebUSB API 를 최대한 활용하는 기기를 빌드하는 방법을 설명합니다. API 자체에 관한 간단한 소개는 웹에서 USB 기기에 액세스 를 참고하세요. 범용 직렬 버스 (USB)는 주변기기를 데스크톱 및 모바일 컴퓨팅 기기에 연결하는 가장 일반적인 물리적 인터페이스가 되었습니다. USB 사양은 버스의 전기적 특성과 기기와 통신하기 위한 일반적인 모델을 정의하는 것
Chrome 72 지원 중단 및 삭제
계획 수립에 도움이 되도록 Chrome 72의 지원 중단 및 삭제에 관한 요약입니다.
- Chrome
화면 Wake Lock API로 절전모드 해제
배터리 소모를 방지하기 위해 대부분의 기기는 유휴 상태일 때 빠르게 절전 모드로 전환됩니다. 대부분의 경우 문제가 되지 않지만 일부 애플리케이션의 경우 일부 작업을 완료하기 위해 화면을 켜진 상태로 유지해야 합니다. Screen Wake Lock API는 애플리케이션을 계속 실행해야 할 때 기기가 화면을 어둡게 하거나 잠그지 않도록 하는 방법을 제공합니다.
트랙 요소 포커스
콘솔을 열고 라이브 표현식을 만든 다음 표현식을 document.activeElement로 설정합니다.
- Chrome DevTools
Chrome DevTools 열기
Chrome DevTools를 여는 모든 방법
- Chrome DevTools
앱 아이콘 배지
App Badging API를 사용하면 설치된 웹 앱에서 실행기 또는 홈 화면과 같이 애플리케이션과 연결된 운영체제별 위치에 표시되는 애플리케이션 전체 배지를 설정할 수 있습니다. 배지를 사용하면 주의가 필요할 수 있는 새로운 활동이 있음을 사용자에게 미묘하게 알릴 수 있으며 읽지 않은 횟수와 같은 소량의 정보를 나타내는 데 사용할 수 있습니다.
Chrome 71의 새로운 기능
Chrome 71에서는 새로운 Intl.RelativeTimeFormat() API를 사용하여 상대 시간 값을 더 쉽게 표시할 수 있습니다. 세로로 진행되는 텍스트에서 텍스트에서 어느 쪽에 밑줄을 표시할지 지정할 수 있습니다. 이제 음성 합성 API를 사용하려면 컴퓨터가 사용자와 대화를 시작하기 전에 사용자를 활성화해야 합니다! 자세히 알아보고 Chrome 71의 개발자를 위한 새로운 기능을 살펴보겠습니다.
- Chrome
백그라운드 가져오기 소개
백그라운드 가져오기를 사용하면 브라우저를 닫아도 대용량 다운로드를 처리할 수 있습니다.
- Chrome
DevTools의 새로운 기능 (Chrome 72)
성능 측정항목을 시각화하고, 텍스트 노드를 강조 표시하고, JS 경로를 DOM 노드에 복사하고, 감사 패널을 업데이트합니다.
- Chrome
웹 오디오, 자동재생 정책, 게임
2017년 9월, Chrome의 자동재생 동작 정책으로 오디오가 처리되는 방식이 변경될 예정이라고 발표했습니다. 이 정책 변경사항은 2018년 5월에 Chrome 66 안정화 버전과 함께 출시되었습니다. 웹 오디오 개발 커뮤니티의 의견을 바탕으로 개발자가 웹사이트를 업데이트할 시간을 더 확보할 수 있도록 자동재생 정책의 웹 오디오 부분 출시를 연기했습니다. 또한 웹 오디오 정책의 구현을 일부 변경하여 코드를 조정해야 하는 웹사이트(특히 웹
- Chrome
새로운 기능 상태
웹 앱은 플랫폼별 앱에서 할 수 있는 모든 작업을 할 수 있어야 합니다. 웹 앱의 새로운 기능 상태를 확인합니다.
서명된 HTTP 교환
서명된 교환을 사용하면 웹사이트에서 웹 콘텐츠에 서명하여 콘텐츠를 안전하게 재배포하고 콘텐츠의 출처를 확인할 수 있습니다.
- Chrome
Chrome 71 지원 중단 및 삭제
계획 수립에 도움이 되도록 Chrome 71의 지원 중단 및 삭제에 관한 요약입니다.
- Chrome
PIP 모드를 사용하여 동영상 보기
웹사이트에 있는 동영상 요소의 PIP 모드를 제어합니다.
- Chrome
Chrome 70의 오디오/동영상 업데이트
Chrome 70의 오디오/동영상 업데이트 요약 - 크로스 코덱 및 크로스 바이트 스트림 버퍼링 및 재생, MSE가 적용된 MP4의 Opus, Android에서 기본적으로 허용되는 보호된 콘텐츠 재생 등
- Chrome
Chrome 70의 새로운 기능
Chrome 70은 Windows 및 Linux의 데스크톱 프로그레시브 웹 앱에 대한 지원과 Credential Management API에 대한 공개 키 사용자 인증 정보를 추가로 지원하여 전담 직원에게 이름을 제공하는 등 다양한 기능을 제공할 수 있습니다. 자세히 알아보고 Chrome 70 개발자를 위한 새로운 기능을 알아보겠습니다.
- Chrome
Chrome 71에서 제공되는 cache.addAll() 및 importScripts()의 미세 조정
cache.addAll() 및 importScripts 및 Chrome 71에 몇 가지 사소한 변경사항이 있을 예정입니다.
- Chrome
Chrome 69 페인트 타이밍 문제
Chrome 69에는 렌더링 파이프라인을 더 많이 캡처하도록 의도된 페인트 타이밍 측정항목에 잘못된 변경사항이 포함되어 있으나 일부 부정확한 타임스탬프가 발생했습니다.
- Chrome
DevTools의 새로운 기능 (Chrome 71)
라이브 표현식에서 DOM 노드를 강조표시하고 노드를 전역 변수로 저장하는 등의 작업을 합니다.
- Chrome
후디니의 애니메이션 Worklet
Animation Worklet을 사용하면 기기의 기본 프레임 속도로 실행되는 명령형 애니메이션을 작성할 수 있으며, 버벅거림이 없는 부드러움TM을 위해 애니메이션을 기본 스레드 버벅거림으로부터 더욱 탄력적으로 만들고 시간 대신 스크롤할 수 있도록 연결할 수 있습니다.
- Chrome
호스트 권한에 대한 사용자 제어: 전환 가이드
Chrome 70부터 런타임 호스트 권한 변경사항을 처리하도록 확장 프로그램을 업데이트하기 위한 가이드라인입니다.
- Chrome 확장 프로그램
최신 웹브라우저 자세히 살펴보기 (4부)
컴포지터 스레드로 입력 이벤트 처리
- Chrome
최신 웹브라우저 들여다보기 (3부)
브라우저 렌더링 엔진의 내부 작동
- Chrome
Chrome 70의 미디어 업데이트
크로스 코덱 및 크로스 바이트 스트림 버퍼링 및 재생, MSE가 적용된 MP4 형식의 Opus, Android에서 기본적으로 허용되는 보호된 콘텐츠 재생
- Chrome
Chrome 70의 지원 중단 및 삭제
계획 수립에 도움이 되도록 Chrome 68의 지원 중단 및 삭제에 관한 요약입니다.
- Chrome
최신 웹브라우저 들여다보기 (2부)
브라우저에서 탐색 요청을 처리하는 방법을 알아봅니다.
- Chrome
HTTP 쿠키에 대한 비동기 액세스
Cookie Store API는 HTTP 쿠키에 대한 비동기식 액세스를 제공하며 쿠키 jar를 서비스 워커에 엽니다.
- Chrome
최신 웹브라우저 들여다보기 (1부)
브라우저가 코드를 개략적인 아키텍처에서 구체적인 렌더링 파이프라인에 이르기까지 제대로 작동하는 웹사이트로 변환하는 방법을 알아보세요.
- Chrome
Chrome 69의 새로운 기능
Chrome이 처음 출시된 지 10년이 지났습니다. 그 이후로 많은 변화가 있었지만 최신 웹 애플리케이션을 위한 견고한 기반을 구축한다는 목표는 결코 변하지 않았습니다! Chrome 69에서는 CSS Scroll Snapping, 노치 지원, 웹 잠금 및 몇 가지 새롭고 멋진 CSS4 기능이 지원됩니다. 자세히 알아보고 Chrome 69의 개발자를 위한 새로운 기능을 살펴보겠습니다.
- Chrome
DevTools의 새로운 기능 (Chrome 70)
콘솔의 라이브 표현식, 즉시 평가(Eager Evaluation) 중 DOM 노드를 강조표시하는 등의 작업을 할 수 있습니다.
- Chrome
Chrome 69의 미디어 업데이트
Chrome 69의 미디어 업데이트 요약: AV1 및 HDCP 정책 확인
- Chrome
ReportingObserver: 코드 상태 파악
ReportingObserver는 개발자에게 실제 코드의 작업에 관한 유용한 정보를 제공합니다. ReportingObserver는 지원 중단 및 개입과 같은 문제에 대한 정보를 표시하며 이전에는 DevTools 콘솔에서만 사용할 수 있었던 메시지입니다.
- Chrome
Google 검색 및 Google Ads에서는 이제 속도가 방문 페이지의 요소입니다.
Google 검색 및 Google Ads에서는 이제 속도가 방문 페이지의 중요한 요소입니다.
- Chrome
Chrome 68의 새로운 기능
Chrome 68에서는 Android의 '홈 화면에 추가' 동작이 변경되어 사용자가 더 세밀하게 제어할 수 있습니다. Page Lifecycle API는 탭이 정지되거나 복원되면 알려줍니다. 또한 Payment Handler API를 사용하면 웹 기반 결제 앱에서 결제 요청 환경을 지원할 수 있습니다. 자세히 알아보고 Chrome 68 개발자를 위한 새로운 기능을 살펴보겠습니다.
- Chrome
NoState Prefetch 소개
Chrome 63이 NoState Prefetch와 함께 제공됩니다. NoState Prefetch는 지원 중단된 사전 렌더링 프로세스보다 메모리를 적게 사용하는 리소스를 미리 가져오는 메커니즘입니다.
- Chrome
PWACompat - 모든 브라우저용 웹 앱 매니페스트
PWACompat 라이브러리를 사용하여 웹 앱 매니페스트를 모든 브라우저로 가져옵니다.
- Chrome
작업 상자 탐색-미리 로드
탐색 요청에 대한 네트워크 응답을 더 빠르게 받으려면 탐색 미리 로드를 사용 설정하세요.
웹 개발자를 위한 사이트 격리
데스크톱의 Chrome 67에는 사이트 격리\* 라는 새로운 기능이 기본적으로 사용 설정되어 있습니다. 이 도움말에서는 사이트 격리의 정의, 사이트 격리가 필요한 이유, 웹 개발자가 사이트 격리를 알고 있어야 하는 이유를 설명합니다.
- Chrome
Chrome UX 보고서에서 최초 입력 반응 시간 실험하기
Chrome 사용자 환경 보고서에 최초 입력 반응 시간 (FID) 실험용 측정항목이 추가되었습니다.
- Chrome
기능 정책 소개
개발자는 기능 정책을 통해 브라우저에서 특정 API 및 기능의 동작을 선택적으로 사용 설정, 사용 중지, 수정할 수 있습니다. CSP와 비슷하지만 기능 측면에서! Chrome 60에서 제공됩니다.
- Chrome
저장용량 한도 이해
저장용량 한도 문제를 방지하기 위해 Workbox를 구성하는 방법에 대한 가이드입니다.
더 많은 네이티브 에코 제거
더 많은 네이티브 에코 제거 지원
- Chrome
오디오 Worklet 디자인 패턴
오디오 Worklet 디자인 패턴
- Chrome
웹용 증강 현실
증강 현실을 사용하면 실제 뷰에서 가상 객체를 배치하고 추적할 수 있습니다.
- Chrome
Chacmool: Chrome Canary의 증강 현실
교육용 웹 데모인 Chacmool은 웹 기반 AR로 매력적인 환경을 얼마나 쉽게 구축할 수 있는지 보여줍니다.
- Chrome
인라인 설치 지원 중단 이전 FAQ
Chrome 확장 프로그램의 인라인 설치 지원 중단에 대해 자주 묻는 질문(FAQ)
- Chrome 확장 프로그램
Chrome 68의 지원 중단 및 삭제
계획 수립에 도움이 되도록 Chrome 68의 지원 중단 및 삭제에 관한 요약입니다.
- Chrome
홈 화면에 추가 동작 변경사항
Android용 Chrome 68부터 사용자에게 메시지를 표시할 시기와 방법을 더 효과적으로 제어할 수 있도록 '홈 화면에 추가' 동작이 변경됩니다. 사이트가 '홈 화면에 추가' 기준을 충족하면 Chrome은 더 이상 '홈 화면에 추가' 배너를 자동으로 표시하지 않습니다. 대신 저장된 beforeinstallprompt 이벤트에서 메시지()를 호출하여 '홈 화면에 추가' 대화상자 메시지를 사용자에게 표시해야 합니다.
- Chrome
Chrome 67의 새로운 기능
Chrome 67은 데스크톱에서 프로그레시브 웹 앱을 제공합니다. 일반 센서 API 지원 기능이 추가되어 가속도계, 자이로스코프와 같은 기기 센서에 훨씬 더 쉽게 액세스할 수 있습니다. 또한 BigInts에 대한 지원을 추가하여 큰 정수를 훨씬 더 쉽게 처리합니다. 자세히 알아보고 Chrome 67 개발자를 위한 새로운 기능을 살펴보겠습니다.
- Chrome
DevTools의 새로운 기능 (Chrome 68)
즉시 평가, 인수 힌트, 함수 자동 완성, Lighthouse 3.0 등을 지원합니다.
- Chrome
Lighthouse를 사용하여 페이지 로드 성능 개선
미리 로드, 사전 연결, GIF 등에 관한 새로운 성능 감사
- Chrome
Lighthouse v3 이전 가이드
Lighthouse v2에서 v3로 이전하는 방법
Lighthouse 3.0 발표
빠른 감사, 낮은 편차, 새로운 보고서 UI, 새로운 감사 등.
- Chrome
Chrome 67의 지원 중단 및 삭제
계획 수립에 도움이 되도록 Chrome 67의 지원 중단 및 삭제에 관한 요약입니다. 이 버전에서는 공개 키 고정이 지원 중단되고, 안전하지 않은 컨텍스트에서 AppCache가 삭제되고, 더 많은 접두어가 삭제됩니다.
- Chrome
이벤트 기반 백그라운드 스크립트로 이전
영구 백그라운드 스크립트를 이벤트 기반의 비영구 모델로 이전하여 Chrome 확장 프로그램의 성능을 개선하는 방법
- Chrome 확장 프로그램
콘솔에서 자바스크립트 실행
콘솔에서 자바스크립트를 실행하는 방법을 알아봅니다.
- Chrome DevTools
Chrome 66의 새로운 기능
Chrome 66에서는 새로운 CSS 유형 모델 객체를 통해 CSS 조작이 더 쉬워지고 클립보드 액세스가 비동기식이 되었습니다. 또한 캔버스 요소의 새로운 렌더링 컨텍스트가 제공되며 JavaScript를 사용하여 오디오를 처리하는 더 나은 방법이 제공됩니다. 자세히 알아보고 Chrome 66 개발자를 위한 새로운 기능을 살펴보겠습니다.
- Chrome
최대 성능 달성
고성능 Chrome 확장 프로그램을 빌드하는 방법에 관한 가이드라인입니다.
- Chrome 확장 프로그램
DevTools의 새로운 기능 (Chrome 67)
네트워크 헤더를 검색하고, 요청을 가져오기로 복사, 데스크톱 조건을 사용하여 페이지를 감사하는 등의 작업을 할 수 있습니다.
- Chrome
작업공간에서 파일 수정 및 저장
DevTools 내에서 변경한 내용을 소스 파일에 저장하는 방법을 알아봅니다.
- Chrome DevTools
보조 연결 디스플레이에 웹페이지 표시
Chrome 66에서는 웹페이지에서 Presentation API를 통해 보조 연결 디스플레이를 사용하고 Presentation Receiver API를 통해 콘텐츠를 제어할 수 있습니다.
- Chrome
Chrome 66 지원 중단 및 삭제
계획 수립에 도움이 되도록 Chrome 66의 지원 중단 및 삭제에 관한 요약입니다. 이 버전에서는 서비스 워커 보안이 개선되고 CSS 위치 값이 변경되었습니다.
- Chrome
macOS 네이티브 에코 제거
Chrome에서 네이티브 macOS 에코 제거기 사용
- Chrome
SmooshGate FAQ
SmooshGate는 표준 개발과 웹 플랫폼에 관해 어떤 점을 배울 수 있나요? 이 글이 개요를 제공합니다.
- Chrome
사용자 개인 정보 보호
Chrome 확장 프로그램이 사용자 개인 정보를 보호하도록 하기 위한 가이드라인입니다.
- Chrome 확장 프로그램
사용자 개인 정보 보호
Chrome 확장 프로그램이 사용자 개인 정보를 보호하도록 하기 위한 가이드라인입니다.
- Chrome 확장 프로그램
사용자 인터페이스 디자인
Chrome 확장 프로그램용 UI 및 디자인 가이드라인입니다.
- Chrome 확장 프로그램
Workbox v2에서 v3로 이전
Workbox v2에서 v3로의 마이그레이션 가이드입니다.
보안 유지
Chrome 확장 프로그램의 보안을 유지하는 방법
- Chrome 확장 프로그램
Chrome 65의 새로운 기능
Chrome 65에서는 프로그래매틱 방식으로 이미지를 생성할 수 있는 새로운 CSS Paint API에 대한 지원이 추가되었습니다. Server Timing API를 사용하여 HTTP 헤더를 통해 서버 성능 타이밍 정보를 제공할 수 있으며 새로운 CSS display: content 속성을 통해 상자가 사라질 수 있습니다. 자세히 알아보고 Chrome 65 개발자를 위한 새로운 기능을 살펴보겠습니다.
- Chrome
보안 유지
Chrome 확장 프로그램의 보안을 유지하는 방법
- Chrome 확장 프로그램
DevTools의 새로운 기능 (Chrome 66)
네트워크 패널의 스크립트를 무시하고 Device Mode에서 확대/축소 자동 조정 등을 합니다.
- Chrome
Lighthouse 2.8 업데이트
새로운 실적 및 검색엔진 최적화 감사, 보고서의 첫 번째 섹션으로 실적 등
- Chrome
Chrome 65 지원 중단 및 삭제
계획 수립에 도움이 되도록 Chrome 65의 지원 중단 및 삭제에 관한 요약입니다. 이 버전에서는 Symantec 인증서, 교차 출처 다운로드가 차단되며 document.all이 이제 읽기 전용 상태가 되었다는 알림이 표시됩니다.
- Chrome
멜트다운/스펙터
웹 개발자 및 Chrome의 완화 조치에 미치는 영향
- Chrome
작업 상자 빌드
서비스 워커를 생성하거나, 사전 캐시 매니페스트를 기존 코드에 삽입하거나, 사전 캐시 매니페스트를 생성할 수 있는 모듈입니다.
sw-precache 또는 sw-toolbox에서 이전
sw-precache 또는 sw-toolbox에서 Workbox로 마이그레이션하는 방법에 대한 가이드입니다.
Chrome 사용자 환경 보고서 - 새로운 국가 측정기준
Chrome 사용자 환경 보고서에서 새로운 국가 측정기준 출시 발표
- Chrome
Chrome 64의 새로운 기능
Chrome 64에는 요소의 콘텐츠 직사각형 크기가 변경되면 알림을 제공하는 ResizeObservers 지원을 추가합니다. 이제 모듈에서 import.metadata로 특정 메타데이터를 호스팅하기 위해 액세스할 수 있습니다. 팝업 차단기의 기능이 강화되어 그 외에도 훨씬 더 많은 기능이 제공됩니다. 자세히 알아보고 Chrome 64 개발자를 위한 새로운 기능을 살펴보겠습니다.
- Chrome
CSS 페인트 API
Houdini의 CSS Paint API를 사용하면 프로그래매틱 방식으로 CSS 이미지를 그릴 수 있습니다.
- Chrome
DevTools의 새로운 기능 (Chrome 65)
로컬 재정의, 접근성 도구, 실적 및 검색엔진 최적화 감사 등
- Chrome
헤드리스 Chrome: 서버 측 렌더링 자바스크립트 사이트에 대한 해답
헤드리스 Chrome은 동적 자바스크립트 사이트를 정적 HTML 페이지로 전환하기 위한 삽입형 솔루션입니다.
DevTools의 새로운 기능 (Chrome 64)
Performance Monitor, 콘솔 사이드바, 콘솔 그룹
- Chrome
하드웨어 노이즈 제거 사용 중지
Chrome 64에서 하드웨어 노이즈 제거 기능을 실험적으로 사용 중지합니다.
- Chrome
개선된 광고에 관한 업데이트
개선된 광고에 관한 업데이트입니다.
- Chrome
Workbox-webpack-plugin
webpack 빌드 도구를 사용하여 서비스 워커를 생성하거나 사전 캐시 매니페스트를 삽입합니다.
Chrome 64의 지원 중단 및 삭제
계획 수립에 도움이 되도록 Chrome 64의 지원 중단 및 삭제에 관한 요약입니다. 이 버전에서는 Performance API가 변경되고 여러 섀도우 루트에 대한 지원이 삭제되고 WebKit API가 삭제되었습니다.
- Chrome
Chrome 64에서 chrome.loadTimes() API 지원 중단
모든 유용한 기능에 대해 표준 기반의 상응하는 API가 존재하므로 이제 비표준 chrome.loadTimes() API가 Chrome 64에서 지원 중단됩니다.
- Chrome
Linux용 자체 호스트
Linux 사용자용 개인 서버에서 crx 파일을 패키징, 호스팅, 업데이트하는 방법
- Chrome 확장 프로그램
이제 오디오 Worklet을 기본적으로 사용할 수 있습니다.
Chrome 64에는 많은 기대를 모은 Web Audio API의 새로운 기능 - 오디오 Worklet이 함께 제공됩니다.
- Chrome
Chrome 사용자 환경 보고서 - 100만 개 이상의 상위 출처로 확장
오늘 Google은 웹상의 상위 100만 개 이상의 출처에 대해 더 많은 정보를 제공하는 새로운 Chrome 사용자 환경 보고서를 발표합니다.
- Chrome
Linux에 확장 프로그램 설치
개인 서버에서 crx 파일을 패키징, 호스팅, 업데이트하는 방법
- Chrome 확장 프로그램
Lighthouse 2.6 업데이트
새로운 성능 감사, 접근성 점수 재조정, 보고서 UX 개선, 버그 수정이 포함되었습니다.
- Chrome
Chrome 63/64의 미디어 업데이트
Chrome 64에서는 예측 가능한 미디어 재생, Windows 10의 HDR, 영구 라이선스를 통한 오프라인 재생 등의 기능을 누려보세요.
- Chrome
Device Memory API
Device Memory API를 사용하면 개발자가 기기의 메모리 기능에 따라 사용자에게 다른 리소스를 제공할 수 있습니다.
- Chrome
Chrome 63의 새로운 기능
Chrome 63에서는 자바스크립트 모듈을 동적으로 가져올 수 있습니다. 제가 가장 좋아하는 면접 코딩 질문은 비동기 반복기와 생성기를 사용하면 아주 간단해집니다. 또한 CSS overscroll-behavior 속성을 사용하여 브라우저의 기본 오버플로 스크롤 동작을 재정의할 수 있습니다.
- Chrome
작업 상자 브로드캐스트 업데이트
캐시가 새 응답으로 업데이트되면 페이지에 메시지를 보냅니다.
DevTools의 새로운 기능 (Chrome 63)
멀티 클라이언트 원격 디버깅, 맞춤 데이터가 포함된 푸시 알림, Workspaces 2.0 등이 지원됩니다.
- Chrome
작업 상자 사전 캐싱
파일 세트를 손쉽게 사전 캐시하고 파일 업데이트를 효율적으로 관리합니다.
작업 상자 전략
요청에 대한 응답을 처리하는 런타임 캐싱 전략 집합으로 일반적으로 '작업 상자 라우팅'과 함께 사용됩니다.
작업 상자 백그라운드 동기화
사용자가 오프라인 상태인 경우에도 백그라운드 동기화를 사용하여 안정적으로 네트워크를 요청할 수 있습니다.
Workbox-google-analytics
오프라인 Google 애널리틱스 상호작용의 재전송이 지원됩니다.
작업 상자 범위 요청
이 모듈은 이전에 캐시된 데이터의 슬라이스를 사용하여 `Range:` 요청에 응답할 수 있도록 지원합니다.
작업 상자 만료
캐시에 있는 항목 수 또는 캐시된 요청의 기간을 기준으로 캐시된 요청을 삭제했습니다.
작업 상자-Sw
빌드 단계 없이 Workbox 런타임을 로드하는 방법을 제공합니다.
작업 상자 캐시 가능 응답
응답의 상태 코드 또는 헤더를 기준으로 캐시할 요청을 제한합니다.
workbox-cli
명령줄에서 서비스 워커를 생성하거나, 사전 캐시 매니페스트를 삽입하거나, Workbox 라이브러리에 대한 로컬 사본을 만듭니다.
워크박스 라우팅
서비스 워커의 요청을 특정 캐싱 전략 또는 콜백 함수로 라우팅합니다.
워크박스 코어
로그 수준 변경 및 캐시 이름 변경 모든 Workbox 라이브러리에서 사용되는 공유 코드를 포함합니다.
당겨서 새로고침 및 오버플로 효과를 맞춤설정하여 스크롤을 관리하세요
CSS 오버스크롤 동작 속성 소개
- Chrome
Chrome 63에서 ::shadow 및 /deep/ 삭제
섀도우 피어싱 CSS 선택기는 더 이상 사용할 필요가 없습니다.
- Chrome
버퍼링 할당량 초과
QuotaExceededError를 처리하는 방법에는 여러 가지가 있습니다.
- Chrome
Chrome 63의 지원 중단 및 삭제
계획 수립에 도움이 되도록 Chrome 63의 지원 중단 및 삭제에 관한 요약입니다. 이 버전에서는 인터페이스 속성의 새로운 동작, KitKat 함수 삭제 및 RTCRtcpMuxPolicy가 변경되었습니다.
- Chrome
Lighthouse 2.5 업데이트
5가지 새로운 감사, Chrome 런처 독립형 노드 모듈, 새로운 제한 가이드가 추가되었습니다.
- Chrome
Chrome 62의 새로운 기능
Chrome 62에서는 네트워크 품질 표시기로 네트워크 정보 API를 개선하고, OpenType 가변 글꼴에 대한 지원이 착수했으며, 이제 DOM Elements API의 미디어 캡처를 사용하여 HTMLMediaElements에서 미디어 스트림을 캡처하고 처리할 수 있습니다.
- Chrome
블러 애니메이션
블러에 효율적으로 애니메이션을 적용하려면 몇 가지 트릭이 필요합니다.
- Chrome
취소 가능한 가져오기
새로운 웹 프리미티브(취소 컨트롤러)를 사용하여 가져오기 취소
- Chrome
Chrome 62의 WebVR 변경사항
WebVR API의 변경사항에 대해 알아보세요.
- Chrome
CSS position:sticky에 대한 이벤트
위치 - 고정 및 IntersectionObserver를 함께 사용하여 요소가 고정될 시점을 결정합니다. 스크롤 이벤트 없이 스크롤 효과를 적용하세요.
웹용 센서
센서는 많은 애플리케이션에서 실행되는 기기의 방향이나 가속도를 고려하는 게임과 같은 고급 기능을 사용 설정하는 데 사용됩니다. Generic Sensor API는 웹에서 이러한 센서 데이터에 액세스하기 위한 일반 인터페이스를 제공합니다.
Chrome 62 지원 중단 및 삭제
계획 수립에 도움이 되도록 Chrome 62의 지원 중단 및 삭제에 관한 요약입니다. 이 버전에서는 보안이 개선되고 웹킷 지원 중단 등이 포함됩니다.
- Chrome
Chrome용 뒤로-앞으로 캐시 살펴보기
bfcache는 이전에 방문한 페이지로 즉시 이동할 수 있는 캐시를 생성합니다.
- Chrome
Chrome의 자동재생 정책
Chrome의 새로운 자동재생 정책을 통해 우수한 사용자 경험을 위한 권장사항을 알아보세요.
- Chrome
Chrome 62의 미디어 업데이트
Android의 영구 라이선스 및 Widevine L1을 사용한 오프라인 재생, 동영상 트랙 최적화, 기기 회전 시 자동 동영상 전체 화면, 실시간 MS 스트림의 탐색 가능한 맞춤설정 가능한 범위, MSE를 사용한 MP4 형식의 FLAC 등이 제공됩니다.
- Chrome
PIP 모드
웹사이트에서 데스크톱 위에 플로팅 동영상 창을 생성할 수 있는 웹 API를 살펴보겠습니다.
- Chrome
Chrome 61의 새로운 기능
이제 Chrome 61에서 기본적으로 자바스크립트 모듈을 지원하여 모듈식 자바스크립트를 작성할 수 있는 방식을 통합합니다. 이제 탐색기 점 공유를 사용하여 네이티브 Android 공유 대화상자를 트리거할 수 있습니다. 그리고 WebUSB API가 출시되었습니다. 이제 웹 앱이 사용자가 허용한 USB 기기에 액세스할 수 있습니다. 이 외에도 다양한 기능이 있습니다.
- Chrome
VisualViewport 소개
시각적 표시 영역 API는 사용자가 페이지를 확대/축소하고 스크롤하는 방식에 관한 세부정보를 제공합니다.
- Chrome
DevTools의 새로운 기능 (Chrome 62)
콘솔의 최상위 대기 연산자, 새로운 스크린샷 워크플로, CSS 그리드 강조표시 등
- Chrome
Chrome 61 지원 중단 및 삭제
계획 수립에 도움이 되도록 Chrome 61의 지원 중단 및 삭제에 관한 요약입니다. 이 버전에서는 보안이 개선되고 웹킷 지원 중단 등이 포함됩니다.
- Chrome
사용 가능한 저장공간 예측
navgator.storage.estimate()는 웹 앱의 저장용량 제약에 대한 정보를 제공합니다.
- Chrome
Chrome 61의 미디어 업데이트
백그라운드 동영상 트랙 최적화 및 기기 회전 시 자동 동영상 전체화면 재생 기능이 추가되었습니다.
- Chrome
Chrome 61의 오디오/동영상 업데이트
Chrome 61의 오디오 및 동영상 업데이트에 관한 요약입니다.
- Chrome
Chrome 60의 새로운 기능
Chrome 60에서는 이제 Paint Timings API를 사용하여 첫 페인트까지의 시간과 콘텐츠가 포함된 첫 페인트까지의 시간을 측정할 수 있습니다. font-display CSS 속성으로 글꼴이 렌더링되는 방식을 제어할 수 있습니다. WebAssembly가 출시되었습니다. 이제 훨씬 더 많은 기능을 이용할 수 있습니다.
- Chrome
DevTools의 새로운 기능 (Chrome 61)
Chrome 61의 DevTools에 새로운 기능과 변경사항이 도입될 예정입니다.
- Chrome
출시 예정인 정규 표현식 기능
이름이 지정된 캡처, dotAll 플래그, 유니코드 속성 이스케이프, Lookbehind 어설션 등 자바스크립트 정규 표현식에 도입되는 흥미로운 새 기능에 대한 개요입니다.
- Chrome
정렬된 입력 이벤트
원활한 사용자 환경을 제공하는 것이 웹에는 중요합니다. 지난 몇 차례 Chrome 출시를 통해 이러한 기기의 입력 지연 시간이 줄었습니다.
- Chrome
실시간 스트림 블로그 - 코드 분할
WebPack처럼 코드 분할 및 경로 기반 청크를 구현했습니다.
- Chrome
DOMException - play() 요청이 중단되었습니다.
"DOMException - play() 요청이 중단되었습니다"에서 어떤 일이 일어났나요?
- Chrome
헤드리스 Chrome을 통한 자동 테스트
헤드리스 Chrome을 통한 자동 테스트
- Chrome
사용자 인증 정보 관리 API 최신 업데이트
사용자 인증 정보 관리 API 최신 업데이트
- Chrome
Chrome 60의 지원 중단 및 삭제
계획 수립에 도움이 되도록 Chrome 60에서의 지원 중단 및 삭제에 관한 요약입니다. 이 버전에서는 보안이 개선되고 웹킷 지원 중단 등이 포함됩니다.
- Chrome
Budget API 소개
Budget API를 사용하면 개발자가 사용자에게 알리지 않고 백그라운드 작업을 실행하여 자동 푸시와 같은 사용 사례를 지원할 수 있습니다.
- Chrome
Chrome 59의 새로운 기능
Chrome 59를 사용하면 사용자 인터페이스나 주변기기 없이 자동화된 환경에서 Chrome을 실행할 수 있습니다. macOS의 알림은 기본 macOS 알림 시스템에 의해 직접 표시됩니다. 이제 이미지 캡처 API를 사용하여 전체 해상도 사진을 캡처할 수 있을 뿐만 아니라 그 밖에도 많은 기능이 제공됩니다.
- Chrome
DevTools의 새로운 기능 (Chrome 60)
Chrome 60의 DevTools에 새로운 기능과 변경사항이 도입될 예정입니다.
- Chrome
Chrome 59의 지원 중단 및 삭제
계획 수립에 도움이 되도록 Chrome 59의 지원 중단 및 삭제에 관한 요약입니다.
- Chrome
헤드리스 Chrome 시작하기
헤드리스 Chrome 시작하기
- Chrome
macOS에서 기본 알림 시스템으로 전환
Chrome 59부터는 macOS에서 알림이 기본 알림으로 표시됩니다.
- Chrome
Chrome 58의 새로운 기능
Chrome 58을 사용하면 프로그레시브 웹 앱은 디스플레이를 통해 몰입감이 더욱 향상됩니다(전체 화면). 이제 IndexedDB 2.0이 지원되며 샌드박스 처리된 iFrame에 더 많은 옵션이 제공됩니다. Pete LePage가 모든 세부정보와 Chrome 58의 새로운 개발자 기능을 사용하는 방법을 알려드립니다.
- Chrome
DevTools의 새로운 기능 (Chrome 59)
Chrome 59의 DevTools에 새로운 기능과 변경사항이 도입될 예정입니다.
- Chrome
자바스크립트 대화상자의 Chromium 정책
동기식 앱 모달 자바스크립트 대화상자는 일반적으로 사용자에게 해를 끼치는 데 사용되기도 합니다. 따라서 JavaScript 대화상자를 사용하지 않는 것이 좋습니다.
- Chrome
CSS 심층 분석 - 완벽한 프레임의 맞춤 스크롤바를 위한 trix3d()
맞춤 변환 행렬을 사용하면 완벽한 프레임의 맞춤 스크롤바를 빌드할 수 있습니다.
성능이 뛰어난 확장 및 축소 애니메이션 빌드
확장 및 축소 효과를 만들 때 배율 변환을 사용하여 UI의 성능을 유지할 수 있습니다.
- Chrome
Chrome 58의 미디어 업데이트
미디어 컨트롤 맞춤설정, 홈 화면에 추가된 프로그레시브 웹 앱 자동재생, 보이지 않을 때 음소거된 동영상의 자동재생 일시중지, 색 공간 미디어 쿼리 기능 추가
- Chrome
(미디어) 스트림을 건너 레이가
현재 Chrome에서 MSE (Media Source Extensions)를 사용하면 암호화된 스트림과 명확한 스트림 간에 전환할 수 없습니다. Chrome 58부터 이 모든 것이 변경됩니다.
- Chrome
Chrome 58의 오디오/동영상 업데이트
Chrome 58의 오디오 및 동영상 업데이트에 관한 요약입니다.
- Chrome
Chrome 58의 지원 중단 및 삭제
계획 수립에 도움이 되도록 Chrome 58의 지원 중단 및 삭제에 관한 요약입니다.
- Chrome
Chrome 57의 백그라운드 탭
Chrome 57의 백그라운드 탭
- Chrome
Chrome 57의 새로운 기능
이제 Chrome 57에서는 그리드 기반 레이아웃을 위한 디스플레이: 그리드를 사용하고, 미디어 세션 API를 사용하여 재생 중인 미디어에 관한 정보로 잠금 화면 및 알림을 맞춤설정하는 등의 작업을 할 수 있습니다. Pete LePage가 모든 세부정보와 Chrome 57의 새로운 개발자 기능을 사용하는 방법을 알려드립니다.
- Chrome
DevTools의 새로운 기능 (Chrome 58)
Chrome 58의 DevTools에 새로운 기능과 변경사항이 도입될 예정입니다.
- Chrome
Lighthouse 2017년 1월 업데이트
Lighthouse 1.5.
- Chrome
미디어 알림 맞춤설정 및 재생목록 처리
새 Media Session API로 웹 미디어 알림을 맞춤설정하고 미디어 관련 이벤트에 응답합니다.
- Chrome
매니페스트 - 작업 핸들러
manifest.json의 action_handlers 속성에 대한 참조 문서입니다.
Chrome 57의 API 지원 중단 및 삭제
계획 수립에 도움이 되도록 Chrome 57의 지원 중단 및 삭제에 관한 요약입니다.
- Chrome
Payment Request API 변경사항
Chrome 56 및 57에서는 사양 변경에 따라 Payment Request API가 몇 가지 변경되었습니다. 기본 개념을 알아보고 자체 구현을 변경해 보세요.
- Chrome
CSS 그리드 – 표 레이아웃이 다시 제공됩니다. 시청자와 친근하게 소통하세요.
CSS 그리드는 웹을 위한 새로운 레이아웃 시스템입니다.
Chrome 56의 새로운 기능
Chrome 56을 사용하면 웹 앱이 Web Bluetooth API를 사용하여 근처의 저전력 블루투스 기기와 통신할 수 있습니다. CSS position: sticky;가 다시 사용됨 - 표시 영역 상단에 고정될 때까지 정상적으로 스크롤되는 요소를 쉽게 만들 수 있습니다. 또한 모든 사용자가 HTML5 by Default를 사용할 수 있습니다.
- Chrome
기본적으로 터치 스크롤 속도 향상
스크롤 반응성은 모바일에서 사용자의 웹사이트 참여에 중요하지만, 터치 이벤트 리스너로 인해 심각한 스크롤 성능 문제가 발생하는 경우가 많습니다. Google에서 사용자와 개발자가 기본적으로 속도를 높일 수 있도록 지원하는 방법을 알아보세요.
- Chrome
자바스크립트 디버깅 참조
Chrome DevTools 디버깅 기능에 관한 종합 레퍼런스에서 새로운 디버깅 워크플로를 살펴보세요.
- Chrome DevTools
Lighthouse로 더 나은 웹 빌드
Lighthouse의 새로운 기능 디자인 변경, 새로운 권장사항 감사 및 온라인 보고서 뷰어
- Chrome
URL 표시줄 크기 조정
URL 표시줄을 숨겨도 모바일 페이지의 크기가 더 이상 조절되지 않습니다.
- Chrome
Chrome DevTools: Chrome 58에서 자바스크립트 CPU 프로파일링
레코드 자바스크립트 CPU 프로필이 Chrome 58에서 변경되었습니다.
- Chrome
Chrome DevTools - Chrome 58에서 자바스크립트 CPU 프로파일링
"JavaScript CPU 프로필 기록"이 Chrome 58에서 변경되었습니다.
- Chrome
Chrome 56의 API 지원 중단 및 삭제
계획 수립에 도움이 되도록 Chrome 56의 지원 중단 및 삭제에 관한 요약입니다.
- Chrome
position:fixed가 Chrome에 다시 지원됨
position:sticky. 돌아왔습니다.
- Chrome
사진 촬영 및 카메라 설정 제어
이미지 캡처는 카메라 설정을 제어하고 사진을 찍는 API입니다.
- Chrome
고성능 시차
약간의 수학적 학습을 통해 브라우저 아키텍처에서 훌륭하게 작동하는 시차 효과를 가질 수 있습니다.
- Chrome
Chrome 55의 새로운 기능
Chrome 55에서는 async와 await를 사용하여 마치 동기 코드인 것처럼 프라미스 기반 코드를 작성할 수 있습니다. PointerEvents는 모든 입력 이벤트를 처리하는 통합된 방법을 제공합니다. 영구 스토리지는 오리진 트라이얼이 종료되었습니다.
- Chrome
Chrome Dev Summit 2016 준비하기
Chrome Dev Summit 2016이 11월 10일, 11일 목요일에 개최됩니다.
- Chrome
Chrome에서 안전하지 않음 경고 회피
곧 Chrome은 비밀번호와 신용카드 입력란이 포함된 비보안 페이지의 URL 입력란에 안전하지 않음을 표시합니다.
- Chrome
CSS로 하이픈 관리
Chrome 55에서는 하이픈 속성을 구현하여 소프트 하이픈이 표시되는 시점과 동작 방식을 제어합니다.
DevTools Digest, 2016년 10월
새로운 Console 기능, 컨텍스트 선택기 버그 업데이트, 새로운 UC 브라우저 사용자 에이전트가 추가되었습니다.
- Chrome
캔버스, 동영상, 오디오 요소에서 MediaStream 캡처
captureStream() 메서드를 사용하면 Android 및 데스크톱의 캔버스, 오디오 또는 동영상 요소에서 MediaStream을 캡처할 수 있습니다.
- Chrome
나아갈 방향을 가리키기
포인터 이벤트는 브라우저의 포인터 입력 모델을 통합하여 터치, 펜, 마우스를 하나의 이벤트 집합으로 함께 가져옵니다.
- Chrome
터치 작업 옵션
개발자는 터치 액션을 통해 사용자가 요소와 상호작용하는 방법을 정의할 수 있으며, Chrome은 이제 Chrome 55의 터치 액션 옵션을 폭넓게 지원합니다.
- Chrome
이벤트 리스너가
이제 addEventListener에서 한 번 옵션을 지원하므로 나중에 정리하는 이벤트를 더 쉽게 정의할 수 있습니다.
- Chrome
Chrome 55의 API 지원 중단 및 삭제
계획 수립에 도움이 되도록 Chrome 56의 지원 중단 및 삭제에 관한 요약입니다.
Chrome 55에 auxclick 출시 예정
기본이 아닌 마우스 버튼 클릭에 대해 새 auxclick 이벤트가 실행됩니다.
- Chrome
Chrome 54의 새로운 기능
이제 Chrome 54를 사용하면 맞춤 요소 v1을 사용하여 자체 맞춤 HTML 태그를 만들고, 맞춤 요소 v1로 재사용 가능한 웹 구성요소를 만들 수 있습니다. BroadcastChannel API를 사용하면 동일한 출처의 열린 창이나 탭 간에 메시지를 더 쉽게 전송할 수 있습니다. Android에서 미디어 환경이 개선되고 이제 외부 가져오기를 오리진 트라이얼로 사용할 수 있습니다.
- Chrome
Developers.google.com/web 업데이트
새로운 웹 기초 - 개선된 탐색, 새로운 콘텐츠 등
- Chrome
Lighthouse 소개
Lighthouse를 설정하여 웹 앱을 감사하는 방법을 알아보세요.
배율 변경 시 합성된 레이어를 다시 래스터링
will-change - '변환'은 빠르게 애니메이션을 적용하도록 합니다.
- Chrome
교차 출처 서비스 워커 - 외부 가져오기 실험
서드 파티 서비스에서 자체 네트워크 요청 핸들러 배포를 시작할 수 있습니다.
- Chrome
Chrome 54에 CacheQueryOptions 도입
CacheQueryOptions의 전체 집합이 지원되므로 찾고 있는 캐시된 응답을 더 쉽게 찾을 수 있습니다.
- Chrome
PushSubscription의 옵션
이제 사용자를 푸시에 구독할 때 사용되는 옵션에 액세스할 수 있습니다.
- Chrome
DevTools Digest, 2016년 9월 - 실적 월간 소식
지난 몇 차례의 Chrome 출시를 통해 DevTools의 성능 도구를 개선했습니다.
- Chrome
BroadcastChannel API - 웹용 메시지 버스
BroadcastChannel API는 창, 탭, iframe 또는 작업자 간의 간단한 Pub/Sub에 사용할 수 있습니다.
- Chrome
document.write()에 대한 개입
Chrome에서 document.write()를 사용하여 추가된 일부 스크립트를 차단함
- Chrome
Web Animations API가 교차 브라우저 기록을 달성함
Firefox 48이 Chrome에 통합되어 Web Animations API의 기본 구현을 제공합니다.
- Chrome
Chrome 53의 API 지원 중단 및 삭제
계획 수립에 도움이 되도록 Chrome 지원 중단 및 삭제에 관한 요약입니다.
- Chrome
DevTools Digest, 2016년 8월
리소스 패널, 새로운 기능, 커뮤니티 활동 관련 변경사항
- Chrome
웹 푸시 상호 운용성의 이점
웹 푸시에는 최신 버전의 Chrome에 몇 가지 업데이트가 있었습니다. 이제 GCM이 웹 푸시 프로토콜을 지원하므로 VAPID를 사용하는 경우 Google 개발자 프로젝트에 가입할 필요가 없고 FCM 엔드포인트가 제공됩니다.
- Chrome
모바일에서 자동재생 시 음소거 - 캔버스 팁과 애니메이션 GIF는 더 이상 사용할 필요가 없습니다.
동영상의 음소거된 자동재생은 Chrome 53부터 Android에서 지원됩니다. 이전에는 재생을 시작하려면 동영상 요소에 사용자 동작이 필요했습니다.
- Chrome
프로그레시브 웹 앱 디버그
Application 패널을 사용하여 웹 앱 매니페스트, 서비스 워커 및 서비스 워커 캐시를 검사, 수정 및 디버그합니다.
- Chrome DevTools
간편해진 오프라인 Google 애널리틱스
sw-offline-google-analytics 라이브러리는 필요한 모든 것을 제공합니다.
- Chrome
무한 스크롤러의 복잡성
무한 스크롤러는 일반적인 UI 패턴입니다. 여기서는 60fps에서 수행하는 메모리 보수적인 방식으로 이 패턴을 구현하는 방법을 살펴봅니다.
- Chrome
짧은 세션 종료 - 서비스 워커를 사용하여 웹에서 쿠키 관리를 개선하기 위한 제안
서비스 워커를 사용하여 세션을 유지하기 위한 개념 증명 설계를 소개합니다.
- Chrome
WebRTC용 ECDSA - 보안 강화, 개인 정보 보호 강화, 성능 개선
버전 52부터 Chrome은 WebRTC 인증서 키 생성을 위한 훨씬 더 효율적이고 안전한 알고리즘인 ECDSA를 기본적으로 사용합니다. 또한 이제 RTCCertificates를 IndexedDB로 저장할 수 있습니다.
- Chrome
Android용 Chrome의 오디오 및 동영상의 서비스 워커 캐싱, PlaybackRate 및 Blob URL
버전 52부터 Android Chrome은 기본 플랫폼 구현에 의존하지 않고 데스크톱 Chrome과 동일한 미디어 스택을 사용합니다. 이를 통해 서비스 워커 미디어 캐싱, 가변 재생 속도, Android의 blob URL, API 간에 전달되는 MediaStream 및 간편한 크로스 플랫폼 디버깅을 사용할 수 있습니다.
- Chrome
Flexbox는 절대 위치로 배치된 하위 요소의 새로운 동작을 가져옵니다.
Flexbox는 절대 위치로 배치된 하위 요소의 새로운 동작을 가져옵니다.
- Chrome
Chrome 52의 CSS 포함
개발자는 새로운 CSS Containment 속성을 사용하여 브라우저의 스타일, 레이아웃 및 페인트 작업의 범위를 제한할 수 있습니다.
- Chrome
Chrome 52의 API 지원 중단 및 삭제
계획 수립에 도움이 되도록 Chrome의 지원 중단 및 삭제에 관한 요약입니다.
- Chrome
성능 관찰자 - 성능 데이터에 효율적으로 액세스
Chrome 52의 새로운 기능인 Performance Observer 인터페이스는 성능 타임라인 데이터에 더 효율적인 이벤트 기반 액세스를 제공합니다.
- Chrome
DevTools Digest, 2016년 9월 - 2016년 이후의 DevTools
2016년 이후 DevTools의 큰 테마와 트렌드
- Chrome
패시브 이벤트 리스너로 스크롤 성능 개선
Chrome 51의 새로운 패시브 이벤트 리스너로 스크롤 성능을 크게 향상시킬 수 있습니다.
- Chrome
스트리밍으로 즉각적으로 반응하기
ReadableStreams를 사용하여 최대한 빨리 서비스 워커 응답 처리를 시작하세요.
- Chrome
Chrome 50에서 안전하지 않은 출처에서 위치정보 API가 삭제됨
Chrome 버전 50부터 더 이상 비보안 연결을 통한 HTML5 Geolocation API가 지원되지 않습니다.
- Chrome
DevTools Digest - 새로운 명령 메뉴로 더욱 강력한 기능 사용하기
DevTools의 새로운 명령어 메뉴와 매우 빠른 워크플로를 지원하는 60가지 이상의 작업에 대해 읽어보세요.
- Chrome
Chrome 51의 API 지원 중단 및 삭제
계획 수립에 도움이 되도록 Chrome의 지원 중단 및 삭제에 관한 요약입니다.
- Chrome
KeyboardEvents의 새로운 기능은 무엇인가요? 열쇠와 코드
두 가지 새로운 속성으로 웹에서 일관된 키보드 이벤트 처리를 제공합니다.
- Chrome
사용자 인증 정보 관리 API를 사용한 로그인 흐름 간소화
정교한 사용자 환경을 제공하려면 사용자가 자신의 웹사이트에 대해 인증을 받도록 지원하는 것이 중요합니다. 하지만 최종 사용자는 비밀번호를 만들고 기억하고 입력하는 것이 번거로울 수 있으며, 특히 모바일에서는 더 그렇습니다.
- Chrome
실험 시간 - 스크롤 고정
스크롤 앵커링을 사용하면 콘텐츠를 읽기 시작하면 웹페이지 이동이 중지됩니다.
- Chrome
웹에서 USB 기기에 액세스
WebUSB API는 USB를 웹에 제공하여 더 안전하고 사용하기 쉽게 만듭니다.
개요
Chrome에 내장된 웹 개발자 도구를 사용해 보세요.
- Chrome DevTools
Console API 참조
Console API를 사용하여 콘솔에 메시지를 작성합니다.
- Chrome DevTools
모바일 1세대를 위한 새로운 기기 모드
Chrome 49에서 도입된 새롭고 새로워진 기기 모드에 대해 Chrome DevTools를 자세히 알아보세요.
- Chrome
Intel Edison을 사용하여 웹 지원 IoT 기기 만들기
사물 인터넷은 요즘 모든 사람들의 입에 오르내리고 있습니다. 하지만 웹 브라우저에서 액세스할 수 있는 IoT 기기를 만들 수 있다면 어떨까요? 이 문서에서는 Intel® Edison Arduino 브레이크아웃 보드에서 실행되는 Node.js와 피지컬 웹, 웹 블루투스, Node.js를 사용하여 이러한 작업을 정확히 수행하는 방법을 살펴봅니다.
- Chrome
Media Source API - 미디어 세그먼트의 원활한 재생을 추가 순서대로 자동으로 보장
Media Source API를 사용하면 JavaScript가 재생을 위한 미디어 스트림을 구성할 수 있습니다. Chrome 50부터는 SourceBuffer 시퀀스 모드를 사용하여 미디어 세그먼트가 추가된 순서대로 타임라인에 자동으로 재배치되도록 할 수 있으며, 세그먼트 사이에 간격이 없습니다.
- Chrome
Chrome 50에 캔버스 toBlob() 지원 추가
canvas.toBlob이 Chrome 50에서 지원되도록 설정됩니다.
- Chrome
Chrome 50에서 기기 방향 변경 예정
DeviceOrientationEvent는 상대적 각도를 사용하며 새로운 DeviceOrientationAbsoluteEvent입니다.
- Chrome
Chrome 50의 웹 애니메이션 개선사항
사양 준수가 개선되었으며 Chrome 50에서 새로운 기능이 제공됩니다.
- Chrome
Chrome 50의 API 지원 중단 및 삭제
계획 수립에 도움이 되도록 Chrome의 지원 중단 및 API 삭제에 관한 요약
- Chrome
Chrome 50에서 Chrome이 createImageBitmap()을 지원합니다.
Chrome 50에 도착하도록 설정된 작업자에서 이미지 디코딩이 지원됩니다.
- Chrome
Chrome 50에 DOMTokenList 유효성 검사 추가
Chrome 50에서 곧 출시될 다양한 기능을 코드에서 직접 확인하세요.
- Chrome
검사 및 수정을 위한 FormData 메서드
Chrome 50에서는 이제 데이터를 전송하기 전에 FormData 인스턴스와 상호작용할 수 있습니다.
- Chrome
포커스 관리에서 두통을 해소하세요
'순차적 포커스 탐색 시작점' 기능은 포커스가 있는 영역이 없을 때 순차적 포커스 탐색 ([Tab] 또는 [Shift-Tab])을 위해 포커스 가능 요소를 검색하기 시작하는 위치를 정의합니다. 특히 링크 건너뛰기 및 문서의 포커스 관리와 같은 접근성 기능에 유용합니다.
- Chrome
Chrome 50의 웹 알림 개선 - 아이콘, 이벤트 닫기, 다시 알림 환경설정, 타임스탬프
Chrome 50의 알림 기능을 위한 훌륭한 새 기능이 많이 있습니다. 아래에서 간단히 소개하겠습니다.
- Chrome
웹 푸시 페이로드 암호화
이제 웹 푸시에서 페이로드를 지원합니다. 이 강력한 새 기능을 활용하는 방법을 알아보세요.
- Chrome
link rel=#39;preload'로 리소스 우선순위 지정
Chrome 50은 rel='preload'를 위한 지원을 추가하며 rel='subresource'를 지원 중단합니다.
- Chrome
HTMLMediaElement.play()가 프로미스를 반환합니다.
자동 재생의 불확실성은 이제 안녕! 이제 play()에서 프로미스를 반환합니다.
- Chrome
원격 디버깅 기능 강화, 흥미진진한 수업 진행, 심야 쇼 프로그램 등을 예로 들 수 있습니다.
개선된 'Inspect Devices' UI에 관해 자세히 알아보고, 현재 고정된 스타일 패널에서 쉽게 클래스를 전환하고, 오늘밤 DevTools 파일럿을 시청하세요.
- Chrome
소스에서 변수 조사하기
Chrome DevTools를 사용하면 애플리케이션 전체에 걸쳐 여러 변수를 쉽게 확인할 수 있습니다.
- Chrome DevTools
DevTools가 어둡게, @keyframe 편집, 스마트한 자동 완성
DevTools에서 더 스마트한 콘솔 자동 완성으로 타이핑을 줄이는 방법, Styles 창에서 직접 @keyframe 규칙을 편집하는 방법, CSS 맞춤 변수를 재미있게 활용하는 방법, 어두운 면에 조인하는 방법을 알아보세요.
- Chrome
Chrome 49의 웹 오디오 업데이트
Chrome의 Web Audio API에 대한 최신 버전입니다.
- Chrome
Chrome 49의 부드러운 스크롤
스크롤이 지겨우신가요? 좋습니다. Chrome 49가 출시되면 부드러운 스크롤이 새로 구현됩니다.
- Chrome
ES2015 프록시 소개
ES2015 프록시 (Chrome 49 이상)는 JavaScript에 Intercession API를 제공하여 대상 객체에서 모든 작업을 트랩하거나 가로채고 이 타겟이 작동하는 방식을 수정할 수 있습니다.
- Chrome
font-display로 글꼴 성능 제어
개발자는 @font-face를 위한 새로운 글꼴 표시 설명자를 사용하여 로드에 걸리는 시간에 따라 웹 글꼴이 렌더링 (또는 대체)되는 방식을 결정할 수 있습니다.
- Chrome
CSS 변수 - 중요한 이유
더 정확하게 CSS 맞춤 속성으로 알려진 CSS 변수가 Chrome 49에서 도입되었습니다. CSS의 반복을 줄이고 테마 전환과 같은 강력한 런타임 효과와 향후 CSS 기능을 확장/폴리필하는 데 유용할 수 있습니다.
이제 WebRTC에서 VP9을 사용할 수 있습니다.
데스크톱 및 Android용 Chrome 48부터 VP9은 WebRTC를 사용하는 영상 통화용 동영상 코덱(선택사항)이 됩니다.
- Chrome
MediaRecorder로 오디오 및 동영상 녹음
MediaRecorder API를 사용하면 웹 앱에서 오디오와 동영상을 녹화할 수 있습니다. 이 API는 현재 Firefox, Android용 Chrome, 데스크톱용으로 사용할 수 있습니다.
- Chrome
Chrome의 알림 작업 48
사용자가 알림 작업 버튼을 사용하여 페이지를 열지 않고도 사이트와 상호작용할 수 있습니다.
- Chrome
이벤트용 고해상도 타임스탬프
DOMHighResTimeStamp를 활용하여 마이크로초 단위로 이벤트가 발생하는 시점을 파악합니다.
- Chrome
URLSearchParams를 사용한 간편한 URL 조작
TURLSearchParams URL의 쿼리 문자열에 대한 간단한 액세스 및 조작
- Chrome
Android의 Chrome용 Google Cast
이제 Android용 Chrome에서 모바일 사이트에서 Presentation API 및 Cast 웹 SDK를 사용하여 Google Cast 기기에 콘텐츠를 표시할 수 있습니다.
- Chrome
프로그레시브 웹 앱 시작하기
프로그레시브 웹 앱 빌드를 시작하는 방법 알아보기
- Chrome
Chrome DevTools의 보안 패널 출시
Chrome DevTools의 새로운 보안 패널에 대해 자세히 알아보세요.
- Chrome
백그라운드 동기화 소개
백그라운드 동기화는 사용자가 안정적으로 연결할 때까지 작업을 연기할 수 있게 하는 새로운 웹 API입니다. 이는 사용자가 전송하고자 하는 것이 실제로 전송되도록 하는 데 유용합니다.
- Chrome
DevTools 다이제스트 (CDS 에디션): 미래와 RAIL 프로파일링
상시 사용 가능한 새롭고 간소화된 Device Mode로 DevTools가 모바일 우선으로 어떻게 발전하고 있는지 알아보세요. 색상 버튼을 사용해 선택기에 빠르게 색상을 추가하고 DevTools에 곧 추가될 예정입니다.
- Chrome
애플리케이션 셸 아키텍처를 사용한 웹 앱 즉시 로드
애플리케이션 셸 아키텍처는 다양한 기술을 활용하여 오늘날 프로그레시브 웹 앱을 빌드하는 방법입니다.
- Chrome
DevTools Digest - 효율적인 요소 수정, 서비스 워커 디버깅 및 머티리얼 디자인 셰이드
DOM 패널의 새로운 컨텍스트 메뉴를 사용하여 노드를 효율적으로 수정합니다. 리소스 패널을 통해 직접 서비스 워커를 디버그합니다. 색상 선택기에서 모든 Material Design 셰이드 중에서 선택할 수 있습니다. JS 라이브러리를 더 쉽게 블랙박스 처리하세요.
- Chrome
웹 애니메이션 리소스
Web Animations API용 리소스 및 기타
터치하여 검색 트리거 관리
터치하여 검색이 실행되는 시점과 방법 이해하기
- Chrome
알림 needInteraction: 데스크톱에서의 더 원활한 알림 UX
데스크톱의 알림은 잠시 후에 자동으로 닫힙니다.
- Chrome
DevTools 다이제스트 - 탭 재정렬, 2의 콘솔 및 프레임워크 이벤트 리스너
DevTools 탭을 가장 잘 맞는 순서로 재정렬하고 프레임워크 이벤트가 바인딩된 위치를 정확히 확인하세요.
- Chrome
입력 장치 기능
PointerEvents가 없을 때 마우스 및 터치 로직을 합리화하는 더 간단한 메서드
- Chrome
자바스크립트 스니펫 실행
스니펫은 Chrome DevTools의 Sources 패널 내에서 작성하고 실행할 수 있는 소형 스크립트입니다. 어느 페이지에서나 액세스하여 실행할 수 있습니다. 스니펫을 실행하면 현재 열려 있는 페이지의 맥락에 따라 실행됩니다.
- Chrome DevTools
웹 앱에서 카메라, 마이크, 스피커를 선택하세요
MediaDevices 인터페이스는 카메라, 마이크, 스피커 등 브라우저에서 사용할 수 있는 입력 및 출력 장치에 대한 액세스를 제공합니다.
- Chrome
EME 로거 확장 프로그램
EME 로거는 EME (암호화된 미디어 확장 프로그램) 이벤트 및 호출을 DevTools 콘솔에 기록하는 Chrome 확장 프로그램입니다.
- Chrome
Service Worker Cache API 업데이트
Chrome 46부터 캐시에 새로운 메서드가 추가되었으며, Chrome 47에서도 이 방식은 48개나 될 것으로 보입니다. 쉬지 않습니다.
- Chrome
History API - 스크롤 복원
보기 흉한 스크롤 이동을 방지하기 위해 History API를 업데이트했습니다.
- Chrome
HPKP 보고를 사용하여 공개 키 고정 출시
Chrome 46에는 HPKP 보고라는 기능이 함께 제공됩니다. 이 기능을 사용하면 사이트에 더욱 엄격한 형식의 SSL을 적용할 수 있습니다.
- Chrome
Chrome의 탭 삭제 - 메모리 절약 실험
Chrome의 메모리 공간을 줄이는 것은 올해 팀의 최우선 과제 중 하나입니다.
- Chrome
웹 앱 매니페스트를 사용하여 사이트 전체 테마 색상 지정
매니페스트에 테마 색상을 설정하고 홈 화면에서 실행할 때 사이트의 모든 페이지에서 사용할 수 있도록 합니다.
- Chrome
보다 큰 고급 네트워크 패널 필터 및 몇 가지 추가 기능
네트워크 패널의 필터는 몇 가지 멋진 맞춤 검색 라벨을 지원합니다.
- Chrome
스타일 창에서 사용할 수 있는 간단한 키보드 트릭
몇 가지 유용한 키보드 기술을 통해 스타일 창을 효과적으로 탐색하는 방법을 알아보세요.
- Chrome
DevTools Digest - 집계된 타임라인 세부정보, 색상 팔레트 등
타임라인의 집계된 세부정보에서 성능 문제를 일으키는 서드 파티 스크립트, 새로운 색상 팔레트로 일관된 색상을 선택하는 방법 등을 알아보세요.
- Chrome
Material Design Lite 신규 출시 - 1.0.4
Material Design Lite의 새 버전으로, 빌드 프로세스에 다양한 버그 수정 및 개선 사항이 포함되어 있습니다.
- Chrome
requestIdleCallback 사용
requestIdleCallback은 브라우저가 유휴 상태일 때 작업을 예약하는 새로운 성능 API입니다.
- Chrome
플러그인 콘텐츠에 포스터 이미지 사용
이제 Chrome에서 맞춤 포스터 이미지를 객체 요소에 추가하여 Flash와 같은 플러그인에서 인지되는 로드 성능을 개선할 수 있습니다.
- Chrome
콘솔 패널에서 사용해야 하는 5가지 방법
콘솔 패널에서 사용해야 하는 5가지 방법
- Chrome
간편하게 DOM 노드 복제
HTML을 거대한 문자열로 편집하지 않고도 DOM을 쉽게 변경할 수 있습니다.
- Chrome
콘솔 패널에서 HTML 편집
요소 패널에서 알아볼 수 있는 DOM 노드 컨텍스트 메뉴도 콘솔 패널에 표시됩니다.
- Chrome
DevTools의 새로운 홈
새로운 개발자 홈페이지(developers.google.com/web/tools/chrome-devtools)로 이전하여 유용한 새 가이드와 도움말을 확인하세요.
- Chrome
개선된 DOM 탐색경로
Elements 패널에 탐색경로 트레일이 있다는 것을 알고 계셨나요?
- Chrome
소스의 실시간 편집 CSS
소스에서 CSS를 실시간으로 수정하고 페이지를 실시간으로 업데이트할 수 있다는 사실을 알고 계셨나요?
- Chrome
DevTools Digest - 필름 스트립 및 새로운 제한 모드
많은 DevTools Digest 업데이트 중 첫 번째에서 새로운 필름 스트립 기능 등을 살펴보세요.
- Chrome
새 맞춤 기기를 사전 설정으로 추가
특정 크기의 기기를 자주 에뮬레이션하나요? DevTools Device Mode에서 새 기기 사전 설정을 추가할 수 있습니다.
- Chrome
- Chrome DevTools
MediaStream 지원 중단
MediaStream API는 동기화된 오디오 또는 동영상 스트림을 나타냅니다. MediaStream.ended, MediaStream.label, MediaStream.stop()이 지원 중단됩니다. 대신 MediaStream.active, MediaStreamTrack.label 및 MediaStreamTrack.stop()을 사용하세요.
- Chrome
자바스크립트를 통해 블루투스 기기와 통신하기
Web Bluetooth API를 사용하면 웹사이트가 블루투스 기기와 통신할 수 있습니다.
서비스 워커에서 성능 측정
서비스 워커에서 요청 성능을 측정할 수 없다면 어떻게 하면 성능이 개선된다고 말할 수 있을까요? 이제 Chrome의 최근 변경사항을 통해 이 질문에 답할 수 있습니다.
- Chrome
rotationAngle 및 touchRadius 사용
Chrome 45에서는 개발자가 더 나은 터치 기반 앱을 더 쉽게 빌드할 수 있도록 몇 가지 변경사항이 적용되었습니다.
- Chrome
Android의 Chrome에서 미디어 재생 알림
웹페이지에서 오디오나 동영상이 재생 중일 때 페이지 제목과 재생/일시중지 버튼을 보여주는 알림이 알림 트레이와 잠금 화면에 표시됩니다. 알림은 재생을 일시중지/다시 시작하거나 미디어를 재생 중인 페이지로 돌아가는 데 사용할 수 있습니다.
- Chrome
다음 일치하는 항목을 선택하는 단축키
Sources 패널 편집기에서는 Cmd + D를 사용하여 다음 항목을 선택할 수 있습니다.
- Chrome
CSS 미디어 쿼리 검사 및 트리거
Device Mode에는 미디어 쿼리 검사기가 내장되어 있어 반응형 디자인을 더 쉽게 할 수 있습니다.
- Chrome
특정 조건에 따라 중단점 설정
중단점을 설정할 때 표현식의 결과에 따라 중단점을 조건부로 만들 수 있습니다.
- Chrome
소스 패널에서 코드 블록을 선택하고 실행합니다.
'소스' 패널에서 강조표시된 코드 블록을 실행하려면 단축키 Ctrl + Shift + E를 사용하세요.
- Chrome
DevTools 패널 빠르게 둘러보기
Cmd+] (또는 Cmd+[)를 사용하여 DevTools의 패널 간에 이동할 수 있습니다.
- Chrome
콘솔에서 빠른 스택 트레이스 출력
console.trace()를 사용하여 스택 트레이스를 빠르고 쉽게 가져와 코드 실행 흐름을 더 잘 이해할 수 있습니다.
- Chrome
검사관은 누가 검사하나요?
DevTools로 DevTools를 검사할 수 있다는 것을 알고 계셨나요?
- Chrome
요소에서 유사 클래스 트리거
CSS 마우스 오버 효과를 디버그하려고 했지만 요소에 마우스를 유지하지 못한 적이 있나요? 방법은 다음과 같습니다.
- Chrome
선택적 파일 범위를 사용한 프로젝트 전체 검색
DevTools에서 전문가처럼 검색할 수 있는 비밀 명령어를 알아보세요.
- Chrome
네트워크 색상 그룹
리소스를 쉽게 식별할 수 있도록 어떤 리소스 유형과 어떤 색상이 일치하는지 알아보세요.
- Chrome
디버깅 중에 인라인으로 자바스크립트 값 미리보기
디버깅하는 동안 DevTools에서 자바스크립트 변수 값을 미리 보는 방법을 알아봅니다.
- Chrome
요소 패널에서 빠르게 리소스 수정/보기
요소 패널에서 빠르게 리소스 수정/보기
- Chrome
event_rules
manifest.json의 event_rules 속성에 대한 참조 문서
- Chrome 확장 프로그램
event_rules
manifest.json의 event_rules 속성에 대한 참조 문서
- Chrome 확장 프로그램
오디오용 미디어 소스 확장 프로그램
MSE (Media Source Extensions)는 HTML5 오디오 및 동영상 요소를 위한 확장된 버퍼링과 재생 컨트롤을 제공합니다. 원래 DASH (Dynamic Adaptive Streaming over HTTP) 기반 동영상 플레이어를 지원하기 위해 개발되었지만 MSE는 오디오, 특히 끊김 없는 재생에 사용할 수 있습니다.
- Chrome
알림 변경사항 알림
Chrome 44에 두 가지 새로운 API가 추가되어 푸시와 함께 알림을 더 쉽게 사용하고 맞춤설정할 수 있습니다.
- Chrome
소스 패널에서 여러 커서를 추가하려면 명령어를 클릭합니다.
DevTools 소스 패널에서 다중 커서 편집 방법을 알아봅니다.
- Chrome
요소 패널에서 보기
콘솔의 요소 패널에 DOM 노드를 표시합니다.
- Chrome
요소 태그 빠른 수정
요소 패널에서 노드의 여는 태그 이름을 더블클릭하여 수정할 수 있습니다.
- Chrome
Console 패널에서 이벤트를 빠르게 모니터링하기
Command Line API 메서드 MonitorEvents(object [, events])를 사용하여 객체에 전달된 모든 이벤트를 로깅할 수 있습니다.
- Chrome
색상 선택 도구의 일부 UI 및 기능 개선사항
DevTools의 색상 선택 도구를 업그레이드 중입니다. 현재 Chrome Canary에서 지원
- Chrome
이징 편집기
이징 CSS 속성을 선택하여 어떻게 동작하는지 시각적으로 애니메이션 미리보기를 확인할 수 있습니다.
- Chrome
데이터 URI로 이미지 복사
리소스 패널에서 이미지 미리보기를 마우스 오른쪽 버튼으로 클릭하여 데이터 URI (base 64로 인코딩됨)로 복사합니다.
- Chrome
완료되지 않은 네트워크 요청
Is:running Advanced Network Filter를 사용하여 완료되지 않은 네트워크 요청 (예: 실행 중인 요청)을 확인할 수 있습니다.
- Chrome
현재 선택한 DOM 노드
현재 선택된 DOM 노드를 가져오는 빠른 콘솔 바로가기에 대해 알아보세요.
- Chrome
Alt 키를 누른 상태에서 클릭하여 모든 하위 노드 펼치기
Alt + 클릭하여 모든 하위 노드 펼치기
- Chrome DevTools
- Chrome
키보드를 사용하여 호출 스택 탐색
단축키로 중단점을 설정하고 호출 스택을 탐색하는 방법
- Chrome
일치하는 선택기 보기
스타일 창에서 선택기를 볼 때 쉼표로 구분된 선택기 부분의 색상은 선택한 DOM 노드와 일치하는지에 따라 다르게 지정됩니다.
- Chrome
이벤트 리스너 가져오기 및 디버그
다음 콘솔 명령어를 사용하여 DevTools에서 이벤트 리스너를 가져오고 디버그합니다.
- Chrome
예외 발생 시 자동으로 일시중지
DevTools에서 예외 발생 시 자동으로 일시 중지할 수 있습니다. 포착되지 않은 예외에 대해서는 특히 유용합니다.
- Chrome DevTools
- Chrome
CSS 값 빠르게 변경
키보드 또는 마우스휠로 CSS 값 빠르게 변경
- Chrome
대괄호 표기법 자동 완성
소스 패널에서 괄호 표기법을 자동 완성할 수 있다는 것을 알고 계셨나요?
- Chrome
- Chrome DevTools
cURL에서 네트워크 요청 재생
명령줄에서 네트워크 요청을 디버깅하는 방법을 알아봅니다.
- Chrome
DOM 중단점 보기 및 변경
DevTools의 Breakpoints 창을 사용하여 DOM 중단점을 보고 변경하는 방법
- Chrome
표시 영역으로 요소 스크롤
검사 중인 요소가 보이지 않을 때 표시 영역으로 가져오는 방법은 다음과 같습니다.
- Chrome
네트워크 패널의 슬라이드
페이지 로드 중에 네트워크 패널을 시각적으로 탐색하고 캡처된 스크린샷을 봅니다.
- Chrome
가상 클래스 트리거
:active와 같은 가상 클래스를 트리거하여 CSS를 올바르게 디버그하는 방법을 알아보세요.
- Chrome
CSS 선택기로 DOM 트리 검색
요소 패널에서 DOM을 탐색할 때 CSS 선택기로 CMD/Ctrl+F를 사용하여 노드를 검색해 보세요.
- Chrome
CSS 약식 속성 펼치기
스타일 창에서 flex 또는 패딩과 같은 CSS 약식 속성을 펼치고 정의된 모든 속성을 볼 수 있습니다.
- Chrome
포트 전달
DevTools 포트 포워딩을 사용하면 localhost URL도 모바일에서 작동할 수 있습니다.
- Chrome
입력하는 동안 JS 오류 알림 받기
콘솔 패널에 오류가 발생하면 이를 클릭하여 소스 패널에서 오류 표시가 나타나는 줄을 표시합니다.
- Chrome
간편한 타임라인 기록
기록 버튼이 작업을 실행해야 하는 페이지 부분에 가깝게 배치되도록 DevTools를 별도의 창으로 도킹해 봅니다.
- Chrome
매니페스트 - USB 프린터
manifest.json의 usb_printers 속성에 대한 참조 문서입니다.
특정 열의 행 번호로 이동
소스 패널에서 특정 행 번호로 이동하는 방법을 알아봅니다.
- Chrome
이벤트 리스너로 간편하게 이동
모든 노드에 등록된 이벤트 리스너의 함수 정의를 표시하는 방법을 알아봅니다.
- Chrome
하드웨어 디코딩을 사용한 고성능 동영상
하드웨어 동영상 지원을 통해 플러그인과 HTML5 동영상에 효율적으로 디코딩할 수 있습니다. 플래시 사용자는 이전 스타일의 Video에서 StageVideo 객체로 전환해야 합니다.
- Chrome
상세 설명 주요 내용
세분화된 강조표시를 통해 정확히 실행된 문을 확인하세요.
- Chrome
강제 새로고침
DevTools가 열린 상태에서 새로고침 버튼을 길게 클릭하여 더 많은 옵션을 확인하세요.
- Chrome
로컬 수정
로컬 수정을 사용하면 DevTools를 통해 특정 소스 파일에 적용된 변경사항을 확인할 수 있습니다.
- Chrome
위치 수정 간 순환
커서 위치 기록은 소스 패널에 보존되므로 Alt(뒤로) 또는 Alt(앞으로)를 사용하여 이전 수정 위치를 순환할 수 있습니다.
- Chrome
네트워크 리소스의 응답을 클립보드에 복사
네트워크 리소스의 요청/응답 헤더를 복사하는 것 외에도 응답 자체를 복사할 수도 있습니다.
- Chrome
드래그하여 열 선택 수행
소스 패널 편집기에서 Alt 키를 누른 상태에서 마우스를 드래그하여 열을 선택할 수 있습니다.
- Chrome
사전 정의된 스니펫
웹페이지에서 사전 정의된 코드 스니펫을 실행하는 방법
- Chrome
요소 태그 빠른 수정
요소 패널에서 노드의 여는 태그 이름을 더블클릭하여 수정할 수 있습니다.
- Chrome
데이터 URI로 이미지 복사
리소스 패널에서 이미지 미리보기를 마우스 오른쪽 버튼으로 클릭하여 데이터 URI (base 64로 인코딩됨)로 복사합니다.
- Chrome
요소 패널에 표시
콘솔의 요소 패널에 DOM 노드를 표시합니다.
- Chrome
일치하는 선택기 보기
스타일 창에서 선택기를 볼 때 쉼표로 구분된 선택기 부분의 색상은 선택한 DOM 노드와 일치하는지에 따라 다르게 지정됩니다.
- Chrome
Console 패널에서 이벤트를 빠르게 모니터링하기
Command Line API 메서드 MonitorEvents(object [, events])를 사용하여 객체에 전달된 모든 이벤트를 로깅할 수 있습니다.
- Chrome
소스 패널에서 여러 커서를 추가하려면 명령어를 클릭합니다.
DevTools 소스 패널에서 다중 커서 편집 방법을 알아봅니다.
- Chrome
Alt 키를 누른 상태에서 클릭하여 모든 하위 노드 펼치기
Alt + 클릭하여 모든 하위 노드 펼치기
- Chrome
- Chrome DevTools
단축키로 DevTools 도크 상태 전환
Cmd + Shift + D를 사용하여 최근에 사용한 두 상태 사이에서 DevTools 도크 상태를 전환합니다.
- Chrome
단축키로 DevTools 도크 상태 전환
Cmd + Shift + D를 사용하여 최근에 사용한 두 상태 사이에서 DevTools 도크 상태를 전환합니다.
- Chrome
완료되지 않은 네트워크 요청
Is:running Advanced Network Filter를 사용하여 완료되지 않은 네트워크 요청 (예: 실행 중인 요청)을 확인할 수 있습니다.
- Chrome
이징 편집기
이징 CSS 속성을 선택하여 어떻게 동작하는지 시각적으로 애니메이션 미리보기를 확인할 수 있습니다.
- Chrome
모바일용 자동 대문자화
텍스트 입력 시 사용자가 느끼는 또 다른 불만은 사라지고 있습니다.
- Chrome
잘라내기 및 복사 명령어
잘라내기 및 복사 명령어가 지원되므로 선택한 텍스트를 프로그래매틱 방식으로 잘라서 사용자 클립보드에 복사할 수 있습니다.
- Chrome
소스 맵으로 배포하는 대신 원본 코드 디버그
클라이언트 측 코드를 결합, 축소 또는 컴파일한 후에도 읽을 수 있고 디버그할 수 있도록 하세요.
- Chrome DevTools
페이지 리소스 보기
리소스를 프레임, 도메인, 유형 또는 기타 기준에 따라 구성합니다.
- Chrome DevTools
다른 브라우저 에뮬레이션 및 테스트
사이트가 Chrome과 Android에서 훌륭하게 실행되는 것만으로 작업이 끝나는 것은 아닙니다. Device Mode로 iPhone과 같은 다양한 다른 기기를 시뮬레이션할 수 있지만, 그래도 에뮬레이션을 위한 다른 브라우저 솔루션을 확인해 보는 것이 좋습니다.
- Chrome DevTools
Android 기기 원격 디버그
Windows, Mac 또는 Linux 컴퓨터에서 Android 기기의 라이브 콘텐츠를 원격으로 디버그합니다.
- Chrome DevTools
Console Utilities API 참조
Chrome DevTools 콘솔에서 사용할 수 있는 편의 함수에 대한 참조입니다.
- Chrome DevTools
WebView 원격 디버깅
Chrome 개발자 도구를 사용하여 네이티브 Android 앱에서 WebView를 디버그합니다.
- Chrome DevTools
이제 DOM 속성이 프로토타입 체인에 추가됨
Chrome이 사양을 충족하고 있습니다. 속성 전파에 WebKit 로직을 사용한다고 가정하는 경우 사이트를 확인하세요.
- Chrome
웹용 Permissions API
Permissions API를 사용하면 API의 권한 상태를 한곳에서 확인할 수 있습니다.
- Chrome
웹 애니메이션 이름 지정의 개념 간소화
개발자 의견에 따라 앞으로 출시될 일부 웹 애니메이션 기능의 이름이 변경됩니다.
- Chrome
DevTools의 새로운 홈
Google은 developer.google.com/web의 멋진 새 홈으로 이전하여 유용한 새 가이드와 도움말을 제공합니다.
- Chrome
DevTools 타임라인 - 전체 스토리 제공
Chrome DevTools의 타임라인 패널을 업그레이드하여 개발자가 사이트의 런타임 성능에 관해 더 많은 정보를 파악할 수 있도록 했습니다.
- Chrome
오픈 웹의 푸시 알림
Chrome 42에서 푸시 메시지 및 알림이 지원됩니다.
- Chrome
HTML5 오프라인 저장소 관리
오프라인에서 작동하도록 Chrome 앱에 클라이언트 측 데이터를 저장하는 방법
웹 구성요소 및 JSON-LD를 사용하여 시맨틱 사이트 만들기
구성요소에 schema.org 마크업을 추가하고 검색엔진에서 사용하기 쉽게 만듭니다.
- Chrome
ES6 템플릿 문자열로 리터럴 가져오기
표현식이 삽입된 템플릿 문자열 리터럴 수년 동안 기다렸다. 문자 그대로
- Chrome
Chrome Dev Summit 2014 - Polymer로 앱을 만들어 보세요
Polymer 방식으로 앱을 빌드합니다.
- Chrome
가상 표시 영역이란 무엇인가요?
가상 표시 영역은 표시 영역의 레이아웃과 보기를 분리합니다.
- Chrome
이미지 렌더링:픽셀화됨
국가의 모자이크 현상 Chrome 41의 새로운 기능
- Chrome
moveBefore()를 사용하여 DOM 변형 중에 상태 유지
중요한 상태를 손실하지 않고 DOM에서 노드 이동
- Chrome
공유 모듈
Chrome 확장 프로그램 간에 코드를 공유하는 방법
- Chrome 확장 프로그램
Chrome Dev Summit 2014 - 폴리머 - 연합국
폴리머 유니언의 상태입니다.
- Chrome
공유 모듈
Chrome 확장 프로그램 간에 코드를 공유하는 방법
- Chrome 확장 프로그램
네이티브 앱 설치 프롬프트
네이티브 앱 설치 배너를 사용하면 사용자가 브라우저를 나가지 않고 앱 스토어에서 기기에 네이티브 앱을 빠르고 원활하게 설치할 수 있습니다.
- Chrome
기본 메시지
Chrome 앱에서 기본 애플리케이션과 메시지를 교환하는 방법
Chrome 39의 웹 애니메이션 재생 컨트롤
웹 애니메이션 재생 자세히 알아보기
- Chrome
모바일 웹 개발의 기초
개발자가 웹 개발을 시작하고 사이트에서 반복 작업을 수행하는 데 도움이 되는 Chrome팀의 노력을 간단히 살펴보세요.
- Chrome
개발자 의견 필요 - Frame Timing API
실제 환경에서 초당 프레임 수를 측정하는 데 도움이 되는 새로운 API가 준비 중이지만 여러분의 의견이 필요합니다.
- Chrome
Android용 Chrome 39에서 테마 색상 지원
Android용 Chrome에서 theme-color를 사용하여 툴바 색상을 설정합니다.
- Chrome
5단계: 웹에서 이미지 추가
XHR 및 ObjectURL을 사용하여 Chrome 앱에 이미지를 추가하는 방법입니다.
Todo Chrome 앱 빌드하기
Codelab을 소개합니다.
6단계: 파일 시스템으로 할 일 내보내기
Chrome 앱에서 파일 시스템에 쓰는 방법입니다.
7단계: 앱 게시
Chrome 웹 스토어에 Chrome 앱을 게시하는 방법입니다.
3단계: 알람 및 알림 추가
지정된 간격으로 Chrome 앱의 절전 모드를 해제하고 알림을 사용하는 방법
2단계: 기존 웹 앱 가져오기
기존 웹 앱을 Chrome 앱 플랫폼에 맞게 조정하는 방법
4단계: WebView로 외부 링크 열기
Chrome 앱에서 외부 웹 콘텐츠를 표시하는 방법
1단계: Chrome 앱 만들기 및 실행
기본 Chrome 앱을 생성, 설치, 실행, 디버깅하는 방법입니다.
생성기 - 괴상한 조각
ES6 생성기를 살펴봅니다.
- Chrome
Chrome 39에서 비콘 데이터 전송
Chrome 39는 페이지 로드 취소 이벤트 중에 소규모 비동기 HTTP 요청을 전송할 수 있게 해 주는 Beacon API를 구현합니다.
- Chrome
정밀한 터치로 정확한 동작
다양한 화면 밀도를 고려하기 위해 Chrome에서 TouchEvents가 정수 대신 부동 값을 반환하도록 변경되었습니다. 이렇게 하면 슬로 동작 중에 더 자세한 피드백이 제공됩니다.
- Chrome
ES6 방식으로 수집 및 반복
맵, 세트 및 반복용은 데이터 모음으로 작업하는 방식을 바꿀 수 있는 ES6 기능입니다.
- Chrome
인코딩 API를 사용하여 ArrayBuffer를 문자열로 쉽게 변환
네이티브 인코딩 API는 원시 바이너리 데이터와 자바스크립트 문자열 간에 변환하는 간단한 방법을 제공합니다.
- Chrome
m36의 웹 오디오 변경사항
Chrome 36의 웹 오디오 표준 정리 작업에 관한 설명
- Chrome
Chrome 37 베타에 제공된 대화상자 요소
Chrome 베타, 요소 기본 지원 시작
- Chrome
DevTools 다이제스트 - Chrome 35
Chrome 35의 개발자 도구 업데이트
- Chrome
Notifications API 사용
Chrome 확장 프로그램 사용자에게 알림을 표시합니다.
- Chrome 확장 프로그램
리치 알림 API
Chrome 확장 프로그램 사용자에게 알림을 표시하는 방법
- Chrome 확장 프로그램
웹 성능 측정 자동화
PSI를 사용하면 빌드 프로세스에 웹 성능 측정항목을 추가할 수 있습니다.
- Chrome
Chrome 개발자부터 IndexedDB에 대한 Blob 지원
Chrome에서 오랫동안 기다렸던 기능인 IndexedDB에 대한 Blob 지원이 Chrome 개발자에 출시되었습니다.
- Chrome
게임 엔진
Chrome 앱에 권장되는 게임 엔진입니다.
웹 애니메이션 - 이제 Chrome 36에서element.animate()가 제공됩니다.
웹 애니메이션은 웹 플랫폼에서 애니메이션과 동기화를 지원하는 모델을 정의합니다. element.animate()가 Chrome에 첫 번째로 표시됩니다.
- Chrome
호환성이 향상되고 더 매끄러운 터치
개발자와 사용자는 터치에 반응하고 부드럽게 스크롤되는 모바일 웹 앱을 원합니다. 개발은 쉬워야 하지만, 스크롤하는 동안 모바일 웹브라우저가 터치 이벤트에 반응하는 방식은 [TouchEvent](https://www.w3.org/TR/touch-events/) 사양의 구현 세부정보에 나와 있습니다.
- Chrome
Apache Cordova를 사용하여 모바일에서 Chrome 앱 실행
Apache Cordova를 사용하여 Android 및 iOS 기기에서 실행되도록 Chrome 앱을 설정하는 방법에 대한 가이드입니다.
Chrome DevTools로 비동기 자바스크립트 디버깅
JavaScript를 고유하게 만드는 강력한 기능은 콜백 함수를 통해 비동기식으로 작동하는 기능입니다. 비동기 콜백을 할당하면 이벤트 기반 코드를 작성할 수 있지만 JavaScript가 선형 방식으로 실행되지 않으므로 버그 추적 작업이 매우 번거로워집니다. 다행히 이제 Chrome DevTools에서 비동기 JavaScript 콜백의 전체 호출 스택을 볼 수 있습니다. DevTools에서 비동기 호출 스택 기능을 사용 설정하면 다양한 시점에서
- Chrome
CSS 그리드에 참여하기
CSS 그리드 레이아웃은 웹 애플리케이션에 적합한 새로운 레이아웃 프리미티브를 제공하는 새로운 CSS3 모듈입니다.
- Chrome
매니페스트 - 블루투스
manifest.json의 블루투스 속성에 대한 참조 문서입니다.
블루투스
Chrome 앱에서 블루투스 기기와 통신하는 방법
Chrome 33 호스팅 변경사항
Chrome 버전 33부터 시작된 Chrome 확장 프로그램의 호스팅 변경사항에 관한 세부정보입니다.
- Chrome 확장 프로그램
시작하기
Chrome 확장 프로그램을 만드는 방법에 대한 단계별 안내입니다.
- Chrome 확장 프로그램
튜토리얼: Manifest V2로 이전
매니페스트 v1에서 매니페스트 v2로 이전하는 방법에 대한 가이드라인입니다.
- Chrome 확장 프로그램
자주 묻는 질문(FAQ)
Chrome 확장 프로그램에 대해 자주 묻는 질문입니다.
- Chrome 확장 프로그램
도움말 및 유용한 정보
WebView 애플리케이션을 개선하기 위한 도움말 및 유용한 정보
WebView 워크플로
Yeoman, Gradle, Grunt를 사용하여 웹 애플리케이션을 빌드하는 방법을 안내하는 튜토리얼입니다.
웹 개발자를 위한 WebView 애플리케이션
Yeoman, Gradle, Grunt를 사용하여 웹 애플리케이션을 빌드하는 방법을 안내하는 튜토리얼입니다.
픽셀 정확한 WebView
완벽한 WebView UI를 만드는 방법
DevTools 알림 이메일
Chrome 33의 개발자 도구 업데이트
- Chrome
chrome.location
chrome.location API의 참조 문서입니다.
- Chrome 확장 프로그램
요만 월간 다이제스트
고품질 요만어 기사, 생성기, 프로젝트 뉴스에 관한 월간 알림입니다.
- Chrome
Chrome 설정 재정의
Chrome 확장 프로그램에서 Chrome 설정을 재정의하는 방법
- Chrome 확장 프로그램
Chrome 설정 재정의
Chrome 확장 프로그램에서 Chrome 설정을 재정의하는 방법
- Chrome 확장 프로그램
Yo Polymer – 웹 구성요소 도구에 대한 Whirlwind 둘러보기
웹 구성요소, Polymer 및 이를 위한 프런트엔드 도구를 빠르게 둘러보세요.
- Chrome
말하는 웹 앱 - Speech Synthesis API 소개
Web Speech API의 합성 기능을 소개합니다.
- Chrome
Chrome Dev Summit - 플랫폼 요약
플랫폼
- Chrome
Chrome Dev Summit - 성능 요약
성능이 중요
- Chrome
소켓
manifest.json의 소켓 속성에 대한 참조 문서입니다.
Chrome Dev Summit - 공개 웹 플랫폼 요약
Open Web Platform의 기능이 전례 없는 속도로 가속화되고 있습니다. Google은 Chrome Dev Summit에서 플랫폼의 Blink, 보안, 미디어를 개선하기 위해 어떤 노력을 기울이고 있는지에 대해 소개했습니다.
- Chrome
Chrome Dev Summit - 폴리머 선언적, 캡슐화, 재사용 가능한 구성요소
Polymer는 웹 구성요소의 멋진 미래로 가는 관문입니다. Chrome Dev Summit에서 웹 구성요소와 Polymer에 관해 자세히 알아보세요.
- Chrome
Chrome Dev Summit - 모바일 요약
다음은 Chrome Dev Summit에서 발표된 일련의 보고서 중 첫 번째입니다. 그동안 모바일 및 교차 기기 개발에 대한 관심이 뜨거웠으므로, 이 부분부터 시작하겠습니다.
- Chrome
요만 월간 다이제스트
요만 커뮤니티에서 작성한 기사, 동영상, 대담이 정기적으로 모여 있습니다.
- Chrome
blink의 새로운 웹 애니메이션 엔진으로 CSS 애니메이션 및 전환 지원
CSS 애니메이션 및 전환을 지원하는 Blink에서 Web Animations 1.0의 구현이 추가되었습니다.
- Chrome
2013년 12월 DevTools 알림 이메일
Chrome DevTools의 변경사항에 관한 최신 업데이트입니다.
- Chrome
300ms 탭 지연, 사라짐
모바일 브라우저에서 발생하는 모든 클릭 상호작용은 300ms 지연으로 인해 제한되지만, 모바일에 최적화된 사이트에 대한 Chrome 32에서는 이러한 문제가 사라졌습니다.
- Chrome
DevTools 터미널
DevTools에서 터미널 사용
- Chrome
저장소 영역에 관한 매니페스트
manifest.json의 스토리지 속성에 대한 참조 문서입니다.
- Chrome 확장 프로그램
관리형 스토리지를 위한 매니페스트
manifest.json의 스토리지 속성에 대한 참조 문서입니다.
- Chrome 확장 프로그램
모바일용 Chrome DevTools
스크린캐스트 및 에뮬레이션
- Chrome
Chrome DevTools 11월 알림 이메일
Chrome DevTools는 빠르게 발전하고 있습니다. 새로운 기능과 개선사항을 몇 가지 구성요소에 소개해 드리고자 합니다. 몇 가지 UI 변경사항, 고해상도 JS 프로파일링, 새로운 Workspaces 기능에 관해 알아보겠습니다. CPU 프로파일링 은 JavaScript가 얼마나 효율적인지 확인하는 데 매우 유용한 기능입니다. 기존 프로필 보기 외에도 이번 여름에 Google은 Flame Chart 를 선보였습니다. 이 기능은 시간 경과에
- Chrome
요만 월간 다이제스트
요만 커뮤니티에서 작성한 기사, 동영상, 대담이 정기적으로 모여 있습니다.
- Chrome
프런트엔드 개발 자동화의 현황 (슬라이드)
워크플로 자동화 도구를 사용해 프런트엔드 생산성을 개선하는 방법을 알아보세요.
- Chrome
직렬 장치
Chrome 앱에서 직렬 기기와 통신하는 방법
웹 오디오 라이브 오디오 입력 - 이제 Android에서 지원
Android용 Chrome (v31.0.1650+)에서 Web Audio API를 통한 오디오 입력을 지원합니다.
- Chrome
Flexbox 레이아웃은 느리지 않습니다.
새로운 Flexbox는 이전 Flexbox보다 2.3배 빠릅니다.
- Chrome
DevTools 답변 - 어떤 글꼴인가요?
텍스트를 렌더링하는 데 실제로 어떤 글꼴이 사용되는지 궁금했던 적이 있습니까? 이제 Chrome DevTools가 모든 것을 보여주므로 놀라지 않아도 됩니다.
- Chrome
대화상자 요소 - 모달을 쉽게 만들 수 있음
자신만의 모달 대화상자를 만들어 본 적이 있으신가요? 머지않아, 대화상자는 웹 플랫폼의 일부가 되고 있으므로 더 이상 필요하지 않을 것입니다.
- Chrome
url_handlers
manifest.json의 url_handlers 속성에 대한 참조 문서입니다.
externally_connectable
manifest.json의 external_connectable 속성 관련 참조 문서
- Chrome 확장 프로그램
externally_connectable
manifest.json의 external_connectable 속성 관련 참조 문서
- Chrome 확장 프로그램
Analytics
Google 애널리틱스를 Chrome 앱에 통합하는 방법입니다.
Chrome 동영상의 알파 투명도
WebM은 알파 투명도를 방금 추가했으며, Chrome 31부터 이에 대한 지원이 제공됩니다.
- Chrome
2013년 Chrome DevTools 혁신
웹 애플리케이션의 복잡성과 기능이 증가함에 따라 Chrome DevTools도 발전했습니다. 폴 아이리시의 Google I/O 2013 강연 Chrome DevTools 혁명 2013 을 요약한 이 동영상에서는 웹 애플리케이션을 빌드하고 테스트하는 방식을 혁신하는 최신 기능을 살펴봅니다. 폴의 강연을 놓쳤다면 위에서 다시 시청하거나 (실컷 시청하세요. 기다리겠습니다) 기능 요약으로 바로 이동하세요. 이 기능은 Chrome 28에서 사용 가능하며
- Chrome
sourceMappingURL 및 sourceURL 구문이 변경됨
sourceMappingURL 및 sourceURL 구문이 변경됨
- Chrome
매니페스트 - 요구사항
manifest.json의 요구사항 속성에 대한 참조 문서
- Chrome 확장 프로그램
매니페스트 - 기본 언어
manifest.json의 default_locale 속성에 대한 참조 문서입니다.
- Chrome 확장 프로그램
매니페스트 - 최소 Chrome 버전
manifest.json의 minimum_chrome_version 속성에 관한 참조 문서입니다.
- Chrome 확장 프로그램
매니페스트 - 웹 액세스 가능한 리소스
manifest.json의 web_access_resources 속성에 대한 참조 문서입니다.
- Chrome 확장 프로그램
매니페스트 - 시크릿 모드
manifest.json의 시크릿 속성에 대한 참조 문서입니다.
- Chrome 확장 프로그램
매니페스트 - Nacl 모듈
manifest.json의 nacl_modules 속성에 대한 참조 문서입니다.
- Chrome 확장 프로그램
매니페스트 - 이름 및 닉네임
manifest.json의 name 및 short_name 속성에 대한 참조 문서입니다.
- Chrome 확장 프로그램
매니페스트 - 버전
manifest.json의 버전 속성에 대한 참조 문서입니다.
- Chrome 확장 프로그램
매니페스트 - 이름
manifest.json의 이름 속성에 대한 참조 문서
- Chrome 확장 프로그램
매니페스트 - 시크릿 모드
manifest.json의 시크릿 속성에 대한 참조 문서입니다.
- Chrome 확장 프로그램
매니페스트 - 기본 언어
manifest.json의 default_locale 속성에 대한 참조 문서입니다.
- Chrome 확장 프로그램
매니페스트 - 키
manifest.json의 키 속성에 대한 참조 문서입니다.
- Chrome 확장 프로그램
매니페스트 - 아이콘
manifest.json의 아이콘 속성에 대한 참조 문서입니다.
- Chrome 확장 프로그램
매니페스트 - 홈페이지 URL
manifest.json의 home_url 속성에 대한 참조 문서입니다.
- Chrome 확장 프로그램
매니페스트 - 웹 액세스 가능한 리소스
manifest.json의 web_access_resources 속성에 대한 참조 문서입니다.
- Chrome 확장 프로그램
매니페스트 - 설명
manifest.json의 설명 속성에 대한 참조 문서입니다.
- Chrome 확장 프로그램
매니페스트 - 홈페이지 URL
manifest.json의 home_url 속성에 대한 참조 문서입니다.
- Chrome 확장 프로그램
매니페스트 - 샌드박스
manifest.json의 샌드박스 속성에 대한 참조 문서입니다.
- Chrome 확장 프로그램
매니페스트 - 키
manifest.json의 키 속성에 대한 참조 문서입니다.
- Chrome 확장 프로그램
Manifest V2 - 버전 [지원 중단됨]
manifest.json의 버전 속성에 대한 참조 문서입니다.
- Chrome 확장 프로그램
매니페스트 - 오프라인 사용 설정됨
manifest.json의 오프라인_사용 설정 속성에 대한 참조 문서입니다.
- Chrome 확장 프로그램
매니페스트 - 설명
manifest.json의 설명 속성에 대한 참조 문서입니다.
- Chrome 확장 프로그램
매니페스트 - 샌드박스
manifest.json의 샌드박스 속성에 대한 참조 문서입니다.
- Chrome 확장 프로그램
매니페스트 버전
manifest.json의 manifest_version 속성에 대한 참조 문서입니다.
- Chrome 확장 프로그램
매니페스트 - 아이콘
manifest.json의 아이콘 속성에 대한 참조 문서입니다.
- Chrome 확장 프로그램
매니페스트 - short_name
manifest.json의 short_name 속성에 대한 참조 문서입니다.
- Chrome 확장 프로그램
매니페스트 - 요구사항
manifest.json의 요구사항 속성에 대한 참조 문서
- Chrome 확장 프로그램
매니페스트 - 파일 핸들러
manifest.json의 file_handlers 속성에 대한 참조 문서입니다.
키오스크 앱
manifest.json의 Kiosk_enabled 속성에 대한 참조 문서입니다.
매니페스트 - 앱
manifest.json의 앱 속성에 대한 참조 문서입니다.
맞춤 필터 (CSS 셰이더라고도 함) 소개
맞춤 필터 (CSS 셰이더라고도 함) 소개
Shadow DOM 개념 시각화
Shadow DOM 개념 시각화
- Chrome
확장 프로그램이란 무엇인가요?
Chrome 확장 프로그램의 목적과 개발 방법에 대한 개요입니다.
- Chrome 확장 프로그램
DevTools' 연속 페인팅 모드로 긴 페인트 시간 프로파일링
DevTools' 연속 페인팅 모드로 긴 페인트 시간 프로파일링
- Chrome
WebRTC - RTCDataChannel 데모, API 변경사항... 및 Chrome이 Firefox와 연결
WebRTC - RTCDataChannel 데모, API 변경사항... 및 Chrome이 Firefox와 연결
- Chrome
모바일 WebKit 브라우저에 CSS 배경 약식 제공
모바일 WebKit 브라우저에 CSS 배경 약식 제공
- Chrome
음성 기반 웹 앱 - Web Speech API 소개
음성 기반 웹 앱 - Web Speech API 소개
- Chrome
WebRTC로 화면 공유
WebRTC로 화면 공유
- Chrome
캔버스 기반 배경 이미지
캔버스 또는 WebView를 사용하여 CSS 배경 구동
- Chrome
Firefox, Android, iOS에서 지원되는 WebRTC
Firefox, Android, iOS에서 지원되는 WebRTC
- Chrome
AngularJS로 앱 빌드
AngularJS로 Chrome 앱을 빌드하는 방법에 대한 가이드입니다.
콘텐츠 보안 정책 1.0은 정말 대단합니다.
콘텐츠 보안 정책 1.0은 정말 대단합니다.
- Chrome
Object.observe를 사용하여 변경사항에 응답
Object.observe를 사용하여 변경사항에 응답
- Chrome
Sencha Ext JS로 앱 빌드
Sencha Ext JS 프레임워크로 Chrome 앱을 빌드하는 방법입니다.
권한 선언
manifest.json에서 권한 속성의 유효한 값에 관한 개요
- Chrome 확장 프로그램
CSS 셰이더와 Google 지도가 있는 대화형 지구본
CSS 셰이더와 Google 지도가 있는 대화형 지구본
- Chrome
ActiveTab 권한
Chrome 확장 프로그램에서 activeTab 권한을 사용하는 방법
- Chrome 확장 프로그램
'activeTab' 권한
Chrome 확장 프로그램에서 activeTab 권한을 사용하는 방법
- Chrome 확장 프로그램
메시지 전달
확장 프로그램과 콘텐츠 스크립트 간에 메시지를 전달하는 방법
- Chrome 확장 프로그램
샌드박스 처리된 iframe에서 eval() 사용
Chrome 확장 프로그램에서 eval()을 사용하는 방법
- Chrome 확장 프로그램
Chrome 페이지 재정의
Chrome 확장 프로그램에서 Chrome 북마크 관리자, 방문 기록, 새 탭 페이지를 재정의하는 방법
- Chrome 확장 프로그램
교차 출처 네트워크 요청
Chrome 확장 프로그램에서 교차 출처 네트워크 요청을 구현합니다.
- Chrome 확장 프로그램
확장 프로그램 디버깅
Chrome 확장 프로그램을 디버깅하는 방법에 대한 단계별 안내입니다.
- Chrome 확장 프로그램
OAuth 2.0: Google로 사용자 인증
Google People API, Chrome ID API, OAuth2를 통해 사용자의 Google 주소록에 액세스하는 확장 프로그램을 만드는 방법에 대한 단계별 안내입니다.
- Chrome 확장 프로그램
아키텍처 개요
Chrome 확장 프로그램의 소프트웨어 아키텍처에 대한 간략한 설명입니다.
- Chrome 확장 프로그램
Chrome 페이지 재정의
Chrome 확장 프로그램에서 Chrome 북마크 관리자, 방문 기록, 새 탭 페이지를 재정의하는 방법
- Chrome 확장 프로그램
패턴 일치
Chrome 확장 프로그램의 URL 일치 패턴 이해
- Chrome 확장 프로그램
매니페스트 파일 형식
Chrome 확장 프로그램에서 사용할 수 있는 manifest.json 속성의 개요입니다.
- Chrome 확장 프로그램
패턴 일치
예시 및 호스트 권한 및 콘텐츠 스크립트 패턴 매칭의 작동 방식
- Chrome 확장 프로그램
현지화 메시지 형식
Chrome 확장 프로그램용 messages.json 파일 형식에 대한 참조 문서입니다.
- Chrome 확장 프로그램
매니페스트 버전
manifest.json의 manifest_version 속성은 Chrome 확장 프로그램이 타겟팅하는 매니페스트 사양의 버전을 나타냅니다.
- Chrome 확장 프로그램
Chrome Web Store
Chrome 웹 스토어에서 확장 프로그램을 호스팅하고 Chrome 웹 스토어에 호스팅된 확장 프로그램을 업데이트하는 방법
- Chrome 확장 프로그램
Google 애널리틱스 4 사용
Google 애널리틱스 4로 확장 프로그램 사용을 추적하는 방법에 대한 단계별 안내입니다.
- Chrome 확장 프로그램
매니페스트 파일 형식
Chrome 확장 프로그램의 manifest.json 속성 개요입니다.
- Chrome 확장 프로그램
Chrome 확장 프로그램에서 평가 사용
Chrome 확장 프로그램에서 eval()을 사용하는 방법
- Chrome 확장 프로그램
교차 출처 XMLHttpRequest
Chrome 확장 프로그램에서 교차 출처 XHR을 구현하는 방법
- Chrome 확장 프로그램
실시간 웹 오디오 입력 사용 설정됨
실시간 웹 오디오 입력 사용 설정됨
- Chrome
권한 선언 및 사용자에게 경고
사용자와 확장 프로그램을 보호하기 위한 권한을 구현하는 방법
- Chrome 확장 프로그램
테마란 무엇인가요?
테마 생성 방법에 대한 가이드라인입니다.
- Chrome 확장 프로그램
확장 프로그램 디버그
Chrome 확장 프로그램 디버깅 안내
- Chrome 확장 프로그램
사용자에게 옵션 제공
사용자가 확장 프로그램을 맞춤설정할 수 있도록 하는 방법
- Chrome 확장 프로그램
사용자에게 옵션 제공
사용자가 확장 프로그램을 맞춤설정할 수 있도록 하는 방법
- Chrome 확장 프로그램
메시지 전달
확장 프로그램과 콘텐츠 스크립트 간에 메시지를 전달하는 방법
- Chrome 확장 프로그램
튜토리얼: Google 애널리틱스
Google 애널리틱스로 확장 프로그램 사용을 추적하는 방법에 대한 단계별 안내입니다.
- Chrome 확장 프로그램
OAuth2: Google로 사용자 인증
Google People API, Chrome ID API, OAuth2를 통해 사용자의 Google 주소록에 액세스하는 확장 프로그램을 만드는 방법에 대한 단계별 안내입니다.
- Chrome 확장 프로그램
테마란 무엇인가요?
테마 생성 방법에 대한 가이드라인입니다.
- Chrome 확장 프로그램
자동 업데이트
Chrome 앱 자동 업데이트 사용 설정 방법
DevTools 확장
Chrome DevTools에 기능을 추가하는 Chrome 확장 프로그램을 만드는 방법
- Chrome 확장 프로그램
USB 기기
Chrome 앱에서 USB 기기와 통신하는 방법입니다.
대체 설치 방법 사용
환경설정 JSON 또는 Windows 레지스트리를 사용하여 Chrome 확장 프로그램을 설치하는 방법
- Chrome 확장 프로그램
DevTools 확장
Chrome DevTools에 기능을 추가하는 Chrome 확장 프로그램을 만드는 방법
- Chrome 확장 프로그램
Chrome 앱 수명 주기
Chrome 앱의 수명 주기 개요입니다.
외부 콘텐츠
Chrome 앱에서 외부 콘텐츠를 표시하는 방법
첫 앱 만들기
기본 Chrome 앱을 만드는 방법에 대한 튜토리얼입니다.
Web API
Chrome 앱은 웹사이트에서 사용 가능한 모든 API를 사용할 수 있습니다.
대체 확장 프로그램 배포 옵션
Chrome 웹 스토어 외부에 Chrome 확장 프로그램을 배포하는 방법
- Chrome 확장 프로그램
Chrome 앱 아키텍처
Chrome 앱의 소프트웨어 아키텍처 개요입니다.
오프라인 우선
오프라인에서 작동하는 Chrome 앱을 빌드하는 방법
매니페스트 버전
manifest.json의 manifest_version 속성에 대한 참조 문서입니다.
콘텐츠 보안 정책 : 콘텐츠 보안 정책(CSP)
Chrome 앱용 CSP의 개요 및 준수 방법
webKit를 사용한 리치 알림
Chrome 확장 프로그램에서 알림을 구현하는 방법
- Chrome 확장 프로그램
사용자 인증
Chrome 앱에서 사용자를 인증하는 방법입니다.
접근성 (a11y)
Manifest V2 Chrome 확장 프로그램에 액세스 가능하게 설정하는 방법
- Chrome 확장 프로그램
Storage API
Chrome 앱의 저장용량을 처리하는 방법
확장 프로그램 개발 개요
Chrome 확장 프로그램 기능 및 구성요소에 관한 개요입니다.
- Chrome 확장 프로그램
네트워크 통신
Chrome 앱에서 TCP 및 UDP를 사용하는 방법
콘텐츠 스크립트
콘텐츠 스크립트 및 Chrome 확장 프로그램에서 콘텐츠 스크립트를 사용하는 방법에 대한 설명입니다.
- Chrome 확장 프로그램
MVC 아키텍처
모델 뷰 컨트롤러 소프트웨어 아키텍처 모델의 개요입니다.
백그라운드 스크립트로 일정 관리하기
Chrome 확장 프로그램 백그라운드 스크립트에서 브라우저 트리거 (이벤트)에 응답하는 방법
- Chrome 확장 프로그램
접근성 지원
Chrome 확장 프로그램의 접근성을 높이는 방법
- Chrome 확장 프로그램
콘텐츠 스크립트
콘텐츠 스크립트 및 Chrome 확장 프로그램에서 콘텐츠 스크립트를 사용하는 방법에 대한 설명입니다.
- Chrome 확장 프로그램
position:fixed 요소에 변경사항 스태킹
position:fixed 요소에 예정된 변경사항 스태킹
- Chrome
확신을 가지세요! - WebKit에 잘 착륙하세요.
확신을 가지세요! - WebKit에 잘 착륙하세요.
- Chrome
Filesystem API에 input[type=file] 통합
Filesystem API에 input[type=file] 통합
- Chrome
밀리초로는 부족할 때 -performance.now
밀리초로는 부족할 때 -performance.now
- Chrome
범위/색상 입력용 데이터 목록은 몇 가지 기본 선택사항을 제공합니다.
범위/색상 입력용 데이터 목록은 몇 가지 기본 선택사항을 제공합니다.
- Chrome
Chrome 입력[type=date] 에 관한 빠른 FAQ
Chrome 입력[type=date] 에 관한 빠른 FAQ
- Chrome
브라우저 그래픽 성능을 측정하는 방법
브라우저 그래픽 성능을 측정하는 방법
- Chrome
이제 폴더를 Chrome으로 드래그 앤 드롭할 수 있습니다
이제 폴더를 Chrome으로 드래그 앤 드롭할 수 있습니다
- Chrome
도착했습니다! xhr.send(ArrayBufferViews)
도착했습니다! xhr.send(ArrayBufferViews)
- Chrome
2D 캔버스에서 GPU 가속 활용
2D 캔버스에서 GPU 가속 활용
- Chrome
CSS 영역 및 3D 변환을 사용하여 플립형 책 작성
CSS 영역 및 3D 변환을 사용하여 플립형 책 작성
- Chrome
콘텐츠 보안 정책 : 콘텐츠 보안 정책(CSP)
콘텐츠 보안 정책은 최신 브라우저에서 교차 사이트 스크립팅 공격의 위험과 영향을 크게 줄일 수 있습니다.
ArrayBuffer를 문자열로 변환하거나 문자열로 변환하는 방법
ArrayBuffer를 문자열로 변환하거나 문자열로 변환하는 방법
- Chrome
blob이 아닌 blob을 구성합니다.
File API의 최근 사양 변경사항에는 Blob에 대한 새 생성자가 포함되므로 본질적으로 BlobBuilder와 관련이 없습니다.
- Chrome
이제 Chrome DevTools에서 Websocket 프레임 검사 제공
WebSockets에서 유선을 통해 전송되는 데이터에 검사 기능 추가
- Chrome
Chrome Canary에 추가된 데이터 목록
앱에서 `datalist`를 사용하여 사용자가 선택해야 하는 추천 결과 목록을 정의할 수 있습니다. 목록에서 옵션을 선택하거나 자유 형식 텍스트를 입력할 수 있습니다.
- Chrome
PHP에서 XHR2 파일 업로드 처리
파일 업로드를 처리하는 방법을 보여주는 서버 코드 예
- Chrome
WebRTC 프로토톤
3월 24일 Google은 세계 최초의 WebRTC 개발자 이벤트인 WebRTC Protothon을 개최했습니다.
- Chrome
requestAnimationFrame API - 이제 1밀리초 미만의 정밀도 지원
equestAnimationFrame API의 일부가 곧 변경됩니다.
- Chrome
DOM 성능 대폭 향상 - WebKit의 innerHTML이 240% 더 빨라짐
Chrome 엔지니어 Kentaro Hara는 WebKit 내에서 7가지 코드를 최적화하여 Safari (JavaScriptCore) 및 Chrome (V8) 모두에서 성능을 향상했습니다.
- Chrome
웹브라우저 내부 리소스 요약
웹 브라우저의 내부 작동을 설명하는 대부분의 리소스는
- Chrome
HTML5 FileSystem API를 사용하여 전체 페이지를 오프라인으로 전환
FileSystem API를 사용하면 파일 및 폴더 계층 구조를 프로그래매틱 방식으로 로컬 (샌드박스) 파일 시스템에 저장하고 필요에 따라 개별 리소스를 추가/업데이트/삭제할 수 있습니다.
- Chrome
JavaScript 소스 맵 소개
성능에 영향을 주지 않으면서 클라이언트 측 코드를 결합하고 최소화한 후에도 읽을 수 있고 더 중요한 것은 디버그할 수 있기를 바라신 적이 있나요? 이제 소스 맵 의 마법을 통해 가능합니다. 소스 맵은 결합된/축소된 파일을 빌드되지 않은 상태로 다시 매핑하는 방법입니다. 프로덕션용으로 빌드하면 JavaScript 파일을 축소하고 조합하는 작업 외에도 원본 파일에 대한 정보를 담은 소스 맵을 만들게 됩니다. 생성된 JavaScript에서 특정 행
- Chrome
자바스크립트 최적화
자바스크립트는 비교적 빠르지만 언제나 더 빨라질 수 있습니다. 성능을 위해 자바스크립트를 최적화하는 방법에 대해 자세히 알아보세요.
- Chrome
새로운 실험용 기능 - 범위가 지정된 스타일시트
최근 Chromium에서는 HTML5에서 범위가 지정된 스타일시트
- Chrome
WebGL 및 Web Audio API 데모 요약
지난 몇 주 동안 살펴본 WebGL 및 Web Audio API 데모를 살펴보겠습니다.
- Chrome
Chrome에 소프트웨어 3D 렌더링을 도입한 SwiftShader
SwiftShader는 Chrome 18에서 사용되는 소프트웨어 3D 렌더기로, 차단 목록에 추가된 GPU에서도 CSS 3D 및 WebGL을 사용할 수 있도록 합니다.
- Chrome
변형 관찰자를 사용하여 DOM 변경사항 감지
Mutation Observer를 소개합니다.
- Chrome
Gmail에서 모든 mailto를 처리하도록 하기 - registerProtocolHandler를 사용한 링크
navigator.registerProtocolHandler()를 사용하여 모든 mailto 링크에 대한 기본 메일 클라이언트로 Gmail을 연결할 수 있습니다.
- Chrome
Android용 Chrome - 모바일 웹 가속화
Android용 Chrome 베타는 Chromium 오픈소스 프로젝트를 기반으로 하며 Chrome 개발자들이 즐겨 사용하는 여러 최신 HTML5 기능을 제공합니다.
- Chrome
브라우저에 FPS 게임을 제공하는 Pointer Lock API
Pointer Lock API를 사용하면 웹에 적합한 1인칭 슈팅 게임을 작성할 수 있습니다.
- Chrome
HTML5 오디오와 웹 오디오 API는 절충안
createMediaElementSource()를 사용하면 HTML5와 웹 오디오 API의 시각화, 필터 및 처리 능력을 결합할 수 있습니다.
- Chrome
동기 XHR 제거
알림 최근에 XMLHttpRequest.responseType이 설정된 경우 동기식 요청을 전송하지 못하도록 XMLHttpRequest2 사양이 변경되었습니다.
- Chrome
웹 오디오 FAQ
이번 빠른 업데이트는 자주 묻는 질문(FAQ) 중 일부를 해결하여 Web Audio API를 보다 원활하게 사용할 수 있도록 하기 위한 노력의 일환입니다.
- Chrome
동영상 플레이어 샘플 소개
동영상 플레이어 샘플은 60분 및 RedBull.tv 앱과 동일한 아키텍처를 사용하여 제작된 오픈소스 동영상 플레이어 웹 앱입니다.
- Chrome
WebKit에 CSS 필터 효과 표시
Adobe는 이 놀라운 기술을 CSS에 도입하기 위해 많은 노력을 기울였습니다. 구체적으로 WebKit에서 구현하기 시작한 CSS Filter Effects 1.0을 언급합니다.
- Chrome
전송 가능한 객체 - 매우 빠름
전송 가능한 객체를 사용하면 데이터가 한 컨텍스트에서 다른 컨텍스트로 전송됩니다. 제로 카피로, 작업자에 데이터를 전송하는 성능이 크게 향상됩니다.
- Chrome
가능한 경우 WebGL에서 중간 정밀도 사용하기
실제 OpenGL ES 2.0 하드웨어에서 WebGL을 테스트하고 있는 Opera의 친구들에게 알려 드립니다.
- Chrome
빠른 속도를 위한 Chrome 개발자 도구
Chrome에서 개발자 도구를 사용하여 앱 속도 개선
- Chrome
MediaSource API를 사용하여 동영상 스트리밍
MediaSource API는 자바스크립트가 재생을 위한 미디어 스트림을 생성할 수 있도록 `HTMLMediaElement` 를 확장합니다.
- Chrome
WebGL 데모 요약
다음은 브라우저가 실제로 할 수 있는 작업을 보여주는 몇 가지 새로운 WebGL 데모입니다.
- Chrome
앱 캐시 도구 및 자동 생성기
애플리케이션 캐시를 사용하면 웹 앱을 오프라인에서 실행할 수 있고, 시작 시간을 크게 단축하고, 대역폭 비용을 줄일 수 있습니다.
- Chrome
IndexedDB 트랜잭션에서 범위 정의
IndexedDB는 브라우저에서 상당량의 구조화된 데이터를 저장하는 데 있어 진화하고 있는 웹 표준입니다.
- Chrome
콘텐츠로 대화 전달 - Fullscreen API
Fullscreen API를 사용하면 웹 앱이 페이지의 모든 콘텐츠가 자바스크립트에서 브라우저의 전체 화면 보기 모드로 전환되도록 프로그래밍 방식으로 지시할 수 있습니다.
- Chrome
Chrome Canary에서 최신 버전으로 업데이트된 WebSocket
Chrome Canary의 WebSocket API가 최신 버전 (13)으로 변경되었습니다.
- Chrome
HTML5 및 브라우저 지원 유지
이러한 기능을 따라 잡는 것은 쉬운 일이 아니지만, 어디를 봐야 할지 모르는 경우에만 그렇습니다.
- Chrome
Three.js 활용
점점 더 많은 개발자가 OpenGL 전문가이든 3D 데모를 사용해 본 초보든 상관없이 새로운 3D 데모를 내놓고 있습니다.
- Chrome
HTML5 게임 개발자를 위한 새 게임 컨퍼런스 쿠폰
New Game에서 HTML5 및 WebGL 게임 작성 방법을 배워 TPS 보고서를 완성하지 못하게 합니다.
- Chrome
7분 동영상 - JavaScript 콘솔 도움말 및 새로운 DOM API
Chrome DevTools의 JavaScript 콘솔에서 수준을 높입니다.
- Chrome
작업자 ♥ ArrayBuffer
Chrome 13 및 FF5에서 웹 작업자와 `ArrayBuffer` (또는 Typed Array)를 주고받는 지원
- Chrome
새 WebSocket 프로토콜의 차이점
이전의 보안 문제를 해결하기 위해 WebSocket 프로토콜 사양이 최근에 업데이트되었으며 대체로 안정적입니다.
- Chrome
모든 곳에 insertAdjacentHTML
HTML 문서에 콘텐츠를 삽입하는 방법
- Chrome
Filesystem API 디버깅
HTML5 파일 시스템은 강력한 API입니다. 힘에는 복잡성이 따릅니다. 복잡성이 가중될수록 디버깅에 대한 불만이 증가합니다.
- Chrome
File System API를 사용하여 로컬 파일 탐색
File 객체가 있는 경우 전체 파일을 메모리로 읽지 않고 객체를 찾아서 청크를 읽을 수 있습니다.
- Chrome
HTML5 라이브러리/폴리필 - 7월 중순
여기저기에서 새롭고 멋진 라이브러리가 생겨나고 있습니다.
- Chrome
HTML5 게임 개발자를 위한 컨퍼런스인 New Game 발표
2011년 11월 1일부터 2일까지 캘리포니아주 샌프란시스코에서 열리는 New Game에 참여하세요.
- Chrome
프레임도 놓치지 마세요 - Page Visibility API + HTML5 동영상 사용
Page Visibility API를 사용하면 현재 탭이 표시되는지를 확인할 수 있습니다.
- Chrome
WebGL에서 교차 도메인 이미지 사용
WebGL 사양에 교차 도메인 이미지를 요청하는 방법에 관한 중요 업데이트가 있습니다.
- Chrome
HTML5 라이브러리 - 6월 말
최근 몇 가지 흥미로운 라이브러리가 추가되었습니다.
- Chrome
Page Visibility API - 문제를 확인하셨나요?
다행히 새로운 Page Visibility API를 사용하면 앱에서 노출 여부를 알 수 있습니다.
- Chrome
HTML5 + 웹 오디오 API의 대비
GWT, HTML5 및 웹 오디오 API 덕분에 모두가 좋아하는 치트코드인 Contra를 만들 수 있습니다.
- Chrome
Chrome 개발자 채널의 navgator.onLine
HTML5의 오프라인 API를 사용하면 사용자에게 완벽한 오프라인 환경을 제공하지 않을 변명의 여지가 없습니다.
- Chrome
updates.html5rocks.com에 오신 것을 환영합니다.
개발자에게 더 빠르게 정보를 제공할 수 있도록 공유할 만한 멋진 기능을 강조하는 "HTML5 업데이트 스트림"을 만들었습니다.
- Chrome
웹 앱의 속도 검사
빠른 웹 앱이 성공적인 웹 앱입니다. 개발자의 임무는 앱의 실제 성능과 인식된 성능을 모두 최적화할 때까지 완료되지 않습니다. 이는 단순히 사용자에게 우수한 환경을 제공하기 위한 올바른 조치일 뿐만 아니라 최적화해야 하는 매우 실용적이고 중요한 비즈니스 이유가 있습니다. Amazon은 사이트 지연 시간이 100ms마다 1% 씩 감소하고 Google은 지연 시간이 0.5초마다 20% 씩 감소하는 것으로 측정했습니다 ( 참조 ). 이러한 수치는
- Chrome
- Chrome DevTools
Chrome 개발자 도구 소개, 1부
Chrome은 기능이 풍부하고 강력한 웹브라우저로, 웹 애플리케이션의 가능성에 선구적인 역할을 합니다. Google은 최종 사용자에게 매우 빠르고 안정적이며 기능이 풍부한 브라우징 환경을 제공하기 위해 열심히 노력해 왔습니다. 또한 Google은 귀하와 같은 개발자들이 Chrome에서 만족스러운 경험을 할 수 있도록 보장합니다. 웹 개발자와 프로그래머가 Chrome 및 Safari에서 번들로 제공하고 사용할 수 있는 개발자 도구를 사용하여
- Chrome
Use the Chrome Web Store Publish API
How to programmatically create, update, and publish items in the Chrome Web Store.
- Chrome 확장 프로그램
- Workbox
Google Play for Education Addendum to the Google Chrome Web Store Developer Agreement
In connection with the Google Chrome Web Store, Google may make certain Chrome Web Store applications available in Google's Play for Education site. If You or Your organization is interested in participating, please verify that the
- Chrome 확장 프로그램
- Workbox
Chrome Web Store API Reference
This reference describes the methods and resource representation available for the Chrome Web Store Publish API. Each resource type has one or more data representations and one or more methods. See Using the Chrome Web Store Publish API for a guide
- Chrome 확장 프로그램
- Workbox
Policies
Extension policies
- Workbox
- Chrome 확장 프로그램
How Google Search uses speculation rules
Learn about how Google Search used the Speculation Rules API to anonymously prefetch search results to improve user experience
- Chrome
Feedback and support
Receive support for the Chrome User Experience Report (CrUX).
- Workbox
- Chrome UX 보고서
LCP image subparts and RTT now available in CrUX
Learn about the change to the Chrome User Experience Report (CrUX changes) in the February 2025 release including LCP image subparts, LCP resource types, and RTT.
- Chrome
Dimensions
Technical documentation on CrUX dimensions.
- Chrome UX 보고서
- Workbox
Capabilities
Find out how to use Chrome's capabilities to build rich and engaging web experiences.
- Workbox
What is ChromeDriver?
ChromeDriver is a standalone server that implements the W3C WebDriver standard.
- Workbox
Design Docs and discussions
WebDriver BiDi Backend Design [Microsoft] Async Command Processing for WebDriver in Chromium Browser Tools- and Testing WG, Day 2, TPAC 2019, Fukuoka Browser Tools- and Testing WG, Day 1, TPAC 2019, Fukuoka
- Workbox
Chrome Web Store
Chrome Web Store An online marketplace where users can browse for extensions and themes. Publish your extension there and make it accessible to the world. dashboard Developer Dashboard Publish your extension and manage your store items. local_mall
- Chrome 확장 프로그램
- Workbox
Accessibility
Digital accessibility, commonly abbreviated a11y, is about designing and building websites and web apps that disabled people can interact with in a meaningful and equivalent way. This course is created for beginner and advanced web developers. You
Chrome's 2024 recap for devs: Re-imagining the web with AI in DevTools, built-in Gemini, and new UI capabilities
Check out Chrome for Developers' 2024 year-end roundup of the latest web features, capabilities, and tools.
- Chrome
Autofill
Browsers, and you, as a developer, can help users enter data faster, and avoid re-entering data. Autofill is a feature that allows browsers to automatically fill in form fields with users' saved information, such as name, address, and payments
- Workbox
chrome.input.ime
Use the chrome.input.ime API to implement a custom IME for Chrome OS. This allows your extension to handle keystrokes, set the composition, and manage the candidate window. You must declare the "input" permission in the extension manifest to use the
- Chrome 확장 프로그램
- Workbox
Sign up for the Language Detection API origin trial
The Language Detection API is now available in a Chrome origin trial.
- Workbox
Chrome to sync passkeys on Google Password Manager between desktop and Android
Chrome on desktop will soon be able to create passkeys in Google Password Manager (GPM) and synchronize them across those platforms in addition to Android.
- Chrome
- 패스키
Chrome 129
Chrome 129 is rolling out now! You can yield in long tasks to improve performance, you can animate elements with intrinsic sizes, there are some changes to anchor positioning syntax, and there's plenty more.
- Chrome
What's missing from HTML and CSS?
Do you agree with the CSS Day attendees about what should be added to the web?
- Chrome
More efficient IndexedDB storage in Chrome
A new optimization in Chrome improves how IndexedDB data is stored on disk. This document summarizes the key points of this update.
- Chromium
- Workbox
Creating a great listing page
Best practices on how to make a high-quality, engaging listing page for your item in the Chrome Web Store.
- Workbox
- Chrome 확장 프로그램
Help with ChromeDriver
If you have a general question or need help using ChromeDriver, you can email the chromedriver-users group. Before filing a bug, look at the existing issues for the same topic. ChromeDriver is an open source project, worked on by various
- Workbox
Clicking issues
ChromeDriver clicking works by simulating a mouse click in the middle of the element's first client rect (or bounding client rect if it doesn't have a first client rect). The easiest way to find out where ChromeDriver is attempting to click is to
- Workbox
Contribute to ChromeDriver
ChromeDriver is a Chromium project and the code lives in the Chromium repository. Chromium is the open source project on which Google Chrome is based. Follow the instructions to check out the entire Chromium source tree. After you have your source
- Workbox
Deceptive Installation Tactics FAQ
Frequently asked questions about Chrome Web Store's policies on deceptive installation tactics.
- Workbox
- Chrome 확장 프로그램
Listing Requirements
If your product has a blank description field or is missing an icon or screenshots, it will be rejected. Ensure your product's listing information is up to date, accurate, and comprehensive. We don't allow extensions with misleading, inaccurate,
- Chrome 확장 프로그램
- Workbox
Deceptive Installation Tactics
Extensions must be marketed responsibly. The set of functionalities promised by the extension must be stated clearly and in a transparent manner. The outcome of any user interaction should match the reasonable expectations that were set with the
- Chrome 확장 프로그램
- Workbox
Best Practices and Guidelines
Research and understand the Chrome Web Store policies. Before developing a Chrome extension, it is important to review the Chrome Web Store Developer Program Policies and ensure your extension complies with all guidelines and requirements. Extensions
- Workbox
- Chrome 확장 프로그램
Extensions quality guidelines FAQ
Frequently asked questions about the single purpose policy.
- Workbox
- Chrome 확장 프로그램
Quality guidelines
An extension must have a single purpose that is narrow and easy to understand. Don't create an extension that requires users to accept bundles of unrelated functionality. If two pieces of functionality are clearly separate, they should be put into
- Chrome 확장 프로그램
- Workbox
Aurora
A collaboration between Chrome and open-source web frameworks to improve user experience on the web.
- Workbox
CrUX methodology
Technical documentation on CrUX eligibility, metrics, dimensions and accessing the data.
- Workbox
- Chrome UX 보고서
Chrome release notes and updates
Chrome's latest releases
- Workbox
Workbox
Build progressive web apps (PWAs) with Workbox - the Service Worker library from the Chrome team
- Workbox
Extensions / Develop
Learn how to develop extensions
- Chrome 확장 프로그램
- Workbox
Content filtering
An explanation of content filtering and how to approach it in your Chrome Extension.
- Chrome 확장 프로그램
- Workbox
Reference
Reference for APIs available to Chrome Apps
- Workbox
chrome.tabCapture
Use the chrome.tabCapture API to interact with tab media streams. The chrome.tabCapture API lets you access a MediaStream containing video and audio of the current tab. It can only be called after the user invokes an extension, such as by clicking
- Workbox
- Chrome 확장 프로그램
chrome.accessibilityFeatures
Use the chrome.accessibilityFeatures API to manage Chrome's accessibility features. This API relies on the ChromeSetting prototype of the type API for getting and setting individual accessibility features. In order to get feature states the extension
- Chrome 확장 프로그램
- Workbox
chrome.tabGroups
Use the chrome.tabGroups API to interact with the browser's tab grouping system. You can use this API to modify and rearrange tab groups in the browser. To group and ungroup tabs, or to query what tabs are in groups, use the chrome.tabs API. The
- Chrome 확장 프로그램
- Workbox
chrome.sessions
Use the chrome.sessions API to query and restore tabs and windows from a browsing session. string The name of the foreign device. Session [] A list of open window sessions for the foreign device, sorted from most recently to least recently modified
- Chrome 확장 프로그램
- Workbox
chrome.accessibilityFeatures
Use the chrome.accessibilityFeatures API to manage Chrome's accessibility features. This API relies on the ChromeSetting prototype of the type API for getting and setting individual accessibility features. In order to get feature states the extension
- Chrome 확장 프로그램
- Workbox
chrome.extensionTypes
The chrome.extensionTypes API contains type declarations for Chrome extensions. The origin of injected CSS. "author" "user" Details of the CSS to remove. Either the code or the file property must be set, but both may not be set at the same time.
- Chrome 확장 프로그램
- Workbox
chrome.extensionTypes
The chrome.extensionTypes API contains type declarations for Chrome extensions. The origin of injected CSS. "author" "user" Details of the CSS to remove. Either the code or the file property must be set, but both may not be set at the same time.
- Workbox
- Chrome 확장 프로그램
Skip review for eligible changes
An overview of expedited review for Declarative Net Request changes.
- Chrome 확장 프로그램
- Workbox
Version selection
Version selection is the process of matching a Chrome binary of a given version to a compatible ChromeDriver binary. Starting with M115 the ChromeDriver release process is integrated with that of Chrome. The latest Chrome + ChromeDriver releases per
- Workbox
Rollback a published Chrome Web Store item
How to rollback an extension that you previously published on the
- Chrome 확장 프로그램
- Workbox
Additional Requirements for Manifest V3
Extensions using Manifest V3 must meet additional requirements related to the extension's code. Specifically, the full functionality of an extension must be easily discernible from its submitted code, unless otherwise exempt as noted in Section 2.
- Workbox
- Chrome 확장 프로그램
Chrome for Developers
google-site-verification: google2d9992045b4571ad.html
Extensions / How to
Solve common development tasks around Chrome extensions
- Workbox
- Chrome 확장 프로그램
Changes to BFCache behavior with extension message ports
We are making changes to Chrome BFCache which potentially impact extensions using message ports.
- Chrome
Mature & Sexually Explicit Material
We don't allow content that contains nudity, graphic sex acts, sexually explicit material, or content that drives traffic to commercial pornography sites. We also don't allow content that promotes incest, bestiality, necrophilia, or non-consensual
- Chrome 확장 프로그램
- Workbox
Announcing Chrome for Developers in China
We are publishing our sites on a .cn domain to make them easier to access in China.
- Chrome
chrome.location
The chrome.location API is no longer supported. We recommend using open web alternatives such as the Geolocation API instead.
- Workbox
- Chrome 확장 프로그램
Register your developer account
How to register as a Chrome Web Store developer.
- Workbox
- Chrome 확장 프로그램
Create a side panel
TBD
- Workbox
- Chrome 확장 프로그램
Trader/Non-Trader developer identification and verification
Developer's requirement to disclose and verify their trader/non-trader status.
- Chrome 확장 프로그램
- Workbox
Extensions / Samples
Samples Explore samples from the Chrome Extension samples repository. Use these to learn how extensions work or as starting points for building your own extensions. action.disable action.enable action.getBadgeBackgroundColor action.getBadgeText
- Workbox
- Chrome 확장 프로그램
Overview of CrUX
Introduction to the CrUX dataset.
- Chrome UX 보고서
- Workbox
Permissions
A list of permissions and user warnings available on the extensions platform.
- Chrome 확장 프로그램
- Workbox
Chromium Issue Tracker migration is complete
Chromium issue tracking is now migrated.
- Chrome
Chromium Issue Tracker migration beginning Feb 2, 2024 at 5pm PST
The Chromium Issue Tracker migration begins today.
- Chrome
Program Policies
The Web Store program policies.
- Chrome 확장 프로그램
- Workbox
Project Fugu API Showcase
Project Fugu API Showcase The Project Fugu API Showcase is a collection of apps that make use of APIs that were conceived in the context of Project Fugu. You can learn more about Project Fugu on the Capabilities landing page. Absolute Orientation
- Workbox
Join Privacy Sandbox Office Hours #12: Learn about Chrome-facilitated testing
Join the 12th edition of Privacy Sandbox office hours dedicated to Chrome-facilitated testing, where the Privacy Sandbox team will provide some Privacy Sandbox tester updates and answer your questions with product and technical leads.
- Chrome
Real-time Updates in Extensions
Managing real-time updates in Extensions
- Workbox
- Chrome 확장 프로그램
Distribute your extension
How to host your Chrome extension.
- Workbox
- Chrome 확장 프로그램
Extensions / Reference
Reference for the extensions manifest, related permissions and APIs
- Chrome 확장 프로그램
- Workbox
Chrome Archive
Chrome Archive Chrome Apps Chrome-specific APIs to create experiences with more access to the underlying operating system. These were deprecated in 2020, supported only for ChromeOS until Jan 2025. Native Client A sandbox to run compiled C and C++
- Workbox
Chromium Chronicle
Chromium Chronicle
- Chromium
- Workbox
Chromium
Find resources on the Chromium project.
- Chromium
- Workbox
Chrome 121 beta
CSS Scrollbars, the Storage Buckets API, the Speculation Rules API, and more.
- Chrome
Get Inspired
Read these case studies to find inspiration for your next project with Chrome.
- Chrome
Feeds
You can add the following RSS feeds to your feed reader to get automatic updates for areas of the site you are particularly interested in.
- Chrome
Extensions / Manifest V3
Manifest V3 Manifest V3 is the latest version of the extensions platform. We have made a number of changes to the available APIs and added a number of new features. Manifest V3 aims to be the first step in our platform vision to improve the privacy,
- Workbox
- Chrome 확장 프로그램
chrome.webstore
As of 06/12/2018, inline installation is deprecated. For more information, read our Chromium Blog post and Migration FAQ.
- Workbox
- Chrome 확장 프로그램
User interface components
A catalog of user interface elements available in extensions.
- Workbox
- Chrome 확장 프로그램
Modules
Dig deeper into specific Workbox modules.
- Workbox
Set up your developer account
How to set up your Chrome Web Store developer account.
- Chrome 확장 프로그램
- Workbox
Prepare your extension
Prepare your extension files.
- Chrome 확장 프로그램
- Workbox
Submit a feature request
Submit a request for a feature that you believe could improve the extension platform.
- Workbox
- Chrome 확장 프로그램
Support and feedback
Give us feedback to help us improve the platform and fix its bugs.
- Workbox
- Chrome 확장 프로그램
Storage and cookies
Overview of how web storage APIs and cookies work in extensions.
- Chrome 확장 프로그램
- Workbox
Chrome for Developers
User-agent: * Disallow: Sitemap: https://developer.chrome.com/sitemap.xml
Use your Google Analytics account with the Chrome Web Store
See analytics for your Chrome Web Store listing in addition to the metrics offered in the Developer Dashboard.
- Chrome 확장 프로그램
- Workbox
Better full screen mode with the Keyboard Lock API
Use the Keyboard Lock API to capture the Escape key in full screen mode. If you've ever played a full screen web game that popped up an in-game dialog that you instinctively canceled with the Escape key, you probably found yourself kicked out of full
- Chrome
Help test bounce tracking mitigations
We plan to launch mitigations to limit tracking from a particular technique called "bounce tracking" later this year. We would like to invite developers to test this new feature with feature flags and provide feedback.
- Chrome
Specify how multiple animation effects should composite with animation-composition
When multiple animations affect the same property simultaneously, should they replace each other, add, or accumulate?
- Workbox
Manifest V3 migration checklist
A quick reference for upgrading your extensions from Manifest V2 to Manifest V3.
- Chrome 확장 프로그램
- Workbox
More control over :nth-child() selections with the of S syntax
Pre-filter a set of child elements before applying An+B logic on it.
- Workbox
Test service worker termination with Puppeteer
A guide explaining how to test service worker termination using Puppeteer.
- Chrome 확장 프로그램
- Workbox
Affiliate Ads
Any affiliate program must be described prominently in the product's Chrome Web Store page, user interface, and before installation. Related user action is required before the inclusion of each affiliate code, link, or cookie. Some example violations
- Workbox
- Chrome 확장 프로그램
Affiliate Ads FAQ
Frequently asked questions about Chrome Web Store's policies on affiliate ads.
- Chrome 확장 프로그램
- Workbox
Minimum Functionality
Do not post an extension with a single purpose of installing or launching another app, theme, webpage, or extension. Extensions with broken functionality—such as dead sites or non-functioning features—are not allowed. Extensions must provide a basic
- Workbox
- Chrome 확장 프로그램
Use of Permissions
Request access to the narrowest permissions necessary to implement your Product's features or services. If more than one permission could be used to implement a feature, you must request those with the least access to data or functionality. Don't
- Workbox
- Chrome 확장 프로그램
Chrome Apps
To ensure a great user experience, Chrome Apps distributed through the Chrome Web Store must follow the additional quality guidelines listed below. The guidelines in this section apply only to Chrome Apps. Packaged apps should: Take advantage of the
- Workbox
- Chrome 확장 프로그램
Disclosure Requirements
You must be transparent in how you handle user data (e.g., information provided by a user or collected about a user or a user's use of the Product or Chrome Browser), including by disclosing the collection, use, and sharing of the data. If your
- Workbox
- Chrome 확장 프로그램
Featured Products
The Chrome Web Store features products that align with our standards, values, and that we believe will produce valuable user experiences. Certain products that don't meet these standards, but which do not explicitly violate Chrome Web Store
- Workbox
- Chrome 확장 프로그램
Spam and Abuse
We don't allow any developer, related developer accounts, or their affiliates to submit multiple extensions that provide duplicate experiences or functionality on the Chrome Web Store. Extensions should provide value to users through the creation of
- Chrome 확장 프로그램
- Workbox
Repeat Abuse
Serious or repeated violations of the Chrome Web Store Distribution Agreement or these Program Policies will result in the suspension of your developer account, and possibly related developer accounts. Additionally, you may be banned from using the
- Workbox
- Chrome 확장 프로그램
Code Readability Requirements
Developers must not obfuscate code or conceal functionality of their extension. This also applies to any external code or resource fetched by the extension package. Minification is allowed, including the following forms: Removal of whitespace,
- Workbox
- Chrome 확장 프로그램
Ads
Ads are considered part of your Product for purposes of content review and compliance with developer terms, and therefore must comply with the above content policies. Ads which are inconsistent with the content rating of your products or extension
- Chrome 확장 프로그램
- Workbox
Hate Speech and Violent Behavior
Depictions of gratuitous violence are not allowed. Products should not contain materials that threaten, harass, or bully other users. We don't allow content or products that advocating against or inciting hatred towards groups of people based on
- Chrome 확장 프로그램
- Workbox
Accepting Payment From Users
If you collect sensitive personal information through your Product for sales, you must follow these requirements: You must securely collect, store, and transmit all credit card and other sensitive personal information in accordance with privacy and
- Workbox
- Chrome 확장 프로그램
Limited Use
This policy establishes the Chrome Web Store's minimum user data privacy requirements; you or your Product must comply with applicable laws. You must limit your use of the data to the practices you disclosed. Collection and use of web browsing
- Chrome 확장 프로그램
- Workbox
Impersonation & Intellectual Property
Don't pretend to be someone else, and don't represent that your product is authorized by, endorsed by, or produced by another company or organization, if that is not the case. Your Product and its user experience also must not mimic functionality or
- Chrome 확장 프로그램
- Workbox
Notification and appeals
In the event that your Product is removed from the Chrome Web Store, you will receive an email notification to that effect, with further instructions if applicable. Verify that the associated publisher account with your Product can receive emails
- Chrome 확장 프로그램
- Workbox
Regulated goods and services
Don't engage in or promote unlawful activities in your product, such as rape, illegal sex work, or the sale of prescription drugs without a prescription. We will remove content which promotes, glorifies, or encourages dangerous or illegal activity
- Workbox
- Chrome 확장 프로그램
2-Step Verification
To ensure the security of Chrome Web Store accounts, 2-Step Verification is required for all developer accounts prior to publishing an extension or updating an existing extension. Developers can activate 2-Step Verification for their Google accounts
- Workbox
- Chrome 확장 프로그램
Enforcement Circumvention
Any attempt to circumvent intended limitations or enforcement actions will result in the immediate termination of your developer account, and possibly related developer accounts.
- Workbox
- Chrome 확장 프로그램
Handling Requirements
If your product is associated with a security vulnerability that could be exploited to compromise another application, service, browser, or system, we may remove your product from the Chrome Web Store and take other measures to protect users. In such
- Chrome 확장 프로그램
- Workbox
Privacy Policies
If your Product handles any user data, then you must post an accurate and up to date privacy policy. The privacy policy must, together with any in-Product disclosures, comprehensively disclose: How your Product collects, uses and shares user data All
- Chrome 확장 프로그램
- Workbox
Misleading or Unexpected Behavior
We do not allow products that deceive or mislead users, including in the content, title, description, or screenshots. If any of your product's content, title, icon, description, or screenshots contains false or misleading information, we may remove
- Chrome 확장 프로그램
- Workbox
Malicious and Prohibited Products
Don't transmit viruses, worms, defects, Trojan horses, malware, or any other products of a destructive nature. We don't allow content that harms or interferes with the operation of the networks, servers, or other infrastructure of Google or any
- Chrome 확장 프로그램
- Workbox
API Use
Extensions must use existing Chrome APIs for their designated use case. Use of any other method, for which an API exists, would be considered a violation. For example, overriding the Chrome New Tab Page through any means other than the URL Overrides
- Workbox
- Chrome 확장 프로그램
Meeting you where you are
Find out how you can meet the Chrome team.
- Chrome
Known issues when migrating to Manifest V3
Recently, we announced changes to the Manifest V2 deprecation timeline, and while we remain firmly committed to Manifest V3 we acknowledge there is more work to do on our part. We are committed to closing the following gaps before announcing a new
- Chrome 확장 프로그램
- Workbox
Discovery on the Chrome Web Store
An overview of how users find items on the Chrome Web Store, and how our editors select items to feature.
- Chrome 확장 프로그램
- Workbox
Chrome Web Store review process
An overview of the review process and how enforcement actions result from detected policy violations.
- Chrome 확장 프로그램
- Workbox
Manifest V2 support timeline
Details of the Manifest V2 phase-out and end of life.
- Workbox
- Chrome 확장 프로그램
Manage user feedback
Follow-up on reviews and provide user support in the Chrome Web Store.
- Workbox
- Chrome 확장 프로그램
Check on your review status
How to check the review status of your Chrome Web Store item.
- Workbox
- Chrome 확장 프로그램
Analyze your store listing metrics
Understanding metrics and performance of your Chrome Web Store store listing.
- Chrome 확장 프로그램
- Workbox
Cross-origin isolation
Overview of cross-origin isolation for extensions
- Chrome 확장 프로그램
- Workbox
Enterprise publishing options
How to distribute extensions to enterprise users
- Chrome 확장 프로그램
- Workbox
Prepare to publish: set up payment and distribution
How to choose which countries will list your item and who will see it in the Chrome Web Store.
- Workbox
- Chrome 확장 프로그램
Complete your listing information
How to add listing information for your Chrome Web Store item.
- Chrome 확장 프로그램
- Workbox
Update your Chrome Web Store item
How to update an extension or theme ("item") that you previously published on the Chrome Web Store.
- Chrome 확장 프로그램
- Workbox
Troubleshooting Chrome Web Store violations
Guidelines for understanding why an item was rejected or removed from the Chrome Web Store and how to fix the problem.
- Chrome 확장 프로그램
- Workbox
Chrome Web Store payments deprecation
Why the payments is deprecated, details about the deprecation timeline, and more.
- Workbox
- Chrome 확장 프로그램
Human interface devices on the web: a few quick examples
There is a long tale of human interface devices (HID) that are too new, too old, or too uncommon to be accessible by systems' device drivers. The WebHID API solves this by providing a way to implement device-specific logic in JavaScript.
- Workbox
Deleting Chrome Web Store developer accounts
How to delete a developer or group publisher account on the Chrome Web Store.
- Workbox
- Chrome 확장 프로그램
Set up a group publisher
How to share ownership of your Chrome Web Store items with other developers.
- Workbox
- Chrome 확장 프로그램
Fill out the privacy fields
Use the privacy practices tab to help the Chrome Web Store team review your extension as quickly as possible.
- Chrome 확장 프로그램
- Workbox
Spam policy FAQ
Frequently asked questions about Chrome Web Store's spam policy.
- Workbox
- Chrome 확장 프로그램
Navigate Chrome DevTools with assistive technology
A guide on navigating Chrome DevTools using assistive technology like screen readers.
- Chrome DevTools
- Workbox
Unlocking new capabilities for the web
Web apps should be able to do anything native apps can. Through Project Fugu, we want to make it possible to build and deliver any kind of app on the open web.
- Chrome
Supplying Images
Guidelines about the kinds of images you need to supply to the Chrome Web Store.
- Workbox
- Chrome 확장 프로그램
Branding Guidelines
Guidelines for use of Google trademarks.
- Chrome 확장 프로그램
- Workbox
Beyond SPAs - alternative architectures for your PWA
Building a Progressive Web App doesn't mean building a single page app! Read about alternative architectures for content-focused PWAs, to help you make the right decision for your use case.
- Chrome
Enabling Strong Authentication with WebAuthn
Chrome 67 beta introduces the Web Authentication (WebAuthn) API, which allows browsers to interact with and manage public-key based credentials. This enables strong authentication using removable security keys and built-in platform authenticators such as fingerprint scanners.
- Workbox
Working with the new CSS Typed Object Model
CSS Typed Object Model (Typed OM) brings types, methods, and a flexible object model to working with CSS values. Shipped in Chrome 66.
- Workbox
Best Practices
How to create a high-quality extension and Chrome Web store listing.
- Chrome 확장 프로그램
- Workbox
API Deprecations and Removals in Chrome 54
An round up of the deprecations and removals in Chrome to help you plan.
- Chrome
Trader FAQ: Chrome Web Store
Frequently asked questions about Chrome Web Store's user data policy.
- Workbox
- Chrome 확장 프로그램
Updated Privacy Policy & Secure Handling Requirements
Frequently asked questions about Chrome Web Store's user data policy.
- Workbox
- Chrome 확장 프로그램
API Deprecations and Removals in Chrome 49
An round up of the deprecations and API removals in Chrome to help you plan.
- Chrome
Chrome 47 WebRTC: Media Recording, Secure Origins and Proxy Handling
Chrome 47 has several significant WebRTC enhancements and updates including audio and video recording, proxy handling and mandatory secure origins for getUserMedia().
- Chrome
Better incognito DevTools
Some appearance preferences are now persisted through to incognito windows.
- Chrome
Better incognito DevTools
Some appearance preferences are now persisted through to incognito windows.
- Chrome
Timeline event reference
The timeline events mode displays all events triggered while making a recording. Use the timeline event reference to learn more about each timeline event type.
- Chrome DevTools
- Workbox
What is the Chrome Web Store?
An explanation of the Chrome Web Store and why you might want to use it.
- Workbox
- Chrome 확장 프로그램
Chrome Dev Summit 2014 - The applied science of runtime performance
The story of building the Chrome Dev Summit site.
- Chrome
Publish in the Chrome Web Store
How to publish a new extension or theme to the Chrome Web Store.
- Workbox
- Chrome 확장 프로그램
Google Chrome Web Store Developer Agreement
The legal agreement governing the relationship between Chrome Web Store developers and the Chrome Web Store.
- Workbox
- Chrome 확장 프로그램
Content Ratings Guidelines
Guidelines about how the Chrome Web Store rates the maturity of content.
- Workbox
- Chrome 확장 프로그램
Localization message formats
Reference documentation about the format of the messages.json file for Chrome Extensions.
- Chrome 확장 프로그램
- Workbox
Publish Your App
How to publish your Chrome App.
- Workbox
What Are Chrome Apps?
An overview of Chrome Apps and why you might want to build them.
- Workbox
CSS layout gets smarter with calc()
You can use calc() anywhere a length or number is used, so you can use it for positioning things, or in rgb() color values as well, so it has lots of great uses in a style sheet.
- Workbox
Summarizer
Get a short summary of every webpage.
Chrome Built-in AI Demo
Try the built-in AI preview in Chrome.
Google Gemini Demo
Try the Gemini Models.
Open extension API reference
Custom Cursor Extension
Adds a custom cursor on developer.chrome.com.
Simple Theme
Multiple side panels
This recipe shows how to use sidePanel.getOptions() to retrieve the current side panel and switch between side panels.
Global side panel
Shows how to display the same side panel on every site using the Side Panel API.
Dictionary side panel
Provides definitions in the side panel.
Privacy API sample
Uses the chrome.privacy.services property to get and set privacy settings.
Hello World
Basic Hello World Extension
WebGPU Extension
Generate a red triangle with WebGPU in an extension service worker.
Keep Awake
Override system power-saving settings.
Conifer Music - Official app in the Microsoft Store
Conifer is FAST Conifer integrates perfectly with your PC Conifer offers beautiful music visualizations Conifer is completely cross-platform Conifer is a fast, cross-platform music player that lets your play all of YOUR music, you know, the music you actually own. Have some CDs? Rip them to your computer and add them to Conifer! Have some MP3s? Add them to Conifer!
Mammoth - Official app in the Microsoft Store
Discover a simpler way to socialize online with Mammoth, the Mastodon app that prioritizes ease-of-use and clean design. Experience the open-source, decentralized social network without the clutter. Join communities, share your thoughts, and connect with like-minded individuals all with just a few taps. Say goodbye to overwhelming feeds and complicated features, Mammoth simplifies the social media experience. AI Enhanced: - Struggling to find that perfect image to go along with your post? Have a funny idea for an image on a post? Generate it right in Mammoth with the magic of AI - Not understanding something in a post, or just want to learn more about a specific topic in a post? Click the search button on a post to have AI help you understand the post! - AI driven autocomplete and status generation: Have something to say but not sure how to say it best? Ask Mammoth to write it for you! Customizable: - Dark and light mode support - Theming User Friendly: - Cross Platform - Fast
Transitions DJ
Transitions DJ is a web-based, ad-free DJ mixing app. Mix music online from SoundCloud or your own music collection.
Project Fugu API Showcase
Stadia Bluetooth mode
Switch your Stadia Controller to Bluetooth mode to keep gaming wirelessly on your favorite devices and services after Stadia shuts down
Wavacity
Wavacity is a port of the Audacity audio editor to the web browser. Free and open-source. No install required.
Native Messaging Example
Send a message to a native application.
Reading List API Demo
Uses the chrome.readingList API to display, update and remove reading list entries.
User Scripts API Demo
Uses the chrome.userScripts API to inject JavaScript into web pages.
Winamp for Creators - Start your Creator's journey
Winamp for Creators puts the power back in your hands by giving you access to all the artist services you need to take control of your musical journey.
Get started
Explore the fundamentals of music via Ableton's interactive website. Experiment with beats, melody, harmony, basslines, and song structure in your web browser.
heritagein.info
Netflix Spain - Watch TV Shows Online, Watch Movies Online
Watch Netflix movies & TV shows online or stream right to your smart TV, game console, PC, Mac, mobile, tablet and more.
Farmbound - a diurnal game of farming
Active Recall
Home · Semaphore
An alternative web client for Mastodon, focused on speed and simplicity.
Spatial Fusion is Mixed Reality for the Web
A Mixed Reality WebXR technology showcase designed in collaboration between Meta, and PHORIA and LUSION.
S.E.P.I.A.
S.E.P.I.A. is an app and framework for your own server-based, extendable, private, intelligent assistant.
Terra - Notícias, esportes, coberturas ao vivo, diversão e estilo de vida
Veja no Terra as últimas notícias e as melhores coberturas ao vivo do Brasil e do Mundo, Esportes, Diversão, Vida e Estilo e assista os melhores vídeos no TerraTV.
Groceries
Tylify: Create seamless patterns in seconds
Web-based pattern-making application. All image formats supported (SVG, PNG, JPG, etc). Export seamless patterns as SVG or PNG.
The best free, adless Chess server
Free online chess server. Play chess in a clean interface. No registration, no ads, no plugin required. Play chess with the computer, friends or random opponents.
Sign in - Google Accounts
DEV Community
A constructive and inclusive social network for software developers. With you every step of your journey.
file-tree Web Component
A file tree web component giving access to a device's file system using the File System Access API
Download our software
Download Tidepool Uploader for Mac and Windows, and Tidepool Mobile on iOS and Android.
VSLite
TikTok - Make Your Day
TikTok - trends start here. On a device or on the web, viewers can watch and discover millions of personalized short videos. Download the app to get started.
Descript
Descript is an all-in-one audio/video editor and screen recorder that works like a doc.
The PWinter
The Playroom
Babylon.js Playroom - a demo of Babylon.js using the Havok physics engine for the web introduced in Babylon 6.0
Experience GeForce NOW Gaming Anywhere & Anytime
Instantly play the most demanding PC games and seamlessly play across your devices.
A privacy-first, open-source knowledge base
A privacy-first, open-source platform for knowledge management and collaboration.
WealthPosition: Personal Finance & Budgeting App
WealthPosition, the best personal finance app to budget and track your finances for financial independence
StackBlitz
Snae player
Lightweight on device music player right in your browser.
Snapdrop
Instantly share images, videos, PDFs, and links with people nearby. Peer2Peer and Open Source. No Setup, No Signup.
Xchart.com
Automatic anesthesia charting. Focus on your patient — not your paperwork.
ZQuest Classic
Play one of hundreds of quests in ZQuest Classic, or create your own! ZQuest Classic is a game engine where you can make your classic adventure game
PaintZ
MS Paint for Chromebooks. Create and edit drawings and other images. Simple, fast, works offline, touch- and mouse-friendly, and no plug-ins required!
LiveHeats
Helping organisers run sophisticated competitions with minimal effort. All-in-one platform for live scoring, heat draws, scheduling, rankings and registration.
Pointland
Web Metaverse with Point Cloud
app.ampedstudio.com
Ok! So...
The drawing app to express, grasp, and organize your thoughts and ideas
Elk
A nimble Mastodon web client
ESC Configurator - for Bluejay, BLHeli_S and AM32
Flash and manage your ESCs online without needing to download anything. Supports BLHeli_S, Bluejay and AM32 firmware.
Intervalometer
CodeSpace - Firia Labs
Application to help utilities management.
Budgeting app
Diffr
Sqlime - Online SQLite playground
Sqlime is an online SQLite playground for debugging and sharing SQL snippets.
Flipper Lab
Web platform for your Flipper
Discover the best Creators in the Fanzone
Embrace your inner fan, subscribe to your favorite creators to get Winamp-exclusive content.
bundlejs
Visit bundlejs.com - bundlejs is a quick and easy way to bundle, minify, and compress your ts, js, and npm packages all online.
Ensō
Writing is Thinking
Home Planner - Target
Plan your home, room by room. Design & style it virtually—then shop, share or save for later.
drum utility - teenage engineering
a utility for creating sample packs for the OP-1 field, OP-1, and OP-Z
NFC Tools Online
Online tools to read and write the data on your NFC tags.
[md.edit]
A markdown editor web app based on the File System Access API
Memos AI
Memos AI allows you to record notes with ACCURATE transcriptions, powered by AI, on any device. Need to record a lecture to help with notes? Memos AI can do that AND give you an accurate transcript of what was said.
Hindi Bollywood » Live Online Fm Radio From India Stations
Click here Download Apk
Figma: The Collaborative Interface Design Tool
Figma is the leading collaborative design tool for building meaningful products. Seamlessly design, prototype, develop, and collect feedback in a single platform.
Beautiful Free Images & Pictures
Beautiful, free images and photos that you can download and use for any project. Better than any royalty free or stock photos.
AirConsole - Multiplayer games for friends
AirConsole is an online video game console. Play over 190 multiplayer games. Your smartphones are the controllers.
Web Serial Controller
Connect to any USB or Bluetooth Serial Device from your browser using the Web Serial API Controller
docs.qq.com
Descript
There are simple podcast & video editors and there are powerful ones. Only Descript is both & it features magical AI, so you can skip the hard part of editing. Get started for free.
Globs Designer
Design with globs, a stretchy new design primitive. Tired of the pen tool? Need smarter curves? Want to design from code? Get started with globs.
Edit Photo
No ads, no popups, no cookies, no account. The fastest way to edit photos online
Last Finger Standing
Need to pick someone to go first? To pay the bill? To buy milk? Just have everyone put a finger on the screen and wait. Last Finger Standing will make your choice automatically! A quick and easy app to randomly select someone from a group of people.
The Session
An online community dedicated to traditional Irish music.
Readonly
Readonly links, for your read only.
Graphtoy
Graphing functions easily on the web
Blockbench
Barcode/QR code Scanner
A Progressive Web Application (PWA) that scans barcodes of various formats, using the Barcode Detection API.
Raverie Engine
readyplayer.me
Scrapbook PWA
GIFWorks
GIFWorks makes movies from shared screens and webcams. Once recorded, videos can be optimized and saved as GIF or downloaded as WebM.
Kiwix JS PWA
Offline Wikipedia reader
Oxygen Saturation Monitor
Monitor your oxygen saturation and heart rate with a bluetooth pulse oximeter
Squoosh
Squoosh is the ultimate image optimizer that allows you to compress and compare images with different codecs in your browser.
Amazingly Simple Graphic Design Software – Canva
Amazingly Simple Graphic Design Software – Canva
Soundslice
Learn music better with our living sheet music.
GrapheneOS web installer
Web-based installer for GrapheneOS, a security and privacy focused mobile OS with Android app compatibility.
Leonidas Esteban, Google Developer Expert en Web Technologies
Te enseño el cómo y el porqué de cada línea de código, aprendamos a programar juntos.
pixiv Sketch - お絵かきコミュニケーションアプリ
日々のお絵かきを手軽に楽しめるお絵かきコミュニケーションアプリ。落書きや描きかけの絵も気軽にシェア、いつでもどこでもお絵かきを楽しめます。
Toot Café
A Mastodon instance mostly populated by folks interested in web design and development.
Telegram
Telegram is a cloud-based mobile and desktop messaging app with a focus on security and speed.
Trovo
Trovo is an interactive live streaming platform, you can check out the hottest games live, share your own gaming experiences, and join an amazing community created especially for gamers, creators and do-ers.
Mandadin 4
X. It’s what’s happening
From breaking news and entertainment to sports and politics, get the full story with all the live commentary.
Duino App
LittleBits Fuse
Play board games online from your browser
The world's #1 platform for playing board games online. Play hundreds of board games from your browser for free.
Amazon Luna – Amazon Cloud Gaming
Amazon Luna is a cloud gaming platform developed and operated by Amazon. Play great games on devices you already own.
Popular MIDIs — BitMidi
Listen to free MIDI songs, download the best MIDI files, and share the best MIDIs on the web.
Element
WebAssembly demo with File System Access
A demo showing WebAssembly + WASI apps running on the Web with access to a real filesystem.
Vectorpea
Vectorpea Online Vector Editor lets you edit vector graphics, AI, SVG and PDF files!
Web Xmodem
Learning Synths
Learn about synthesizers via Ableton’s interactive website. Play with a synth in your browser and learn to use the various parts of a synth to make your own sounds.
Getting Started
UsTaxes is an open source webapp for filing US federal income tax. All tax calculations are performed in the browser, so no personal information is stored on external servers!
Creating Kaleidoscopes from Photos with Online Tool
Discover the mesmerizing world of kaleidoscopes and unlock your artistic potential with our user-friendly online tool. Whether you're drawn to the symmetrical beauty of mandalas or nostalgic for the classic kaleidoscopes of your childhood, our tool offers endless possibilities
natto.dev - write JavaScript on a 2D canvas
studio.samlabs.com
codev5.vex.com
Vernier Graphical Analysis®
Pokémon of the Week
A game of collecting and collaborating
Excalidraw — Collaborative whiteboarding made easy
Excalidraw is a virtual collaborative whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them.
1tuner
Listen to radio, podcasts and create playlists.
Snapchat. Now on the web.
Try the new Snapchat for Web on your computer to chat, call friends, use Lenses, and more
VIA
Your keyboard's best friend
Free and open source 2D and 3D game engine
Use the Godot Engine editor directly in your web browser, without having to install anything.
Trimble Identity
LogIn
MConverter: Easy to Use Online File Converter
Convert securely video, audio, image, e-book, office & archive files. Bulk convert large files up to 2 GB. Free and easy to use converter.
Find all Unicode characters from Hieroglyphs to Dingbats – Codepoints
Codepoints is a site dedicated to Unicode and all things related to codepoints, characters, glyphs and internationalization.
Android Flash Tool
Look Scanned
Look Scanned is a pure frontend site that makes your PDFs look scanned! No need for printers and scanners anymore - everything you need to do is just a few clicks.
Microsoft MakeCode Computer Science Education
MakeCode brings computer science to life for all students with fun projects, immediate results, and both block and text editors for learners at different levels.
Expressive Animator
Construct 3 r368.2 ★★★★★
Launch Construct 3 r368.2. Make games with the world's easiest browser-based game creator. Try for free now and begin your game development journey.
Adobe Photoshop
Best-in-class editing and design tools to create, modify, refine, and remix images into content you'll love. Straight from your browser.
Perfetto UI
Floor796
Make music in an online DAW
Produce music online. Make beats, record audio, and collaborate.
Learn a language for free
Learn languages by playing a game. It's 100% free, fun, and scientifically proven to work.
Remap
Remap allows you to find, build, set up and customize your keyboard quickly and easily in Web Browser.
SVGcode
SVGcode is a Progressive Web App that lets you convert raster images like JPG, PNG, GIF, WebP, AVIF, etc. to vector graphics in SVG format.
Hostme
Hostme is everything you need to successfully run your restaurant business!
Runway
Everything you need to make anything you want.
Free Online Games on CrazyGames
Play free online games at CrazyGames, the best place to play high-quality browser games. We add new games every day. Have fun!
Linear – A better way to build products
Linear streamlines issues, sprints, and product roadmaps. It’s the new standard for modern software development.
Notepad - Offline capable
An offline capable notepad powered by ServiceWorker. It's quick, distraction-free, dark mode enabled, mobile compatible(Android, iOS) and minimalist in nature.
Voyager for Lemmy
Voyager is a beautiful mobile web client for Lemmy. Enjoy a seamless experience browsing the fediverse.
Craft — A fresh take on documents
Get started today, it's free.
IRCCloud
IRCCloud is a modern IRC client that keeps you connected, with none of the baggage. Stay synced and notified wherever you are with our web and mobile apps.
Install Tasmota
﹒ Blob City ﹒
Espruino Web IDE
Cue for Education
STORZ & BICKEL
STORZ & BICKEL Web App for Bluetooth Devices.
Cleanfeed
www.capcut.com
NiftyPass
Improv Wi-Fi: Open standard for setting up Wi-Fi via Bluetooth LE and Serial
Free and open standard with ready-made SDKs that offer a great user experience to configure Wi-Fi on devices.
USpeaking
Free Online AI Photo Editor, Image Generator & Design tool
Get creative with Pixlr’s online photo editing & design tools. Including AI image generator, batch editor, animation design, enhancer & more. Try now for FREE!
Wormhole - Simple, private file sharing
Wormhole lets you share files with end-to-end encryption and a link that automatically expires.
Vodon Player
Hoppscotch • Open source API development ecosystem
Helps you create requests faster, saving precious time on development.
Vysor
Chip Player JS
glTF Report
Viewer, analysis tool, script editor, and validator for 3D models in glTF 2.0 format.
bridge. v2
bridge. is a light-weight IDE for Minecraft Add-Ons
BandLab - Make Music Online
The cloud platform where musicians and fans create music, collaborate, and engage with each other across the globe
LEGO Education SPIKE
Visual Studio Code for the Web
Build with Visual Studio Code, anywhere, anytime, entirely in your browser.
TgStorage
Advanced Saved Messages of the Telegram. Organize your notes, links, checklists, photos and any documents in the free unlimited Telegram Cloud.
Adobe Podcast
Next generation audio from Adobe is here. Record, transcribe, edit, share. Crisp and clear, every time.
Logbook
regex101: build, test, and debug regex
Regular expression tester with syntax highlighting, explanation, cheat sheet for PHP/PCRE, Python, GO, JavaScript, Java, C#/.NET, Rust.
GoldWave Infinity Audio Editor
GoldWave Infinity audio editing, recording, conversion, and visual analysis app.
daedalOS
Desktop environment in the browser
Slack is your productivity platform
Slack is a new way to communicate with your team. It’s faster, better organized, and more secure than email.
Link Cleaner
Remove tracking code and other variables from web links with the press of a button!
github.dev
Real Time Lightning Map
See lightning strikes in real time across the planet. Free access to maps of former thunderstorms. By Blitzortung.org and contributors.
Wootility Web
Instantly edit your Wooting keyboard profiles and colors from the browser.
Codeit
Run projects, code your ideas, and share it all on Codeit.
STEM.TECH
Hear in a new way with STEM
Speakflow — Online Teleprompter - AI Powered
Speakflow is an online teleprompter! Write and save scripts; collaborate with your team; Includes voice-activated scrolling. Works on Windows, Mac, iOS, Android, and more!
NumWorks
tldraw
A free and instant collaborative diagramming tool.
PocketLab Notebook
Create your free account or sign in here.
Build expressive charts or dashboards with code
Turn your most complex data into actionable insights faster with Observable. The future of data visualization, dashboards, and data apps starts here.
YT Playlist Notifier
Get notified when YouTube playlists are updated.
www.contactsdirect.com
Create an account or log in to Instagram - A simple, fun & creative way to capture, edit & share photos, videos & messages with friends & family.
Shared Game Timer
A board game timer that synchronizes across multiple devices.
bluetooth.rocks
CrosKeys by CrosExperts
Unlock your Chromebook's potential with a powerful keyboard launcher!
ManifoldCAD
Fast, reliable, parametric solid modeling web app. Programmatic 3D design with JavaScript, inspired by and improving upon OpenSCAD & JSCAD. Demonstrates a new GPU-parallel, open-source geometry kernel: Manifold.
Typst: Compose papers faster
Focus on your text and let Typst take care of layout and formatting. Sign up now and speed up your writing process.
CityHop
Take leisurely walks and drives around the world while chilling to lofi music 🎶
BPM Techno - Free Online Real-Time BPM Counter for DJ
Produce some beats using any player, launchpad, keyboard, and mix them live with another track easily and precisely using this free online real-time BPM counter
Soundtrap - Make music online
Make music together online. Free instruments, loops, drum kits, and vocal tuner in one studio. Record, edit, mix, and master your audio, no downloads - sign up for free.
Install WLED
TopDecked Unified
The essential Magic App for brewers, collectors, traders, competitors, and fans.
Beatport DJ
Beatport DJ is the world's first web based DJ software built for music discovery and playlist management. Subscribe to Beatport Streaming and start mixing with millions of tracks.
Fotor - Free Online Photo Editing Tools
Upload image in Fotor online photo editor to crop image, add text to photo, enhance image, remove background, create graphics & more for free.
みんなのネバーランド - 約束のネバーランド公式コミュニティ -
みんネバは約束のネバーランド好きが集まる公式コミュニティです。考察やファンアート、約ネバの話題で盛り上がろう!
Color Picker - ThreeJS
A ThreeJS color picker
Boxy SVG
Create and edit Scalable Vector Graphics (SVG) files online
What PWA Can Do Today
A showcase of what is possible with Progressive Web Apps today.
Hypertext
HTML Document Editor
Create Amazing Mockups
Create Amazing Mockups
Vim Online Editor - Vim Editor In Browser
Maskable.app
Preview maskable icons in the browser!
Radio House
AudioMass
AudioMass is a free full-featured web-based audio & waveform editing tool
iRobot Coding
kota-yata editor
WYSIWYG Markdown editor with pdf viewer
Home · Pinafore
An alternative web client for Mastodon, focused on speed and simplicity.
Spotify - Web Player: Music for everyone
Spotify is a digital music service that gives you access to millions of songs.
noctura.tech
Graphite
Play Fortnite
Play Fortnite with Xbox Cloud Gaming (Beta). The future of Fortnite is here. Be the last player standing in Battle Royale and Zero Build, explore and survive in LEGO Fortnite, blast to the finish with Rocket Racing or headline a concert with Fortnite Festival. Play thousands of free creator made islands with friends including deathruns, tycoons, racing, zombie survival and more! Join the creator community and build your own island with Unreal Editor for Fortnite (UEFN) or Fortnite Creative tools. Each Fortnite island has an individual age rating so you can find the one that's right for you and your friends. Find it all in Fortnite!
PPG.report
Weather report tailored for paramotor pilots, worldwide. Combines winds aloft, nearby Terminal Aerodrome Forecasts, hourly forecasts, NWS active alerts and TFRs.
Logi Web Connect
Logi Web Connect gives you pairing flexibility to connect your Logi mice & keyboards through your Bolt Receiver. And is the perfect solution to pair your devices to computers without installing any software.
birdfood.gq
Tibbo Web Apps
Polypad – Virtual Manipulatives – Mathigon
Virtual manipulatives, dynamic geometry, graph plotting, data science and more: explore the ultimate mathematical playground!
D&D Tokenizer
Generate image tokens with fancy borders for D&D and other table games characters. Perfect for adding visuality to your gaming experience.
Average Colour
Average Colour is a tool to find the average colour in an image.
PWA Haven
Collection of small, fast, simple PWA's to replace native OS apps.
Oryx: The ZSA Keyboard Configurator
A powerful, visual tool to configure your keyboard. Based on the open-source QMK firmware.
Emberly - Your knowledge. Organized.
Emberly’s visual organization of bookmarks, notes, and files let you master information overload and learn better.
Mishipay
JSON utility tool
Web site created using create-react-app
OpenAI CLIP Image Search in JavaScript (Using ONNX Web Runtime)
wami
Ruby
Ruby (V3) is customizable, free, and fast.
Smart Text Editor
The text editor that requires only a browser and a keyboard!
StackEdit – In-browser Markdown editor
Full-featured, open-source Markdown editor based on PageDown, the Markdown library used by Stack Overflow and the other Stack Exchange sites.
Postr.me
Capture social network post to nice image and video
Your connected workspace for wiki, docs & projects
A new tool that blends your everyday work apps into one. It's the all-in-one workspace for you and your team.
Toaster
Toaster is a 3D editor that models in pure CSS + HTML. No WebGL, no canvas. Impractical? Yes. Useless? Also yes.
BrewFlasher Web Edition
WTFOS Configurator
Root and configure your DJI HD FPV goggles and air-units via web interface.
Lynx Toolbox
Lynx Toolbox is an online tool to help you manage your Lynx headset. You can use it to install apps, update your device, or perform various other actions.
Edit Photos and modify with Effects PhotoPWA.com
This online tool helps you easily cut and edit your photos. You can trim them just right, change the size, add cool filters, and make your images better with no hassle. The website as PWA is easy to use, so you can make your photos perfect and use fun filters.
Microsoft Loop - Think, plan and create together
ESP Web Tools
Easily allow users to flash new firmware for their ESP-devices on the web.
VRoid Hub
VRoid Hubは、3Dキャラクターのための投稿・共有プラットフォームです。モデルデータをアップロードするだけでキャラクターが活き活きとアニメーションするプロフィールページを作成でき、利用条件と共にモデルデータを配布することもできます。登録した3Dモデルは、VRoid Hubと連携した各種VR/ARプラットフォームや3Dコンテンツ上で利用可能です
GDevelop game making app
Build your own game super fast and without programming. Publish on mobile, desktop and on the web.
SpaceLancer
Online Virtual Piano Keyboard with MIDI Functionality
This virtual piano gives you a simple way to practice your piano/keyboard skills online. Just connect a MIDI controller and start playing right away.
Ilaria Food & Home – Ricette e stile di vita sostenibile
Ricette e stile di vita sostenibile
Open Video
Open local video files using the browser.
EdgeTX Buddy
Radio Garden
Explore live radio by rotating the globe.
Top War
In Top War, modern tanks are merged out of basic gunman, everything can be merged here.No more upgrade waiting times, merge two together and the upgrade will finish instantly.
Expressive Canvas
YouTube Audio Player
An awesome audio player for YouTube videos
Flowchart Maker & Online Diagram Software
JSMusicDB
Edit • Video
No ads, no popups, no cookies, no account. The fastest way to edit video online
Vimeo Interactive Video Experience Platform
Roland50.studio
Emulate the sound of Roland's most famous and influential musical instruments from Yuri Suzuki and Roland.
Markwhen
It's about time. Markwhen is a simple language for creating beautiful calendars, timelines, and more.
Narrow One
Capture the flag medieval style!
Capture QR Code
Instantly snap QR codes on mobile and desktop without installing an app.
web.autocad.com
Access AutoCAD® in the web browser on any computer. With the AutoCAD web app, you can edit, create, and view CAD drawings and DWG files anytime, anywhere.
Art Class
MOMO Pro
Impeccable timing and knowledge separate the stock trading elite. MOMO Stock Discovery App gives real-time stock market insight and alerts to time trades from desktop browser, iPhone, or Android.
velocity.radon.games
Music Instrument tuner app
Tune guiter, bass, ukulele. Also allows you to tune with chromatic tuner. This also has a useful metronome that you can use while you jam.
Ace Seventh Heaven
Visual Day scheduler.
Live Online Music Collaboration
Sessionwire Studio is a powerhouse creative communication suite for your production team featuring live video and studio quality HQ Audio.
WebGamer 🎮 Play Free Online Games
Play free online games instantly in your browser. WebGamer is a portal of next-gen web games you can play now without installing anything!
gphoto2 on the Web
Songwhip - Free music links to all platforms
In one click, Songwhip finds your music everywhere & makes a page you can share with everyone
Error
Daily Writing Builder
Photopea
Photopea Online Photo Editor lets you edit photos, apply effects, filters, add text, crop or resize pictures. Do Online Photo Editing in your browser for free!
SQLite Viewer Web App
A free online SQLite Explorer, inspired by DB Browser for SQLite and Airtable. Use this web-based SQLite Tool to quickly and easily inspect sqlite files on the web.
Senomix Timesheets - Sign-In
Senomix Time and Expense Tracking Software for Mac and Windows
Discover recipes, home ideas, style inspiration and other ideas to try.
WebScan
An experimental project to bring document/image scanning to the web (USB scanners).
Tinder
With 55 billion matches to date, Tinder® is the world’s most popular dating app, making it the place to meet new people.
pwamp
Bangle.io
HexEd.it - Browser-based Online and Offline Hex Editing
HexEd.it is a free hex editor for Windows, MacOS, Linux and all other modern operating systems, which uses HTML5 and JavaScript (JS) technology to enable hexediting online, directly in your browser.
Bluesky Social
See what's next.
SnapperGPS - Home
Home page of SnapperGPS - A small, low-cost, low-power wildlife tracking system.
mgerhardy.github.io
GoodNotes
GoodNotes app
dot big bang
dot big bang is a way to create and share games with your friends. Create on your own or with your friends, share with anyone by just sending a link!
PhotoStack
PhotoStack has moved to https://photostack.app
Journalistic
A micro journaling app with minimalistic design, pristine writing experience, and powerful insights.
Accessible UK Train Timetables
A blazingly small and fast UK train times journey planner and live departure boards, with bookmarkable URLs as a web app, and offline saving of viewed journeys.
Pixel-Art Editor & NFTs Laboratory
Make pixel art from real life images and draw on the image you can edit for free, filters, layers, library, are within the editor.
Pokedex.org
A mini-encyclopedia of Pokémon species, types, evolutions, and moves.
Service worker with push notification
il8n API Example
Demonstrates the chrome.i18n API by localizing text in the extension popup.
Test Screenshot Extension
Uses the chrome.tabs API to take a screenshot of the active tab.
Bookmark Viewer
Uses the chrome.bookmarks API to search through, add, and delete bookmarks from the user's bookmark tree.
Keyboard Pin
Uses the chrome.tabs API to toggle the pinned state of the current tab.
topSites API sample
Uses the chrome.topSites API to suggest which sites a user should visit.
Catifier
Replace every image by a cat's image in a website you visit
Omnibox Simple Example
Demonstrates the "omnibox" manifest key and most members of the omnibox API.
Cookie Clearer
Uses the chrome.cookies API by letting a user delete their cookies via a popup.
Geolocation - popup
Shows how to get geolocation access within a popup.
Devtools - Chrome Query
Uses the devtools API to add a sidebar that displays the jQuery data associated with the selected DOM element.
Typed URL History
Uses the chrome.history API to display in a popup the user's most visited pages.
MV3 Migration - content script example
Google Analytics Demo
How to use Google Analytics 4 in your extension.
Chromium Milestones
Shows the Chromium release milestone a given code review was merged into.
Stylizr
Demonstrates how to use the chrome.storage API.
Optional Permissions New Tab
Demonstrates optional permissions in extensions
Quick API Reference
Quick API can speed up the building of Chrome extensions.
No Cookies
Uses the chrome.declarativeNetRequest API to remove the "Cookie" header from requests.
Tab Inspector
Demonstrates the chrome.tabs API and the chrome.windows API by providing a user interface to manage tabs and windows.
Alarms API Demo
Uses the chrome.alarms API to allow the user to set alarms using an extension page.
BrowsingData API: Basics
Uses the chrome.browsingData API to clear the user's history without requiring the user to visit the history page.
My Bookmarks
A browser action with a popup dump of all bookmarks, including search, add, edit and delete.
chrome.commands
Uses the chrome.commands API by creating a new keyboard macro for switching tabs in the browser window.
Open side panel
Shows how to call sidePanel.open() to open a global side panel.
History Override
Demonstrates how to override the default history page.
Sandboxed Frame Sample
Demonstrates creation of a tab with a sandboxed iframe to which the main page passes a counter variable.
Action API Demo
Uses the Action API to change the badge text, icon, hover text, or popup page.
Hello Extensions
Base Level Extension
Web Accessible Resources Demo
Uses the web_accessible_resources key in the manifest.json file to control access to assets within an extension.
URL Blocker
Uses the chrome.declarativeNetRequest API to block requests.
Sandboxed Content Sample
Demonstrates creating a tab for a sandboxed iframe. The sandbox calls eval() to write HTML to its own document.
Top Sites
Uses the chrome.topSites API to get the user's most visited sites.
Notifications API sample
Demonstrates the creation of, and interaction with, each of the notification template types.
Geolocation - offscreen
Shows how to get geolocation access within a service worker.
CO2 meter extension
Demonstrates using WebHID to connect to a CO2 meter.
Font Settings API Sample
Demonstrates the chrome.fontSettings API by allowing users to modify the size of fonts on webpages.
URL Redirect
Uses the chrome.declarativeNetRequest API to redirect requests.
Scripting API Demo
Uses the chrome.scripting API to inject JavaScript into web pages.
Global Google Search
Uses the context menu to search a different country's Google
Tab Capture Example
Demonstrates how to use the chrome.tabCapture API.
Oliver Focus Mode
Example extension from DevTools Tips video.
Site-specific side panel
Shows how to display the side panel only on google.com using the Side Panel API.
Devtools - inspectedWindow API sample
Uses devtools.inspectedWindow to collect and use data on the resouces used in a web page.
Print Extension
Demonstrates all four methods of the chrome.printing namespace.
Favicon API in a popup
Demonstrates the favicon manifest permission by displaying the favicon of a url in the extension popup.
Debugger Extension
Uses the chrome.debugger API to capture network events on web pages.
Content settings
Uses chrome.contentSettings to display the settings of a given page in the extension's popup.
Tabs zoom API Demo
Uses the tabs.zoom API to manipulate the zoom level of the current tab.
webNavigation API Sample
Uses the webNavigation API to send notifications.
WebSocket Demo
How to use WebSockets in your Chrome Extension.
Offscreen API - Clipboard
Shows how to write a string to the system clipboard using the offscreen document.
WASM Load Example - Helloworld (no-modules)
Shows how to use WebAssembly (WASM) in Manifest V3.
Blank new tab page
Uses the "chrome_url_overrides" manifest key by replacing the user's default new tab page with a new html file.
Tab Capture - Recorder
Records the current tab in an offscreen document.
Context Menus Sample
Uses the chrome.contextMenus API to customize the context menu.
Merge Windows
Uses the chrome.windows and chrome.tabs APIs to manage tabs across different windows.
Idle - Simple Example
Demonstrates the Idle API
Tab Manager for Chrome Dev Docs
Geolocation - content script
Shows how to get geolocation access within a content script.
Focus Mode
Enable focus mode on Chrome's official Extensions and Chrome Web Store documentation.
Offscreen API - DOM Parsing
Shows how to use DOMParser in an extension service worker using the offscreen document.
Omnibox - New Tab Search
Demonstrates the "omnibox" manifest key and API by creating a keyword that opens a browser search in a new tab.
no-cookies Rule Manager
Demonstrates the chrome.declarativeNetRequest API by providing a UI to manipulate declarativeNetRequest rules dynamically.
Favicon API in content scripts
Demonstrates fetching the favicon from www.google.com and inserting it at the top left of every page.
File Handling Demo
Shows how to use the file_handlers manifest key with the web platform's Launch Handler API.
Advanced Font Settings
Demonstrates the chrome.fontSettings API by allowing users to modify the style of displayed fonts on web pages.
Broken Background Color
Fix an Extension!
Getting Started Example
Build an Extension!
WASM Load Example - Helloworld
Shows how to use WebAssembly (WASM) as a module in Manifest V3.
webRequest.onAuthRequired Demo
Demonstrates the webRequest.onAuthRequired listener to detect an authentication request and log the user into the designated site.
Page Redder
Turns the page red when you click the icon
Drink Water Event Popup
Demonstrates usage and features of the event page by reminding user to drink water
Reading time
Add the reading time to Chrome Extension documentation articles