eBay가 원활한 사용자 인증 정보 공유로 로그인 성공률을 10% 개선한 방법

eBay가 디지털 애셋 링크를 사용하여 원활한 사용자 인증 정보 공유를 통해 로그인 성공률을 10% 개선한 방법을 알아보세요. 안전한 교차 플랫폼 인증을 구현하고 사용자 환경을 개선하는 방법을 알아보세요.

• Chrome

Chrome for Developers

웹에서 구축, 성장, 혁신을 이루도록 지원합니다.

• Chrome

Chrome 135 베타

최신 베타에서 Chrome에 제공될 기능을 살펴보세요.

• Chrome

Chrome Web Store

Chrome Web Store 사용자가 확장 프로그램과 테마를 탐색할 수 있는 온라인 마켓입니다. 그곳에 확장 프로그램을 게시하여 전 세계 누구나 액세스할 수 있도록 하세요. dashboard 개발자 대시보드 확장 프로그램을 게시하고 스토어 항목을 관리합니다. local_mall Chrome Web Store Chrome 웹 스토어에서 확장 프로그램을 살펴보세요. policy 개발자 정책 Chrome 웹 스토어용 확장 프로그램을 만들기 위한

ChromeDriver란 무엇인가요?

ChromeDriver는 W3C WebDriver 표준을 구현하는 독립형 서버입니다.

Chrome 134

맞춤설정 가능한 선택, 대화상자 밝은 색상 닫기 등

• Chrome

Chrome 134의 새로운 기능

Chrome 134가 출시됩니다. 여기에는 대화상자의 밝은 색상 닫기 기능과 그 밖에도 다양한 기능이 포함되어 있습니다.

• Chrome

Document Picture-in-Picture API로 흥미로운 사용 사례를 활용하세요.

문서 PIP 모드가 온라인 학습 환경을 개선한 방법을 알아보세요.

• Chrome

Chrome Extensions

Chrome 확장 프로그램 개발 방법을 알아보세요.

• Chrome 확장 프로그램

Chrome 웹 스토어 개발자 대시보드에서 검토 취소하기

이제 검토 대기 중인 항목의 검토 절차를 중지할 수 있습니다.

• Chrome 확장 프로그램
• Chrome

chrome.bookmarks

chrome.bookmarks API를 사용하여 북마크를 만들고, 정리하고, 조작합니다. 맞춤 북마크 관리자 페이지를 만드는 데 사용할 수 있는 페이지 재정의 도 참고하세요. bookmarks API를 사용하려면 확장 프로그램 매니페스트 에서 '북마크' 권한을 선언해야 합니다. 예를 들면 다음과 같습니다. 북마크는 트리로 구성되며 트리의 각 노드는 북마크 또는 폴더( 그룹 이라고도 함)입니다. 트리의 각 노드는

• Chrome 확장 프로그램

chrome.contentSettings

chrome.contentSettings API를 사용하여 웹사이트에서 쿠키, JavaScript, 플러그인과 같은 기능을 사용할 수 있도록 할지 여부를 제어하는 설정을 변경합니다. 더 일반적으로 콘텐츠 설정을 사용하면 전 세계적으로가 아니라 사이트별로 Chrome 동작을 맞춤설정할 수 있습니다. API를 사용하려면 확장 프로그램의 매니페스트에서 "contentSettings" 권한을 선언해야 합니다. 예를 들면 다음과 같습니다. 패턴을

• Chrome 확장 프로그램

chrome.contentSettings

chrome.contentSettings API를 사용하여 웹사이트에서 쿠키, JavaScript, 플러그인과 같은 기능을 사용할 수 있도록 할지 여부를 제어하는 설정을 변경합니다. 더 일반적으로 콘텐츠 설정을 사용하면 전 세계적으로가 아니라 사이트별로 Chrome 동작을 맞춤설정할 수 있습니다. API를 사용하려면 확장 프로그램의 매니페스트에서 'contentSettings' 권한을 선언해야 합니다. 예를 들면 다음과 같습니다. 패턴을

• Chrome 확장 프로그램

chrome.bookmarks

이 권한은 경고를 트리거 합니다. chrome.bookmarks API를 사용하여 북마크를 만들고, 정리하고, 조작합니다. 맞춤 북마크 관리자 페이지를 만드는 데 사용할 수 있는 페이지 재정의 도 참고하세요. bookmarks API를 사용하려면 확장 프로그램 매니페스트 에서 '북마크' 권한을 선언해야 합니다. 예를 들면 다음과 같습니다. 북마크는 트리로 구성되며 트리의 각 노드는 북마크 또는 폴더( 그룹 이라고도 함)입니다. 트리의 각 노드는

• Chrome 확장 프로그램

인공지능

Chrome의 AI AI와 함께 하는 차세대 웹 시대에 오신 것을 환영합니다. 개발자가 AI를 통해 어떻게 강력한 웹 환경을 더 쉽게 빌드할 수 있는지 알아보세요. Chrome의 Gemini Nano로 실현할 수 있는 가능성을 새롭게 바꿔보세요. 기본 제공 AI Google은 Gemini 생태계의 가장 효율적인 모델인 Gemini Nano를 Chrome에 도입합니다. 클라이언트 측에서 작업 클라이언트 측 AI는 데이터 개인 정보를 보호하고 지연

Gemini Nano 디버그

Gemini Nano에 표시되는 메시지에 관한 세부정보를 확인할 수 있는 Chrome 내부 페이지가 있습니다. 이 가이드에서는 디버깅에 이를 사용하는 방법을 설명합니다.

Android용 Chrome의 화면 전체 표시 준비하기

Android용 Chrome은 Chrome 135부터 전체 화면 모드를 지원합니다.

• Chrome

Android의 Chrome 전체 화면 이전 가이드

전체 화면 웹 환경 빌드

개인 정보 보호 및 보안 패널

'개인 정보 보호 및 보안' 패널을 사용하여 서드 파티 쿠키를 검사 및 제어하고 HTTPS 보호를 확인합니다.

• Chrome DevTools

Chrome DevTools로 고급 네트워크 분석

Chrome DevTools로 고급 네트워크 분석을 수행하세요.

• Chrome
• Chrome DevTools

NRK에서 스크롤 기반 애니메이션을 사용하여 스토리에 생동감을 불어넣는 방법

스크롤 기반 및 스크롤 트리거 애니메이션이 스토리텔링 기사를 개선하는 방법을 알아보세요.

• Chrome

WebGPU의 새로운 기능 (Chrome 134)

하위 그룹을 사용하여 머신러닝 워크로드 개선, D3D12의 셰이더 컴파일 시간 개선, 혼합 가능한 부동 소수점 필터링 가능한 텍스처 유형 지원 삭제 등

• Chrome

팝오버 = 힌트

도움말과 기타 플로팅 요소를 간소화하는 팝오버의 새로운 모드를 살펴보세요.

• Chrome

chrome.app.runtime

chrome.app.runtime API를 사용하여 앱 수명 주기를 관리합니다. 앱 런타임은 앱 설치를 관리하고, 이벤트 페이지를 제어하며, 언제든지 앱을 종료할 수 있습니다. any 선택사항 삽입할 앱이 삽입 결정을 내릴 때 사용할 수 있는 개발자 지정 데이터(선택사항)입니다. 문자열 void embedderId 가 이 앱을 <appview> 요소에 삽입하도록 허용합니다. url 는 삽입할 콘텐츠를 지정합니다. allow 함수는

chrome.printing

chrome.printing API를 사용하여 Chromebook에 설치된 프린터로 인쇄 작업을 전송합니다. 모든 chrome.printing 메서드와 이벤트에는 확장 프로그램 매니페스트 에서 "printing" 권한을 선언해야 합니다. 예를 들면 다음과 같습니다. 아래 예는 인쇄 네임스페이스의 각 메서드 사용을 보여줍니다. 이 코드는 extensions-samples GitHub 저장소의 api-samples/printing 에서 복사했거나

• Chrome 확장 프로그램

chrome.sessions

chrome.sessions API를 사용하여 탐색 세션에서 탭과 창을 쿼리하고 복원합니다. 문자열 외부 기기의 이름입니다. 세션 [] 외부 기기의 열려 있는 창 세션 목록으로, 가장 최근에 수정된 세션부터 가장 최근에 수정되지 않은 세션으로 정렬됩니다. 번호 선택사항 요청된 목록에서 가져올 최대 항목 수입니다. 최대 항목 수를 가져오려면 이 매개변수를 생략합니다 ( sessions.MAX_SESSION_RESULTS ). 숫자 창 또는 탭이

• Chrome 확장 프로그램

chrome.userScripts

userScripts API를 사용하여 사용자 스크립트 컨텍스트에서 사용자 스크립트를 실행합니다. User Scripts API( chrome.userScripts )를 사용하려면 스크립트를 실행하려는 사이트의 manifest.json에 "userScripts" 권한을 추가하고 "host_permissions" 를 추가합니다. 사용자 스크립트는 웹페이지의 모양이나 동작을 수정하기 위해 웹페이지에 삽입되는 코드 스니펫입니다. Content

• Chrome 확장 프로그램

chrome.sessions

chrome.sessions API를 사용하여 탐색 세션에서 탭과 창을 쿼리하고 복원합니다. 문자열 외부 기기의 이름입니다. 세션 [] 외부 기기의 열려 있는 창 세션 목록으로, 가장 최근에 수정된 세션부터 가장 최근에 수정되지 않은 세션으로 정렬됩니다. 번호 선택사항 요청된 목록에서 가져올 최대 항목 수입니다. 최대 항목 수를 가져오려면 이 매개변수를 생략합니다 ( sessions.MAX_SESSION_RESULTS ). 숫자 창 또는 탭이

• Chrome 확장 프로그램

chrome.printing

chrome.printing API를 사용하여 Chromebook에 설치된 프린터로 인쇄 작업을 전송합니다. 모든 chrome.printing 메서드와 이벤트에는 확장 프로그램 매니페스트 에서 "printing" 권한을 선언해야 합니다. 예를 들면 다음과 같습니다. 아래 예는 인쇄 네임스페이스의 각 메서드 사용을 보여줍니다. 이 코드는 extensions-samples GitHub 저장소의 api-samples/printing 에서 복사했거나

• Chrome 확장 프로그램

Chrome 134의 DevTools의 새로운 기능

개인 정보 보호 및 보안 패널, 보정된 CPU 제한, 실적에서 퍼스트 파티 및 서드 파티 강조 표시, 새로운 통계 등

• Chrome DevTools
• 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 확장 프로그램

측정기준

CrUX 차원에 관한 기술 문서입니다.

• Chrome UX 보고서

이제 CrUX에서 LCP 이미지 하위 요소 및 RTT를 사용할 수 있습니다.

LCP 이미지 하위 부분, LCP 리소스 유형, RTT를 비롯하여 2025년 2월 출시의 Chrome 사용자 환경 보고서 (CrUX 변경사항)에 관한 내용을 알아보세요.

• Chrome

Docs

빌드하는 모든 항목에 필요한 코드 샘플, 가이드, API 참조입니다.

미디어 재생 시 자동으로 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 DevTools
• Chrome

2025년 1월 Chrome 확장 프로그램 변경사항

Chrome 확장 프로그램의 최근 변경사항에 대한 개요와 개발자가 기대할 수 있는 곧 출시될 흥미로운 확장 프로그램 기능을 확인해 보세요.

• Chrome 확장 프로그램
• Chrome

WebGPU의 새로운 기능 (Chrome 133)

unorm8x4-bgra 및 1개 구성요소 정점 형식이 추가되어 정의되지 않은 값으로 알 수 없는 제한을 요청할 수 있습니다. WGSL 정렬 규칙 변경, 삭제로 인한 WGSL 성능 향상 등도 있습니다.

• Chrome
• WebGpu

Prompt API를 사용한 세션 관리 권장사항

이 가이드에서는 Prompt API를 사용한 세션 관리를 위한 권장사항을 소개합니다.

출시 노트

개발자에게 영향을 미치는 Chrome 변경사항 알아보기

• Chrome

Chrome의 새로운 기능

Chrome의 새로운 기능 도움말 및 블로그에서 Chrome의 최신 업데이트를 살펴보세요. 새로운 콘텐츠 및 문서에 대한 중요한 업데이트 article LLM이 응답을 스트리밍하는 방법 서버 및 클라이언트용 AI에서 스트리밍 데이터가 작동하는 방식을 알아볼 수 있는 새로운 문서입니다. article Chrome 웹 스토어 관련 알림 및 이의신청 Chrome 웹 스토어의 알림 및 이의신청 절차가 업데이트되었습니다. article 오리진 트라이얼의

Chrome 웹 스토어 정책 업데이트: 개발자를 위한 명확성과 일관성 보장

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 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 DevTools
• Chrome

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 DevTools
• Chrome

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.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입니다. 불리언 선택사항

Prompt API

Chrome 확장 프로그램에서 Prompt API의 무한한 가능성을 살펴보세요.

확장 프로그램 및 AI

AI로 확장 프로그램을 개발하는 방법 알아보기

• Chrome 확장 프로그램

성능 통계 패널 지원 중단

실험용 성능 통계 패널은 2025년 1월에 삭제되고 성능 패널 자체의 새로운 통계로 대체됩니다.

• Chrome DevTools
• Chrome

강력한 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.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 확장 프로그램

패스키

비밀번호를 더 쉽고 안전하게 대체할 수 있습니다.

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 DevTools
• Chrome

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 134에서는 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

적용 범위: 사용되지 않는 자바스크립트 및 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
• Chrome DevTools

웹 시리얼의 블루투스 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
• Chrome DevTools

웹 플랫폼

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 매개변수는 다음과 같습니다. 문자열 프로미스&lt;string&gt;

• Chrome 확장 프로그램

chrome.systemLog

chrome.systemLog API를 사용하여 확장 프로그램에서 Chrome 시스템 로그를 기록합니다. 문자열 새 로그 레코드를 추가합니다. MessageOptions 로깅 옵션입니다. 함수 선택사항 callback 매개변수는 다음과 같습니다. 프로미스&lt;void&gt; 프로미스는 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&amp;lt; MemoryInfo &amp;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" 단면 인쇄가 사용되었음을 명시합니다. &amp;quot;TWO_SIDED_LONG_EDGE&amp;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 매개변수는 다음과 같습니다. 프로미스&lt;void&gt; 프로미스는 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" 단면 인쇄가 사용되었음을 명시합니다. &amp;quot;TWO_SIDED_LONG_EDGE&amp;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.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 매개변수는 다음과 같습니다. 문자열 프로미스&lt;string&gt;

• 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 매개변수는 다음과 같습니다. 프로미스&lt;void&gt; 프로미스는 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 매개변수는 다음과 같습니다. 프로미스&lt;void&gt; 프로미스는 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&amp;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 변경 이벤트의 유형입니다. &amp;quot;contents_changed&amp;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&amp;lt; MemoryInfo &amp;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.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
• Chrome DevTools

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&lt; StreamSource &gt; 응답 ReadableStream BodyInit 여러 개의 소스 프로미스를 사용합니다. 각 프로미스는 Response, ReadableStream 또는 BodyInit 로 확인될 수 있습니다. 스트림이 완료될 때 신호를 보내는 프로미스와 함께 각 스트림의 데이터가 순서대로 반환된 ReadableStream을 노출하는

매니페스트 - 설명

확장 프로그램을 설명하는 일반 텍스트 문자열 (HTML 또는 다른 형식 없음, 132자 이하, 영문 기준)입니다. 설명은 브라우저의 확장 프로그램 관리 UI 및 Chrome 웹 스토어 모두에 적합해야 합니다. 이 필드에 언어별 문자열을 지정할 수 있습니다. 자세한 내용은 다국어화 를 참고하세요.

매니페스트 - 키

이 값은 개발 중에 로드될 때 확장 프로그램, 앱 또는 테마의 고유 ID를 제어하는 데 사용할 수 있습니다. 적절한 키 값을 가져오려면 먼저.crx 파일에서 확장 프로그램을 설치합니다. 확장 프로그램을 업로드 하거나 수동으로 패키징 해야 할 수도 있습니다. 그런 다음 사용자 데이터 디렉터리 에서 Default/Extensions/_&lt;extensionId&gt;_/_&lt;versionString&gt;_/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
• Chrome DevTools

확장 프로그램 요청 숨기기 및 더 많은 네트워크 패널 개선사항

웹 디버깅 환경을 간소화하도록 설계된 Chrome DevTools Network 패널의 최신 개선사항을 살펴보세요.

• Chrome
• Chrome DevTools

요소 패널 개요

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
• Chrome DevTools

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 DevTools
• Chrome

명령어에 응답

확장 프로그램에서 커스텀 키 조합에 응답합니다.

• 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
• Chrome DevTools

DevTools 도움말: 가져오기 우선순위 디버깅

가져오기 우선순위를 디버그하는 방법을 알아봅니다.

• Chrome DevTools
• Chrome

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
• Chrome DevTools

지역 캡처로 탭 공유 개선

이제 웹 플랫폼에는 동영상 트랙 자르기를 위한 성능이 뛰어나고 강력한 방법인 지역 캡처 기능이 함께 제공됩니다.

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
• Chrome DevTools

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 DevTools
• Chrome

서비스 워커에서 WebSocket 사용

Chrome 확장 프로그램에서 WebSocket에 연결하는 방법에 대한 단계별 안내입니다.

• Chrome 확장 프로그램

WebRTC: 기존 getStats() 이전 가이드

iOS에서 Chrome용 Safari Web Inspector 디버깅을 사용하는 방법을 알아보세요.

• Chrome

DevTools 팁: 로컬 및 세션 저장소

애플리케이션 > 로컬 저장소 및 세션 저장소를 사용하여 키-값 쌍을 디버깅합니다.

• Chrome DevTools
• Chrome

DevTools의 새로운 기능 (Chrome 116)

누락된 스타일시트 문제를 더 빠르게 식별하고 디버그하는 데 도움이 되는 여러 가지 개선사항이 DevTools에 적용되었습니다. 네트워크 패널은 Initiator 열에 로드되지 않은 스타일시트를 참조하는 정확한 줄에 대한 링크를 일관되게 채웁니다. 문제 패널에는 잘못된 URL, 요청 실패, 잘못 배치된 @import 문을 비롯한 모든 스타일시트 로드 문제가 표시됩니다. Chromium 문제: 1440626, 1442198, 1453611 요소

• Chrome DevTools
• Chrome

위치정보 사용