拡張機能へようこそ
YouTube の拡張機能
Chrome ウェブストアの裏側: プロダクト マネージャーへの質問
コンテンツ スクリプトとは
リモートホストのコードとは何ですか?
拡張機能の実例
Action API のデモ
UserScript API のデモ
Scripting API のデモ
Side Panel API のデモ
拡張機能に関する投稿
chrome.bookmarks
この権限は 警告をトリガーします 。 chrome.bookmarks API を使用すると、ブックマークの作成、整理、その他の操作ができます。カスタムのブックマーク マネージャー ページを作成できる オーバーライド ページ もご覧ください。 bookmarks API を使用するには、 拡張機能マニフェスト で「bookmarks」権限を宣言する必要があります。次に例を示します。 ブックマークはツリー形式で整理されます。ツリーの各ノードは、ブックマークまたはフォルダ( グループ
chrome.contentSettings
chrome.contentSettings API を使用して、ウェブサイトが Cookie、JavaScript、プラグインなどの機能を使用できるかどうかを制御する設定を変更します。より一般的な話として、コンテンツの設定を使用すると、Chrome の動作をグローバルではなくサイトごとにカスタマイズできます。 API を使用するには、拡張機能のマニフェストで "contentSettings" 権限を宣言する必要があります。次に例を示します。
chrome.contentSettings
chrome.contentSettings API を使用して、ウェブサイトが Cookie、JavaScript、プラグインなどの機能を使用できるかどうかを制御する設定を変更します。より一般的な話として、コンテンツの設定を使用すると、Chrome の動作をグローバルではなくサイトごとにカスタマイズできます。 この API を使用するには、拡張機能のマニフェストで「contentSettings」権限を宣言する必要があります。次に例を示します。
chrome.bookmarks
chrome.bookmarks API を使用すると、ブックマークの作成、整理、その他の操作ができます。カスタムのブックマーク マネージャー ページを作成できる ページのオーバーライド もご覧ください。 bookmarks API を使用するには、 拡張機能マニフェスト で「bookmarks」権限を宣言する必要があります。次に例を示します。 ブックマークはツリー形式で整理されます。ツリーの各ノードは、ブックマークまたはフォルダ( グループ )です。ツリーの各ノードは
人工知能
Chrome の AI AI による次世代のウェブへようこそ。デベロッパーがウェブで優れたエクスペリエンスを簡単に構築できるよう、AI がどのように役立つかをご確認ください。 Chrome の Gemini Nano でできることを再考。 組み込みの AI Gemini エコシステムの最も効率的なモデルである Gemini Nano が Chrome に導入されます。 クライアントサイドで作業する クライアントサイド AI
Android 版 Chrome のエッジツーエッジ移行ガイド
エッジからエッジまでのウェブ エクスペリエンスを構築する
Gemini Nano をデバッグする
Gemini Nano へのプロンプトの詳細については、Chrome 内部専用のページをご覧ください。このガイドでは、デバッグにこの機能を利用する方法について説明します。
Android 版 Chrome のエッジ ツー エッジへの移行に備える
Android 版 Chrome は、Chrome 135 以降、エッジツーエッジ表示になります。
Chrome DevTools による高度なネットワーク分析
Chrome DevTools で高度なネットワーク分析を行う。
WebGPU の新機能(Chrome 134)
サブグループによる ML ワークロードの改善、D3D12 でのシェーダーのコンパイル時間の短縮、ブレンド可能として浮動小数点フィルタ可能なテクスチャ タイプのサポートの削除など。
ポップオーバー = ヒント
ツールチップなどのフローティング要素を簡素化するポップオーバーの新しいモードをご確認ください。
chrome.app.runtime
chrome.app.runtime API を使用してアプリのライフサイクルを管理します。アプリ ランタイムは、アプリのインストールを管理し、イベントページを制御します。また、アプリをいつでもシャットダウンできます。 任意( 省略可 ) 埋め込まれるアプリが埋め込みの決定を行う際に使用できる、デベロッパーが指定するオプションのデータ。 文字列 void embedderId がこのアプリを <appview> 要素に埋め込むことを許可します。 url
chrome.printing
chrome.printing API を使用して、Chromebook にインストールされているプリンタに印刷ジョブを送信します。 すべての chrome.printing メソッドとイベントでは、 拡張機能マニフェスト で "printing" 権限を宣言する必要があります。次に例を示します。 次の例は、printing 名前空間の各メソッドの使用を示しています。このコードは、extensions-samples GitHub リポジトリの api-samples/printing
chrome.sessions
chrome.sessions API を使用すると、閲覧中のセッションからタブとウィンドウの問い合わせや復元を行うことができます。 文字列 外部デバイスの名前。 Session [] 外部デバイスの開いているウィンドウ セッションのリスト(最近変更されたセッションから最近変更されていないセッションの順に並べ替えられます)。 number(省略可) リクエストされたリストでフェッチするエントリの最大数。最大数のエントリ( sessions.MAX_SESSION_RESULTS
chrome.printing
chrome.printing API を使用して、Chromebook にインストールされているプリンタに印刷ジョブを送信します。 すべての chrome.printing メソッドとイベントでは、 拡張機能マニフェスト で "printing" 権限を宣言する必要があります。次に例を示します。 次の例は、printing 名前空間の各メソッドの使用を示しています。このコードは、extensions-samples GitHub リポジトリの api-samples/printing
chrome.userScripts
userScripts API を使用して、ユーザー スクリプトのコンテキストでユーザー スクリプトを実行します。 User Scripts API chrome.userScripts を使用するには、manifest.json に "userScripts" 権限を追加し、スクリプトを実行するサイトに "host_permissions" を追加します。 ユーザー スクリプトは、ウェブページに挿入されるコード スニペットで、ウェブページの外観や動作を変更します。 Content
chrome.sessions
chrome.sessions API を使用すると、閲覧中のセッションからタブとウィンドウの問い合わせや復元を行うことができます。 文字列 外部デバイスの名前。 Session [] 外部デバイスの開いているウィンドウ セッションのリスト(最近変更されたセッションから最近変更されていないセッションの順に並べ替えられます)。 number(省略可) リクエストされたリストでフェッチするエントリの最大数。最大数のエントリ( sessions.MAX_SESSION_RESULTS
Chrome のご紹介
Chrome のご紹介 Chrome 134(ベータ版) Chrome 133 Chrome 132 Chrome 131 Chrome 130 Chrome 129 Chrome 128 Chrome 127 Chrome 126 Chrome 125 Chrome 124 Chrome 123 Chrome 122 Chrome 121 Chrome 120 Chrome 119 Chrome の新機能 DevTools DevTools のヒント エンジニアリング ブログ ユーザー補助
Chrome 134 の DevTools の新機能
[プライバシーとセキュリティ] パネル、調整済みの CPU スロットリング、[パフォーマンス] のファーストパーティとサードパーティのハイライト表示、新しい分析情報など。
chrome.i18n
chrome.i18n インフラストラクチャを使用して、アプリまたは拡張機能全体に国際化を実装します。 拡張機能に /_locales ディレクトリがある場合は、 manifest で "default_locale" を定義する必要があります。 ユーザーに表示される文字列はすべて、 messages.json という名前のファイルに格納する必要があります。新しい言語 / 地域を追加するたびに、 /_locales/_localeCode_ という名前のディレクトリにメッセージ
Windows の Chromium ベースのブラウザでテキストのレンダリングが改善
Edge チームは、Chromium で Windows ClearType チューナーの値を直接尊重するサポートを追加しました。これにより、Windows の Chromium ベースのブラウザでテキストのレンダリングが改善されました。
chrome.storage
chrome.storage API を使用して、ユーザーデータの変更を保存、取得、追跡します。 storage API を使用するには、拡張機能の manifest で "storage" 権限を宣言します。次に例を示します。 Storage API は、ユーザーデータと状態を保持するための拡張機能固有の方法を提供します。これはウェブ プラットフォームのストレージ API( IndexedDB 、 Storage
chrome.storage
chrome.storage API を使用して、ユーザーデータの変更を保存、取得、追跡します。 Storage API は、ユーザーデータと状態を保持するための拡張機能固有の方法を提供します。これはウェブ プラットフォームのストレージ API( IndexedDB 、 Storage )に似ていますが、拡張機能のストレージのニーズを満たすように設計されています。主な機能は次のとおりです。 拡張機能は、一部のコンテキスト(ポップアップやその他の HTML ページ)で [ Storage
Dimensions
CrUX ディメンションに関する技術ドキュメント。
CrUX で LCP 画像のサブパートと RTT が利用可能に
2025 年 2 月のリリースにおける Chrome ユーザー エクスペリエンス レポート(CrUX)の変更(LCP 画像のサブパート、LCP リソースタイプ、RTT など)について説明します。
Docs
開発に必要なコードサンプル、ガイド、API リファレンス。
Chrome for Developers
皆様がウェブで構築、成長、革新できるようお手伝いします。
拡張機能 / スタートガイド
Chrome 拡張機能の基本を学ぶ
メディアの再生時にピクチャー イン ピクチャーを自動的に開始する
Chrome では、メディアを再生しているウェブアプリがピクチャー イン ピクチャーを自動的に開始できます。
Chrome 134 ベータ版
Chrome に追加される最新機能を紹介します。
chrome.enterprise.platformKeys
chrome.enterprise.platformKeys API を使用して鍵を生成し、その鍵の証明書をインストールします。この証明書はプラットフォームで管理され、TLS 認証やネットワーク アクセスに、または chrome.platformKeys を介して他の拡張機能で使用できます。 この API を使用してクライアント証明書を登録する一般的な手順は次のとおりです。 enterprise.platformKeys.getTokens を使用して、使用可能なすべてのトークンを取得します。
chrome.enterprise.platformKeys
chrome.enterprise.platformKeys API を使用して鍵を生成し、その鍵の証明書をインストールします。この証明書はプラットフォームで管理され、TLS 認証やネットワーク アクセスに、または chrome.platformKeys を介して他の拡張機能で使用できます。 この API を使用してクライアント証明書を登録する一般的な手順は次のとおりです。 enterprise.platformKeys.getTokens()
Chrome 133
CSS の高度な attr()、text-box-trim、scroll-state コンテナ クエリなど。
Chrome 133 の新機能
Chrome 133 のリリースが開始されました。エキサイティングな新しい CSS 機能など、他にも多くの機能があります。
PWA のタブ形式アプリケーション モード
タブ付きアプリケーション モードでは、プログレッシブ ウェブアプリのデベロッパーは、スタンドアロン PWA にタブ付きドキュメント インターフェースを追加できます。
Android 向け Auth Tab でウェブベースのログインフローを改善する
Android 向け Auth Tab でウェブベースの認証を改善する
アプリ固有の履歴でユーザーのブラウジング エクスペリエンスを向上させる
Android アプリでアプリ固有の履歴を使用する方法
Chrome カスタムタブのアプリ固有の履歴でユーザー エンゲージメントを深める
Android 版 Chrome カスタムタブのアプリ固有の履歴の導入
[認証] タブを使用して認証を簡素化する
Android アプリで専用の [認証] タブを使用する方法
エフェメラル カスタムタブでユーザーのウェブ プライバシーを強化
Android アプリでエフェメラル カスタムタブを使用する方法
chrome.permissions
chrome.permissions API を使用して、 宣言された省略可能な権限 をインストール時ではなく実行時にリクエストします。これにより、ユーザーは権限が必要な理由を理解し、必要な権限のみを付与できます。 API によって付与される機能について説明する権限に関する警告がありますが、これらの警告の一部は明白でない場合があります。Permissions API
chrome.runtime
chrome.runtime API を使用して、サービス ワーカーを取得し、マニフェストの詳細を返します。また、拡張機能のライフサイクルでイベントをリッスンして応答します。この API を使用して、URL の相対パスを完全修飾 URL に変換することもできます。 Runtime API には、拡張機能で使用できるさまざまな機能領域をサポートするメソッドが用意されています。 Runtime API のほとんどのメソッドでは、 nativeMessaging 権限が必要な
chrome.permissions
chrome.permissions API を使用して、 宣言された省略可能な権限 をインストール時ではなく実行時にリクエストします。これにより、ユーザーは権限が必要な理由を理解し、必要な権限のみを付与できます。 API によって付与される機能について説明する権限に関する警告がありますが、これらの警告の一部は明白でない場合があります。Permissions API
Chrome 133 の DevTools の新機能
AI チャット履歴の永続化、ナビゲーションの改善、[パフォーマンス] のリスト無視とスタック トレース、新しい [新機能] パネルなど。
WebGPU の新機能(Chrome 133)
unorm8x4-bgra と 1 コンポーネントの頂点形式が追加され、未定義の値で不明な上限をリクエストできるようになりました。また、WGSL の配置ルールが変更され、破棄による WGSL のパフォーマンスが向上しました。
Chrome 拡張機能の今後の予定(2025 年 1 月)
Chrome 拡張機能の最近の変更の概要と、デベロッパーが期待できる今後の拡張機能の魅力的な機能について説明します。
Prompt API を使用したセッション管理のベスト プラクティス
このガイドでは、Prompt API を使用したセッション管理のベスト プラクティスについて説明します。
リリースノート
デベロッパーに影響する Chrome の変更について
Chrome の新機能
Chrome の新機能 ドキュメントとブログで Chrome の最新情報をご確認ください。 新しいコンテンツとドキュメントの重要な更新。 article LLM がレスポンスをストリーミングする仕組み サーバーおよびクライアントの AI でストリーミング データがどのように機能するかを学ぶための新しいドキュメント。 article Chrome ウェブストアに関する通知と再審査請求 Chrome ウェブストアの通知と再審査請求のプロセスが更新されました。 article オリジン トライアルの
Chrome ウェブストアのポリシーの更新: デベロッパーにとって明確で一貫性のあるポリシーを実現
Chrome ウェブストアは、デベロッパーとユーザーにとって高品質で信頼できるエコシステムの構築に取り組んでいます。この目標に沿って、Google は、プラットフォーム全体で明確かつ一貫したポリシーを適用するための一連のポリシーの更新を発表します。今回の更新では、機能、コンテンツ基準、デベロッパー ガイダンスの主要な分野に対応しています。 Google は、 再審査請求プロセス を効率化し、透明性を高めるために、プロセスを合理化しています。今後、デベロッパーはポリシー違反ごとに 1
ストリーミングされた LLM レスポンスをレンダリングする際のベスト プラクティス
以下のフロントエンドのベスト プラクティスに沿って、ストリーミングをサポートする API(Prompt API など)を使用して、Gemini からストリーミングされたレスポンスを表示します。
パスキーの WebAuthn 機能検出の簡素化
「getClientCapabilities()」を使用して WebAuthn の機能を検出し、ユーザーに合わせて認証ワークフローを調整する方法を学びます。
LLM がレスポンスをストリーミングする仕組み
ストリーミングの概要と、AI と LLM でのストリーミングの仕組みを理解する。
AI を組み込んだ翻訳
組み込みの Translator API を使用すると、任意のコンテンツをソース言語からターゲット言語に翻訳できます。オリジン トライアルに参加して API を試す。
省エネモードでのフリーズ
Chrome 133 以降では、省エネモードが有効になっているときに、CPU 使用率の高いバックグラウンド タブがフリーズされるようになりました。
DevTools のヒント
DevTools のヒント
メディア
ウェブサイトやアプリに画像や動画などを追加する方法を改善します。
iOS で Google パスワード マネージャーのパスキーを利用できるようになりました
iOS 17 以降の Chrome で、Google パスワード マネージャー(GPM)でパスキーを作成、同期、認証できるようになりました。これにより、Chrome が利用できるすべてのデバイスで GPM のパスキーを使用できるようになります。
CSS attr() のアップグレード
カスタム プロパティを含む任意の CSS プロパティで attr() を使用できるようになりました。また、値を文字列以外のデータ型に解析できるようになりました。
CSS scroll-state()
コンテナクエリに似ていますが、停止したクエリ、スナップされたクエリ、オーバーフローしたクエリに使用します。
Chrome 133 ベータ版
Chrome に搭載される最新機能について学びます。
Chrome 132 の新機能
Chrome 132 のリリースが開始されました。Dialog 要素は ToggleEvent を取得し、要素レベルの動画共有をサポートします。File System Access API は Android と WebView をサポートします。
Chrome DevTools に Gemini を導入した方法
DevTools の新しい AI アシスタント パネルの楽しいユースケースについて学びます
CSS text-box-trim
テキスト コンテンツの上下にスペースを追加して、視覚的なバランスをとる。
Chrome 132
ダイアログの ToggleEvent、要素レベルの動画共有のサポート、Android と WebView をサポートする File System Access API など。
chrome.sockets.udp
chrome.sockets.udp API を使用して、UDP 接続を使用してネットワーク経由でデータを送受信します。この API は、以前の「socket」API にあった UDP 機能を置き換えます。 この API を使用するには、次のキーを マニフェスト で宣言する必要があります。 数値 新しく作成されたソケットの ID。この API から作成されたソケット ID は、非推奨の [ socket ](../socket/) API など、他の API から作成されたソケット ID
chrome.tabs
chrome.tabs API を使用して、ブラウザのタブシステムを操作します。この API を使用すると、ブラウザのタブを作成、変更、並べ替えることができます。 Tabs API には、タブの操作と管理のための機能だけでなく、タブの 言語 の検出、 スクリーンショット の撮影、タブのコンテンツ スクリプトとの 通信 も可能です。 ほとんどの機能を使用するのに権限は必要ありません。たとえば、新しいタブの 作成 、タブの 再読み込み 、別の URL への ナビゲーション などです。 Tabs
chrome.tabs
chrome.tabs API を使用して、ブラウザのタブシステムを操作します。この API を使用すると、ブラウザのタブを作成、変更、並べ替えることができます。 Tabs API には、タブの操作と管理のための機能だけでなく、タブの 言語 の検出、 スクリーンショット の撮影、タブのコンテンツ スクリプトとの 通信 も可能です。 ほとんどの機能を使用するのに権限は必要ありません。たとえば、新しいタブの 作成 、タブの 再読み込み 、別の URL への ナビゲーション などです。 Tabs
任意の要素から動画ストリームをキャプチャする
Element Capture API は、現在のタブのキャプチャを DOM サブツリーのキャプチャに変換するための、パフォーマンスが高く堅牢な方法です。
ウェブ バイタル拡張機能のサポート終了
Web Vitals 拡張機能と DevTools の統合が完了し、拡張機能のサポートは終了しました。
組み込み AI チャレンジの受賞者
組み込み AI チャレンジで受賞したアプリと拡張機能をご覧ください。このチャレンジでは、Chrome の Gemini Nano でできることを再考していただきました。
chrome.ttsEngine
chrome.ttsEngine API を使用して、拡張機能を使用してテキスト読み上げ(TTS)エンジンを実装します。拡張機能がこの API を使用して登録されている場合、拡張機能または Chrome アプリが tts API を使用して音声を生成すると、発話される音声とその他のパラメータを含むイベントが拡張機能に届きます。拡張機能は、利用可能なウェブ技術を使用して音声を合成して出力し、呼び出し元の関数にイベントを返してステータスを報告できます。
chrome.cookies
chrome.cookies API を使用して、Cookie のクエリと変更を行い、Cookie が変更されたときに通知を受け取ります。 cookies API を使用するには、マニフェストで「cookies」権限と、Cookie にアクセスするホストの ホスト権限 を宣言する必要があります。次に例を示します。 パーティショニングされた Cookie を使用すると、特定の Cookie をトップレベル フレームのオリジンに対してキー付けする必要があることをサイトがマークできます。つまり、サイト
chrome.ttsEngine
chrome.ttsEngine API を使用して、拡張機能を使用してテキスト読み上げ(TTS)エンジンを実装します。拡張機能がこの API を使用して登録されている場合、拡張機能または Chrome アプリが tts API を使用して音声を生成すると、読み上げ対象の音声とその他のパラメータを含むイベントが拡張機能に届きます。拡張機能は、利用可能なウェブ技術を使用して音声を合成して出力し、呼び出し元の関数にイベントを送り返してステータスを報告できます。
chrome.cookies
chrome.cookies API を使用して、Cookie のクエリと変更を行い、Cookie が変更されたときに通知を受け取ります。 cookies API を使用するには、マニフェストで "cookies" 権限と、Cookie にアクセスするホストの ホスト権限 を宣言します。次に例を示します。 パーティショニングされた Cookie を使用すると、特定の Cookie をトップレベル フレームのオリジンに対してキー付けする必要があることをサイトがマークできます。たとえば、サイト A
chrome.appviewTag
appview タグを使用して、他の Chrome アプリを Chrome アプリ内に埋め込みます( 使用方法 をご覧ください)。 オブジェクト 埋め込まれるアプリが埋め込みの決定を行う際に使用できる、デベロッパーが指定するオプションのデータ。 文字列 埋め込みリクエストを送信したアプリの ID。 void 埋め込みリクエストを許可します。 allow 関数は次のようになります。 文字列 埋め込むコンテンツを指定します。 void 埋め込みリクエストを防止します。 deny
XFO または CSP を使用してクリックジャッキを軽減する
クリックジャッキング攻撃の軽減の詳細
WebGPU の新機能(Chrome 132)
テクスチャビューの使用、32 ビット浮動小数点テクスチャのブレンド、GPUDevice の adapterInfo 属性、無効な形式でキャンバス コンテキストを構成する JavaScript エラーの発生、テクスチャのサンプラー制限のフィルタリング、拡張サブグループの試験運用版、デベロッパー エクスペリエンスの向上、16 ビット正規化テクスチャ形式の試験運用版のサポートなど。
Chrome 拡張機能の新機能
Chrome 拡張機能のプラットフォーム、ドキュメント、ポリシーに関する最近の変更
WebGPU
ガイド、デモ、最新ニュースで WebGPU について学ぶことができます
Chrome でビルドする
Chrome の最新の Stable リリースと Beta リリースに含まれる内容を確認する。
お支払い
Chrome で最新の Payment API を使用する方法を学ぶ
プライバシーとセキュリティ
Chrome のプライバシーとセキュリティの機能をご確認ください。
アプリ
基盤となるオペレーティング システムにアクセスしやすいエクスペリエンスを構築するために、このテクノロジーが非推奨になりました。
操り人形師
ヘッドレス Chrome または Chromium を制御するための高レベル API を提供する Node.js ライブラリ
Android でのウェブ
Android でウェブアプリを開発するための Chrome の機能についてご紹介します。
chrome.certificateProvider
この API を使用して証明書をプラットフォームに公開すると、そのプラットフォームはこの証明書を TLS 認証に使用できます。 この API を使用してクライアント証明書を ChromeOS に公開する一般的な手順は次のとおりです。 実際の手順は異なる場合があります。たとえば、証明書を自動的に選択するエンタープライズ ポリシーが使用されている場合、ユーザーに証明書の選択を求めるメッセージは表示されません( AutoSelectCertificateForUrls と ユーザー向けの Chrome
chrome.extension
chrome.extension API には、任意の拡張機能ページで使用できるユーティリティがあります。拡張機能とそのコンテンツ スクリプト間、または拡張機能間でのメッセージ交換がサポートされています。詳しくは、 メッセージ パススルー をご覧ください。 拡張機能ビューのタイプ。 「タブ」 「popup」 シークレット タブ内で実行されるコンテンツ スクリプトと、シークレット プロセス内で実行される拡張機能ページの場合、true です。後者は、incognito_behavior
灯台
Lighthouse を使用してウェブ パフォーマンス監査を自動化する
パフォーマンス
Chrome のパフォーマンス ツールを使ってウェブ アプリケーションのパフォーマンスを最適化しましょう。
chrome.system.display
system.display API を使用してディスプレイのメタデータをクエリします。 ディスプレイが検出され、システムで使用されているかどうかを示す列挙型。ディスプレイがシステムで検出されない場合(接続が切断されている場合や、スリープ モードのため接続が切断されていると見なされる場合など)は、ディスプレイは「非アクティブ」と見なされます。この状態は、すべてのディスプレイが切断されたときに既存のディスプレイを保持するために使用されます。 「active」 「無効」 数値
chrome.system.display
system.display API を使用してディスプレイのメタデータをクエリします。 ディスプレイが検出され、システムで使用されているかどうかを示す列挙型。ディスプレイがシステムで検出されない場合(接続が切断されている場合や、スリープ モードのため接続が切断されていると見なされる場合など)は、ディスプレイは「非アクティブ」と見なされます。この状態は、すべてのディスプレイが切断されたときに既存のディスプレイを保持するために使用されます。 「active」 「無効」 数値
chrome.action
chrome.action API を使用して、Google Chrome ツールバーの拡張機能のアイコンを制御します。 この API を使用するには、次のキーを マニフェスト で宣言する必要があります。 chrome.action API を使用するには、 "manifest_version" を 3 に指定し、 マニフェスト ファイル に "action" キーを含めます。 "action"
ブラウザのサポート
カスタムタブ機能と利用可能なブラウザの概要。
ID
ウェブ認証など、Chrome の ID 機能について説明します。
chrome.commands
commands API を使用して、拡張機能でアクションをトリガーするキーボード ショートカットを追加します。たとえば、ブラウザ アクションを開くアクションや、拡張機能にコマンドを送信するアクションなどです。 この API を使用するには、次のキーを マニフェスト で宣言する必要があります。 Commands API を使用すると、拡張機能のデベロッパーは特定のコマンドを定義し、デフォルトのキーの組み合わせにバインドできます。拡張機能が受け入れる各コマンドは、 拡張機能のマニフェスト で
リモート デバッグの使用時はオペレーションがサポートされません
一部の 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.extension
chrome.extension API には、任意の拡張機能ページで使用できるユーティリティがあります。拡張機能とそのコンテンツ スクリプト間、または拡張機能間でのメッセージ交換がサポートされています。詳しくは、 メッセージ パススルー をご覧ください。 拡張機能ビューのタイプ。 「タブ」 「popup」 シークレット タブ内で実行されるコンテンツ スクリプトと、シークレット プロセス内で実行される拡張機能ページの場合、true です。後者は、incognito_behavior
パフォーマンス ログ
ChromeDriver はパフォーマンス ロギングをサポートしています。これにより、ドメイン「タイムライン」、「ネットワーク」、「ページ」のイベントと、指定したトレース カテゴリの トレースデータ を取得できます。 パフォーマンス ロギングはデフォルトでは有効になっていません。そのため、新しいセッションを作成するときに有効にする必要があります。 有効にすると、パフォーマンス ログはタイムライン、ネットワーク、ページのイベントを収集します。トレースを有効にしたり、パフォーマンス
ChromeDriver のクラッシュ
ChromeDriver のクラッシュを診断して修正するには、いくつかの方法があります。これは ChromeDriver のクラッシュの場合のみです。これは Chrome のクラッシュや終了とは異なります。 Windows では、次のようなメッセージが表示されることがあります。 ChromeDriver のコントリビューターが問題の再現とデバッグに使用できる再現ケースを作成します。クラッシュが 100% 発生しなくても問題ありません。
ダウンロード
以前のバージョンの Chrome については、以下にサポートされている ChromeDriver のバージョンを示します。 適切なバージョンの ChromeDriver を選択する方法については、 バージョンの選択 のページをご覧ください。 Chrome バージョン 114 をサポート 詳細については、 リリースノート をご覧ください。 Chrome バージョン 114 をサポート 詳細については、 リリースノート をご覧ください。 Chrome バージョン 113 をサポート 詳細については、
モバイル エミュレーション
Chrome では、 Chrome DevTools でデバイスモード を有効にすることで、デスクトップ版 Chrome からモバイル デバイス上の Chrome をエミュレートできます。この機能により、ウェブ開発のスピードが向上し、デベロッパーは実際のデバイスを使用せずに、モバイル デバイスでウェブサイトがどのようにレンダリングされるかをすばやくテストできます。ChromeDriver
Android
最新の ChromeDriver のバイナリ は、さまざまなホスト プラットフォーム用の zip ファイルとしてパッケージ化されています。 以前のバージョンの ChromeDriver は、 ダウンロード から入手できます。 ChromeDriver は、 ウェブ デバッグ と JavaScript が有効になっている Android 4.4(KitKat) 以降の Chrome ブラウザ(バージョン 30 以降)と WebView ベースのアプリでのテスト実行をサポートしています。
Chrome がすぐに起動しない、またはクラッシュしない
これは、特別なテストハーネス(IDE など)または継続的ビルド システム(Jenkins など)を使用して ChromeDriver または Chrome を実行している場合によく発生します。 通常のユーザー コマンド プロンプトから、テストで使用しているのと同じ Chrome バイナリを起動してみてください。 chromedriver.log ファイルで使用されている Chrome バイナリを確認します。特別なコマンドライン スイッチや引数を Chrome
セキュリティ上の考慮事項
ChromeDriver は強力なツールであり、悪用されると有害な結果をもたらす可能性があります。ChromeDriver を使用する際は、次の推奨事項に従ってください。
Canary
ChromeDriver Canary には、最新の ChromeDriver 機能が含まれています。新しいバイナリは 1 日に複数回ビルドされ、利用可能になります。 デベロッパーとアーリー アドプター向けに設計されているため、完全に機能しなくなることがあります。 M115 以降、Canary を含むリリース チャンネルごとの最新の Chrome + ChromeDriver リリースは、Chrome for Testing
キーボードのサポート
現在、ChromeDriver は、米国のキーボードが構成されているシステムのみをサポートしています。 ChromeDriver はこの状態を検出すると、次のことをログに記録します。 米国のキーボードを使用している場合、 sendKeys コマンドまたは TypeElement コマンドの実行中にキーが失われることがあります。 回避策として、QWERTY レイアウトの米国キーボードをシステム構成に追加することをおすすめします。これにより、ChromeDriver
自動入力の実践: 実際の分析情報
Chrome の調査によると、自動入力を使用するユーザーはフォームの入力が速く、放棄率が低くなります。
カスタマイズ可能な選択リクエストの回答から得られた結果(デベロッパー フィードバック フォーム)
貴重な時間を割いてフィードバックを送信していただき、詳細を確認して標準の策定にご協力いただきありがとうございました。
組み込みの AI を使ってみる
AI を組み込んだ機能やアプリケーションの構築を開始するための要件について学びます。
AI を組み込んだ言語検出
Language Detector API は、ウェブでブラウザ内で利用できる組み込みの言語検出機能です。
アロケーション タイムライン ツールの使用方法
割り当てタイムライン ツールを使用して、適切にガベージ コレクションされず、メモリを保持し続けているオブジェクトを見つけます。
合成されていないアニメーションを避ける
Lighthouse の監査に合格する方法(「複合化されていないアニメーションを避ける」)
DevTools でパフォーマンス トレースを記録して分析する
DevTools でパフォーマンス トレースを記録して分析する。
Chrome 132 の DevTools の新機能
Gemini を使用してネットワーク リクエスト、ソースファイル、パフォーマンス トレースをデバッグしたり、AI チャット履歴を表示したりできます。
CSS ラップ 2024
Chrome DevRel チームとスケートボードに乗った Chrome Dino と一緒に、2024 年に Chrome とウェブ プラットフォーム向けにリリースされた最新の CSS を学びましょう。
メモリの用語
このセクションでは、メモリ分析で使用される一般的な用語について説明します。これらの用語は、さまざまな言語のさまざまなメモリ プロファイリング ツールに適用できます。
拡張機能のストレージを表示、編集する
[拡張機能のストレージ] パネルで拡張機能のストレージを表示、編集する方法。
chrome.syncFileSystem
chrome.syncFileSystem API を使用して、Google ドライブにデータを保存して同期します。この API は、Google ドライブに保存されている任意のユーザー ドキュメントにアクセスするためのものではありません。オフラインとキャッシュに使用するためのアプリ固有の同期可能なストレージを提供するため、異なるクライアント間で同じデータを使用できます。この API の使用方法については、 データを管理する をご覧ください。 "last_write_win" 「manual」
chrome.bluetoothSocket
chrome.bluetoothSocket API を使用して、RFCOMM 接続と L2CAP 接続を使用して Bluetooth デバイスとデータを送受信します。 この API を使用するには、次のキーを マニフェスト で宣言する必要があります。 「system_error」 システムエラーが発生し、接続を復元できない可能性があります。 「not_listening」 ソケットがリッスンしていません。 AcceptError エラーの原因を示すエラーコード。 文字列 エラー メッセージ。
chrome.browser
chrome.browser API を使用すると、現在のアプリと Chrome プロファイルに関連付けられている Chrome ブラウザを操作できます。 文字列 新しいタブが最初に開かれたときに移動する URL。 現在のアプリケーションと Chrome プロファイルに関連付けられたブラウザ ウィンドウで新しいタブが開きます。Chrome プロファイルのブラウザ ウィンドウが開いていない場合は、新しいタブを作成する前に新しいウィンドウが開きます。 OpenTabOptions
chrome.socket
chrome.socket API を使用して、TCP 接続と UDP 接続を使用してネットワークでデータを送受信します。 注: Chrome 33 以降、この API は非推奨となり、 sockets.udp 、 sockets.tcp 、 sockets.tcpServer API に置き換えられます。 数値 number(省略可) 受け入れられたソケットの ID。 数値 新しく作成されたソケットの ID。 文字列 使用可能な IPv4/6 アドレス。 文字列
chrome.bluetooth
chrome.bluetooth API を使用して Bluetooth デバイスに接続します。すべての関数は、chrome.runtime.lastError を介してエラーを報告します。 この API を使用するには、次のキーを マニフェスト で宣言する必要があります。 文字列 アダプタのアドレス(XX:XX:XX:XX:XX:XX の形式)。 ブール値 アダプタが使用可能かどうか(有効かどうか)を示します。 ブール値 アダプターが現在検出中かどうかを示します。 文字列
chrome.bluetoothLowEnergy
chrome.bluetoothLowEnergy API は、 汎用属性プロファイル(GATT) を使用して Bluetooth Smart(低エネルギー)デバイスと通信するために使用されます。 この API を使用するには、次のキーを マニフェスト で宣言する必要があります。 ManufacturerData [] 省略可 広告データの [メーカー固有のデータ] フィールドに含めるメーカー固有のデータのリスト。 ServiceData [] 省略可 広告データの [サービスデータ]
chrome.mdns
chrome.mdns API を使用して、mDNS 経由でサービスを検出します。これは、NSD 仕様の機能のサブセットで構成されています(http://www.w3.org/TR/discovery-api/)。 文字列 mDNS アドバタイズ サービスの IP アドレス。 string[] mDNS でアドバタイズされるサービスのメタデータ。 文字列 mDNS でアドバタイズされたサービスの host:port ペア。 文字列 mDNS でアドバタイズされるサービスのサービス名。
chrome.serial
chrome.serial API を使用して、シリアルポートに接続されたデバイスの読み取りと書き込みを行います。 number(省略可) ConnectionOptions.bitrate をご覧ください。このフィールドは、標準以外のビットレートを使用している場合や、基盤となるデバイスのクエリ中にエラーが発生した場合は、省略されるか不正確になることがあります。 数値 ConnectionOptions.bufferSize を見る 数値 シリアルポート接続の ID。 ブール値(省略可)
chrome.webviewTag
webview タグを使用すると、ネットワーク経由でウェブからライブ コンテンツを積極的に読み込み、Chrome アプリに埋め込むことができます。アプリは webview の外観を制御し、ウェブ コンテンツを操作したり、埋め込まれたウェブページ内でナビゲーションを開始したり、そのページ内で発生したエラーイベントに対応したりできます( 使用方法 を参照)。 clearData によって削除されるデータを決定するオプション。 number(省略可)
chrome.fontSettings
chrome.fontSettings API を使用すると、Chrome のフォント設定を管理できます。 Font Settings API を使用するには、 拡張機能マニフェスト で "fontSettings" 権限を宣言する必要があります。次に例を示します。 Chrome では、一部のフォント設定を特定の汎用フォント ファミリーと言語スクリプトに依存させることができます。たとえば、サンセリフ体簡体中国語に使用されるフォントは、セリフ体日本語に使用されるフォントと異なる場合があります。
chrome.usb
chrome.usb API を使用して、接続された USB デバイスを操作できます。この API を使用すると、アプリのコンテキストから USB 操作にアクセスできます。この API を使用すると、アプリはハードウェア デバイスのドライバとして機能します。この API によって生成されたエラーは、 runtime.lastError を設定し、関数の通常のコールバックを実行することによって報告されます。この場合、コールバックの通常のパラメータは未定義になります。 ブール値
Prompt API
Chrome 拡張機能の Prompt API の無限の可能性をご紹介します。
拡張機能と AI
AI を使用して拡張機能を開発する方法
強力な HSTS ポリシーを使用する
強力な HTTP Strict Transport Security(HSTS)ポリシーの構成の詳細
[パフォーマンス分析情報] パネルのサポート終了
試験運用版の [パフォーマンス分析情報] パネルは 2025 年 1 月に削除され、[パフォーマンス] パネル自体に新しい分析情報が追加されます。
Chrome DevTools
AI アシスタントに関する最新情報やユースケースをご確認ください
chrome.documentScan
chrome.documentScan API を使用すると、接続されているドキュメント スキャナから画像を検出、取得できます。
chrome.desktopCapture
Desktop Capture API は、画面、個々のウィンドウ、個々のタブのコンテンツをキャプチャします。 chooseDesktopMedia() で使用されるデスクトップ メディアソースのセットを定義するために使用される列挙型。 「screen」 「window」 「タブ」 「audio」 SelfCapturePreferenceEnum をミラーリングします。 "include" 「除外」 SystemAudioPreferenceEnum をミラーリングします。 "include"
chrome.dns
DNS 解決には chrome.dns API を使用します。 この API を使用するには、 manifest で "dns" 権限を宣言する必要があります。 次のコードは resolve() を呼び出して、 example.com の IP アドレスを取得します。 service-worker.js: 文字列(省略可) IP アドレスのリテラルを表す文字列。resultCode が成功を示す場合にのみ指定します。 数値 結果コード。0 は成功を示します。 指定されたホスト名または IP
chrome.declarativeContent
chrome.declarativeContent API を使用すると、ページのコンテンツの読み取り権限を必要とせず、ページのコンテンツに応じた操作を行うことができます。 Declarative Content API を使用すると、 ホスト権限 を追加したり、 コンテンツ スクリプト を挿入したりすることなく、ウェブページの URL に応じて、または CSS セレクタがページ上の要素と一致する場合に、拡張機能のアクションを有効にできます。 activeTab
chrome.system.storage
chrome.system.storage API を使用してストレージ デバイスの情報をクエリし、取り外し可能なストレージ デバイスが接続または切断されたときに通知します。 「success」 取り外しコマンドが成功しました。アプリケーションは、デバイスを取り外すようユーザーにプロンプトを表示できます。 "in_use" デバイスが別のアプリによって使用されています。取り出しが成功しませんでした。他のアプリがデバイスの使用を終了するまで、デバイスを取り外さないでください。
chrome.contextMenus
chrome.contextMenus API を使用して、Google Chrome のコンテキスト メニューにアイテムを追加します。コンテキスト メニューの追加を適用するオブジェクトの種類(画像、ハイパーリンク、ページなど)を選択できます。 API を使用するには、拡張機能のマニフェストで "contextMenus" 権限を宣言する必要があります。また、メニュー項目の横に表示する 16 x 16 ピクセルのアイコンを指定する必要があります。次に例を示します。 コンテキスト メニュー
chrome.audio
chrome.audio API は、ユーザーがシステムに接続されているオーディオ デバイスに関する情報を取得し、制御できるようにするために提供されています。この API は現在、ChromeOS のキオスクモードでのみ使用できます。 文字列 デバイス名。 DeviceType 端末のタイプ。 文字列 ユーザー フレンドリーな名前(「USB マイク」など)。 文字列 音声デバイスの一意の識別子。 ブール値 これが現在アクティブなデバイスである場合、true になります。 数値
chrome.alarms
chrome.alarms API を使用して、定期的に、または将来の特定の時刻にコードを実行するようにスケジュールします。 chrome.alarms API を使用するには、 manifest で "alarms" 権限を宣言します。 信頼性の高い動作を確保するには、API の動作を理解することが役立ちます。
自動入力
ブラウザとデベロッパーは、ユーザーがデータをすばやく入力し、データを再入力しなくて済むようにすることができます。
CrUX ツール
CrUX ツールに関する技術ドキュメント。
chrome.declarativeNetRequest
chrome.declarativeNetRequest API は、宣言型ルールを指定してネットワーク リクエストをブロックまたは変更するために使用されます。これにより、拡張機能はネットワーク リクエストをインターセプトしてコンテンツを表示することなく、リクエストを変更できるため、プライバシーが保護されます。 「 declarativeNetRequest 」権限と「 declarativeNetRequestWithHostAccess
chrome.devtools.panels
chrome.devtools.panels API を使用して、拡張機能をデベロッパー ツール ウィンドウの UI に統合します。独自のパネルを作成したり、既存のパネルにアクセスしたり、サイドバーを追加したりできます。 各拡張機能パネルとサイドバーは、個別の HTML ページとして表示されます。デベロッパー ツール ウィンドウに表示されるすべての拡張機能ページは、 chrome.devtools API のすべての部分と、他のすべての拡張機能 API にアクセスできます。
chrome.fileBrowserHandler
chrome.fileBrowserHandler API を使用すると、ChromeOS ファイル ブラウザを拡張できます。たとえば、ウェブサイトにユーザーがファイルをアップロードできるようにする場合にこの API を使用できます。 ChromeOS ファイル ブラウザは、ユーザーが Alt+Shift+M キーを押すか、SD カード、USB キー、外部ドライブ、デジタル カメラなどの外部ストレージ デバイスを接続すると表示されます。ファイル
chrome.readingList
chrome.readingList API を使用して、 リーディング リスト のアイテムを読み取り、変更します。 Reading List API を使用するには、拡張機能の マニフェスト ファイルに "readingList" 権限を追加します。 manifest.json: Chrome のサイドパネルにはリーディング リストが表示されます。ウェブページを保存して、後で読む、またはオフラインで読むことができる。 Reading List API
WebGPU の今後
最新の GPU for the Web ワーキング グループ ミーティングで議論された、新しい AI とレンダリング機能について学びます。
動画のユーザー補助機能が Gemini API デベロッパー コンペティションのウェブ賞を受賞
Gemini API デベロッパー コンペティションのウェブ アワードに ViddyScribe が選ばれました。動画の音声による説明を生成することで、ウェブ上の動画をよりアクセスしやすくする方法について、Gemini を例に説明しました。
新しい拡張機能メニューのテスト開始に備えて拡張機能を準備する
新しい拡張機能メニューに対応するよう拡張機能を準備する方法。
パスキー
より簡単かつ安全なパスワードの置き換え。
chrome.networking.onc
chrome.networking.onc API は、ネットワーク接続(モバイル、イーサネット、VPN、Wi-Fi)の構成に使用されます。この API は、自動起動された ChromeOS キオスク セッションで使用できます。 ネットワーク接続の構成は、 Open Network Configuration(ONC) 仕様に従って指定します。 注: ほとんどの辞書プロパティと列挙型の値では、JavaScript の lowerCamelCase 表記法ではなく、ONC 仕様に一致するように
パフォーマンス パネルで直接トレースにアノテーションを付ける
DevTools の新しいアノテーション機能を使用してパフォーマンス トレースをよりわかりやすくする方法を学びます。
Translator API オリジン トライアルに参加する
ローカル AI モデルを使用して、ブラウザでテキストをリアルタイムで翻訳します。ユーザーは母国語で投稿できるようになりました。
パフォーマンスの AI アシスタンス
AI を活用したパフォーマンス プロファイルの把握
Chrome 132 ベータ版
Chrome に搭載される最新機能について学びます。
AI によるクライアントサイド翻訳
Translator API を使用して、グローバルなカスタマー サポートを強化する。
AI アシスタント パネル
AI を活用してウェブサイトの仕組みを理解する
組み込みの AI
組み込みの AI は、センシティブ データを保護してレイテンシを改善しながら、パワフルなモデルをユーザーに提供できる最新のサービスです。
ソースの AI アシスタンス
AI を活用してウェブサイトのリソースを把握する
ネットワークの AI アシスタンス
AI を活用してウェブサイトのネットワーク トラフィックを把握する
パソコン版 Chrome のパスキーの Signal API
パソコン版 Chrome のパスキーの Signal API の導入
Chrome 拡張機能の Prompt API オリジン トライアルに参加する
Chrome 拡張機能の Prompt API オリジン トライアルに参加して、Chrome で Gemini Nano にアクセスします。
Chrome 131
CSS ハイライトの継承の変更、details 要素の CSS スタイルの追加、ページ マージン ボックスによる印刷レイアウトの簡素化など。
Chrome 131 の新機能
Chrome 131 のリリースが開始されました。詳細要素の CSS スタイル設定の追加、ページ マージン ボックスによる印刷レイアウトの簡素化など、さまざまな機能が追加されています。
Summarizer API オリジン トライアルに参加する
オリジン トライアルに参加して、ユーザーは長い記事や複雑なドキュメント、さらにはチャットでの活発な会話から、簡潔で洞察力に富んだ要約を作成できます。
Signal API を使用して、パスキーとサーバー上の認証情報の整合性を保つ
WebAuthn Signal API を使用すると、信頼できる当事者は既存の認証情報の状態をパスキー プロバイダに通知できるため、パスキーがサーバー上の認証情報と整合するようになります。
組み込みの AI による要約
長い記事、複雑なドキュメント、活発なチャット会話から、簡潔で洞察に富んだ要約を抽出します。
CSS と UI
タイポグラフィ、色、レイアウトなどのトピックに関するリソースをご覧ください。
マニフェスト - サンドボックス
警告: バージョン 57 以降の Chrome では、サンドボックス化されたページ内に外部ウェブ コンテンツ(埋め込まれたフレームやスクリプトを含む)を配置できなくなります。代わりに WebView を使用してください。 サンドボックス化された一意のオリジンで提供されるアプリまたは拡張機能のページのコレクションを定義します。必要に応じて、それらで使用するコンテンツ セキュリティ ポリシーも定義します。サンドボックスには次の 2 つの意味があります。
ストレージ領域のマニフェスト
local ストレージ領域と sync ストレージ領域とは異なり、 managed ストレージ領域では構造を JSON スキーマ として宣言する必要があり、Chrome によって厳密に検証されます。このスキーマは、 "storage" マニフェスト キーの "managed_schema" プロパティで指定されたファイルに保存し、アプリでサポートされているエンタープライズ ポリシーを宣言する必要があります。
マニフェスト - 要件
アプリまたは拡張機能に必要なテクノロジー。Chrome ウェブストアなどのホスティング サイトでは、このリストを使用して、ユーザーがパソコンで動作しないアプリや拡張機能をインストールしないように促す場合があります。現在サポートされている要件には「3D」と「プラグイン」があります。今後、他の要件チェックが追加される可能性があります。 「3D」要件は、GPU ハードウェア アクセラレーションを示します。「webgl」の要件は WebGL API を指します。Chrome の 3D
オリジン トライアルを使ってみる
ウェブ プラットフォームの新機能または試験運用版の機能をテストします。機能をすべてのユーザーに公開する前に、ウェブ標準コミュニティに機能のユーザビリティ、実用性、有効性についてのフィードバックを提供する。
メモリの問題を解決する
Chrome と DevTools を使用して、メモリリーク、メモリの肥大化、頻繁なガベージ コレクションなど、ページのパフォーマンスに影響するメモリの問題を見つける方法について説明します。
WebGPU の新機能(Chrome 131)
WGSL、GPUCanvasContext getConfiguration()、点と線のプリミティブのクリップ距離には、深度バイアス、サブグループ用のインクルーシブ スキャン組み込み関数、マルチ描画間接の試験運用版サポート、シェーダー モジュールのコンパイル オプションの厳密な計算、GPUAdapter requestAdapterInfo() の削除などがあってはなりません。
スタイル設定のその他のオプション(<詳細>)
新しい ::details-content 疑似要素を使用して、表示タイプを設定したり、展開と閉じを切り替える部分のコンテナにスタイルを適用したりできるようになりました。
メモリパネルの概要
メモリ割り当てに関する詳細な分析情報を取得し、低レベルのメモリの問題を調査して、ガベージ コレクションを管理します。
シームレスな認証情報の共有により、ユーザーのログインがスムーズになる
シームレスな認証情報共有を使用すると、ユーザーが Android アプリとウェブサイトで同じ認証情報を使用してログインできることをパスワード マネージャーに安全に通知できます。
DevTools のカスタマイズ
Chrome DevTools をカスタマイズする方法のリスト。テーマ、配置、パネルの順序、言語などを変更できます。
バッジのリファレンス
さまざまなオーバーレイを切り替え、バッジを使用して DOM ツリー ナビゲーションを高速化できます。
[パフォーマンス] パネルで Core Web Vitals のリアルタイム指標をモニタリングする
[パフォーマンス] パネルで Core Web Vitals の指標をリアルタイムでモニタリングする。
CSS を使用して印刷するときにウェブページの余白にコンテンツを追加する
ウェブページの印刷時にカスタムのヘッダーとフッターを作成する。
DevTools の新機能(Chrome 131)
Gemini で CSS をデバッグし、検出結果にアノテーションを付け、[パフォーマンス] パネルで分析情報を取得し、過度のレイアウト シフトや合成されていないアニメーションなどを検出します。
ユーザー(手書き入力)を認識する
手書き入力認識 API を使用すると、ウェブ アプリケーションで高度な手書き入力認識サービスを使用して、手書き入力のテキストをリアルタイムで認識できます。
WebGPU: トラブルシューティングのヒントと修正
Chrome ブラウザで WebGPU が無効になっている、または動作しない理由をご確認ください。
Chrome から --headless=old を削除
Chrome 132 では、古いヘッドレス モードが削除されました。Chrome ヘッドレス シェルまたは新しいヘッドレス モードに移行します。
ランタイム パフォーマンスを分析する
Chrome DevTools でランタイム パフォーマンスを評価する方法について説明します。
DevTools の新しいスクロール バッジ: スクロール可能な要素をすばやく見つける
DevTools の新しいスクロール バッジによって、スクロール可能な要素のデバッグがどのように簡素化されるか(およびその作成方法)について説明します。
DevTools の AI アシスタンスでおすすめすべき 5 つのこと
DevTools の新しい AI アシスタント パネルの楽しいユースケースについて学びます
Cache-Control: no-store の bfcache の有効化
Chrome では、安全に Cache-Control: no-store を使用しているページで bfcache の使用を許可するように変更されます。デベロッパーの皆様への影響をご確認ください。
Chrome ヘッドレス モード
Chrome のヘッドレス モードは、Chrome の通常のヘッドフル モードに近づけることで、デベロッパーにとってさらに便利になりました。
組み込みの AI API
組み込みの AI は、センシティブ データを保護してレイテンシを改善しながら、パワフルなモデルをユーザーに提供できる最新のサービスです。
Chrome 131 ベータ版
Chrome の最新ベータ版に追加される機能をご確認ください。
API リファレンス
Chrome 拡張機能で利用できるすべての API の完全なリファレンス。これには、サポートが終了した Chrome アプリ プラットフォーム用の API や、ベータ版および開発中の API が含まれます。
スタイル設定における AI アシスタント
DevTools の AI を使用してウェブサイトのスタイル設定がどのように行われるかを理解する。
WebGPU の新機能(Chrome 130)
デュアルソース ブレンディング、Metal でのシェーダーのコンパイル時間の改善、GPUAdapter requestAdapterInfo() のサポート終了など。
Chrome 130 の新機能
Chrome 130 のリリースが開始されました。ドキュメントのピクチャー イン ピクチャーでは、ピクチャー イン ピクチャー ウィンドウをより細かく制御できます。CSS ネスト宣言により、厄介なエッジケースを修正できます。また、複数行に分割された要素のデコレーションをどのように動作させるかを指定できます。Chrome 130 のデベロッパー向け新機能について、Pete LePage が詳しく説明しています。
Chrome 130
Chrome 130 のリリースが開始されました。ドキュメントのピクチャー イン ピクチャーでは、ピクチャー イン ピクチャー ウィンドウをより細かく制御できます。CSS のネストされた宣言では、厄介なエッジケースを修正できます。要素の装飾が複数行に分割された場合の動作を指定することもできます。他にも多くの機能があります。
chrome.virtualKeyboard
chrome.virtualKeyboard API は、キオスク セッションでの仮想キーボードのレイアウトと動作を構成するために使用されるキオスク専用の API です。 ブール値(省略可) 仮想キーボードで予測入力を利用できるかどうかを指定します。 ブール値(省略可) 仮想キーボードで自動修正機能を使用できるかどうかを指定します。 ブール値(省略可) 仮想キーボードで手書き入力認識を使用して入力できるかどうか。 ブール値(省略可)
chrome.clipboard
chrome.clipboard API は、ユーザーがクリップボードのデータにアクセスできるようにするためのものです。これは、オープンウェブの代替手段が利用可能になるまで、chromeos プラットフォーム アプリに対する一時的なソリューションです。2017 年第 4 四半期には、オープンウェブ ソリューションが利用可能になり次第非推奨となります。 文字列 追加データ項目の内容。 type が「textPlain」の場合は書式なしテキストの文字列またはマークアップ文字列( type
長いアニメーション フレーム API
Long Tasks API の次期イテレーションで、アトリビューションによってフレーム更新の遅延を測定できる Long Animation Frames API(LoAF)について学びます。
AI イノベーション
[AI イノベーション] タブのリファレンス。
ネットワーク アクティビティを検査する
Chrome DevTools の最も一般的なネットワーク関連機能に関するチュートリアルです。
Box-decoration-break プロパティ(Chrome 130)
Chrome 130 では、接頭辞のない box-decoration-break が完全にサポートされています。
Chrome 拡張機能の今後の予定(2024 年 10 月)
Chrome 拡張機能の最近の変更の概要と、デベロッパーが期待できる今後の拡張機能の魅力的な機能について説明します。
ネイティブ クライアント
コンパイルされた C / C++ コードをブラウザで実行するためのサンドボックス。サポートを終了しました。
プライベート ネットワーク アクセスの保留
プライベート ネットワーク アクセス(PNA)のロールアウトは保留中です。
CSS 選択のスタイル設定の継承の変更
Chrome 134 では、CSS ハイライトの継承に変更が加えられます。
Translation API が早期プレビュー版で利用可能に
Translation API が、組み込み AI 早期プレビュー プログラムの参加者にご利用いただけるようになりました。
CSS anchor positioning API
アンカー ポジショニング API を使用して、要素を相互に配置します。
Chrome DevTools での予測を把握する: 難しい理由とその改善方法
例外がキャッチされるかどうかを DevTools デバッガが予測する方法を学びます。
Google Chrome 組み込み AI チャレンジに参加する
Chrome の Gemini Nano でできることを再考する「組み込み AI チャレンジ」を開催します。
WebAuthn: 認証システムをエミュレートする
Chrome DevTools で、認証システムをエミュレートして WebAuthn をデバッグします。
Chrome ウェブストア デベロッパー ダッシュボードのモバイル エクスペリエンスを改善
このたび、Chrome ウェブストア デベロッパー ダッシュボードの UI を変更し、レスポンシブ性とモバイル フレンドリー性を高めました。これにより、店舗掲載情報のパフォーマンスのモニタリング、掲載情報の変更、店舗の拡張機能の管理がより便利でアクセスしやすくなることを願っています。 すべてのグラフと分析ページが更新され、レスポンシブ性が向上しました。これにより、モバイル デバイスでの拡張機能のストア掲載情報のパフォーマンスをより適切に確認できるようになりました。
検索: 読み込まれたすべてのリソースからテキストを検索する
検索パネルを使用して、読み込まれたすべてのリソースからテキストを検索できます。
機能リファレンス
Chrome DevTools の [レコーダー] パネルの機能に関する総合的なリファレンス。
Chrome 130 の DevTools の新機能
パフォーマンス パネルで移動できるライブ指標とパンくずリストの推奨事項、ネットワーク フィルタの刷新、HAR エクスポートのクリーンアップなど。
対象範囲: 使用していない JavaScript と CSS を見つける
Chrome DevTools で使用していない JavaScript や CSS コードを見つけて分析する方法
[ソース] パネルの概要
Chrome DevTools の [ソース] パネルで、ファイルの表示と編集、スニペットの作成、JavaScript のデバッグ、ワークスペースの設定を行います。
セキュリティ: セキュリティの問題を理解する
[セキュリティ] パネルを使用して、ページが HTTPS で完全に保護されていることを確認します。
シングルページ アプリケーションでの同一ドキュメント ビュー遷移
シングルページ アプリケーションで使用する同一ドキュメントのビュー遷移を使ってみましょう。
[レイヤ] パネル: ウェブサイトのレイヤを探索する
ウェブサイトを構成するレイヤを調べます。
キャッシュの解明: キャッシュの調査、クリア、無効化
DevTools を使用してキャッシュを検査し、トラブルシューティングします。
Web Vitals 拡張機能が DevTools に追加されました
ウェブバイタル拡張機能は Chrome DevTools のパフォーマンス パネルと統合され、2025 年 1 月にスタンドアロン サポートが終了します。
コンソールの概要
Chrome DevTools コンソールの主な用途は、メッセージの記録と JavaScript の実行です。
ウェブアプリ マニフェスト ID プロパティを使用して一意に識別する PWA
オプションの `id` プロパティは、ウェブアプリ マニフェストの仕様に含まれており、PWA に使用する識別子を明示的に定義できます。マニフェストに id プロパティを追加すると、start_url またはマニフェストの場所への依存関係が削除され、今後更新できるようになります。
Chrome で Google パスワード マネージャーのパスキーをパソコンと Android 間で同期
パソコン版 Chrome では、まもなく Google パスワード マネージャー(GPM)でパスキーを作成して、Android に加えてこれらのプラットフォーム間で同期できるようになります。
Writer API と Rewrite API の早期プレビューを公開
EPP の参加者は、Chrome の書き込み API と書き換え API を使用してプロトタイプを作成できるようになりました。
フィードバックが必要: CSS 組積造をどのように定義すればよいでしょうか?
提案されている 2 つの組積造の仕様の比較。
Chrome 130 ベータ版
最新の Chrome ベータ版の機能と変更点を使ってサイトをテストします。
パフォーマンス パネル: ウェブサイトのパフォーマンスを分析する
ウェブサイトの読み込みと実行時のパフォーマンスを分析する
Chrome 試験運用版: プロセスの共有
プロセス共有の試験運用と、Chrome DevTools のデベロッパー エクスペリエンスへの影響。
WebGPU の新機能(Chrome 129)
キャンバス トーン マッピング モードでの HDR サポート、サブグループのサポートの拡大など。
Chrome 129 の新機能
Chrome 129 のリリースが開始されました。長いタスクでは、パフォーマンスを向上させるために、固有のサイズで要素をアニメーション化できます。また、アンカー配置の構文にもいくつかの変更があります。Chrome 129 のデベロッパー向けの新機能について、Pete LePage が詳しく説明しています。
高さまでアニメーション化: auto;(および他の固有のサイズ設定キーワード)を CSS 内で指定
「interpolate-size」と「calc-size()」を使用して、固有のサイズ設定キーワードとの間でアニメーション化する
ローカルと実際のユーザーの Core Web Vitals のパフォーマンスを DevTools でモニタリングする
Chrome DevTools の [Performance] パネルでは、ローカルの Core Web Vitals のパフォーマンスをモニタリングし、フィールドの実際のユーザーデータと比較する新しい方法が導入されています。
Web Serial の Bluetooth RFCOMM の更新
Web Serial で Bluetooth RFCOMM シリアルポートが使用可能になったことを検出する方法について学びます。
デベロッパー フィードバックのリクエスト: カスタマイズ可能な選択
カスタマイズ可能な新しい選択機能をいち早くご紹介します。
画面をフリーズして消える要素を検査する
DOM 内の要素をフリーズして、DevTools で調査できるようにします。
リリースノート
CrUX データセットの最新の変更に関する詳細。
「動画」だけでなく、すべての要素でピクチャー イン ピクチャーで使用可能
常時オンのウィンドウに任意の HTML コンテンツを表示します。
Keyboard Lock と Pointer Lock API には、Chrome 131 の権限が必要です
Keyboard Lock API を使用すると、デベロッパーは、インタラクティブなウェブサイト、ゲーム、リモート デスクトップやアプリのストリーミングなど、さまざまなユースケースで没入感のあるフルスクリーン エクスペリエンスを提供できます。これは、ウェブサイトがホスト オペレーティング システムで許可されているすべての鍵を使用できるようにすることで実現します。 Pointer Lock API を使用すると、デスクトップ アプリケーションでポインタ アイコンを非表示にして、マウスの動きを 3D
マニフェスト - Nacl モジュール
MIME タイプから各タイプを処理するネイティブ クライアント モジュールへの 1 つ以上のマッピング。対象 次のスニペットの太字のコードは、Native Client モジュールをコンテンツとして登録しています。 OpenOffice スプレッドシートの MIME タイプの MIME タイプを拒否します。 「path」の値拡張機能内のネイティブ クライアント マニフェスト(.nmf ファイル)の場所 されます。ネイティブ クライアントと.nmf ファイルについて詳しくは、 ネイティブ
externally_connectable
externally_connectable マニフェスト プロパティは、許可する拡張機能、アプリ、ウェブページを宣言します。 runtime.connect と runtime.sendMessage 経由でアプリに接続します。 メッセージの受け渡しに関するチュートリアルについては、 クロス拡張機能とアプリ メッセージング と メッセージの送信をご覧ください。 ウェブページから削除します アプリのマニフェストで externally_connectable
マニフェスト - アイコン
拡張機能、アプリ、テーマを表す 1 つ以上のアイコン。常に 128×128 のサイズを アイコンインストール中や Chrome ウェブストアで使用されます。拡張機能では 拡張機能の管理ページ(chrome://extensions)で使用されている 48x48 アイコン。また、 拡張機能のページのファビコンとして使用する 16x16 のアイコンを指定する。 一般に、アイコンは PNG 形式にする必要があります。PNG が最も透過性をサポートしているためです。。 BMP、GIF、ICO、JPEG
マニフェストのバージョン
パッケージに必要なマニフェスト ファイル形式のバージョンを指定する 1 つの整数。Chrome 以降 ここに記載されている形式を使用するには、 2 (引用符なし)を指定する 必要があります 。 ドキュメント: Chrome 18 でマニフェスト バージョン 1 は 非推奨 になりました。バージョン 2 はまだ 必須 ではありませんが、 近い将来、非推奨のパッケージを使用するパッケージの 指定します。移行の準備が整っていない拡張機能、アプリケーション、テーマは、 Chrome 18
Memory Inspector: ArrayBuffer、TypedArray、DataView、Wasm Memory を検査します。
Memory Inspector を使用すると、JavaScript の ArrayBuffer、TypedArray、DataView や、C++ Wasm アプリの WebAssembly.Memory を検査できます。
変更: HTML、CSS、JavaScript の変更をトラッキングする
HTML、CSS、JavaScript に対する変更のトラッキング
Chrome のウェブサイト間でシームレスな認証情報共有が可能に
同じアカウント管理バックエンドを共有する複数のドメインを使用している場合、Digital Asset Links を使用して認証情報をシームレスに共有することもできます。これにより、ユーザーは認証情報を一度保存し、Chrome パスワード マネージャーで関連するウェブサイトに対して提案できるようになります。
コマンド メニューでコマンドを実行する
コマンド メニューを開く方法、コマンドを実行する方法、ファイルを開く方法、その他のアクションを表示する方法などに関するガイドです。
Digital Credentials API のオリジン トライアルのご紹介
Digital Credentials API のオリジン トライアルは、Chrome 128 以降開始されます。Digital Credentials API は、運転免許証やデジタル ウォレットに保存されている国民識別カードなどのデジタル認証情報を通じて、ウェブサイトがユーザーに関する検証可能な情報を選択的にリクエストできるようにする新しいウェブ プラットフォーム API です。
アンカー ポジショニングの構文の変更
注意が必要なアンカー ポジショニング API に関連する変更。
DevTools の新機能(Chrome 129)
[パフォーマンス] > [検索リクエスト]ネットワーク、自動入力を使用した住所フォームでのテストデータの使用、レコーダー パネルで Firefox 用 Puppeteer にエクスポートしたり、[Performance] パネルでモニタリングでパフォーマンスの問題をひと目で把握したりできます。
ウェブ プラットフォーム
Chrome の仕組み、オリジン トライアルに参加して、あらゆる場所で Chrome を使って構築しましょう。
Chrome で WebAuthn のヒント、関連オリジン リクエスト、JSON シリアル化を導入
Chrome の WebAuthn で、ヒント、関連オリジン リクエスト、JSON シリアル化を使用できるようになりました
機能と ChromeOptions
機能とは、ChromeDriver セッションのカスタマイズと構成に使用できるオプションです。
Language Detection API の早期プレビュー版が利用可能
EPP の参加者は、Chrome の言語検出 API を使用してプロトタイプを作成できるようになりました。
chrome.declarativeNetRequest
chrome.declarativeNetRequest API は、宣言型ルールを指定することで、ネットワーク リクエストをブロックまたは変更する場合に使用します。これにより拡張機能は、リクエストをインターセプトしてコンテンツを閲覧することなく、ネットワーク リクエストを変更できるため、プライバシーが強化されます。 declarativeNetRequestFeedback host_permissions 上記の権限に加えて、特定の種類のルールセット(具体的には静的ルールセット)では、
Lighthouse: ウェブサイトの速度を最適化する
Chrome Lighthouse でウェブサイトの読み込み時間を短縮しましょう。
chrome.sidePanel
chrome.sidePanel API を使用すると、ウェブページのメイン コンテンツとともにブラウザのサイドパネルでコンテンツをホストできます。 Side Panel API を使用するには、拡張機能の マニフェスト ファイルに "sidePanel" 権限を追加します。 manifest.json: Side Panel API を使用すると、拡張機能でサイドパネルに独自の UI を表示できるようになり、ユーザーのブラウジング ジャーニーを補完する永続的なエクスペリエンスを実現できます。
chrome.webRequest
chrome.webRequest API を使用して、トラフィックをモニタリングおよび分析し、処理中のリクエストをインターセプト、ブロック、変更します。 ウェブ リクエストを使用するには、 拡張機能のマニフェスト で "webRequest" 権限を宣言する必要があります API と必要な ホスト権限 。サブリソース リクエストをインターセプトするには、 拡張機能は、リクエストされた URL とそのイニシエータの両方にアクセスできる必要があります。例: webRequestBlocking
chrome.omnibox
アドレスバー API を使用すると、Google Chrome のアドレスバーにキーワードを登録できます。アドレスバーはアドレスバーとも呼ばれます。 ユーザーが拡張機能のキーワードを入力すると、拡張機能のみの操作を開始する。 あります。キー入力はそれぞれ拡張機能に送信され、ユーザーはそれに対する候補を提示できます。 候補は、さまざまな方法で豊富な形式にできます。ユーザーが候補を承認すると 拡張機能が通知を受け、処理される可能性があります。 アドレスバー API を使用するには、 マニフェスト に
chrome.pageAction
chrome.pageAction API を使用して、Google Chrome のメインツールバーのアドレスバーの右にアイコンを配置します。ページ操作とは、現在のページで実行できる操作のうち、すべてのページには適用されない操作のことです。無効な場合、ページ操作はグレー表示されます。 例: 次のスクリーンショットの RSS アイコンは、RSS を購読できるページ アクションを表しています。 現在のページのフィードです 非表示のページ操作はグレー表示されます。たとえば、下の RSS
chrome.windows
chrome.windows API を使用してブラウザ ウィンドウを操作します。この API を使用すると、ブラウザのウィンドウの作成、変更、並べ替えを行うことができます。 リクエストされると、 windows.Window には tabs.Tab オブジェクトの配列が含まれます。必要なこと url にアクセスする必要がある場合は、 マニフェスト で "tabs" 権限を宣言します。 pendingUrl 、 title 、または tabs.Tab の favIconUrl プロパティ。例:
chrome.i18n
chrome.i18n インフラストラクチャを使用して、アプリまたは拡張機能全体に国際化を実装します。 ユーザーに表示されるすべての文字列を、 messages.json という名前のファイルに配置する必要があります。毎回 新しい言語 / 地域を追加する場合は、 _locales/_localeCode_ という名前のディレクトリにメッセージ ファイルを追加します。 localeCode は、英語の場合は en などのコードです。 英語( en
chrome.browserAction
ブラウザ操作を使用して、Google Chrome のメイン ツールバーのアドレスバーの右にアイコンを配置します。ブラウザのアクションには、 アイコン に加えて、 ツールチップ 、 バッジ 、 ポップアップ を表示できます。 次の図では、アドレスバーの右側にある色とりどりの正方形が、 できます。アイコンの下にポップアップが表示されます。 常にアクティブとは限らないアイコンを作成するには、ブラウザではなく ページ アクション を使用します できます。 次のように、 拡張機能のマニフェスト
chrome.webRequest
chrome.webRequest API を使用して、トラフィックをモニタリングおよび分析し、処理中のリクエストをインターセプト、ブロック、変更します。 ウェブ リクエストを使用するには、 拡張機能のマニフェスト で "webRequest" 権限を宣言する必要があります API と必要な ホスト権限 。サブリソース リクエストをインターセプトするには、 拡張機能は、リクエストされた URL とそのイニシエータの両方にアクセスできる必要があります。例: Chrome 108 以降では、
chrome.fileBrowserHandler
chrome.fileBrowserHandler API を使用して ChromeOS のファイル ブラウザを拡張します。たとえば、この API を使用して、ユーザーがウェブサイトにファイルをアップロードできるようにすることができます。 Alt+Shift+M キーを押すか、SD カード、USB キー、外部ドライブ、デジタルカメラなどの外部ストレージ デバイスを接続すると、ChromeOS ファイル ブラウザが表示されます。ファイル
chrome.devtools.panels
chrome.devtools.panels API を使用して拡張機能をデベロッパー ツールのウィンドウ UI に統合し、独自のパネルの作成、既存のパネルへのアクセス、サイドバーの追加を行います。 この API を使用するには、次のキーを マニフェストで 宣言する必要があります。 デベロッパー ツール API の使用方法の概要については、 DevTools API の概要 をご覧ください。 拡張機能パネルとサイドバーはそれぞれ個別の HTML
マニフェスト ファイル形式
すべてのアプリには manifest.json という名前の JSON 形式のマニフェスト ファイルがあります。このファイルには、 情報です。 次のコードは、アプリでサポートされているマニフェスト フィールドと、 説明していきます。
chrome.system.cpu
system.cpu API を使用して CPU メタデータをクエリします。 文字列 プロセッサのアーキテクチャ名。 string[] プロセッサの機能の一部を示す機能コードのセット。現在サポートされているコードは、「mmx」、「sse」、「sse2」、「sse3」、「ssse3」、「sse4_1」、「sse4_2」、「avx」です。 文字列 プロセッサのモデル名。 数値 論理プロセッサの数。 ProcessorInfo [] 各論理プロセッサに関する情報。 数値 [] CPU
chrome.enterprise.networkingAttributes
chrome.enterprise.networkingAttributes API を使用して、現在のネットワークに関する情報を読み取ります。注: この API は、企業ポリシーによって自動インストールされた拡張機能でのみ使用できます。 文字列(省略可) デバイスのローカル IPv4 アドレス(構成されていない場合は未定義)。 文字列(省略可) デバイスのローカル IPv6 アドレス(構成されていない場合は未定義)。 文字列 デバイスの MAC アドレス。 デバイスのデフォルト
chrome.gcm
chrome.gcm を使用して、アプリと拡張機能が Firebase Cloud Messaging (FCM)でメッセージを送受信できるようにします。 メッセージ内のすべての Key-Value ペアの最大サイズ(バイト単位)。 4096 アプリケーションを FCM に登録します。登録 ID は callback によって返されます。同じ senderIds のリストを指定して register が再度呼び出されると、同じ登録 ID が返されます。 string[]
chrome.instanceID
chrome.instanceID を使用してインスタンス ID サービスにアクセスします。 アプリ インスタンス ID をリセットし、関連付けられているすべてのトークンを取り消します。 関数(省略可) callback パラメータは次のようになります。 約束 <void> Promise は Manifest V3 以降でのみサポートされています。他のプラットフォームではコールバックを使用する必要があります。 付与されたトークンを取り消します。 オブジェクト deleteToken
chrome.wallpaper
ChromeOS の壁紙を変更するには chrome.wallpaper API を使用します。 「壁紙」を宣言する必要があります使用するための権限をアプリの マニフェスト に記載 使用できます。例: たとえば、壁紙を https://example.com/a_file.png さん、 chrome.wallpaper.setWallpaper を呼び出すことができます できます。 サポートされている壁紙レイアウト。 "ストレッチ" 「CENTER」 "CENTER_CROPPED" 指定した
chrome.history
chrome.history API を使用して、アクセスしたページのブラウザの記録を操作します。ブラウザの履歴では、URL の追加、削除、照会を行うことができます。履歴ページを独自のバージョンでオーバーライドするには、 ページをオーバーライドする をご覧ください。 「履歴」を申告する必要がある 拡張機能のマニフェスト で History API の使用を許可する必要があります。次に例を示します。 History API は 遷移タイプ を使用して、ブラウザが特定の URL
chrome.loginState
chrome.loginState API を使用して、ログイン状態を読み取り、モニタリングします。 "SIGNIN_PROFILE" 拡張機能がログイン プロファイルにあることを指定します。 "USER_PROFILE" 拡張機能がユーザー プロフィールにあることを指定します。 "UNKNOWN" セッション状態が不明であることを指定します。 "IN_OOBE_SCREEN" ユーザーが開封確認画面にいることを指定します。 "IN_LOGIN_SCREEN"
chrome.input.ime
chrome.input.ime API を使用して、ChromeOS のカスタム IME を実装します。これにより、拡張機能でキー入力の処理、構成の設定、候補ウィンドウの管理を行うことができます。 「input」パラメータを宣言し、 拡張機能のマニフェスト で input.ime API の使用権限を宣言する必要があります。次に例を示します。 次のコードは、入力された文字を大文字に変換する IME を作成します。 アシスト ウィンドウ内のボタンの ID。 「元に戻す」
chrome.printingMetrics
chrome.printingMetrics API を使用して、印刷の使用状況に関するデータを取得します。 "BLACK_AND_WHITE" モノクロ モードが使用されたことを示します。 "COLOR" カラーモードが使用されたことを示します。 "ONE_SIDED" 片面印刷が使用されたことを示します。 &quot;TWO_SIDED_LONG_EDGE&quot; 両面印刷(長辺をめくる)を指定します。
chrome.fontSettings
chrome.fontSettings API を使用して Chrome のフォント設定を管理します。 Font Settings API を使用するには、「fontSettings」クラスを宣言し、拡張機能の権限に 使用します 。例: Chrome で一部のフォント設定を特定の汎用フォント ファミリーと言語に依存可能に 使用できます。たとえば、sans Serif の簡体字中国語に使用するフォントは、フォントと異なる場合があります。 使用します。 Chrome でサポートされている汎用フォント
chrome.platformKeys
chrome.platformKeys API を使用して、プラットフォームが管理するクライアント証明書にアクセスします。ユーザーまたはポリシーが権限を付与した場合、拡張機能はその証明書をカスタム認証プロトコルで使用できます。例:これにより、サードパーティの VPN でプラットフォームが管理する証明書を使用できるようになります( chrome.vpnProvider を参照)。 ArrayBuffer[] サーバーで許可されている認証局の識別名のリスト。各エントリは、DER でエンコードされた
chrome.devtools.inspectedWindow
chrome.devtools.inspectedWindow API を使用して、検査対象ウィンドウを操作します。検査対象ページのタブ ID の取得、検査対象ウィンドウのコンテキストにおけるコードの評価、ページの再読み込み、ページ内のリソースリストの取得を行います。 この API を使用するには、次のキーを マニフェストで 宣言する必要があります。 chrome.devtools.inspectedWindow を使用して検査対象ウィンドウを操作し、対象のウィンドウのタブ ID
chrome.processes
chrome.processes API を使用してブラウザのプロセスとやり取りします。 数値 キャッシュで使用される部分(バイト単位)。 数値 キャッシュのサイズ(バイト単位)。 数値(省略可) プロセスのすべてのスレッドによる、1 つの CPU コアの合計使用率として表される、プロセスの CPU 使用率の最新の測定値。これにより、ゼロから CpuInfo.numOfProcessors*100 までの値が得られます。この値は、マルチスレッド プロセスでは 100%
chrome.tts
chrome.tts API を使用して、合成テキスト読み上げ(TTS)を再生します。関連する ttsEngine API もご覧ください。この API を使用すると、拡張機能で音声エンジンを実装できます。 Chrome は、Windows(SAPI 5 を使用)、Mac OS X、ChromeOS で音声をネイティブにサポートしています。 音声合成機能を使用できます。どのプラットフォームでも 自身を代替音声エンジンとして登録する拡張機能をインストールします。 拡張機能から speak()
chrome.enterprise.hardwarePlatform
chrome.enterprise.hardwarePlatform API を使用して、ブラウザが実行されているハードウェア プラットフォームのメーカーとモデルを取得します。注: この API は、企業ポリシーによってインストールされた拡張機能でのみ使用できます。 文字列 文字列 ハードウェア プラットフォームのメーカーとモデルを取得し、拡張機能が承認されている場合は callback を介して返します。 関数(省略可) callback パラメータは次のようになります。
chrome.identity
chrome.identity API を使用して OAuth2 アクセス トークンを取得します。 文字列 アカウントの一意の識別子。この ID は、アカウントが存続期間中に変更されることはありません。 SYNC メイン アカウントで同期が有効になっていることを指定します。 "ANY" メイン アカウントが存在することを指定します(存在する場合)。 文字列 [] 省略可 拡張機能に付与されている OAuth2 スコープのリスト。 文字列(省略可) リクエストに関連付けられている特定のトークン。
chrome.devtools.recorder
chrome.devtools.recorder API を使用して、DevTools の [Recorder] パネルをカスタマイズします。 デベロッパー ツール API の使用方法の概要については、 DevTools API の概要 をご覧ください。 devtools.recorder API は、Chrome DevTools の [ Recorder パネル ] を拡張できるプレビュー機能です。 Chrome M105 以降では、エクスポート機能を拡張できます。Chrome M112
chrome.dom
chrome.dom API を使用して拡張機能用の特別な DOM API にアクセスする 指定された要素でホストされている、開いているシャドウルート、または閉じられたシャドウルートを取得します。この要素が Shadow ルートにアタッチされていない場合は、null が返されます。 HTMLElement オブジェクト https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot をご覧ください。
chrome.tabCapture
chrome.tabCapture API を使用して、タブのメディア ストリームを操作します。 chrome.tabCapture API を使用すると、動画とファイルを含む MediaStream にアクセスできます。 読み上げることもできますこれは、ユーザーが拡張機能を呼び出した後にのみ呼び出すことができます。 拡張機能の 操作ボタン をクリックする。これは Pod の IP アドレス activeTab 権限。 タブで MediaStream
chrome.webNavigation
chrome.webNavigation API を使用して、処理中のナビゲーション リクエストのステータスに関する通知を受け取ります。 すべての chrome.webNavigation メソッドとイベントで、「webNavigation」を宣言する必要があります。権限 拡張機能のマニフェスト 内で指定します。例: ナビゲーションが正常に完了すると、イベントは次の順序で発生します。 プロセス中にエラーが発生すると、 onErrorOccurred イベントが発生します。特定の
chrome.management
chrome.management API を使用すると、インストール済みのアプリと拡張機能を管理できます。 「management」として 拡張機能のマニフェスト で管理権限を使用するための権限を API例: management.getPermissionWarningsByManifest 、 management.uninstallSelf 、 management.getSelf には管理権限は必要ありません。 アイテムが無効になっている理由。 「不明」
chrome.topSites
chrome.topSites API を使用して、新しいタブページに表示される上位のサイト(よくアクセスするサイト)にアクセスします。ユーザーがカスタマイズしたショートカットは含まれません。 「topSites」をこの API を使用するには、 拡張機能のマニフェスト に権限を設定する必要があります。 この API を試すには、 chrome-extension-samples から topSites API の例 をインストールしてください。 できます。
chrome.search
デフォルトのプロバイダ経由で検索するには、 chrome.search API を使用します。 "CURRENT_TAB" 通話タブまたはアクティブなブラウザのタブに検索結果を表示することを指定します。 "NEW_TAB" 検索結果を新しいタブで表示するように指定します。 "NEW_WINDOW" 検索結果を新しいウィンドウで表示するように指定します。 Disposition オプション 検索結果を表示する場所。 CURRENT_TAB がデフォルトです。 数値(省略可)
chrome.idle
chrome.idle API を使用して、マシンのアイドル状態の変化を検出します。 「アイドル状態」であることを宣言する必要があります。アイドル状態の API を使用する権限を付与する必要があります。次に例を示します。 「有効」 "アイドル状態" 「ロック中」 アイドル状態のときに画面が自動的にロックされるまでの時間を秒単位で取得します。画面が自動的にロックされない場合は、期間 0 を返します。現在、ChromeOS でのみサポートされています。 関数(省略可) callback
chrome.types
chrome.types API には Chrome 用の型宣言が含まれています。 ChromeSetting プロトタイプは、共通の関数セット( get() 、 set() 、 clear() )を提供します。 また、Chrome ブラウザの設定にはイベント パブリッシャー( onChange )も使用できます。 プロキシ設定 例 は、これらの関数がどのように使用されるかを示しています。 Chrome では、次の 3 種類のブラウザ設定の範囲を区別しています。 Chrome
chrome.enterprise.deviceAttributes
デバイスの属性を読み取るには、 chrome.enterprise.deviceAttributes API を使用します。注: この API は、企業ポリシーによって自動インストールされた拡張機能でのみ使用できます。 管理者が注釈を付けたビジネスを取得します。現在のユーザーが関連付けられていない場合、または管理者によって位置情報のアノテーションが設定されていない場合は、空の文字列が返されます。 関数(省略可) callback パラメータは次のようになります。 文字列
chrome.windows
chrome.windows API を使用してブラウザ ウィンドウを操作します。この API を使用すると、ブラウザのウィンドウの作成、変更、並べ替えを行うことができます。 リクエストされると、 windows.Window には tabs.Tab オブジェクトの配列が含まれます。必要なこと url にアクセスする必要がある場合は、 マニフェスト で "tabs" 権限を宣言します。 pendingUrl 、 title 、または tabs.Tab の favIconUrl プロパティ。例:
chrome.power
chrome.power API を使用して、システムの電源管理機能をオーバーライドします。 デフォルトでは、オペレーティング システムはユーザーが非アクティブになると画面が暗くなり、最終的に ありませんPower API を使用すると、アプリや拡張機能でシステムを起動したままにすることができます。 この API を使用すると、電源管理を無効にする レベル を指定できます。 "system"
chrome.pageCapture
chrome.pageCapture API を使用してタブを MHTML として保存します。 MHTML は、ほとんどのブラウザでサポートされている 標準形式 です。ページを 1 つのファイルにカプセル化し そのすべてのリソース(CSS ファイル、画像など)が含まれます。 なお、セキュリティ上の理由から、MHTML ファイルはファイル システムからのみ読み込むことができます。また、 メインフレームでのみ読み込むことができます。 「pageCapture」をpageCapture
chrome.systemLog
chrome.systemLog API を使用して拡張機能から Chrome システムログを記録します。 文字列 新しいログレコードを追加します。 MessageOptions ロギングのオプション。 関数(省略可) callback パラメータは次のようになります。 約束 <void> Promise は Manifest V3 以降でのみサポートされています。他のプラットフォームではコールバックを使用する必要があります。
chrome.privacy
chrome.privacy API を使用して、ユーザーのプライバシーに影響する可能性がある Chrome の機能の使用を管理します。この API は、Chrome の構成を取得、設定するために、 API タイプの ChromeSetting プロトタイプ を使用します。 「プライバシー」を申告する必要があります拡張機能の マニフェスト で API の使用権限を付与する必要があります。次に例を示します。 Chrome 設定の現在値を簡単に読み取ることができます。まず、 次に、そのオブジェクトの
chrome.fileSystemProvider
chrome.fileSystemProvider API を使用してファイル システムを作成し、ChromeOS のファイル マネージャーからこのシステムにアクセスできるようにします。 「fileSystemProvider」を権限と、 拡張機能のマニフェスト のセクション(File System Provider API を使用するための設定)例: file_system_provider セクションは、次のように宣言する必要があります。 ファイルアプリは、関連する UI
chrome.notifications
chrome.notifications API を使用すると、テンプレートを使用してリッチ通知を作成し、システムトレイにその通知を表示できます。 文字列(省略可) Mac OS X ユーザーにはボタン アイコンが表示されません。 文字列 文字列 このアイテムに関する補足情報。 文字列 リスト通知の 1 つのアイテムのタイトル。 文字列(省略可) アプリアイコンのマスクは、Mac OS X ユーザーには表示されません。 アプリアイコン マスクの URL。URL には iconUrl
chrome.devtools.network
デベロッパー ツールの [Network] パネルに表示されるネットワーク リクエストに関する情報を取得するには、 chrome.devtools.network API を使用します。 この API を使用するには、次のキーを マニフェストで 宣言する必要があります。 デベロッパー ツール API の使用方法の概要については、 DevTools API の概要 をご覧ください。 ネットワーク リクエスト情報は、HTTP アーカイブ形式( HAR )で表されます。説明 HAR
chrome.downloads
この権限により 警告がトリガーされます chrome.downloads API を使用して、ダウンロードをプログラムで開始、モニタリング、操作、検索します。 この API を使用するには、 拡張機能のマニフェスト で "downloads" 権限を宣言する必要があります。 chrome.downloads API の簡単な使用例は、 examples/api/downloads にあります。 されます。その他の例とソースコードの表示については、 サンプル をご覧ください。 ブール値(省略可)
chrome.vpnProvider
chrome.vpnProvider API を使用して VPN クライアントを実装します。 vpnProvider の一般的な使用方法は次のとおりです。 createConfig メソッドを使用して VPN 構成を作成します。VPN 構成は永続的なエントリで、ネイティブの ChromeOS UI でユーザーに表示されます。ユーザーはリストから VPN 構成を選択して、接続または接続解除できます。 イベント onPlatformMessage 、 onPacketReceived 、
chrome.proxy
chrome.proxy API を使用して Chrome のプロキシ設定を管理します。この API は、 API タイプの ChromeSetting プロトタイプ を利用してプロキシ構成を取得、設定します。 「プロキシ」を宣言する必要があります。 拡張機能のマニフェスト でプロキシ設定を使用するための権限 API例: プロキシ設定は、 proxy.ProxyConfig オブジェクトで定義されます。Chrome のプロキシ設定によっては 設定には、 proxy.ProxyRules または
chrome.printerProvider
chrome.printerProvider API は、印刷マネージャーが使用するイベントを公開して、拡張機能で制御されるプリンタへのクエリ、拡張機能の機能の照会、これらのプリンタへの印刷ジョブの送信を行います。 文字列(省略可) 人が読める形式のプリンタの説明。 文字列 固有のプリンタ ID。 文字列 人間が読める形式のプリンタ名。 onPrintRequested イベントに応答して返されるエラーコード。 "OK" オペレーションが正常に完了したことを示します。 "FAILED"
chrome.events
chrome.events 名前空間には、重要なことが起きたときに通知するためにイベントをディスパッチする API で使用される一般的なタイプが含まれています。 Event は、何か興味深いことが起きたときに通知を受け取ることができるオブジェクトです。こちらが chrome.alarms.onAlarm イベントを使用して、アラームが経過するたびに通知されるようにする例: 例に示すように、 addListener() を使用して通知の登録を行います。この引数は、 addListener()
chrome.events
chrome.events 名前空間には、重要なことが起きたときに通知するためにイベントをディスパッチする API で使用される一般的なタイプが含まれています。 Event は、何か興味深いことが起きたときに通知を受け取ることができるオブジェクトです。こちらが chrome.alarms.onAlarm イベントを使用して、アラームが経過するたびに通知されるようにする例: 例に示すように、 addListener() を使用して通知の登録を行います。この引数は、 addListener()
chrome.idle
chrome.idle API を使用して、マシンのアイドル状態の変化を検出します。 アイドル状態の API を使用するには、拡張機能のマニフェストで "idle" 権限を宣言する必要があります。次に例を示します。 「有効」 "アイドル状態" 「ロック中」 アイドル状態のときに画面が自動的にロックされるまでの時間を秒単位で取得します。画面が自動的にロックされない場合は、期間 0 を返します。現在、ChromeOS でのみサポートされています。 関数(省略可) callback
chrome.offscreen
offscreen API を使用して、画面外ドキュメントを作成、管理します。 Offscreen API を使用するには、 拡張機能のマニフェスト で "offscreen" 権限を宣言します。例: Service Worker には DOM アクセスはなく、多くのウェブサイトには、 コンテンツ スクリプトの機能を制限する。Offscreen API を使用すると、拡張機能で DOM を使用できるようになります。 新しいウィンドウを開いたり、ユーザー
chrome.pageCapture
chrome.pageCapture API を使用してタブを MHTML として保存します。 MHTML は、ほとんどのブラウザでサポートされている 標準形式 です。ページを 1 つのファイルにカプセル化し そのすべてのリソース(CSS ファイル、画像など)が含まれます。 なお、セキュリティ上の理由から、MHTML ファイルはファイル システムからのみ読み込むことができます。また、 メインフレームでのみ読み込むことができます。 「pageCapture」をpageCapture
chrome.fileSystemProvider
chrome.fileSystemProvider API を使用してファイル システムを作成し、ChromeOS のファイル マネージャーからこのシステムにアクセスできるようにします。 「fileSystemProvider」を権限と、 拡張機能のマニフェスト のセクション(File System Provider API を使用するための設定)例: file_system_provider セクションは、次のように宣言する必要があります。 ファイルアプリは、関連する UI
chrome.dom
chrome.dom API を使用して拡張機能用の特別な DOM API にアクセスする 指定された要素でホストされている、開いているシャドウルート、または閉じられたシャドウルートを取得します。この要素が Shadow ルートにアタッチされていない場合は、null が返されます。 HTMLElement オブジェクト https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot をご覧ください。
chrome.debugger
chrome.debugger API は、Chrome の リモート デバッグ プロトコル の代替トランスポートとして機能します。 chrome.debugger を使用して 1 つ以上のタブにアタッチし、ネットワーク インタラクションの測定、JavaScript のデバッグ、DOM と CSS の変更などを行います。 Debuggee プロパティの tabId を使用して、 sendCommand でタブをターゲットにし、 onEvent コールバックからの tabId
chrome.management
chrome.management API を使用すると、インストール済みのアプリと拡張機能を管理できます。 「management」として 拡張機能のマニフェスト で管理権限を使用するための権限を API例: management.getPermissionWarningsByManifest() 、 management.uninstallSelf() 、 management.getSelf() には管理権限は必要ありません。 アイテムが無効になっている理由。 「不明」
chrome.omnibox
アドレスバー API を使用すると、Google Chrome のアドレスバーにキーワードを登録できます。アドレスバーはアドレスバーとも呼ばれます。 ユーザーが拡張機能のキーワードを入力すると、拡張機能のみの操作を開始する。 あります。キー入力はそれぞれ拡張機能に送信され、ユーザーはそれに対する候補を提示できます。 候補は、さまざまな方法で豊富な形式にできます。ユーザーが候補を承認すると 拡張機能が通知を受け、処理される可能性があります。 この API を使用するには、次のキーを マニフェストで
chrome.downloads
chrome.downloads API を使用して、ダウンロードをプログラムで開始、モニタリング、操作、検索します。 この API を使用するには、 拡張機能のマニフェスト で "downloads" 権限を宣言する必要があります。 chrome.downloads API の簡単な使用例は、 examples/api/downloads にあります。 されます。その他の例とソースコードの表示については、 サンプル をご覧ください。 ブール値(省略可) ブール値(省略可)
chrome.history
chrome.history API を使用して、アクセスしたページのブラウザの記録を操作します。ブラウザの履歴では、URL の追加、削除、照会を行うことができます。履歴ページを独自のバージョンでオーバーライドするには、 ページをオーバーライドする をご覧ください。 ユーザーのブラウザ履歴を操作するには、History API を使用します。 History API を使用するには、 拡張機能のマニフェスト で "history" 権限を宣言します。次に例を示します。 History API
chrome.notifications
chrome.notifications API を使用すると、テンプレートを使用してリッチ通知を作成し、システムトレイにその通知を表示できます。 文字列(省略可) Mac OS X ユーザーにはボタン アイコンが表示されません。 文字列 文字列 このアイテムに関する補足情報。 文字列 リスト通知の 1 つのアイテムのタイトル。 文字列(省略可) アプリアイコンのマスクは、Mac OS X ユーザーには表示されません。 アプリアイコン マスクの URL。URL には iconUrl
chrome.gcm
chrome.gcm を使用して、アプリと拡張機能が Firebase Cloud Messaging (FCM)でメッセージを送受信できるようにします。 メッセージ内のすべての Key-Value ペアの最大サイズ(バイト単位)。 4096 アプリケーションを FCM に登録します。登録 ID は callback によって返されます。同じ senderIds のリストを指定して register が再度呼び出されると、同じ登録 ID が返されます。 string[]
chrome.instanceID
chrome.instanceID を使用してインスタンス ID サービスにアクセスします。 アプリ インスタンス ID をリセットし、関連付けられているすべてのトークンを取り消します。 関数(省略可) callback パラメータは次のようになります。 約束 <void> Promise は Manifest V3 以降でサポートされていますが、 下位互換性が確保されます同じ関数呼び出しで両方を使用することはできません。「 Promise
chrome.loginState
chrome.loginState API を使用して、ログイン状態を読み取り、モニタリングします。 "SIGNIN_PROFILE" 拡張機能がログイン プロファイルにあることを指定します。 "USER_PROFILE" 拡張機能がユーザー プロフィールにあることを指定します。 "UNKNOWN" セッション状態が不明であることを指定します。 "IN_OOBE_SCREEN" ユーザーが開封確認画面にいることを指定します。 "IN_LOGIN_SCREEN"
chrome.platformKeys
chrome.platformKeys API を使用して、プラットフォームが管理するクライアント証明書にアクセスします。ユーザーまたはポリシーが権限を付与した場合、拡張機能はその証明書をカスタム認証プロトコルで使用できます。例:これにより、サードパーティの VPN でプラットフォームが管理する証明書を使用できるようになります( chrome.vpnProvider を参照)。 ArrayBuffer[] サーバーで許可されている認証局の識別名のリスト。各エントリは、DER でエンコードされた
chrome.identity
chrome.identity API を使用して OAuth2 アクセス トークンを取得します。 文字列 アカウントの一意の識別子。この ID は、アカウントが存続期間中に変更されることはありません。 SYNC メイン アカウントで同期が有効になっていることを指定します。 "ANY" メイン アカウントが存在することを指定します(存在する場合)。 文字列 [] 省略可 拡張機能に付与されている OAuth2 スコープのリスト。 文字列(省略可) リクエストに関連付けられている特定のトークン。
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 を設定して関数の通常のコールバックを実行することによって報告されます。この場合、コールバックの通常のパラメータは未定義になります。 数値(省略可)
chrome.sockets.tcpServer
chrome.sockets.tcpServer API を使用して、TCP 接続を使用するサーバー アプリケーションを作成します。この API は、 chrome.socket API に以前あった TCP 機能よりも優先されます。 この API を使用するには、次のキーを マニフェストで 宣言する必要があります。 数値 基になるネットワーク呼び出しから返された結果コード。 数値 サーバー ソケット ID。 数値 クライアント
chrome.system.network
chrome.system.network API を使用する。 文字列 使用可能な IPv4/6 アドレス。 文字列 アダプタの基本名。*nix では、通常、"eth0"、"wlan0" などになります。 数値 プレフィックスの長さ このシステムのローカル アダプターに関する情報を取得します。 関数(省略可) callback パラメータは次のようになります。 NetworkInterface [] ネットワーク インターフェース情報を含むオブジェクトの配列。 Promise&lt;
chrome.fileSystem
chrome.fileSystem API を使用して、ユーザーのローカル ファイル システムの作成、読み取り、移動、書き込みを行います。この API により、Chrome アプリはユーザーが選択した場所に対して読み取りと書き込みを行えます。たとえば、テキスト エディタ アプリでは、この API を使用してローカル ドキュメントの読み取りと書き込みを行うことができます。すべてのエラーは、chrome.runtime.lastError を介して通知されます。 文字列(省略可)
chrome.app.window
chrome.app.window API を使用してウィンドウを作成します。ウィンドウには、タイトルバーとサイズ コントロールを備えたオプションのフレームがあります。Chrome ブラウザ ウィンドウには関連付けられていません。これらのオプションのデモについては、 ウィンドウ状態サンプル をご覧ください。 ウィンドウ JavaScript の「ウィンドウ」オブジェクトが作成されます。 文字列 ウィンドウの作成に使用された ID。 境界 ウィンドウのコンテンツの位置、サイズ、制約(ウィンドウ
chrome.mediaGalleries
chrome.mediaGalleries API を使用して、ユーザーの同意を得たうえで、ユーザーのローカル ディスクのメディア ファイル(音声、画像、動画)にアクセスします。 文字列 ブール値 文字列 変更されたギャラリーを識別します。 GalleryChangeType 変更イベントのタイプ。 &quot;contents_changed&quot; ギャラリーのコンテンツが変更されました。 "watch_dropped"
ロギング
デフォルトでは、ChromeDriver は警告/エラーのみを stderr に記録します。デバッグ時 詳細ログを有効にすると便利です。 詳細ログを有効にするには、 --verbose を chromedriver サーバーに渡します。 代わりに --log-path を渡して、ログがファイルに書き込まれるようにすることもできます。 あります。chromedriver サーバーを直接起動しない場合は、 WebDriver クライアント
ChromeDriver のスタートガイド
このページでは、ChromeDriver を使用してウェブサイトをテストする方法について説明します。 パソコン(Windows、Mac、Linux)でご利用いただけます。また、 Android スタートガイド または ChromeOS の概要 ChromeDriver は、Selenium WebDriver が Chrome を制御するために使用する独立した実行可能ファイルです。これは、WebDriver のコントリビューターのサポートのもと、Chromium
Chrome 拡張機能
Chrome 拡張機能は、パッケージ化されていても解凍してもかまいません。 パッケージ化されていない拡張機能をパッケージ化するには、 chrome://extensions の [Pack] ボタンを使用するか、 Chrome: "chrome.exe --pack-extension=C:\path\to\unpacked\extension --pack-extension-key=C:\myext.pem"
Chrome 129 ベータ版
現在のベータ版の機能について詳しく紹介するこの投稿で、Chrome の次期リリースのプレビューをご確認いただけます。
extensibility API を使用してパフォーマンス データをカスタマイズする
extensibility API を使用してパフォーマンス データをカスタマイズする
chrome.browsingData
chrome.browsingData API を使用して、ユーザーのローカル プロフィールから閲覧データを削除します。 この API を使用するには、 拡張機能のマニフェスト で "browsingData" 権限を宣言する必要があります。 この API
chrome.system.memory
chrome.system.memory API。 数値 使用可能な容量(バイト単位)。 数値 物理メモリ容量の合計(バイト単位)。 物理メモリ情報を取得します。 関数(省略可) callback パラメータは次のようになります。 MemoryInfo Promise&lt; MemoryInfo &gt; Promise は Manifest V3 以降でのみサポートされています。他のプラットフォームではコールバックを使用する必要があります。
chrome.dns
DNS 解決に chrome.dns API を使用します。 この API を使用するには、 マニフェスト で "dns" 権限を宣言する必要があります。 次のコードは、 resolve() を呼び出して example.com の IP アドレスを取得します。 service-worker.js: 文字列(省略可) IP アドレスのリテラルを表す文字列。resultCode が成功を示す場合にのみ提供されます。 数値 結果コード。0 は成功を示します。 指定されたホスト名または IP アドレス
API リファレンス
Chrome 拡張機能で利用できるすべての API の完全なリファレンス。これには、サポートが終了した Chrome アプリ プラットフォーム用の API や、ベータ版および開発中の API が含まれます。
Chrome DevTools
Chrome DevTools を使用して、ウェブ アプリケーションのデバッグと最適化を行います。
WebGPU の新機能(Chrome 128)
サブグループのテスト、線とポイントの深度バイアスの設定のサポート終了、未キャプチャ エラーの DevTools の警告の非表示(PreventDefault の場合)、WGSL が最初にサンプリングを補間する、その他。
Chrome 128 の新機能
Chrome 128 がリリースされました。改行のある Ruby 要素の表示が改善され、Promise.try で Promise チェーンの開始が簡単になり、PointerEvent インターフェースが拡張されて複数のペンを一意に識別できるようになりました。その他、他にも多くの要素があります。Chrome 128 のデベロッパー向け新機能について、Adriana Jara が詳しく解説します。
Chromium のユーザー補助のパフォーマンスを改善
Ahmed Elwasefi が Google Summer of Code を通じて Chromium コントリビューターになった経緯を語った投稿。
Chrome 128
2024 年 8 月 20 日より、Chrome 128 のロールアウトが開始されます。CSS の ruby-align プロパティや Promise.try など、多数の機能が追加されています。
WebGPU でアプリをビルドする
ウェブおよび特定のプラットフォーム向けに WebGPU を使用してアプリを構築する方法を学びます。
File System Observer API のオリジン トライアル
Chrome チームは、ファイル システムへの変更をデベロッパーに通知する新しい File System Observer API をテストしています。
メディア: メディア プレーヤー情報の表示とデバッグ
メディアパネルを使用して、ブラウザタブごとに情報を表示し、メディア プレーヤーをデバッグします。
chrome.alarms
chrome.alarms API を使用して、コードを定期的に、または将来の指定した時刻に実行するようにスケジュールします。 chrome.alarms API を使用するには、 マニフェスト で "alarms" 権限を宣言します。 以下の例は、アラームの使用方法と応答方法を示しています。この API を試すには、 chrome-extension-samples から Alarm API の例 をインストールする できます。 次の例では、拡張機能のインストール時に Service
chrome.contextMenus
chrome.contextMenus API を使用して、Google Chrome のコンテキスト メニューに項目を追加します。画像、ハイパーリンク、ページなど、コンテキスト メニューの追加を適用するオブジェクトの種類を選択できます。 コンテキスト メニューの項目は、file:// を含むドキュメント(またはドキュメント内のフレーム)に表示できます。 または chrome:// の URL を入力します。どのドキュメントにアイテムを表示するかを制御するには、 create() または
chrome.audio
chrome.audio API は、ユーザーがシステムに接続されているオーディオ機器に関する情報を取得してコントロールできるようにするために提供されます。この API は現在、ChromeOS のキオスクモードでのみ使用できます。 文字列 デバイス名。 DeviceType 端末のタイプ。 文字列 わかりやすい名前(「USB マイク」など)。 文字列 オーディオ機器の一意の識別子。 ブール値 現在アクティブなデバイスの場合は true。 数値 デバイスの音量、出力の音量、入力のゲイン。
chrome.commands
Command API を使用すると、拡張機能での操作(ブラウザの操作を開く操作や拡張機能にコマンドを送信する操作など)をトリガーするキーボード ショートカットを追加できます。 この API を使用するには、次のキーを マニフェストで 宣言する必要があります。 拡張機能のデベロッパーは Commands API を使用して特定のコマンドを定義し、それらをデフォルトにバインドできる できます。拡張機能が受け入れる各コマンドは、 拡張機能のマニフェスト 内の "commands" オブジェクト。
chrome.declarativeContent
chrome.declarativeContent API を使用すると、ページのコンテンツの読み取り権限がなくても、ページのコンテンツに応じてアクションを実行できます。 Declarative Content API を使用すると、アプリケーションの URL に応じて拡張機能のアクションを有効にできます。 また、CSS セレクタがページの要素と一致する場合に、 ホスト権限 を追加するか、 コンテンツ スクリプト を挿入します。 activeTab 権限を使用して、ユーザーが できます。
chrome.debugger
chrome.debugger API は、Chrome の リモート デバッグ プロトコル の代替トランスポートとして機能します。 chrome.debugger を使用して 1 つ以上のタブにアタッチし、ネットワーク インタラクションの測定、JavaScript のデバッグ、DOM と CSS の変更などを行います。 Debuggee プロパティの tabId を使用して、 sendCommand でタブをターゲットにし、 onEvent コールバックからの tabId
chrome.browsingData
chrome.browsingData API を使用して、ユーザーのローカル プロフィールから閲覧データを削除します。 「browsingData」を 拡張機能のマニフェスト で、この API を使用するための権限を設定する必要があります。 この API
File System Access API: ローカル ファイルへのアクセスを簡素化
File System Access API を使用すると、開発者は IDE、写真と動画のエディタ、テキスト エディタなど、ユーザーのローカル デバイス上のファイルを操作する高度なウェブアプリを作成できます。ユーザーがウェブアプリにアクセス権を付与すると、ユーザーはデバイス上のファイルやフォルダの変更を直接読み取り、保存できます。
Summarization API の早期プレビュー版が利用可能に
EPP の参加者は、Chrome で Gemini Nano の Summarization API を使用してプロトタイプを作成できるようになりました。
スクロール スナップ イベント
新しい JavaScript イベントを 2 つ導入しました。scrollSnapChange と ScrollSnap 試験
ソフト ナビゲーションの測定実験
Chrome チームは、シングルページ アプリケーションで使用されるいわゆるソフト ナビゲーションの測定精度の向上に取り組んでいます。また、新しい API をフラグの背後で使用し、サイトでもテストできるようにしています。
DevTools でスクリーンショットをキャプチャする 4 つの方法
DevTools でスクリーンショットをキャプチャする 4 つのユニークな方法を紹介します。
WebDriver BiDi を Firefox、Chrome、Puppeteer で本番環境に対応
Puppeteer 23 では、Firefox 129 以降の安定版サポートが導入され、WebDriver BiDi をベースとした Chrome と Firefox の自動化のための統合 API が提供されます。
DevTools の新機能(Chrome 128)
コンソールの分析情報をヨーロッパで公開したり、[パフォーマンス] パネルでトラックをカスタマイズするための強化されたネットワーク トラックと API を利用したりできます。
Blog
Chrome デベロッパー リレーションズ チームからの最新ニュース
Chrome の組み込みの AI 機能の試験運用版にご参加ください
組み込みの AI、Prompt API、Chrome の AI プランに関する最新情報
Android 版 Chrome のパスキー UX の更新
Android 版 Chrome に認証情報マネージャーが統合され、Android 14 以降でサードパーティのパスワード マネージャーがパスキーを提供できるようになりました
作成者が定義した CSS 名と Shadow DOM: 仕様上と実際
CSS の Shadow DOM で使用されている、作成者が定義した名前の現在の相互運用性の状況を説明します。
WebDriver BiDi による自動化が BrowserStack で利用可能に
BrowserStack が WebDriver BiDi のサポートを導入: イベント ドリブンの自動化で Selenium Grid テストを強化します。
正規表現以外の処理: Chrome DevTools の CSS 値の解析機能を強化
DevTools チームが [Styles] タブでのスタイルの表示を改善した方法をご覧ください。
Early Hints とともにサーバーの思考時間を使用してページ読み込みを高速化
重要なサブリソースに関するヒントをサーバーからブラウザに送信する方法をご確認ください。
CrUX API
CrUX API に対するリクエストを作成し、レスポンスを解析する方法について説明します。
CrUX History API
CrUX History API を使用して、過去 6 か月間の過去の CrUX の傾向をクエリする方法を学びます。
改行可能な ruby 要素と CSS ruby-align プロパティ
改行可能な ruby 要素と CSS ruby-align プロパティ
ネットワーク パネル: ネットワークの負荷とリソースを分析する
ネットワークの負荷とリソースを分析する
サンプル
Chrome 拡張機能のサンプルは GitHub で入手できます。
アプリを公開する
TODO
マニフェスト - バージョン
この拡張機能のバージョンを識別する、1 ~ 4 個のドット区切りの整数。整数には 2 つのルールが適用されます。0 ~ 65535 の範囲(両端を含む)であることと、ゼロ以外の整数を 0 で始めることはできません。たとえば、99999 と 032 はどちらも無効です。 有効なバージョンの例を次に示します。
マニフェスト - デフォルト ロケール
この拡張機能のデフォルトの文字列を含む _locales のサブディレクトリを指定します。このフィールドは、 _locales ディレクトリがある拡張機能では必須 です。 _locales ディレクトリがない拡張機能では、このフィールドは 指定されていない必要があります 。詳しくは、 多言語対応 をご覧ください。
マニフェスト - オフライン有効
アプリや拡張機能をオフラインで動作させるかどうかを指定します。Chrome でオフラインが検出されると、このフィールドが true に設定されているアプリが新しいタブページでハイライト表示されます。 Chrome 35 以降では、アプリはオフラインが有効になっているとみなされ、 "webview" 権限がリクエストされない限り、 "offline_enabled" のデフォルト値は true です。この場合、ネットワーク接続が必須であると想定され、 "offline_enabled"
マニフェスト - Chrome の最小バージョン
拡張機能、アプリ、テーマに必要な Chrome のバージョン(該当する場合)。この文字列の形式は version フィールドと同じです。
ワークボックス ストリーム
RouteHandlerCallbackOptions StreamSource | Promise< StreamSource > レスポンス ReadableStream BodyInit 複数のソース Promise を取り、それぞれを Response、ReadableStream、または BodyInit に解決できます。 順番に返された個々のストリームのデータを含む ReadableStream を公開するオブジェクトと、ストリームの終了を通知する Promise
マニフェスト - 説明
拡張機能を説明する書式なしテキスト文字列(HTML などの形式ではない、132 文字以下)。説明は、ブラウザの拡張機能管理 UI と Chrome ウェブストア の両方に適した内容にする必要があります。このフィールドにはロケール固有の文字列を指定できます。詳細については、 多言語対応 をご覧ください。
マニフェスト - キー
この値は、開発中に読み込まれる拡張機能、アプリ、テーマの一意の ID を制御するために使用できます。 適切な Key-Value を取得するには、まず.crx ファイルから拡張機能をインストールします( 拡張機能をアップロード するか、 手動でパッケージ化 する必要がある場合があります)。次に、 ユーザーデータ ディレクトリ で、 Default/Extensions/_<extensionId>_/_<versionString>_/manifest.json
マニフェスト - 名前と略称
name および short_name マニフェスト プロパティは、アプリを識別する短い書式なしテキスト文字列です。両方のフィールドにロケール固有の文字列を指定できます。詳しくは、 多言語対応 をご覧ください。 name (最大 45 文字)はアプリのプライマリ ID であり、必須フィールドです。 次の場所に表示されます。 short_name (最大 12 文字を推奨)は、アプリ名の短縮版です。これはオプションのフィールドであり、指定されていない場合は name
無効になっているウェブ機能
Chrome アプリはウェブ プラットフォームを使用していますが、ウェブ機能の一部が無効になっているか、別の方法で使用されている。これは主に、セキュリティの問題の回避とプログラミングの改善を目的としています。ウェブ プラットフォームで無効になる機能と考えられる回避策の概要を以下に示します。
Chrome 128 ベータ版
現在のベータ版の機能について詳しく紹介するこの投稿で、Chrome の次期リリースのプレビューをご確認いただけます。
Chrome 127 の新機能
Chrome 127 がリリースされました。font-size-adjust のサポートにより、Document Picture-in-Picture API、キーボードのフォーカス可能なスクロール コンテナなど、多くのユーザー アクティベーションが伝播されます。Chrome 127 のデベロッパー向け新機能について、Adriana Jara が詳しく解説します。
ユーザーが重要なアプリのインストールを Chrome でサポートする方法
Chrome の内部ユーザー調査によると、多くのユーザーはウェブアプリのインストールを重視しています。次のようなメリットがあります。 Chrome とウェブ デベロッパーが支援する方法は複数あります。たとえば、新しい ML プロモーション機能などです。この記事では、ユーザーがアプリをインストールする方法の概要について説明します。 Chrome の インストール可能条件 を満たすアプリには、Chrome デスクトップ ブラウザのアドレスバーにインストール
WebGPU の新機能(Chrome 127)
Android での OpenGL ES の試験運用版のサポート、GPUAdapter 情報属性、WebAssembly の相互運用の改善など。
Chrome 127
2024 年 7 月 23 日より、Chrome 127 のロールアウトが開始されます。CSS の font-size-adjust や、キーボードのフォーカス可能なスクロール コンテナなど、多数の機能が盛り込まれています。
読み取りフローと display: コンテンツを使用した要素に関するデベロッパー フィードバックのお願い
読み上げフローがお客様のニーズに合ったものになるよう、ぜひご協力ください。
ネットワーク機能のリファレンス
Chrome DevTools の [Network] パネルの機能に関する包括的なリファレンスです。
設定
[設定] タブのリファレンス。
レコーダー パネル: ユーザーフローを記録して測定する
ユーザーフローを分析、記録する。
ビュー遷移に関する誤解
View Transition API を検討する人が増えている今、いくつかの誤解を解くときが来ています。
Chrome 拡張機能: ポリシーの重要な更新
このお知らせでは、デベロッパー プログラム ポリシーのページを更新し、高品質のプロダクトの開発を促し、虚偽の振る舞いを防止し、ユーザーが十分な情報に基づき同意を得ることを目的にしています。
Chrome 拡張機能の変更内容
Chrome 拡張機能の最近の変更の概要と、今後リリースが予定されている拡張機能に関するデベロッパー向けのご案内です。
DevTools の新機能(Chrome 127)
Elements での CSS アンカー配置、Sources の「Never Pause Here」の拡張、新しいスクロール スナップ イベント リスナー、更新されたネットワーク スロットリング プリセットなど。
検査モード: 要素のプロパティをすばやく分析する
ウェブアプリの要素を検査する
パフォーマンス機能のリファレンス
Chrome DevTools でパフォーマンスを記録、分析するためのあらゆる方法に関するリファレンスです。
YouTube に Trusted Types を導入
YouTube は、クロスサイト スクリプティング攻撃を防ぐために Trusted Types を使用してプラットフォームのセキュリティを強化していますが、拡張機能に影響する可能性があります。
Long Animation Frame API をリリース
Long Animation Frame API(LoAF)は Chrome 123 からリリースされました。また、この新しい API を最大限に活用できるように、ツールとガイダンスも更新しました。
過度な DOM サイズの回避
DOM サイズが大きいとウェブページのパフォーマンスが低下する仕組みと、読み込み時に DOM のサイズを小さくする方法をご確認ください。
Chrome でページを事前レンダリングしてページ ナビゲーションを即時に行う
Chrome チームでは、ユーザーがアクセスする可能性の高い今後のページを完全に事前レンダリングする機能の開発に取り組んできました。
Chrome ウェブストアの舞台裏: 信頼性と安全性について質問する
Chrome ウェブストアのレビューを担当するチームと話し合いました。
ストレージ バケットでの IndexedDB の最大パフォーマンス
Chrome チームは、IndexedDB(IDB)の実装に関して、パフォーマンス関連のいくつかの改善を行いました。
ブラウザに AI モデルをキャッシュに保存する
AI を活用したアプリケーションの今後のリリースを迅速化するには、モデルデータをデバイス上に明示的にキャッシュに保存します。
WebGPU の新機能(Chrome 126)
maxTextureArrayLayers の上限の引き上げ、Vulkan バックエンドのバッファ アップロードの最適化、シェーダーのコンパイル時間の改善、送信されるコマンド バッファの一意性の確保、Dawn の更新。
新しい HTML <permission>> 要素のオリジン トライアル
Chrome チームは、ユーザーに強力な機能へのアクセスをリクエストする、新しい宣言型の HTML <権限>要素をテストしています。
Chrome 127 ベータ版
ベータ版をダウンロードすると、Chrome の最新機能をお試しいただけます。
CSS とウェブ UI の最新情報: I/O 2024 のまとめ
Google I/O 2024 での CSS とウェブ UI に関するすべてのお知らせをお読みください。
Chrome 126
Chrome 126 は 2024 年 6 月 11 日にリリースが開始されます。ドキュメント間のビュー遷移、CloseWatcher API の再有効化、Gamepad API のトリガー ランブルなど、多くの機能が追加されています。
Chrome 126 の新機能
Chrome 126 がリリースされました。ViewTransitions API でのドキュメント間の遷移のサポートにより、CloseWatcher API が再度有効化され、Gamepad API に対してトリガー ランブルが行われるなど、多くの機能が追加されています。Adriana Jara が、Chrome 126 のデベロッパー向けの新機能について詳しく説明しています。
アンロード イベントの非推奨
アンロード イベントは、Chrome 117 以降、段階的にサポート終了となります。この変更の意味と、サイトや企業がこれに備える方法についてご確認ください
プロトコル モニター: CDP リクエストの表示と送信
CDP のリクエストとレスポンスをモニタリングする。
DevTools のパフォーマンス ワークフローをカスタマイズするための 3 つの新機能
パフォーマンス パネルを整理し、必要な情報に焦点を合わせるのに役立つ最新機能について学びましょう
Chrome UX Report
CrUX 指標に関する技術ドキュメント。
スタイル再計算イベント中の CSS セレクタのパフォーマンスを分析する
スタイル再計算イベント中の CSS セレクタのパフォーマンスを分析します。
広告表示オプションに適用される変更の確認をスキップする
このたび、Declarative Net Request API を使用して、Manifest V3 拡張機能に対する対象となる変更の審査プロセスをスキップできる新機能をリリースいたしました。
幅または初期スケールのタグがない
Lighthouse の監査結果については、「幅または初期スケールのタグがない」をご覧ください。
ネットワーク条件: ユーザー エージェント文字列をオーバーライドする
[ネットワークの状態] パネルで他のブラウザをエミュレートする方法をご確認ください。
DevTools の新機能(Chrome 126)
トラック構成モードの改善、フレームチャートの無視リスト、[パフォーマンス] パネルでの CPU の 20 倍のスロットリングなど。
JavaScript をデバッグする
Chrome DevTools を使用して JavaScript のバグを見つけて修正する方法をご確認ください。
Google I/O 2024 における Chrome 拡張機能
開催後は Google I/O を開催し、拡張機能に関する最新情報をすべてご紹介しました。
Chrome DevTools で投機ルールをデバッグする
今後のページ ナビゲーションのプリフェッチと事前レンダリングに使用される推測ルールをデバッグするための Chrome DevTools の機能について、すべて学習します。
クイック ソース パネル
ソースファイルを表示し、他のツールにアクセスする。
パフォーマンス モニター パネル
ウェブサイトのランタイム パフォーマンスをリアルタイムで分析します。
AI で商品レビューを評価する
オンデバイス AI は、センシティブ データを保護してレイテンシを改善しながら、パワフルなモデルをユーザーに提供するための最新のサービスです。
ビュー遷移の新機能(Google I/O 2024 の更新)
MPA のドキュメント間のビュー遷移、アクティブ タイプによる選択的なビュー遷移、ビュー遷移クラスを使用したアニメーション スタイルの共有を発表しました。
Web AI を高速化するための WebAssembly と WebGPU の機能強化、パート 2
パート 2/2.WebAssembly と WebGPU の拡張機能により、ウェブ上での機械学習のパフォーマンスがどのように向上するかについて説明します。
I/O 2024 ウェブ AI のまとめ: ウェブアプリ用の新しいモデル、ツール、API
I/O 2024 でウェブ AI のまとめをご覧ください。ウェブアプリの新たなモデル、ツール、API をご紹介します。
クライアントサイドのウェブ AI で有益な商品レビューを促進する
次の Codelab では、クライアントサイド AI について説明します。AI 開発の知識、サーバー、API キーは必要ありません。
Chrome 126 ベータ版
Chrome 126 ベータ版には、ドキュメント間のビュー遷移や、Gamepad API トリガーランブル拡張機能などの機能が含まれています。
WebAssembly と WebGPU の強化による Web AI の高速化、パート 1
パート 1/2。WebAssembly と WebGPU の強化により、ウェブ上での ML のパフォーマンスがどのように向上するかについて学びます。
JavaScript フレームワークの新機能(2024 年 5 月)
このドキュメントでは、JavaScript フレームワーク エコシステムの最近の動向を簡単にご紹介します。
Windows での UIA サポートの導入
Chrome 126 以降では、Windows UI オートメーション フレームワークがサポートされています。
Async Clipboard API 向け SVG サポート
Async Clipboard API で SVG 画像を処理できるようになりました。
DevTools のヒント: ネットワーク レスポンスをオーバーライドしてモックする
DevTools を使用してネットワーク レスポンスをオーバーライドしてモックする方法について説明します。
Google I/O 2024 で発表された 10 の最新情報: すべてのウェブ デベロッパーのために AI の力を活用
Google I/O デベロッパー基調講演とセッションから、優れた機能をご紹介します。
Chrome 125
Chrome 125 は 2024 年 5 月 14 日にリリースが開始され、CSS Anchor Positioning、Compute Pressure API、新しい Baseline 機能など、多数の新機能が追加されます。
クライアントサイド AI を選択するタイミング
クライアントサイド AI は、センシティブ データを保護し、レイテンシを改善しながら、強力なモデルをユーザーに提供する最新のサービスです。
Chrome 125 の新機能
Chrome 125 がリリースされました。CSS Anchor Positioning API、Compute Pressure API、Storage Access API への拡張など、多数の機能が用意されています。Adriana Jara が、Chrome 125 のデベロッパー向けの新機能について詳しく説明しています。
ウェブ コンテンツと HTTP レスポンス ヘッダーをローカルでオーバーライドする
ローカル オーバーライドを使用してリモート リソースをモックし、ページ読み込み後も DevTools で行った変更を保持します。
Spotify が Picture-in-Picture API を使用して Spotify ミニプレーヤーを開発した方法
Spotify ミニプレーヤーが、キャンバスをハックする機能から Document Picture-in-Picture API によって実現される洗練されたエクスペリエンスへと進化した方法をご紹介します。
CSS アンカー ポジショニング API のご紹介
新しい Anchor Positioning API を使用して、要素を互いに相対的に配置します。
コンソール分析情報でエラーと警告をより深く理解する
Gemini を使用すると、コンソール内のエラーと警告についての理解を深めることができます。
Chrome を使用して企業にテストを実装する
エンタープライズ環境でのテストで課題を克服する方法について学ぶ
スムーズな自動テストを実現する Chrome のツール
Puppeteer、Chrome ヘッドレス、Chrome for Testing の概要と、Chrome ツールチームが提供したその他のリソースです。
DevTools の新機能(Chrome 125)
コンソールのエラーの原因、パフォーマンスの CSS セレクタの統計情報、ネットワークの Early Hints ヘッダーなど。
WebGPU の新機能(Chrome 125)
開発中のサブグループは、3D テクスチャのスライスにレンダリングされます。
スクロールドリブン アニメーションの事例紹介
Policybazaar、redBus、Tokopedia のスクロールドリブン アニメーションのメリットをご確認ください。
:has() の事例紹介
Policybazaar と Tokopedia が :has() を使用することでどのようなメリットが得られるかをご覧ください。
e コマースサイトで CSS と UI の機能が重要な理由
最新の CSS や UI 機能(ビュー遷移、スクロールドリブン アニメーション、Popover API など)を実装することで、e コマースサイトがどのように役立つかを学びます。
コンテナクエリに関する事例紹介
redBus と Tokopedia のコンテナクエリのメリットについて説明します。
移行の事例紹介を見る
redBus、Policybazaar、Tokopedia のいずれも View Transition API を使用しており、パフォーマンスと滑らかな UI の恩恵を受けています。
「スクロールドリブン アニメーションの力を活用」のご紹介
スクロールドリブン アニメーションのすべてを学ぶ、全 10 部の動画コースです
WebGPU の概要
WebGPU により、ウェブ上で高性能 3D グラフィックスとデータ並列計算を実行できます。
CSS メーソンリーの代替案
メーソンリーとグリッドを異なる仕様で定義するための提案。
マニフェスト - Chrome の最小バージョン
manifest.json の minimum_chrome_version プロパティに関するリファレンス ドキュメント。
ポップオーバーの事例紹介
Tokopedia は、Popover API を使用してアプリケーションのコード量を削減しています。
セキュアでないコンテキストのプライベート ネットワーク アクセス(PNA)の非推奨トライアルが終了します - PNA 権限プロンプトを実装してください
HTTPS に変換できないウェブサイトからプライベート ネットワーク デバイスにアクセスするには、権限プロンプトを使用して混合コンテンツのチェックを緩和する必要があります。
キャプチャしたタブをスクロールしてズームする
Captured Surface Control API を使用すると、ウェブアプリでキャプチャされたタブをスクロールしたりズームしたりできます。
マニフェスト - トライアル トークン
manifest.json の trial_tokens プロパティのリファレンス ドキュメント。
WebAudio: WebAudio API の指標を表示する
WebAudio パネルで WebAudio API の指標を表示する
Chrome 125 ベータ版
CSS Anchor Positioning、CSS のステップ関数、Compute Pressure API など。
カスタム スプラッシュ画面用に設定されていない
プログレッシブ ウェブアプリ用のカスタム スプラッシュ画面を作成する方法について説明します。
有効な apple-touch-icon が指定されていません
プログレッシブ ウェブアプリで iOS のホーム画面に表示するアイコンを指定する方法について説明します。
page と start_url を制御する Service Worker を登録しない
プログレッシブ ウェブアプリの機能(オフライン機能、プッシュ通知、インストール可能性など)をサポートする Service Worker の登録方法について説明します。
ウェブアプリ マニフェストがインストール要件を満たしていません
プログレッシブ ウェブアプリをインストールできるようにする方法をご覧ください。
アニメーション: CSS のアニメーション効果を調査して変更する
[Animations] パネルでアニメーションを調査し、変更します。
Chrome 124
Chrome 124 は 2024 年 4 月 16 日にリリースが開始されます。setHTMLUnsafe や WebSocket のストリームなど、多くの機能が追加されます。
コンテンツがビューポートに合わせて適切にサイズ設定されていません
ウェブページのコンテンツをモバイル画面に合わせてサイズ設定する方法について説明します。
クロスブラウザ対応のサイト
Workbox を使用してウェブページがどのブラウザでも動作するようにする方法を説明します。
現在のページはオフライン時に 200 の応答がありません
プログレッシブ ウェブアプリをオフラインで動作させる方法をご紹介します。
モバイル ネットワーク使用時のページ読み込み速度が十分ではありません
モバイル ネットワーク上でウェブページをすばやく読み込めるようにする方法について説明します。
アドレスバーのテーマカラーが設定されていない
プログレッシブ ウェブアプリのアドレスバーのテーマの色を設定する方法について説明します。
ページの切り替えがネットワーク上での妨げにならない
ネットワーク速度が遅い場合でも、ウェブページ間の遷移をレスポンシブにする方法を説明します。
Chrome 拡張機能の変更内容
Chrome 拡張機能の最近の変更の概要と、今後リリースが予定されている拡張機能に関するデベロッパー向けのご案内です。
自動入力: 保存した住所の検査とデバッグ
自動入力パネルを使用すると、Chrome に保存されている住所を検査してデバッグできます。
Foldable API のオリジン トライアル
Foldable API は、デベロッパーが折りたたみ式デバイスをターゲットにできるように設計された Chrome の 2 つの API です。
Chrome 124 の新機能
Chrome 124 がリリースされました。JavaScript から宣言型 Shadow DOM を使用できるようにする新しい API が 2 つあります。Web Sockets でストリームを使用できます。ビュー遷移が改良されました他にもたくさんあります。Chrome 124 におけるデベロッパー向けの新機能について、Pete LePage が詳しく説明しています。
JavaScript が利用できない場合の代替コンテンツを提供しない
JavaScript が利用できない場合に、ユーザーがウェブページの少なくとも一部のコンテンツを表示できるようにする方法をご覧ください。
MIDI デバイスにアクセスするにはユーザー権限が必要になりました
Chrome では、権限プロンプトによって Web MIDI API 全体を制御できるようになりました。
HTTPS を使用しない
HTTPS でウェブサイトを保護する方法をご覧ください。
HTTP トラフィックを HTTPS にリダイレクトしない
すべてのページを HTTPS にリダイレクトして、サイトのセキュリティを強化する方法をご確認ください。
スロットル処理
[スロットル処理] タブのリファレンス。
各ページに URL がある
Lighthouse では「各ページに URL がある」の監査について解説します。
マニフェストにマスク可能なアイコンが含まれていません
マスク可能なアイコンのサポートを PWA に追加する方法について説明します。
オフラインのときに start_url が 200 の応答を返さない
プログレッシブ ウェブアプリの start_url を設定して、アプリがオフラインでアクセスできるようにする方法を説明します。
マルチページ アプリケーションのドキュメント間のビュー遷移
マルチページ アプリケーション(MPA)で使用するために、ドキュメント間のビュー移行を開始します。
View Transition API によるスムーズな遷移
View Transition API を使用すると、ウェブサイトのビュー間の遷移を追加できます。
パワフルで楽しい: Chrome DevTools の概要
DevTools でウェブ アプリケーション開発を改善する方法をご確認ください。
WebGPU の新機能(Chrome 124)
読み取り専用と読み取り / 書き込みのストレージ テクスチャ、Service Worker と共有ワーカーのサポート、新しいアダプタ情報属性、バグの修正。
CrUX で使用可能なナビゲーション タイプ
Chrome ユーザー エクスペリエンス レポート(CrUX)の新しい nav_types 指標と、この指標を使用してウェブ パフォーマンス指標を説明および最適化する方法について説明します。
PageSpeed Insights で Chrome UX レポートデータを表示する方法
PageSpeed Insights(PSI)は、ページのパフォーマンスとその改善方法を把握するためのウェブ デベロッパー向けツールです。このガイドでは、PSI を使用して CrUX から分析情報を抽出し、ユーザー エクスペリエンスについての理解を深める方法について説明します。
CrUX ガイド
わかりやすいガイドで CrUX の使い方を学ぶ
Chrome ウェブストア デベロッパー ダッシュボードでのバージョン ロールバック
今週、デベロッパーが Chrome ウェブストアで公開済みの以前のバージョンに拡張機能をロールバックできる新機能をリリースします。Google の目標は、特に Manifest V3 への移行に伴い、デベロッパーがアップデートを公開する際に安心していただけるようにすることです。 本日より、バグ修正を含む拡張機能の新しいバージョンを送信して審査に合格するまで待つ必要がなくなります。代わりに、[ その他 ] メニューまたはアイテムのパッケージ ページからロールバックを開始できます。
BigQuery の CrUX
BigQuery の CrUX データセットの構造について学習する。
ウェブフォントの読み込み時にテキストが表示されたままにする
font-display API を使用して、ウェブページのテキストが常にユーザーに表示されるようにする方法を学習します。
JS Profiler は廃止され、[パフォーマンス] パネルで CPU をプロファイリングする
CPU パフォーマンスをプロファイリングする今後のプロセスと、JavaScript Profiler を非推奨とする理由とその方法について説明します。
DevTools の新機能(Chrome 124)
スクロールドリブン アニメーションのサポート、新しい自動入力パネル、ネットワーク スロットリングにおける WebRTC の新しいオプションなど。
バックフォワード キャッシュの notRestoredReasons API
ドキュメント内のフレームがナビゲーション時にバックフォワード キャッシュの使用をブロックされたかどうかについて、情報をレポートします。
[パフォーマンス] パネルで Node.js のパフォーマンスをプロファイリングする
[パフォーマンス] パネルで Node.js アプリケーションのパフォーマンスをプロファイリングする方法について説明します。
WebAssembly JavaScript Promise 統合(JSPI)のオリジン トライアルの開始
JavaScript Promise Integration(JSPI)は、WebAssembly にコンパイルされた同期シーケンシャル コードが非同期 Web API にアクセスできるようにする API です。
fetchLater API オリジン トライアル
fetchLater API(現在はオリジン トライアルで)について説明します。この API は、ページが閉じられていても完了する遅延フェッチをリクエストする新しい API です。
ネットワーク リクエスト: ネットワーク リクエストをブロックしてサイトをテストする
不足しているリソースをサイトでどのように処理するかをテストします。
キーボードのフォーカス可能なスクローラー
tabindex 値が設定されていないスクローラーと、フォーカス可能な子のないスクローラーを、キーボードでフォーカス可能にするための変更がロールアウトされます。
Chrome 124 ベータ版
書き込み候補の HTML 属性、WebSocketStream API、優先 HTTP リクエスト ヘッダーなど。
Chrome 123 の新機能
Chrome 123 がリリースされました。新しい Light-dark 関数、Long Animation Frames API、Service Worker Static Routing API など、多くの機能があります。Adriana Jara が、Chrome 123 のデベロッパー向けの新機能について詳しく説明しています。
プライベート ネットワーク アクセス: ウェブワーカーとナビゲーション フェッチに対する保護の強化
ウェブ ワーカー、ナビゲーション フェッチ、今後の保護のためのプライベート ネットワーク アクセスの主なセキュリティ メカニズムについて説明します。このドキュメントでは、ウェブサイトの所有者がプライベート ネットワークを利用する場合に行うべきことについても説明します。
Service Worker Static Routing API を使用して、特定のパスで Service Worker をバイパスする
Chrome 123 から提供されるこの新しい API の使用方法をご確認ください。
拡張機能のリクエストの非表示と [ネットワーク] パネルの改善点
Chrome DevTools の [Network] パネルの最新の改善点をご確認ください。このパネルはウェブ デバッグをシンプルにするために設計されています。
2024 年以降のパフォーマンス ツール
DevTools の [パフォーマンス] パネルを改善するための Chrome チームの計画についてご確認ください。
[要素] パネルの概要
DOM に即座に変更を加える。
他のエフェクトを適用する: 自動ダークモードの有効化、フォーカスのエミュレーションなど
広告フレームのハイライト表示、ページ上でのフォーカスのエミュレーション、ローカルのフォントと画像形式の無効化、自動ダークテーマの有効化、視覚障がい者のエミュレーションを行うことができます。
CSS 機能リファレンス
Chrome DevTools で CSS を表示、変更するための新しいワークフローをご覧ください。
ブレークポイントでコードを一時停止する
Chrome DevTools でコードを一時停止する方法をすべてご紹介します。
CSS の表示と変更
Chrome DevTools を使用してページの CSS を表示、変更する方法について説明します。
WebGPU の新機能(Chrome 123)
DP4a 組み込み関数のサポート、制限のないポインタ パラメータ、WGSL で複合を逆参照するための構文シュガーなど。
共有辞書で圧縮効率を向上
ウェブでの圧縮は、共有辞書圧縮によって大幅に強化されています。圧縮がどのようなもので、どのように機能するのか、ウェブ上の静的リソースと動的リソースの両方について、標準の圧縮よりもさらに読み込み時間を大幅に短縮できる方法をご確認ください。
古いヘッドレス Chrome を chrome-headless-shell としてダウンロードします
ユーザー向けのすべての Chrome リリースで、古いヘッドレス Chrome をスタンドアロン バイナリとしてダウンロードできるようになりました。
アプリケーション パネルの概要
ウェブアプリに関する重要な情報をブラウザから直接取得できます。
インターフェースを国際化する
chrome.i18n API を使用して、複数の言語でインターフェースをレンダリングします。
Speculation Rules API を改善
ドキュメント ルール、積極性の設定、制限、プラットフォームでの投機ルールのサポートなど、Speculation Rules API の最新アップデートの詳細を示します。
拡張機能にアクセスできるようにする
多くのユーザーにとって、ユーザー補助は文字どおりユーザー インターフェースであり、その機能は他の多くのユーザーにとって有用です。
新機能の概要
Chrome DevTools の最新機能のご紹介
Chrome 拡張機能: Service Worker の停止をテストする方法
この投稿では、Eyeo のチームが、拡張機能 Service Worker のテストに関する問題への道のりを紹介します。特に、Service Worker が停止したときに Chrome 拡張機能が正しく動作するかどうかを確認する方法について説明します。
DevTools の新機能(Chrome 123)
イースター エッグ、[要素] > [スタイル] のフォーカスされたページ エミュレーション、新しい Lighthouse 監査など。
サードパーティ ライブラリを管理するための Next.js パッケージ
@next/third-parties ライブラリを使用して一般的なサードパーティ リソースの読み込みを最適化する方法を確認する
Chrome 123 ベータ版
CSS の light-dark() カラー関数、ブロックの align-content、フィールド サイズ設定のプロパティ、pagereveal イベント。
ブロック レイアウトとテーブル レイアウトでの align-content のサポート
Chrome 123 以降では、フレックス コンテナやグリッド コンテナを作成せずに、Align-content を使用してアイテムを配置できます。
Chrome 122 の新機能
Chrome 122 がリリースされました。新しい Storage Buckets API では、DevTools の [パフォーマンス] パネルが更新され、Async Clipboard API で HTML を読み取るためのサニタイズされていないオプションなど、さまざまな機能が追加されました。Adriana Jara が、Chrome 122 のデベロッパー向けの新機能について詳しく説明しています。
キーボードショートカット
Chrome DevTools のキーボード ショートカットに関する正規のドキュメントです。
Device Mode でモバイル デバイスをシミュレートする
Chrome のデバイスモードで仮想デバイスを使用して、モバイルファースト ウェブサイトを構築します。
CSS ::backdrop の継承に関する変更
Chrome 122 以降、「::backdrop」要素は元の要素からプロパティを継承します。
拡張機能アイコンを設定する
ツールバーで拡張機能を表すには、アイコンが 1 つ以上必要です。
パフォーマンスに関するパネル表示でパフォーマンス パネルを 400% 高速化
DevTools の [パフォーマンス] パネルは、ウェブアプリのパフォーマンスの問題を診断、デバッグ、修正するための強力なツールです。今回は、DevTools の [パフォーマンス] パネルを使用してパフォーマンス パネル自体のパフォーマンスをどのように改善したか、またどのように大幅な改善を達成したかをご紹介します。
WebHID を使用する
ヒューマン インターフェース デバイス(HID)対応デバイスをウェブに公開する WebHID API を拡張機能でご利用いただけます。
WebUSB の使用
標準以外の USB(Universal Serial Bus)対応デバイスをウェブに公開するための WebUSB API を拡張機能で利用できます。
Manifest V3 に移行する
Manifest V2 拡張機能を Manifest V3 拡張機能に変換するためのガイド。
マニフェスト - コンテンツ セキュリティ ポリシー
manifest.json のコンテンツ セキュリティ ポリシー プロパティのリファレンス ドキュメント。
WebGPU の新機能(Chrome 122)
開発中の互換モード、maxVertexAttributes の上限の引き上げ、Dawn の更新。
ヒープ スナップショットを記録する
ヒープ プロファイラを使用してヒープ スナップショットを記録し、メモリリークを見つける方法について説明します。
CSS のフィールド サイズ設定
1 行のコード。編集可能なコンテンツを含む要素の自動サイズ調整。
chrome.runtime
chrome.runtime API を使用して、サービス ワーカーを取得し、マニフェストの詳細を返します。また、拡張機能のライフサイクルでイベントをリッスンして応答します。この API を使用して、URL の相対パスを完全修飾 URL に変換することもできます。 この API のほとんどのメンバーには権限は必要 ありません 。この権限は、 connectNative() 、 sendNativeMessage() 、 onNativeConnect に必要です。 次の例は、マニフェストで
権限に関する警告のガイドライン
Chrome 拡張機能の権限の警告の仕組み
権限を宣言する
manifest.json 内の権限プロパティの有効な値の概要。
ウェブプッシュを使用する
Chrome 拡張機能でウェブプッシュを使用する手順ガイド
EditContext API を使用してカスタムのウェブ編集エクスペリエンスを構築する新しい方法のご紹介
EditContext は Chrome と Edge でリリースされる新しい API で、デベロッパーはこれを使用してブラウザで高度なテキスト編集機能を構築できます。詳しくは、こちらの投稿をご覧ください。
DevTools の新機能(Chrome 122)
[Network] パネルと [Application] パネルにサードパーティ Cookie の段階的廃止に関する警告を表示、[Network] パネルの拡張デバッグ、[Performance] パネルのパンくずリストなど。
DevTools のヒント: 投機的ナビゲーションをデバッグしてページの読み込みを高速化する
投機的読み込みでウェブ ブラウジングを高速化し、デバッグ方法を学びましょう。
パソコン版 Chrome の SharedArrayBuffer のサポート終了トライアルを Chrome 124 まで延長
Chrome デスクトップでのクロスオリジン分離を行わない SharedArrayBuffer の非推奨トライアルを Chrome 124 まで延長します。
コマンドに応答する
拡張機能のカスタムキーの組み合わせに応答します。
Chrome 122 ベータ版
Chrome 122 ベータ版では、イテレータ ヘルパー、メソッドの設定、Storage Buckets API、Async Clipboard API でのサニタイズされていない HTML の読み取りなどを利用できます。
拡張機能でレコーダーをカスタマイズする
拡張機能をインストールしてレコーダーをカスタマイズ、統合します。
Chrome 拡張機能の変更内容
Chrome 拡張機能の最近の変更の概要と、今後リリースが予定されている拡張機能に関するデベロッパー向けのご案内です。
Chrome 121 の新機能
Chrome 121 がリリースされました。CSS の更新、Speculation Rules API の改善、Element Capture API のオリジン トライアルなど、多くの改善が行われました。Adriana Jara が、Chrome 121 におけるデベロッパー向けの新機能について詳しく説明しています。
アドレスバーから操作をトリガーする
アドレスバーから操作をトリガーする。
WebGPU の新機能(Chrome 121)
Android での WebGPU のサポート、シェーダー コンパイルでの DXC の使用、コンピューティングパスとレンダリングパスでのタイムスタンプ クエリ、シェーダー モジュールへのデフォルトのエントリ ポイント、GPUExternalTexture 色空間としての display-p3、メモリヒープ情報など。
スクロールバーのスタイル設定
スクロールバーのスタイルを設定するには、`scrollbar-width` プロパティと `scrollbar-color` プロパティを使用します。
Angular SSR を使用して DOM に安全にアクセスする
Angular で SSR とともに DOM を安全に使用する方法を学習します
Puppeteer でウェブ Bluetooth をテストする
Chrome でウェブ Bluetooth API を使用する機能をテストするには、Puppeteer を使用します。
ウェブ AI モデルのテストを強化: WebGPU、WebGL、ヘッドレス Chrome
ブラウザのテストを一貫して自動化し、アプリケーションのパフォーマンスを向上させるための Google のソリューションをご覧ください。
Google Colab でのウェブ AI モデルのテスト
スケーラブルかつ自動化可能で、標準化されたハードウェア構成内で、クライアントサイドのブラウザベースの AI モデルをテストする方法を説明します。
chrome.gcm で Firebase Cloud Messaging(FCM)を使用する
chrome.gcm で Firebase Messaging を使用する手順ガイド
フォーム コントロール要素の CSS 縦書きモード
Chrome に新しい国際 CSS 機能が加わりました。
アクションを実装する
ツールバーをクリックするユーザーに応答する。
File System Access API の永続的な権限
この投稿では、File System Access API の永続的な権限を管理する方法について説明します。また、問題の現在の状態と解決中の課題の簡単な要約も提供します。
カラー選択ツールで HD 色と非 HD 色を検査してデバッグする
[要素] > [スタイル] のカラー選択ツールを使用して、HD 色と HD 以外の色を調査、デバッグする方法について説明します。
DevTools のヒント: 色の作成
数回クリックするだけで色を作成する方法を学習します。
DevTools のヒント: 取得の優先度のデバッグ
取得優先度をデバッグする方法の詳細。
ウェブアプリ スコープ拡張機能
Chrome 122 以降では、scope_extensions アプリ マニフェスト メンバーのオリジン トライアルに登録できます。これにより、複数のサブドメインとトップレベル ドメインを管理するサイトを 1 つのウェブアプリとして表示できます。
CSS text-wrap: balance
バランスの取れたテキスト ブロックの改行を手動で作成する、古典的なタイポグラフィ手法が CSS に導入されました。
WebDriver BiDi を活用: Puppeteer による Chrome と Firefox の自動化
Puppeteer が Firefox と通信するようになりました。🎉? まだですね。🤔? Puppeteer の新しいプロトコルである WebDriver BiDi で、このエキサイティングな開発が Firefox の自動化ワークフローに何を意味するのかを見てみましょう。
コンテキスト メニューを作成する
ユーザーが拡張機能を呼び出すためのウィンドウであるポップアップを実装します。
リモートホスト型コード違反に対処する
Service Worker を使用すると、必要なときにだけ拡張機能を実行できるため、リソースを節約できます。
Chrome での Android インテント
Android インテントを使用して、ウェブページから直接アプリを起動できます。
ポップアップを追加する
ユーザーが拡張機能を呼び出すためのウィンドウであるポップアップを実装します。
Android 版 Google Chrome
Android 版 Chrome のデベロッパー向け機能の一覧については、 chromestatus.com をご覧ください。 Google Play ストアで Chrome をダウンロードしてください。 あるデバイスで Chrome にログインすると、別のデバイスで Chrome にログインすると、そのセッションのタブと閲覧履歴が表示されます。URL だけでなく Chrome インスタンス間でページ
新しい INP 指標に対する最新のフレームワークのパフォーマンス
この投稿では、新しい INP 指標とフレームワークベースのウェブサイトとの関連性について説明します。Aurora は、この指標を最適化するためにフレームワークをサポートしています。
限定アコーディオン
同じ `name` を持つ複数の `` 要素で排他的なアコーディオンを作成します。
Chrome のプレミアム タブレットではデスクトップ モードがデフォルトで有効になります
Chrome は Android タブレットのエコシステムに適応するため、プレミアム タブレットでデスクトップ モードをデフォルトで有効にしています。
WebGPU の新機能(Chrome 120)
WGSL での 16 ビット浮動小数点値のサポート、上限の引き上げ、深度ステンシルの状態変更、アダプター情報の更新など。
WebGPU の新機能
WebGPU の最新の変更点をご確認ください。
Region Capture を使用したタブ共有の改善
ウェブ プラットフォームに搭載された Region Capture を使用すると、高パフォーマンスかつ安定した動画トラックの切り抜きが可能です。
DevTools の新機能(Chrome 121)
要素での @font-palette-values のサポート、ソースマップのサポートの改善、[パフォーマンス] > [インタラクション] トラックの強化など。
CSS ラップ: 2023 年
2023 年は CSS にとって大きな年でした。Chrome およびウェブ プラットフォームについて今年リリースされた内容をご確認ください。
フレームの詳細を表示する
フレームの詳細を表示します。
Chrome のインストール基準の見直し
Chrome では今後数か月以内に、デベロッパーとユーザーのエクスペリエンスを向上させるために、アプリのインストール条件を簡素化することを目的としたテストを実施する予定です。この投稿では、想定される変化と、このテストを実施する理由について説明します。
DevTools のヒント: DOM とはHTML と DOM の比較
DevTools を使用して DOM をデバッグする方法を学びます。
DevTools のヒント: bfcache のデバッグ
bfcache をデバッグしてページをすばやく読み込む方法について説明します。
Chrome 120 の新機能
Chrome 120 がリリースされました。今回、CloseWatcher API により、クローズ リクエストを処理する際に一貫したエクスペリエンスを実現する、details 要素を使用したアコーディオン パターンの簡単な実装、権限ポリシー違反レポートなど、多くの機能が利用可能になっています。
Chrome DevTools での自己 XSS 攻撃の防御
Chrome DevTools の経験が浅いユーザーによるコードの貼り付けをブロックすることで、自己 XSS 攻撃を軽減する仕組みをご確認ください。
Cookie を表示、追加、編集、削除する
Chrome DevTools を使用してページの HTTP Cookie を表示、追加、編集、削除する方法を説明します。
プライベート ネットワーク アクセス権限プロンプトのオリジン トライアル: HTTPS を使用してウェブサイトを移行するパス
Google Chrome では、プライベート ネットワーク アクセス(PNA)の仕様の一環として、安全性の低い公開ウェブサイトからプライベート ネットワーク エンドポイントにアクセスすることを非推奨としています。
ポート転送でローカル サーバーと Chrome インスタンスにアクセスする
開発マシンのウェブサーバーでサイトをホストし、Android デバイスからコンテンツにアクセスする。
CSS に 4 つの新しい国際化機能を導入
Chrome に、国際化した 4 つの新しい CSS 機能が追加されます。
ページ ライフサイクル API
Page Lifecycle API は、モバイル オペレーティング システムで一般的なアプリ ライフサイクルの機能をウェブにもたらします。ブラウザは、リソースを節約するためにバックグラウンドのページを安全に凍結または破棄できるようになり、デベロッパーはユーザー エクスペリエンスに影響を与えることなく、このような介入を安全に処理できるようになりました。
無視リスト
[リスト] タブの参照を無視します。
Async Clipboard API でのサニタイズされていない HTML
Chrome 120 以降では、Async Clipboard API で新しいサニタイズされていないオプションを使用できます。このガイドでは、その使用方法について説明します。
ビデオ会議ウェブアプリのピクチャー イン ピクチャーの自動化
Chrome では、ビデオ会議ウェブアプリからピクチャー イン ピクチャーを自動的に開始できます。
Manifest V3 への移行を再開する
昨年 12 月、デベロッパーからのフィードバックに対応し、 移行に関する問題 のより良い解決策を提供するために、Manifest V2 のサポート終了を延期しました。こうしたフィードバックに基づき、Google は Manifest V3 にいくつかの変更を加えて、 こうしたギャップを解消 しました。変更内容は次のとおりです。 差異を解消するだけでなく、今年初めにリリースされた サイドパネル API や、現在ベータ版の Reading List API
Angular NgOptimizedImage ディレクティブの新機能
Angular アプリの画像のパフォーマンスをさらに向上させる、Angular NgOptimizedImage ディレクティブに含まれる新機能について学びます。
Manifest V3 でのコンテンツ フィルタリングの改善
過去 1 年間、Google は MV3 拡張機能プラットフォームの改善方法について、複数のコンテンツ ブロック拡張機能のベンダーと積極的に話し合いを行ってきました。これらの議論(その多くは、他のブラウザと協力して WebExtensions コミュニティ グループ( WECG )で行われました)に基づいて、Google は大幅な改善をリリースすることができました。
Service Worker Static Routing API のオリジン トライアル
Service Worker の静的ルーティング(現在オリジン トライアル中)の第 1 フェーズについて学びます。これは、Service Worker によるルートの処理方法を宣言的に指定する新しい API です。
DevTools の新機能(Chrome 120)
サードパーティ Cookie の段階的廃止に関する問題が [問題] パネルで報告されました。Cookie に関するプライバシー サンドボックス分析ツール、[アプリケーション] パネルの効果的なコンテンツ セキュリティ ポリシー、[アニメーションのデバッグの改善]、[無視リストの強化] などが報告されています。
WebGPU エコシステムのキャプチャ
WebGPU エコシステムが JavaScript、C+、Rust レルムを超えて拡張される仕組みについて学びます。
CSS ネストの緩和された構文の更新
Chrome 120 で先読みネストが有効になりました。
IndexedDB のデフォルトの耐久性モードの変更
IndexedDB の耐久性モードが、Chrome 121 で厳格から緩和に変更されます。
拡張機能に関する Chrome 120 の新機能
Chrome 拡張機能のデベロッパー向けの Chrome 120 の重要な変更の概要。
Chrome OS でのファイル処理
Chrome 拡張機能の Service Worker、ポップアップ、サイドパネル、コンテンツ スクリプトでファイルを開く方法。
Chrome 120 ベータ版
CSS マスキング、CSS ネストのルールの緩和、要素を使用したアコーディオン パターンの作成、Media Session API の enterpictureinpicture アクション
file_handlers
manifest.json の file_handlers プロパティのリファレンス ドキュメント。
WebAssembly ガベージ コレクション(WasmGC)を Chrome でデフォルトで有効化
プログラミング言語には、ガベージ コレクションを使用するプログラミング言語と、手動のメモリ管理が必要なプログラミング言語の 2 種類があります。WebAssembly ガベージ コレクションを使用すると、ガベージ コレクション言語を WebAssembly に移植できます。
Chrome 119 の新機能
Chrome 119 がリリースされました。すでに保存されている Cookie の有効期限の上限が更新されます。CSS には、新しい疑似クラス、相対色構文、広告サイズマクロのようなフェンス付きフレームの改善など、多くの機能があります。
CSS の優先透明度(Reduced-transparency)
不透明な UI を好むユーザーに合わせて最適化と調整を行います。
WebGPU の新機能(Chrome 119)
フィルタリング可能な 32 ビット浮動小数点数テクスチャ、unorm10-10-10-2 頂点形式、RGB10a2uint テクスチャ形式など。
CSS テキストの折り返し: きれい
テキストの折り返しを最適化して、スピードより美しさを優先。
要素の選択: 水平方向のルールを適用
拡張選択要素の機能を使用して、グループ化を容易にする水平方向の区切りをわかりやすく表示します。
Chrome 拡張機能の変更内容
Chrome 拡張機能の最近の変更の概要と、今後リリースが予定されている拡張機能に関するデベロッパー向けのご案内です。
Chromium Issue Tracker の移行
2024 年 1 月より、Chromium の問題追跡は Google Issue Tracker によるツールに移行されます。
Sanitizer API のサポート終了
今後の仕様の更新に追いつくために、現在の Sanitizer API の実装は Chrome 119 で非推奨となっています。
ウェブでの Bluetooth 経由でのシリアル
Web Serial API で Bluetooth RFCOMM サービスのサポートが追加されました。
Chrome 拡張機能の単体テスト
拡張機能の単体テストを作成する方法
Chrome 拡張機能のエンドツーエンド テスト
拡張機能のエンドツーエンド テストを作成する方法。
Puppeteer で Chrome 拡張機能をテストする
Puppeteer を使用して Chrome 拡張機能の自動テストを作成する方法。
拡張機能のバグを報告する
拡張機能のバグやドキュメントに関する問題を報告する方法。
CSS 相対色構文
別の色のチャネルと値に基づいて新しい色を作成します。
バグを見つけてフォローする
バグや機能リクエストがすでに報告されていないかを確認する。
DevTools の新機能(Chrome 119)
スタイルの @property セクションの改善、デバイスリストの更新、ソースのプリティプリントの強化、コンソールのオートコンプリート。
Chrome 118 の新機能
Chrome 118 がリリースされました。@scope css ルールを使用して、コンポーネント内の特定のスタイルを宣言します。新しいメディア機能「preferreds-reduced-transparency」を使用します。DevTools では、[ソース] パネルなど多くの機能が改善されています。
全画面表示のポップアップ ウィンドウの新しいオリジン トライアル
ポップアップ ウィンドウを全画面モードで開ける新しいオリジン トライアルを、1 ステップでご利用いただけるようになりました。
ブラウザでのファイル操作に関する API の改善
FileSystemSyncAccessHandle の複数の読み取り / 書き込みと、FileSystemWritableFileStream の排他的書き込みのサポート。 オリジンのプライベート ファイル システム (バケット ファイル システムとも呼ばれる)を使用すると、デベロッパーは読み取りと書き込みのパフォーマンスを最大限に高めるように最適化されたファイルにアクセスできます。これは FileSystemSyncAccessHandle オブジェクトを介して行われます。現在、同じファイル
Chrome 119 ベータ版
Chrome 119 ベータ版では、CSS 相対色構文や新しい疑似クラスなどを利用できるようになります。
CSS @scope at-rule でセレクタのリーチを制限する
@scope を使用して、DOM の限定されたサブツリー内の要素のみを選択する方法について学習します。
DevTools のヒント: Chrome 拡張機能のデバッグ
DevTools を使用して Chrome 拡張機能をデバッグする方法について説明します。
WebGPU の新機能(Chrome 118)
copyExternalImageToTexture のソース サポートの拡張、読み取り / 書き込みおよび読み取り専用ストレージ テクスチャの試験運用版サポートなど。
macOS の iCloud キーチェーンで Chrome のパスキーがサポートされるようになりました
macOS 版 Chrome で iCloud キーチェーンのパスキーのサポートを開始しました。これにより、ユーザーは iCloud キーチェーンでパスキーを作成し、Apple デバイス間で同期できます。
ビューの遷移によるシームレスなナビゲーション
CyberAgent、RedBus、Nykaa、PolicyBazaar がビュー遷移を実装した方法と理由について詳しく説明します。
私たちは Chrome for Developers です
Chrome の 15 周年を記念して、デベロッパーの皆様にとって信頼できる便利なパートナーとなっています。
WebGL から WebGPU へ
WebGPU に移行する WebGL デベロッパー向けのヒントをご紹介します。
DevTools の新機能(Chrome 118)
[要素] > [スタイル] のカスタム プロパティに関する新しいセクション、ローカル オーバーライドの改善、検索機能の強化、[ソース] のワークスペースの効率化など。
Chrome 118 ベータ版
CSS のスコープ スタイル、追加のメディア機能、キーボードでフォーカス可能なスクロール コンテナなど。
Chrome 117 の新機能
Chrome 117 がリリースされました。スムーズな開始 / 終了アニメーションの追加を容易にする 3 つの新しい CSS 機能、高階データセットを計算するための配列グループ化、DevTools によってローカル オーバーライドが簡単になるなど、さらに多くの機能が備わっています。
Chrome アプリからの移行
Chrome のパッケージ化アプリまたはホスト型アプリを移行する方法。
WebGPU の新機能(Chrome 117)
頂点バッファの設定を解除してグループをバインドする、紛失したデバイスが機能しているように見えるようにするなど
拡張機能を公開する
新しい Manifest V3 拡張機能を公開するためのガイダンス
Google Summer of Code と Chrome 拡張機能
Google Summer of Code への参加に関する経験とアドバイス。
DevTools のヒント: スニペットとライブ式
スニペットを使用して頻繁に使用するコードを実行し、ライブ式を使用して値をリアルタイムで監視します。
天体ビューの切り替え
Chrome による API の形成時に、Astro コミュニティがビュー遷移をどのように取り入れ、Astro の永続的な島でトップクラスのサポートに到達するまでの道のりを強調します。
Chrome リリースの迅速化(第 2 回)
Chrome 119 以降では、ブランチのリリースから安定版へのリリースまでの期間を短縮します。
scheduler.yield オリジン トライアルのご紹介
「scheduler.yield」は、現在オリジン トライアルでスケジューラ API に新たに追加として提案されているもので、よりレスポンシブなユーザー エクスペリエンスのためにタスクを分割する新しいアプローチです。このたびの Scheduling API 追加提案によるメリットをご理解いただき、オリジン トライアルに登録してインサイトとフィードバックをお寄せください。
新しいコマンド エディタで Chrome Devtools Protocol(CDP)コマンドを効率的に作成
Chrome Devtools Protocol(CDP)のコマンドを簡単に入力できるように、DevTools には新しいユーザー フレンドリーなエディタが導入されているため、JSON を使用する必要はありません。
Lighthouse 11 の新機能
新しいユーザー補助機能の変更と監査の更新を含む Lighthouse 11 のリリース
DevTools の新機能(Chrome 117)
XHR/フェッチ リクエストをオーバーライドし、[ネットワーク] パネルで拡張機能リクエストを非表示にする、[パフォーマンス] パネルで取得優先度の変更を確認する、複数の UI を改善する、新しい色や試験運用版機能を確認するなど、さまざまなことができます。
Chrome 117 ベータ版
CSS グリッド サブグリッド、CSS の開始と終了のアニメーションのサポート、配列のグループ化、イテレータ ヘルパーなど。
スムーズな開始と終了のアニメーションを実現する 4 つの新しい CSS 機能
個別のアニメーションのスムーズな移行やトップレイヤ間の移行を可能にする新機能について学習します
「chrome://extensions」ページに安全確認を導入
Chrome 117 以降では、ユーザーがインストールした拡張機能が Chrome ウェブストアにない場合、自動的にハイライト表示されます。
Chrome 116 の新機能
Chrome 116 がリリースされました。Picture in image API を使ったドキュメントによるユーザーの生産性の向上や、不足しているスタイルシートのデバッグが DevTools で簡単になりました。
マニフェスト - コンテンツ スクリプト
manifest.json の "content_scripts" プロパティのリファレンス ドキュメント。
restricted-properties を使用してポップアップ操作を保護する
ポップアップの操作中にクロスオリジン分離とクロスサイト リーク保護を行います。
WebGPU の新機能(Chrome 116)
WebCodecs の統合、動画再生の改善など。
Chrome での 1 回だけのアクセス許可
「今回は許可」は、Chrome で権限を付与する 1 回限りのオプションです。当面の間、位置情報、カメラ、マイクについてはパソコンでのみご利用いただけます。
DevTools のヒント: ブレークポイントとログポイント
ブレークポイントとログポイントを使用して簡単にデバッグできます。
TWA 用の PostMessage
Chrome 115 以降、Trusted Web Activity(TWA)で postMessage を使用してメッセージを送信できるようになりました。このドキュメントでは、アプリとウェブ間の通信に必要な設定について説明します。
Chrome 116 の拡張機能の新機能
Chrome 拡張機能のデベロッパー向けの Chrome 116 における重要な変更の概要。
Chrome 116 ベータ版
CSS モーションパス、バックフォワード キャッシュ NotRestoredReason API、ドキュメントのピクチャー イン ピクチャーなど。
iOS 16.4 以降の Chrome でのウェブサイトのデバッグ
iOS 版 Chrome で Safari ウェブ インスペクタのデバッグを使用する方法について説明します。
Chrome 拡張機能の変更内容
今年の Chrome 拡張機能の変更点の概要と、今後リリースが予定されている拡張機能に関するデベロッパー向けのご案内です。
Chrome 115 の新機能
ScrollTimeline と ViewTimeline を使用して、ユーザー エクスペリエンスを高めるスクロールドリブン アニメーションを作成します。フェンス付きフレームは他のプライバシー サンドボックス API と連携して、関連コンテンツを埋め込み、不要なコンテキスト共有を防止します。Topics API を使用すると、ブラウザはプライバシーを保護しながら、ユーザーの興味 / 関心に関する情報をサードパーティと共有できます。
スクロールドリブン アニメーションのパフォーマンスに関する事例紹介
新しい API は、スクロールドリブン アニメーションを実装する従来の方法よりもはるかにスムーズです。
DevTools のヒント: レコーダーを使用してユーザーフローを記録、再生する
DevTools の [レコーダー] パネルでユーザーフローを記録、再生、デバッグする方法について説明します。
Service Worker で WebSocket を使用する
Chrome 拡張機能で WebSocket に接続する詳しい手順。
WebRTC: 従来の getStats() 移行ガイド
iOS 版 Chrome で Safari ウェブ インスペクタのデバッグを使用する方法について説明します。
DevTools のヒント: ローカル ストレージとセッション ストレージ
Key-Value ペアをデバッグするには、[Application] > [Local Storage] と [Session Storage] を使用します。
DevTools の新機能(Chrome 116)
スタイルシートが見つからないという問題を迅速に特定してデバッグできるように、DevTools が大幅に改善されました。 [ ネットワーク ] パネルの [ 開始元 ] 列には、読み込みに失敗したスタイルシートを参照する正確な行へのリンクが常に表示されます。 [ 問題 ] パネルには、URL の不整合、リクエストの失敗、 @import ステートメントの配置ミスなど、スタイルシートの読み込みに関するすべての問題が一覧表示されます。 Chromium の問題: 1440626 、 1442198 、
WebGPU の新機能(Chrome 115)
サポートされている WGSL 言語拡張機能、Direct3D 11 の試験運用版サポートなど。
位置情報を使用する
Chrome 拡張機能の Service Worker、ポップアップ、サイドパネル、コンテンツ スクリプトで位置情報を使用する方法。
Chrome for Testing: ブラウザの自動化のための信頼性の高いダウンロード
Chrome for Testing は、ウェブアプリのテストと自動化のユースケースに特化した新しい Chrome フレーバーです。
C/C++ WebAssembly をデバッグする
Chrome DevTools を使用して C/C++ WebAssembly のバグを見つけて修正する方法を学びます。
メモリに収まるサイズの大きいファイルを Photoshop でどのように解決したか
Adobe が、象徴的な Photoshop アプリのウェブ バージョンで、最大のファイルでも編集できるようにした方法を学びます。 (この記事は動画でもご覧いただけます)。 2021 年、Adobe は Chrome エンジニアリングと共同で、 Photoshop のバージョンをウェブに導入 しました。このソフトウェアは、 SIMD 、 オリジンの非公開ファイル システム 内の高パフォーマンス ストレージ、キャンバスの P3 カラー空間 、 Lit を使用したウェブ
ベクター画像編集アプリ Boxy SVG が、Local Font Access API を使用してユーザーがお気に入りのローカル フォントを選択できるようにする方法
Local Font Access API は、ユーザーがローカルにインストールしたフォントデータにアクセスするためのメカニズムを提供します。名前、スタイル、ファミリーなどの上位レベルの詳細情報や、基盤となるフォント ファイルの未加工バイトなどです。SVG 編集アプリ Boxy SVG がこの API を使用する方法を学びます。 (この記事は動画でもご覧いただけます)。 Boxy SVG はベクター グラフィック エディタです。主な用途は、SVG
Chrome 115 ベータ版
CSS ディスプレイ プロパティの複数のキーワード、WebGPU の WGSLLanguageFeatures、HTTPS アップグレードなど。
Chrome からミューテーション イベントが削除されます
ミューテーション イベントのサポート終了と計画的な削除について発表し、2024 年 7 月の削除までにコードを移行する方法を共有します。
SVG 要素内のデータ URL から移行する
データのサポート: SVG 要素の URL は削除されます。代替サービスに移行することをおすすめします。
WebGPU の新機能(Chrome 114)
JavaScript の最適化など。
Chrome 114 の新機能
Chrome 114 がリリースされました。Chrome 114 がリリースされました。text-wrap: Balance によってテキスト レイアウトを改善する機能、Cookies Have Independent Partitioned State が導入されました。新しい Popover API では、ポップオーバーがこれまで以上に簡単になりました。
新しい Side Panel API で優れたユーザー エクスペリエンスを設計
Chrome 拡張機能用の新しい Side Panel API が導入されました。
DevTools の新機能(Chrome 115)
[ 要素 ] パネルに、 サブグリッド の新しい subgrid バッジが追加されました。この機能は現在、Chrome Canary で試験運用版です。 サブグリッドであるネストされたグリッドを検査してデバッグするには、バッジをクリックします。サブグリッドは、親からトラックの数とサイズを継承します。ビューポート内の要素の上に列、行、その数を表示するオーバーレイを切り替えます。 [ 要素 ] パネルのすべてのバッジの一覧については、 バッジのリファレンス をご覧ください。 Chromium
ゲームエディタ Construct 3 が File System Access API を使用してゲームを保存できるようにする仕組み
File System Access API を使用すると、読み取り、書き込み、ファイル管理機能を利用できます。Construct 3 でこの API を使用する方法を学びます。 (この記事は動画でもご覧いただけます)。 Construct 3 は、 Thomas と Ashley Gullen 兄弟によって開発されたゲーム エディタです。ゲーム エディタの現在の第 3 版では、以前に Windows と NW.js 向けにビルドした後、2 つを完全に 「ブラウザが新しいオペレーティング
Chrome で document.domain の変更が無効化される
ウェブサイトが document.domain の設定に依存している場合は、対応が必要です。
2 回目の Compute Pressure オリジン トライアルのお知らせ
ウェブ デベロッパーがコンピューティング負荷をモニタリングできる Chrome の新しいオリジン トライアル。
DevTools のヒント: Workspace
Workspace を使用して、DevTools で行った変更をローカルのソースファイルに保存します。
CSS で linear() イージング関数を使用して複雑なアニメーション曲線を作成する
そこで linear() を導入しました。これは CSS のイージング関数で、ポイント間で線形に補間し、弾力効果やばね効果を再現できます。
マニフェスト - バックグラウンド
manifest.json の background プロパティのリファレンス ドキュメント。
ポップオーバー API のご紹介
新しいポップオーバー API を使用してツールチップやメニューなどを作成する方法を学びます。
LEGO® Education における Web Bluetooth と Web Serial API の活用
レゴ エデュケーションはウェブの機能を活用し、できるだけ簡単に LEGO モデルとパソコンを接続します。
Aurora の新機能
Chrome Aurora チームの最近の取り組みと 2023 年のロードマップをご覧ください。
3D モデルエディタ Blockbench は、EyeDropper API を使用して、ユーザーがどこからでも色を選択できるようにしています。
EyeDropper API は、ユーザーがブラウザ ウィンドウの外部を含む画面から色をサンプリングできるスポイトツールを作成するメカニズムを提供します。3D モデル エディタ Blockbench がコードベースでこの API を使用する方法を学びます。 (この記事は動画でもご覧いただけます)。 Blockbench は、ピクセルアート テクスチャを使用したローポリモデル用の無料の最新モデル エディタです。 Minecraft をプレイしたことがあれば、Blockbench
Storage バケットのオリジン トライアルを利用可能
Storage Standard では、永続ストレージと割り当ての見積もりのための API、およびプラットフォームのストレージ アーキテクチャが定義されています。Google では、高いメモリ負荷での永続ストレージ エビクションの予測可能性を高める API をテストしています。Chrome 115 から Chrome 118 まで実施されるオリジン トライアルで Storage Buckets API をお試しください。
画像編集アプリ Photopea が、File Handling API を使用して、ユーザーがファイル エクスプローラーからファイルを開く仕組み
File Handling API を使用すると、ウェブアプリは、アプリケーションがサポートできるファイル形式のファイル ハンドラとして自身を登録できます。画像編集アプリケーション Photopea がこの API を使用する方法を学びます。 (この記事は動画でもご覧いただけます)。 Photopea は、 Ivan Kutskir が開発した無料のオンライン画像エディタです。Ivan は 2012 年にアプリの開発を開始し、Photopea に追加した主な機能を共有する ブログ
Web SQL のサポート終了スケジュールが更新されました
Web SQL は Chromium 119 で完全に削除されました。
CSS と UI の新機能: I/O 2023 Edition
Google I/O 2023 で取り上げられた、見逃せないトップ 20 の CSS と UI 機能。
Chrome DevTools を使用してフォームの問題を見つける
Chrome DevTools チームは、フォームの問題の検出や自動入力のデバッグに役立つ新機能を追加しています。これらの機能は設計と実装の初期段階にあるため、テストとフィードバックが必要です。
Google I/O で発表された 10 の最新情報
Google I/O 2023 で発表した重要なアップデートと新しいリリースを通じて、デベロッパーが優れたユーザー エクスペリエンスを簡単に提供できるようにする取り組みについてご確認ください。
ウェブ向けの Android の新機能(2023 年)
ウェブを Android に取り込むツールのアップデート。WebView の大画面でのプライバシー保護の強化とサポートの改善、カスタムタブの部分的なカスタムタブ、PWA のインストールの簡易化、統合機能、TWA の Play ストアの請求管理など。
iframe をまたいだ自動入力の共有: 最初の提案
一部のフォームには iframe にフィールドがあるため、ブラウザの自動入力で問題が発生します。共有自動入力を使用すると、クロスオリジンの iframe の信頼性を親フレームで指定して、自動入力のユーザー エクスペリエンスを向上させることができます。
WebGPU: ブラウザで最新の GPU へのアクセスが可能に
WebGPU が GPU の能力を引き出し、機械学習のパフォーマンスとグラフィック レンダリングを改善する方法を学習します。
WebDriver BiDi: 2023 年のステータス更新
この記事では、2023 年の WebDriver BiDi の新機能の概要を説明します。
Google I/O に備えよう
独自のアジェンダを作成して Google I/O に備えましょう。
DevTools の新機能(Chrome 114)
DevTools では、デフォルトで [ 設定 ] > [ 試験運用版 ] > [ WebAssembly デバッグ: DWARF サポートを有効にする ] が有効になっています。詳細については、 最新のツールで WebAssembly をデバッグする をご覧ください。 この試験運用版では、実行を一時停止して Wasm アプリの C コードと C++ コードをデバッグできます。デバッグ情報はすべて利用できます。 Wasm デバッグをテストするには、 C/C++ DevTools
スクロールドリブン アニメーションでスクロール時に要素をアニメーション化する
スクロール タイムラインとビュー タイムラインを使用して、宣言型の方法でスクロールドリブン アニメーションを作成する方法を学習します。
Chrome 114 ベータ版
CSS の見出しのバランス、CHIPS、スクロールエンド イベント、ポップオーバー。
Chrome 113 の新機能
Chrome 113 がリリースされました。WebGPU が登場し、ウェブ上での高性能 3D グラフィックスとデータ並列計算が可能になります。また、devtools はネットワーク レスポンス ヘッダー、プライバシー サンドボックスの一部であるファーストパーティ セットをオーバーライドできるようになりました。これにより、関連サイトの展開が始まっていることを組織が宣言できます。
拡張機能 Service Worker について
拡張機能 Service Worker は、拡張機能の中心的なイベント ハンドラです。この点で、ウェブ サービス ワーカーとは異なります。
拡張機能 Service Worker の基本
拡張機能 Service Worker のインストールと更新は、ウェブサービス Worker とは異なります。
カメラの背景をぼかす
ウェブ デベロッパーがカメラの背景のぼかしを制御できる Chrome の新しいオリジン トライアル。
拡張機能 Service Worker のライフサイクル
拡張機能 Service Worker は、標準の Service Worker のイベントと拡張機能の名前空間内のイベントの両方に応答します。拡張機能の使用中に 1 つのタイプが別のタイプに続くことが多いため、まとめて示されています。
AV1 エンコードの高速化によりビデオ通話を改善
Chrome 113 では、Chrome Open Media チームによって AV1 ソフトウェア エンコーダが改善されています。
Service Worker のイベント
拡張機能 Service Worker は、標準の Service Worker イベントと、拡張機能 API の多くのイベントの両方に応答します。
CSS によるメディアクエリの更新
UI を画面のリフレッシュ レート機能に適合させます。
デベロッパー リソース: ソースマップの表示と手動読み込み
[デベロッパー向けリソース] パネルを使用して、ソースマップが正常に読み込まれるかどうかを確認し、手動で読み込みます。
WebGPU の新機能(Chrome 113)
WebGPU は、オリジン トライアルで WebCodecs を統合した Chrome に搭載されています。
DevTools のヒント: DevTools でのソースマップ
デプロイしたコードではなく、DevTools のソースマップを使用して元のコードをデバッグします。
ユーザー エンゲージメントを測定する
カスタムタブでユーザー エンゲージメントを測定する方法
スタート ガイド
Android アプリからカスタムタブを起動する方法
部分的なカスタムタブによるマルチタスク
部分的なカスタムタブを使用して、ユーザーがウェブ コンテンツを閲覧中にアプリを操作できるようにする方法を学習します。
ウォームアップとプリフェッチ: カスタムタブ サービスの使用
カスタムタブ サービスを利用してユーザー エクスペリエンスを向上させる方法について説明します。
UI のカスタマイズ
カスタムタブをアプリのデザインに合わせる方法。
カスタム インタラクティビティの追加
カスタムタブにカスタム アクションを追加する方法
デスクトップでよりリッチな UI インストールが可能に
モバイル デバイスとアプリストアは、ユーザーがソフトウェアを発見、評価、インストールする方法を変えました。ウェブアプリで、デベロッパーがインストール時にアプリをハイライト表示できるようになりました。
過去を振り返って: テスト自動化の進化
ウェブにおけるテスト自動化の進化の旅
音声の録音とスクリーン キャプチャ
タブ、ウィンドウ、画面から音声や動画を録画する方法。
Chromium Chronicle #33: アニメーションのビュー
ビューでレイヤベースのアニメーションを使用すると、パフォーマンスが向上し、 設定がむずかしいこともあります。「 AnimationBuilder レイヤの読みやすさを大幅に向上させ、 作成できます。 次の 2 つの間で連続的なクロスフェードをアニメーション化する必要があるとします。 ビューを示しています。 レイヤ アニメーション API を直接使用してこの処理を行う例を次に示します。 以下は、 AnimationBuilder
CSS レイアウトとソース順序の切り離しを解決する
ドキュメントのソースから切断された順序でアイテムを配置するレイアウト メソッドの問題に対して、提案するソリューションについてフィードバックを求めました。
新しい [Breakpoints] サイドバーによるデバッグの高速化
ブレークポイントの削除や無効化などの一般的な操作をより簡単に実行できるように、ブレークポイント サイドバーのデザインを変更し、ワンクリックで実行できるようにしました。
DevTools の新機能(Chrome 113)
[ ネットワーク ] パネルでレスポンス ヘッダーをオーバーライドできるようになりました。これまでは、HTTP レスポンス ヘッダーをテストするにはウェブサーバーにアクセスする必要がありました。 レスポンス ヘッダーのオーバーライドを使用すると、次のようなさまざまなヘッダーの修正をローカルでプロトタイプ化できます(ただしこれらに限定されません)。 ヘッダーをオーバーライドするには、[ ネットワーク ] > [ ヘッダー ] > [ レスポンス ヘッダー ]
Chrome に搭載された WebGPU
Chrome チームは、ウェブ上で高性能 3D グラフィックスとデータ並列計算を行える WebGPU を出荷しています。
Chrome 113 ベータ版
新しい CSS メディア機能、linear() イージング関数、WebGPU が追加されました。
Chrome の迅速なリリース
Chrome 114 以降、リリースのブランチから Stable へのリリースまでの時間が短縮されます。
Chrome 112 の新機能
Chrome 112 がリリースされました。CSS がネストルールをサポートするようになりました。ダイアログ要素に最初のフォーカスを設定するアルゴリズムが更新され、今後は Service Worker の no-op フェッチ ハンドラがスキップされ、ナビゲーションを高速化できるようになり、その他にも多くの実装が行われます。
Service Worker でイベントを処理する
拡張機能サービス ワーカーの作成とデバッグ方法を学習する。
DevTools のヒント: ソースマップとは
デプロイしたコードではなく元のコードをデバッグする際にソースマップがどのように役立つかを説明します。
ignoreList ソースマップ拡張機能
ignoreList ソースマップ拡張機能を使用して、Chrome DevTools でのデバッグ エクスペリエンスを改善します。
Web SQL から SQLite Wasm へ: データベース移行ガイド
SQLite Wasm はオリジンのプライベート ファイル システムを基盤としており、非推奨の Web SQL データベース テクノロジーに代わる汎用的な方法です。この記事では、Web SQL から SQLite Wasm にデータを移行する方法について説明します。 Web SQL のサポート終了と削除 の投稿で、Web SQL データベース
Fastly との提携 - FLEDGE の k-匿名性サーバー向け Oblivious HTTP リレー
Google は Fastly と提携して FLEDGE に k-匿名性サーバーを実装することで、Chrome のプライバシー保護対策を改善しています。この実装ではデータが OHTTP リレーを介してリレーされるため、Google のサーバーはエンドユーザーの IP アドレスを受信しません。k-匿名性サーバーは、FLEDGE の完全な実装に向けた段階的な一歩です。
WebView から X-Requested-With ヘッダーを送信するオプトインを要求することで、ユーザーのプライバシーを強化
Google では、X-Requested-With ヘッダーが送信されるタイミングを制限することで、ユーザーのプライバシーを保護したいと考えています。
ブロックしているウェブ リクエスト リスナーを置き換える
3 つのセクションのうちの 2 番目のセクションでは、拡張機能 Service Worker の一部ではないコードに必要な変更について説明します。
SPA のビュー遷移を Chrome 111 でリリース
View Transition API を使用すると、シングルページ アプリ内でページ遷移を行うことができます。今後マルチページ アプリが追加される予定です。
Chrome 112 ベータ版
CSS のネスト、アニメーション合成、FormData コンストラクタのサブミッター パラメータ。
DevTools の新機能(Chrome 112)
レコーダー で、拡張機能を使用して DevTools に埋め込むことができるカスタム リプレイ オプションのサポートが導入されました。 サンプルの拡張機能 を試す。新しいカスタム リプレイ オプションを選択して、カスタム リプレイ UI を開きます。 レコーダー をニーズに合わせてカスタマイズし、ツールと統合するには、独自の拡張機能の開発を検討してください。 chrome.devtools.recorder API を参照し、 拡張機能の例 をご確認ください。 Chromium の問題:
マニフェストを更新する
manifest.json ファイルの形式は、Manifest V3 と Manifest V2 で若干異なります。
Service Worker に移行する
Service Worker を使用すると、必要なときにだけ拡張機能を実行できるため、リソースを節約できます。
コードを更新する
3 つのセクションのうち、拡張機能 Service Worker の一部ではないコードに必要な変更について説明します。
CSS ネスト
CSS プリプロセッサのお気に入りの機能の 1 つであるネスト スタイル ルールが、言語に組み込まれています。
拡張機能のセキュリティを強化
3 つのセクションの後半では、拡張機能 Service Worker の一部ではないコードに必要な変更について説明します。
Chrome 111 の新機能
Chrome 111 がリリースされました。View Transitions API を使用してシングルページ アプリで洗練された遷移を作成し、CSS カラーレベル 4 のサポートによって色を一段と進化させます。新しいカラー機能を最大限に活用するため、スタイルパネルで新しいツールをご確認ください。
Project Fugu API ショーケースの新しいホーム
Project Fugu API Showcase は、Project Fugu の一部である API を使用するアプリのコレクションです。 Google の社内横断プロジェクトである Capabilities Project(コード名 Project Fugu )は、ウェブアプリがプラットフォーム固有のアプリができることすべてを可能にすることを目的としています。Google のほか、Microsoft、Intel、Samsung などのプロジェクト
プライバシーの確保画面をスマートに共有できるようになりました
ナッジ理論を使って、ビデオ会議中にユーザーが自発的に自発的に発言するのをやめるようにしました。
CSS アンカー ポジショニングで要素を互いに固定する
ウェブ プラットフォームに新しい API が導入されます。これにより、トリックなしで要素を適応的に配置できるようになります。
業界との連携による CHIPS の進化
Chrome チームが CHIPS の実装において直面した 2 つの課題と、提案の設計を進化させるうえでコミュニティからのフィードバックが果たす重要な役割について説明しています。
ネイティブ メッセージング
Chrome 拡張機能のネイティブ アプリケーションとメッセージを交換できます。
標準に関する議論における行動基準の改善
Chrome チームによる、プロフェッショナルで、敬意を持って、インクルーシブなディスカッションを促進する方法。
フォント フォールバックのフレームワーク ツール
Next.js、Nuxt.js、その他のライブラリを使用して、CLS を使用せずに代替フォント CSS を生成する方法をご確認ください。
スタイルクエリ スタートガイド
スタイルクエリでは、@container ルールを使って親要素のスタイル値をクエリできます。Chrome 111 では、CSS カスタム プロパティのスタイルクエリが安定版になりました。ご利用方法をご確認ください。
DevTools のヒント: CSS の問題を見つける
[Styles] ペインと [Computed] ペインを使用して、DevTools での CSS の問題を見つけます。
Chrome 拡張機能に関するヘルプ
ドキュメントに記載されていない質問の参照先
DevTools の新機能(Chrome 111)
HD 色のデバッグ、ブレークポイント UX の強化など
ショートカット
[ショートカット] タブのリファレンス。
デバイス
[デバイス] タブのリファレンス。
ワークスペース
[ワークスペース] タブリファレンス。
ロケーション
[地域] タブのリファレンス。
テスト
[テスト] タブのリファレンス。
設定の概要
設定の概要。
フォントの代替機能の改善
新しい `size-adjust` とフォント指標のオーバーライドにより、デベロッパーはウェブフォントにほぼ一致するフォントの代替を作成できます。これにより、レイアウト シフトが軽減されます。
Lighthouse 10 の新機能
Lighthouse 10 では、新しいスコアリングと監査を実施できます。
Chrome 111 ベータ版
CSS の新しい色タイプと色空間、CSS の三角関数、View Transitions API を追加しました。
Chrome フラグとは
追加のデバッグツールを有効にするか、Chrome の新機能や試験運用版の機能をお試しください。
WebHID で Stadia コントローラに話しかける
フラッシュされた Stadia コントローラは標準のゲームパッドのように動作します。つまり、Gamepad API を使用してアクセスできるボタンはすべてではありません。WebHID を使用すると、見つからなかったボタンにアクセスできるようになります。 Stadia の終了後、コントローラがゴミ埋め立て地に捨てられるのではないかと多くの人が心配していました。幸い、Stadia チームは、 Stadia Bluetooth モード のページにアクセスしてコントローラに書き込むことができるカスタム
Chrome 110 の新機能
Chrome 110 がリリースされました。新しい :Picture-in-picture 疑似クラスでカスタム スタイルをピクチャー イン ピクチャーの要素に追加したり、launch_handler でウェブアプリの起動動作を設定したり、iframe の認証情報のない属性を使用して、クロスオリジンの埋め込みポリシーを設定していないサードパーティのコンテンツを埋め込んだりできます。
CrUX History API の使用方法
CrUX History API の詳細と、この API を使用してユーザー エクスペリエンスの傾向を追跡する方法を学びます。
DevTools の新機能(Chrome 110)
再読み込み時にパフォーマンス パネルをクリアする、レコーダーでコードを表示してハイライト表示するなど
サードパーティの iframe での Web Share API に関する新しい要件
プライバシーとセキュリティを強化するため、サードパーティの iframe での Web Share API 呼び出しを明示的に許可する必要があります。 この記事では、Web Share API の互換性を破る可能性がある変更について説明します。この変更はすでに Firefox で導入されており、 Chrome バージョン 110 以降 でリリースされる予定です。 Safari にも近日中に 導入される予定です。 Web Share API
Chromium Chronicle #32: パッチ ギャップに注意する
Chromium のデベロッパーが n-day の悪用のリスクを低減する方法をご確認ください。
CSS の新しい色空間のご紹介
CSS Color 4 は、より多くの色、操作機能、優れたグラデーションなど、広色域のツールと機能をウェブで実現します。
HD CSS カラーに移行
CSS Color 4 は、広色域のツールと機能をウェブに提供します。
高精細 CSS カラーガイド
CSS Color 4 は、広色域のツールと機能をウェブに提供します。
さらに多くの色と新しい空間を利用
CSS Color 4 は、広色域のツールと機能をウェブに提供します。
ピクチャー イン ピクチャーの未来
常時表示のウィンドウで任意の HTML コンテンツを有効にする Chrome のオリジン トライアルに関するニュース。
プライベート ネットワーク アクセスの更新: サポート終了の試用期間延長の発表
Chrome では、プライベート ネットワーク アクセスの仕様の一環として、保護されていない公開ウェブサイトからプライベート ネットワーク エンドポイントにアクセスすることが非推奨となります。非推奨のトライアルは Chrome 113 までご利用いただけます。
DevTools のヒント: PWA のデバッグ
DevTools を使用してプログレッシブ ウェブアプリをデバッグする
CSS color-mix()
CSS から直接、サポートされている色空間の色を組み合わせます。
拡張機能 Service Worker のライフタイムの延長
拡張機能 Service Worker は、イベントを受信している限り存続できるようになりました。これにより、拡張機能 Service Worker の信頼性は向上しますが、回避すべき落とし穴があります。
DevTools の新機能
DevTools の最新の変更内容をご確認ください。
Manifest V3 のオフスクリーン ドキュメント
Chrome 拡張機能の開発用の Offscreen Documents API が導入されました。
Chrome Android でのウェブアプリの基本的なオフライン ページ
Chrome 109 以降では、Android にインストールされているウェブアプリにオフライン機能がない場合に、アプリが現在オフラインであることを示すデフォルト ページが自動的に生成されます。
Scrollend(新しい JavaScript イベント)
タイムアウト関数を削除し、そのバグを取り除きます。これは本当に必要なイベントである Scrollend です。
CSS のイニシャル文字を使用してドロップ キャップを管理する
ドロップキャップをスタイリングするための面白い回避策に「さよなら」と言ってください。
使用できるウェブの検出
ご使用のブラウザが対応している高度なウェブ機能は何ですか?また、どのようなウェブアプリでこうした機能が活用されているのでしょうか。こうした疑問に答えるには、ブラウザのテストサイトとブラウザ拡張機能をご覧ください。 Project Fugu は、ウェブ機能のギャップを埋めて新しいクラスのアプリケーションをウェブで実行できるようにする全社的な取り組みです。具体的には、アプリ デベロッパーがこれまで不可能だったユースケースを可能にする新しい API
Cookie の有効期限と最長期間の属性に上限が追加されました
Chrome リリース M104(2022 年 8 月)以降、Cookie に 400 日を超える有効期限を設定できなくなりました。
Chrome 110 ベータ版
CSS の頭文字、ウェブアプリ起動ハンドラ、FedCM API のクロスオリジン iframe サポートなど。
ページがバックフォワード キャッシュから復元できることを確認する
Lighthouse を使用して、ページをバックフォワード キャッシュから復元できるかどうかをテストする方法
iframe 認証情報なし: COEP 環境に iframe を簡単に埋め込む
Chrome 110 では、iFrame 認証情報なし機能が実装されています。デベロッパーは、新しい一時的なコンテキストを使用して、サードパーティの iframe でドキュメントを読み込むことができます。その代わり、これらは COEP 埋め込みルールの対象ではなくなります。COEP を使用するデベロッパーは、COEP 自体を使用しないサードパーティの iframe を埋め込むことができるようになりました。
ウェブ オーディオで出力先デバイスを変更する
ウェブ オーディオの音声出力先をプログラムで変更する方法について説明します。
ファビコンを取得しています
ウェブサイトのファビコンを取得する方法
Origin Private File System を基盤とするブラウザ内の SQLite Wasm
SQLite を使用して、ウェブですべてのストレージニーズを高パフォーマンスで処理します。 SQLite は、人気のある オープンソース の軽量な埋め込みリレーショナル データベース管理システムです。多くのデベロッパーは、構造化された使いやすい方法でデータを保存するためにこれを使用しています。SQLite はサイズが小さくメモリ要件が低いため、モバイル デバイス、デスクトップ アプリケーション、ウェブブラウザでデータベース エンジンとして使用されることがよくあります。 SQLite の主な機能の
Chrome 109 の新機能
Chrome 109 がリリースされました。Origin Private File System API が Android で使用可能になり、CSS に新しいプロパティ セットが追加され、MathML コアのサポートにより HTML に数学表記を簡単に追加できるようになりました。その他多くの機能があります。
DevTools の新機能(Chrome 109)
レコーダーでステップをスクリプトとしてコピーしたり、パフォーマンスの録音で実際の関数名をコピーしたりできます。
RenderingNG の詳細: LayoutNG ブロックの断片化
LayoutNG でのブロックの断片化が完了しました。この記事では、この機能の仕組みと重要性について説明します。
DevTools のヒント: Project Fugu API のデバッグ
DevTools を使用して Project Fugu API をデバッグします。
リリース スケジュールの変更(Chrome 110 から)
Chrome 110 以降、ごく一部のユーザーを対象に早期安定版がリリースされます。
Chrome のバリエーションの概要
Chrome のブラウザの新機能をテストするメカニズム
Chrome のリリース チャンネルとは
Chrome で Canary、Dev、Beta、Stable の各リリース チャンネルを使用して新機能のテストやアップデートのロールアウトを行う方法をご確認ください。
CSS ネストの構文の選択に関するヘルプ
CSS ワーキング グループは、CSS でネストを定義する最適な方法について議論を続けています。CSS の開発に携わっている方は、ぜひご協力をお願いします。
Chrome Dev Insider: 今年は
Chrome のウェブ プラットフォーム チームから、さまざまな視点や会話、最新情報をデベロッパーに紹介する最新情報をお届けします。
Chrome ウェブストア ポリシーの更新
Chrome では、Chrome ウェブストアのデベロッパー プログラム ポリシーを更新し、Google の指針を明示し、施行についてより多くの背景情報を提供するとともに、ポリシーをよりわかりやすくします。
広告の関連性を最大限に高める
サードパーティ Cookie を使用しない広告の関連性に関するプライバシー サンドボックスに関する新しいドキュメント。
Chrome のメモリモードと省エネモードについてデベロッパーが知っておくべきこと
Chrome の新しいメモリセーバー モードと省エネ モードをページで適切に処理する方法について説明します。
DevTools のヒント: Device Mode
DevTools の Device Mode で Mobule デバイスをシミュレートします。
Chrome 109 ベータ版
MathML、getDisplayMedia() の条件付きフォーカス、Android のオリジン プライベート ファイル システムなど。
Chrome Android での安全なお支払いの確認
Secure Payment Confirmation は、パスキーの力を利用したフィッシング耐性のある支払い確認をウェブで提供します。Chrome 109 から Android 版 Chrome で利用可能になります。
WebAuthn パスキーの自動入力を使用したフォームへのパスワードレス ログイン
WebAuthn 条件付き UI は、ブラウザのフォーム自動入力機能を活用して、ユーザーが従来のパスワード ベースのフローでパスキーを使用してシームレスにログインできるようにします。
Chrome 拡張機能: API を拡張してインスタント ナビゲーションをサポート
バックフォワード キャッシュ、プリロード ナビゲーションをサポートするように拡張機能 API が更新されました。
Chrome 108 の新機能
Chrome 108 がリリースされました。新しい Intl API が追加され、数値の書式設定をより細かく制御できるようになりました。新しい Pop Up API のオリジン トライアルも用意されており、ユーザーに重要なコンテンツを簡単に提示できます。CSS にはいくつかの改良点が加えられています。他にもたくさんあります。
画面共有の改善(Chrome 109)
ウェブでの画面共有の 2 つの改善点(画面共有時のタブのフォーカスを制御するメカニズムと、ローカルでの音声の再生を制御するメカニズム)に関する詳細。
条件付きフォーカスによる画面共有の改善
ウェブ上で画面を共有する際に、タブやウィンドウに条件付きでフォーカスする。
DevTools のヒント: CSS の改善点を特定する
[CSS の概要] パネルを使用して、CSS の改善点を特定できます。
無効、オーバーライドされた、無効な CSS、その他の CSS を検索する
CSS プロパティに関する問題を一目で把握できます。
マニフェスト - oauth2
manifest.json の oauth2 プロパティに関するリファレンス ドキュメント。
CrUX ダッシュボード
CrUX ダッシュボードを使用した BigQuery CrUX データの可視化
DevTools のヒント: DevTools の迅速なナビゲーション
ショートカットと設定を使用して DevTools の迅速な操作を行い、ワークフローを高速化する方法について説明します。
ストレージの性質はさまざま: ストレージ バケットの導入
ストレージ バケットは、メモリ負荷が高い場合に永続ストレージ エビクションを予測しやすくするための API です。
Chrome ウェブストア ポリシーの更新
Chrome では、Chrome ウェブストアのデベロッパー プログラム ポリシーを更新し、Google の指針を明示し、施行についてより多くの背景情報を提供するとともに、ポリシーをよりわかりやすくします。
Android 版 Chrome でのビューポートのサイズ変更動作の変更に備える
Chrome 108 でのビューポートのサイズ変更動作の変更点、Chrome でこの変更が行われる理由、準備について。
マニフェスト - input_components
manifest.json の input_components プロパティのリファレンス ドキュメント。
Chrome 108 ベータ版
新しい CSS ビューポート ユニット、Federated Credential Management API、可変 COLRv1 フォントなど。
Payment Handler API の CanMakePayment イベントの動作を更新
販売者は、Payment Handler API の「canmakepayment」Service Worker イベントを使用して、インストール済みの支払いアプリにカードが登録されているかどうかを販売者に伝えます。Chrome では、このイベントに関連付けられたプロパティが削除されます。
DevTools のヒント: DevTools を開くさまざまな方法
Chrome DevTools を開く方法を学びましょう。
DevTools の新機能(Chrome 108)
非アクティブな CSS プロパティ、レコーダーの新しい XPath セレクタとテキスト セレクタなどに関するヒント
Chrome 107 の新機能
Chrome 107 がリリースされました。Screen Capture API に、画面共有のエクスペリエンスを向上させる新しいプロパティが追加されました。ページ上のリソースがレンダリング ブロックかどうかを正確に特定できるようになりました。オリジン トライアルで宣言型の PendingBeacon API を使用して、バックエンド サーバーにデータを送信する新しい方法があります。他にもたくさんあります。
互換性を破る変更: AccessHandles の同期メソッド
Emscripten などのコンテキストでの AccessHandles の操作を簡素化するために、FileSystemSyncAccessHandle インターフェースのメソッドを同期化しています。
DevTools のヒント: 低コントラスト テキストを見つけて修正する
Chrome DevTools を使用して、低コントラストのテキストを見つけて修正する方法を学びます。
ウェブサイトを読みやすくする
DevTools を使用して、低コントラストのテキストを見つけて修正します。
「トラスト トークン」を「プライベート ステート トークン」に名称変更
Trust Token API の名称を Private State Token API に変更し、プライバシーと実用性のメリットをより明確に表現する運びとなりました。
Chrome DevTools のレコーダー以外でユーザーフローをカスタマイズ、自動化する
Chrome DevTools のレコーダー以外でユーザーフローをカスタマイズおよび自動化する方法を学びます。
Advanced Web Apps Fund - 2022 年 10 月更新
Advanced Web Apps Fund を通じて 11 のプロジェクトを後援し、Open Collective を通じて 10 万ドル以上の寄付を行いました。その重要性を認識し、より多くの人がこれらのプロジェクトに時間を費やせるようにしました。
コンテナ内のクエリ ポリフィル
コンテナクエリのポリフィルにより、古いブラウザでコンテナクエリがサポートされる仕組みについて説明します。
CSS ネストアンケート結果の構文の選択に関するヘルプ
7,590 件のデベロッパーの意見の結果をご覧ください。
Chrome 拡張機能の開発を始める新しい方法
Chrome デベロッパーの学習を始めるためのより良い方法。
CSS 内の置換された要素のオーバーフローに関する変更
意図しないオーバーフローの原因となる CSS の動作変更に関する高度な警告です。
Chrome Dev Insider: フレームワーク エコシステムに応じたパフォーマンスのスケーリング
Chrome のウェブ プラットフォーム チームから、さまざまな視点や会話、最新情報をデベロッパーに紹介する最新情報をお届けします。
Project Fugu は「完了」しているか
この記事では、新機能の実装から既存の機能の改良・改善へと、Project Fugu チームの焦点が移った様子を説明します。
タブを管理する
タブグループを使用してタブをプログラムで整理する方法について学習します。
Hello World 拡張機能
最初の Hello World Chrome 拡張機能を作成します。
すべてのページでスクリプトを実行する
既存のウェブページに新しい要素を自動的に追加する方法について学びます。
アクティブなタブにスクリプトを挿入する
現在のページのスタイルを簡素化する方法を学びます。
マニフェスト - 作成者
manifest.json の作成者名プロパティのリファレンス ドキュメント。
画面共有時に過度な共有を避ける
ウェブ プラットフォームには、プライバシーを保護しながら画面共有するための追加の管理機能が付属しています。
Payment Handler API には CSP の connect-src が必要
CSP を使用している場合、Payment Handler API のユーザーは「connect-src」ディレクティブに支払いエンドポイントを追加する必要があります。
Chrome 107 ベータ版
Screen Capture API、CSS グリッド テンプレート プロパティの補間機能などが追加されました。
プライバシーに配慮した画面共有の管理
ウェブ上でプライバシーを保護しながら画面共有を管理することで、ユーザーが必要以上の共有がないようにします。
DevTools のヒント: ユーザーフローの記録の編集、デバッグ、エクスポート
[レコーダー] パネルとその拡張機能を使用すると、ユーザーフローの記録を編集、デバッグ、エクスポートできます。
Manifest V3 への移行の詳細
Manifest V3 への拡張機能の移行計画に関する新しい詳細
Chrome 106 の新機能
Chrome 106 がリリースされました。新しい Intl API が追加され、数値の書式設定をより細かく制御できるようになりました。新しい Pop Up API のオリジン トライアルも用意されており、ユーザーに重要なコンテンツを簡単に提示できます。CSS にはいくつかの改良点が加えられています。他にもたくさんあります。
何十億人ものユーザー向けに Chrome のアップデートを準備する方法
"Chrome リリースチームのテクニカル プログラム マネージャーと対話し、各リリースをスムーズに進める方法を確認します。"
DevTools の新機能(Chrome 107)
キーボード ショートカットをカスタマイズしたり、Memory Inspector で C/C オブジェクトをハイライト表示したりできます。
DevTools の新機能(Chrome 106)
最新のウェブ デバッグ、パフォーマンス分析情報の LCP 時間の内訳などのサポートが強化されました。
ポリフィルの大規模な更新に伴い、コンテナクエリは安定版のブラウザに取り込まれ始める
"コンテナクエリを使用すると、コンポーネントが収まるスペースに基づいて、コンポーネントがレスポンシブなスタイル設定情報を所有できるようになります。この機能は最新のブラウザに展開され始めており、ポリフィルのサポートに大きなアップデートが加えられています。
ポップアップ: 復活!
プラットフォームに新しく組み込まれた API により、問題のあるパターンがはるかに容易になりました。
Memory Inspector を C/C++ デバッグ用に拡張する
Memory Inspector を使用して C/C+WebAssembly アプリのデバッグを改善した方法をご覧ください
Chrome 106 でのサポートの終了と削除
計画に役立つ Chrome 106 のサポート終了と削除のまとめ。
匿名 iframe オリジン トライアル: COEP 環境に iframe を簡単に埋め込む
COEP を使用するデベロッパーは、COEP 自体を使用しないサードパーティの iframe を埋め込むことができるようになりました。匿名の iframe オリジン トライアルは、Chrome のバージョン 106 ~ 108 でテストできます。
DevTools のヒント: CSS Flexbox の検査とデバッグを行う方法
Chrome DevTools を使用して、CSS Flexbox レイアウトを検査、変更、デバッグする方法について説明します。
Chrome DevTools での最新のウェブ デバッグ
ここでは、バンドラ、フレームワーク、サードパーティのコードを操作する際のデバッグとプロファイリング エクスペリエンスを改善する Chrome DevTools の最近の変更を紹介します。
事例紹介: DevTools による改善された Angular デバッグ
Chrome DevTools チームと Angular チームが協力して Angular をテスト試験運用し、デバッグ エクスペリエンスを向上させました。他のフレームワークでも同様の変更が可能です。
Web SQL の非推奨化と削除
Web SQL は、2009 年 4 月に提案され、2010 年 11 月に廃止されました。このキーは段階的に Chrome から削除されました。最初は安全でないコンテキストで削除され、その後 Chrome 119 で完全に削除されます。
Chrome 105 の新機能
Chrome 105 がリリースされました。コンテナクエリと :has() は、レスポンシブに最適です。新しい Sanitizer API は、任意の文字列に対応する堅牢なプロセッサを提供し、クロスサイト スクリプティングの脆弱性を減らすことができます。Google では、WebSQL のサポート終了に向けて新たな一歩を踏み出しています。ほかにも多数あります。
Compression Streams API を使用したブラウザでの圧縮と解凍
独自の圧縮ライブラリや解凍ライブラリを用意する必要がない小規模なウェブアプリを作成する Compression Streams API は、gzip 形式または deflate(または deflate-raw)形式を使用してデータ ストリームを圧縮および解凍するために使用します。 組み込みの圧縮 JavaScript アプリケーションは、圧縮ライブラリを含める必要がないため、アプリケーションのダウンロード サイズを小さくできます。安定版の Chrome と Safari Technology
Angular Image ディレクティブを使用して画像を最適化する
新しい Angular 画像ディレクティブ(NgOptimizedImage)が導入され、Angular アプリの画像に組み込みのパフォーマンス最適化手法が導入されました。
DevTools のヒント: コンソールのショートカットでワークフローを高速化する方法
Console Utilities API のショートカットを使用すると、最近の要素の参照、オブジェクトのクエリ、イベントや関数呼び出しの監視などを簡単に行うことができます。
最上位レイヤ: Z-index:10000
新しい組み込みコンポーネントと API がプラットフォームに導入される中で、これらで使用できる「トップレイヤ」とは何でしょうか。
Chrome から HTTP/2 サーバー プッシュを削除
HTTP/2 サーバー プッシュをデフォルトで無効化(Chrome 106)
DevTools のヒント: CSS グリッドを確認する方法
Chrome DevTools を使用して、CSS のグリッド レイアウトを表示、変更する方法を学習します。
ブラウザでサードパーティ リソースの読み込みを最適化できるか。
ウェブ上でのサードパーティ リソースの読み込みを改善するための変更の推進
DevTools の新機能(Chrome 105)
レコーダーでの詳細な再生とマウスオーバー イベント、[パフォーマンス分析情報] パネルの LCP などがサポートされます。
DevTools のヒント: CSS アニメーションを検査して変更する方法
[アニメーション] タブを使用すると、CSS アニメーションや遷移などを検証、変更できます。
Chrome 105 でのサポートの終了と削除
計画に役立つ Chrome 105 のサポート終了と削除のまとめ。
DevTools のヒント: ウェブサイトのパフォーマンスに関する実用的な分析情報を取得する
新しい [パフォーマンス分析情報] パネルでウェブサイトのパフォーマンスに関する行動につながるインサイトを確認する
@container と :has(): 2 つの強力な新しいレスポンシブ API を Chromium 105 でリリース
"コンテナクエリと :has() は、レスポンシブに最適です。幸いなことに、この 2 つの機能は Chromium 105 で一緒にリリースされます。今回のリリースは、レスポンシブ インターフェースに関して特にご要望の多かった機能を 2 つ含む大規模なリリースです。
:has(): ファミリー セレクタ
Chromium 105 で :has() が導入されました。CSS にもたらされる素晴らしい機会をいくつか見てみましょう。
NavigateEvent の変更(Chrome 105)
Navigation API が、NavigateEvent で 2 つの新しいメソッドを取得しました。Transitionwhile() は inspect() で、rereScroll() は Scroll() です。
Chrome 104 の新機能
Chrome 104 がリリースされました。リージョン キャプチャでは、getDisplayMedia() を使用して現在のタブをキャプチャする場合に、切り抜き領域を指定します。メディアクエリの構文は、数学的比較演算子を使用して記述できます。共有要素遷移がオリジン トライアルを開始します。ほかにも多数あります。
Async Clipboard API のウェブ カスタム フォーマット
ウェブ カスタム フォーマットを使用すると、ウェブサイトは標準形式を使用して任意のサニタイズされていないペイロードを読み書きできます。アプリケーションは、そのようなペイロードをサポートするようにオプトインできます。
DevTools のヒント: コンソールでメッセージをログに記録する方法
コンソールを使用すると、変数、オブジェクト、メッセージの記録、メッセージのフィルタリングとグループ化などを行うことができます。
Chrome ウェブストア デベロッパー ダッシュボードの刷新された分析機能
Google では、Chrome ウェブストア デベロッパー ダッシュボードのアイテム分析機能を改良しています。新しいダッシュボードはひと目で理解しやすくなり、特に役立つ情報が事前に集約されています。
CSS ネストの構文の選択に関するヘルプ
2 つの競合する構文が、仕様候補に採用されるべき構文を判断する際にあなたの助けを必要としています。
Chrome DevTools での最上位レイヤのサポート
Chrome DevTools での最上位レイヤのサポートについて説明します。
2022 年における Chrome のウェブ フレームワーク ファンドに関する最新情報
Chrome のウェブ フレームワークの資金提供対象についてお知らせします
DevTools のヒント: DevTools を使用して CSS ユーザー設定のメディア機能をエミュレートする方法
[レンダリング] タブを使用して、ユーザー設定をエミュレートし、ウェブサイトのユーザー適応動作をテストします。
DevTools の新機能(Chrome 104)
デバッグ中のフレーム再開、[Recorder] パネルの低速リプレイ オプションなど。
Chrome Dev Insider: CSS と UI エディション
Chrome のウェブ プラットフォーム チームから、さまざまな視点や会話、最新情報をデベロッパーに紹介する最新情報をお届けします。
PC サイト向けの Signed Exchange のリリース
パソコン版 Chromium ブラウザに対する Signed Exchange のサポートと、その他の最近の機能リリースを発表しました。
DevTools のヒント: CSS コンテナクエリを調べる方法
DevTools を使用して、CSS コンテナクエリを調査してデバッグします。
CSS コンテナクエリの検査とデバッグを行う
Chrome DevTools を使用して CSS コンテナクエリを検査、変更、デバッグする方法を学びます。
Chrome 104 でのサポートの終了と削除
計画に役立つ Chrome 104 のサポート終了と削除の概要。
Chrome 103 の新機能
Chrome 103 がリリースされました。新たに HTTP ステータス コードが導入され、ページが表示される前にプリロードするコンテンツをブラウザが判断できるようになりました。Local Font Access API を使用すると、ウェブ アプリケーションはユーザーのパソコンにインストールされているフォントを列挙して使用できます。非同期 API でタイムアウトを実装する簡単な方法があります。ほかにも多数あります。
DevTools の新機能(Chrome 103)
ダブルクリックと右クリック イベントの記録、Lighthouse でユーザーフローを測定するための新しいオプションなど。
ユーザー補助機能のリファレンス
Chrome DevTools のユーザー補助機能の包括的なリファレンスです。
Chrome 102 の新機能
Chrome 102 がリリースされました。インストールされている PWA をファイル ハンドラとして登録できるため、ユーザーはディスクから直接ファイルを簡単に開くことができます。inert 属性を使用すると、DOM の一部を不活性としてマークできます。Navigation API を使用すると、シングルページ アプリで URL のナビゲーションと更新を簡単に処理できます。ほかにも多数あります。
パフォーマンス分析情報を作成した方法とその理由
パフォーマンス分析情報パネルを構築した方法と理由
安全なお支払いの確認による認証
SPC の認証プロトコルを実装して、顧客のトランザクションを検証します。
安全なお支払いの確認
決済サービス プロバイダとの認証を安全に行えるようにするために提案されているウェブ標準の概要。
WebAssembly 移行ガイド
WebAssembly はブラウザ横断型に対応しつつあるため、 サポートを終了する予定です。 2019 年第 4 四半期に PNaCl を追加(Chrome アプリは除く)。 WebAssembly 関連の活発なエコシステムは、新しいものも既存のものも含め、高性能ウェブアプリに適したものになります。また、PNaCl の利用率が低いことも、サポート終了の十分な理由となっています。 Chrome 76 以降、オープンウェブの PNaCl は オリジン トライアル の対象になりました。これは、ウェブ
安全なお支払いの確認を登録する
SPC の登録プロトコルとフローを実装し、販売者から直接カード発行会社または銀行に対して厳密な認証を行えるようにする。
Chrome 103 でのサポートの終了と削除
計画に役立つ Chrome 103 のサポート終了と削除の概要。
Interaction to Next Paint(INP)ツールのサポート
Chrome パフォーマンス ツールで Interaction to Next Paint をサポートしました。
ストリームによるマルチページ アプリケーションの高速化
ワークボックス ストリームを使用して、Service Worker キャッシュの部分的なマークアップとネットワークの部分的なコンテンツを使用するマルチページ アプリケーションを作成し、ほぼ瞬時にレンダリングされる高速なエクスペリエンスを作成する方法を学習します。
クロスサイト プリフェッチで LCP を高速化
すぐに利用できるテクノロジーの概要です。
ネットワーク管理者による Chrome の非公開プリフェッチ プロキシ
プリフェッチされたナビゲーションでコンテンツをフィルタする方法の概要。
Chrome のプライベート プリフェッチ プロキシ
クロスサイト プリフェッチで Largest Contentful Paint(LCP)を高速化
DevTools の新機能(Chrome 102)
新しい [パフォーマンス分析情報] パネル、ライトモードとダークモードをエミュレートするためのショートカットなど。
WebAssembly のデバッグの高速化
大規模なアプリケーションで WebAssembly のデバッグを高速化する方法。
キャプチャ ハンドルによるタブ共有の改善
ウェブ プラットフォームには、キャプチャ ハンドルが付属するようになりました。キャプチャ ウェブアプリは、キャプチャされたウェブアプリがオプトインされている場合、キャプチャ ウェブアプリが人間工学的かつ確実に識別できるメカニズムを備えています。
Advanced Web Apps Fund
Advanced Web Apps Fund に関するお知らせ
DOM オブジェクトのプロパティを表示する
DOM オブジェクトのプロパティを表示、フィルタできます。
バックフォワード キャッシュをテストする
ページがバックフォワード キャッシュ向けに最適化されていることを確認します。
Chrome 101 の新機能
Chrome 101 では、Hwb 表記を使用して色を指定する新しい方法が導入されました。また、フェッチ優先度によって、リソースをダウンロードする最適な順序をブラウザにヒントにできます。ほかにも多数あります。
折りたたまれたコンテンツを hidden=until-found でアクセスできるようにする
この新しい属性値を使用して、アコーディオン セクション内のコンテンツを見つけてリンクできるようにする方法。
Signed Exchange を使用した LCP の最適化
Signed Exchange は、ウェブ デベロッパーが Google 検索などの SXG リファラーからのページ読み込み速度を大幅に改善するための手段です。チェックボックスをオンにするだけで有効に機能するメリットもありますが、最大限に活用するには、追加の手順が必要になります。
権限ポリシーでブラウザの機能を管理する
ページと埋め込みのサードパーティの iframe がブラウザ機能にアクセスする方法を管理します。
RenderingNG の詳細: BlinkNG
BlinkNG と、Blink コードの組織と構造における長年の課題に対処してきたさまざまなサブプロジェクトについてご覧ください。
Chrome Dev Insider のご紹介
Chrome のウェブ プラットフォーム チームによる新しいシリーズです。さまざまな視点、会話、最新情報をデベロッパーの皆様にお伝えします。
レンダリング パフォーマンスに関する問題を検出する
再ペイント、レイアウト シフト、レイヤとタイル、スクロールに関する問題、レンダリング統計情報、ウェブに関する主な指標の確認
サイトにコンテンツを安全に埋め込む
コンテンツの埋め込みに使用される複数の HTML 要素と、セキュリティを最適化する方法について説明します。
CSS メディア機能をエミュレートする
Preferreds-color-scheme、media type、forced-colors、preferreds-contrast、preferreds-reduced-motion、color-gamut をエミュレートします。
[レンダリング] タブの概要
ウェブ コンテンツのレンダリングに影響する一連のオプションを紹介します。
DevTools の新機能(Chrome 101)
ユーザーフローを JSON としてインポート / エクスポートできるほか、hwb() カラーや、[Styles] ペインでカスケード レイヤを表示することも可能です。
Chrome 101 でのサポートの終了と削除
計画に役立つ Chrome 101 のサポート終了と削除のまとめ。
Chrome 102 でのサポートの終了と削除
計画に役立つ Chrome 102 のサポート終了と削除のまとめ。
Chrome 100 の新機能
Chrome 100 は現在、3 桁のバージョン番号でリリースされます。Chrome の初回リリース以来、#100CoolWebMoments を記念して、記念の時期をお祝いしましょう。ユーザー エージェント文字列に重要な変更がいくつかあります。Multi-Screen Window Placement API を使用すると、ユーザーのマシンに接続されているディスプレイを列挙し、特定の画面にウィンドウを配置できます。ほかにも多数あります。
パフォーマンス分析情報: ウェブサイトのパフォーマンスに関する実用的な分析情報を取得できます
[パフォーマンス分析情報] パネルで、ウェブサイトのパフォーマンスに関する行動につながるインサイトを入手しましょう。
#100CoolWebMoments で Chrome 100 をお祝いしましょう
Chrome バージョン 100 のリリースを記念して、思い出を振り返りましょう。
DevTools の新機能(Chrome 100)
@supports ルールの表示と編集、録音のセレクタの名前変更とカスタマイズなどを行えます。
Chrome 100 でのサポートの終了と削除
計画に役立つ Chrome 100 のサポート終了と削除のまとめ。
Canvas2D では常にあなた。
API Next が刷新されます。
Chrome 99 の新機能
Chrome 99 がリリースされました。CSS カスケード レイヤを使用すると、CSS をより詳細に制御でき、スタイル固有の競合を防ぐことができます。showPicker() メソッドを使用すると、日付、色、データリストなどの入力要素を選択するブラウザ選択ツールをプログラムで表示できます。Chrome と Firefox のバージョン 100 まであと数週間です。ほかにも多数あります。
Next.js でのサードパーティ スクリプトの読み込みを最適化する
この記事では、Next.js Script コンポーネントについて説明し、このコンポーネントを使用してサードパーティ スクリプトの順序を改善する方法を説明します。
DevTools の新機能(Chrome 99)
WebSocket リクエストのスロットリング、新しい Reporting API ペイン、コンソールのスタイル設定など。
CSS Flexbox レイアウトを検査してデバッグする
Chrome DevTools を使用して、CSS Flexbox レイアウトを検査、変更、デバッグする方法について説明します。
Chrome 99 でのサポートの終了と削除
計画に役立つ Chrome 99 のサポート終了と削除のまとめ。
プラグインの使用
Workbox には既製のユーティリティが数多く用意されていますが、アプリケーションの要件を満たすために拡張が必要になる場合があります。そこで役立つのが Workbox のプラグインアーキテクチャです。
カスケード レイヤがブラウザに登場
"カスケード レイヤは、コードのカスケード優先順位を管理できる新しい CSS API で、まもなくすべての最新ブラウザに導入されます。"
権限リクエスト チップ
Chrome 98 では、権限用の専用スペースがロケーション バーに追加され、プロンプトの要求を少なくして、決定への執拗さを感じさせないようにすることを目的としています。
Chrome 98 の新機能
Chrome 98 がリリースされました。自動ダークテーマのオリジン トライアルに登録済みのお客様には、要素単位でオプトアウトする新しい方法があります。COLRv0 フォント形式の進化である COLRv1 がサポートされるようになりました。他にもたくさんあります。
Chromium Chronicle #28: iOS で Chrome を使ってみる
Chrome の iOS アプリのコードを扱う方法を学びます。
日付、時刻、色、ファイルのブラウザ選択ツールを表示する
ウェブ プラットフォームには、ブラウザの選択ツールを表示する正規の方法が付属しています。
DevTools の新機能(Chrome 98)
全画面表示のユーザー補助ツリー、[変更] タブでの詳細な変更など。
同一オリジン ポリシーを緩和するために document.domain を変更できなくなります
ウェブサイトが「document.domain」の設定に依存している場合は、対応が必要です。
非推奨になった機能と削除(Chrome 98)
計画に役立つ Chrome 98 のサポート終了と削除のまとめ。
プライベート ネットワーク アクセス: プリフライトの導入
Chrome では、プライベート ネットワーク アクセスの仕様の一環として、保護されていない公開ウェブサイトからプライベート ネットワーク エンドポイントにアクセスすることが非推奨となります。おすすめの対応方法について以下でご説明します。
COLRv1 カラー グラデーション ベクター フォント(Chrome 98)
Chrome 98 では、Chrome チームと Fonts チームが COLRv1 のサポートを追加しました。COLRv1 は、グラデーションの追加、合成、ブレンドなどによりカラーフォントを幅広く普及させることを目的とした COLRv0 フォント形式の進化であり、圧縮に適した鮮明でコンパクトなフォント ファイルにおける内部の形状の再利用を改善します。
Chrome 97 の新機能
Chrome 97 がリリースされました。ウェブ トランスポートを使用してクライアントとサーバー間でリアルタイム メッセージを送信するための新しいオプションが追加されました。機能検出を使用すると、ブラウザでサポートされているスクリプトの種類を確認できます。JavaScript はさらに便利になり、さらに多くの機能が加わります。
起動ハンドラ API
起動ハンドラを使用すると、アプリの起動方法(既存のウィンドウと新しいウィンドウのどちらを使用するか、選択したウィンドウを起動 URL に移動するかどうかなど)を制御できます。
Chrome DevTools のフル ユーザー補助ツリー
DevTools の新しいフルページ ユーザー補助ツリーと、このツリーの設計と実装を確認します。
オンラインに戻ったときにリクエストを再試行する
ユーザーがオフラインになることがあります。状況に適応し、最終的にオンラインに戻ったときにリクエストを再開できるようサポートする方法を学びます。
Service Worker の更新を即時に処理する
Service Worker を更新するときは、ユーザーに知らせた方がよいことがあります。ここでは、その方法について説明します。
フォールバック レスポンスの管理
ときどき、お客様がネットワーク障害に遭遇したり、オフラインになったりすることがあります。このような状況に対応し、フォールバック レスポンスを提供する方法について学習します。
ワークボックス ウィンドウの使用
ユーザーがオフラインになることがあります。状況に適応し、最終的にオンラインに戻ったときにリクエストを再開できるようサポートする方法を学びます。
キャッシュに保存された音声と動画の配信
Service Worker で音声や動画のリソース リクエストを処理するのは困難です。workbox-range-request を使用して、予測可能な方法でこのようなリクエストを処理する方法を学習します。
実行時にリソースをキャッシュする
クロスオリジン リソースなど、実行時にキャッシュ リソースを処理する方法について説明します。
ウィンドウからキャッシュにアクセスする
キャッシュインスタンスへのアクセスは、Service Worker のスコープに限定されるものではありません。ウィンドウのコンテキストからもアクセス可能です。この記事ではその方法をご紹介します。
ネットワーク タイムアウトの強制
ネットワーク接続が遅い場合に強制的にネットワーク タイムアウトを設定する方法と、適切なタイミングを設定する方法について説明します。
DevTools の新機能(Chrome 97)
新しい [レコーダー] パネル、[デバイスモードでのデバイスリストの更新] など
デベロッパーによるインストール可能な強力なウェブアプリの作成を支援
Chrome に追加された PWA 機能の影響
サポートの終了と削除(Chrome 97)
Chrome 97 でのサポート終了と削除のまとめ。計画の参考にしてください。
Chrome 96 の新機能
Chrome 96 がリリースされました。ウェブアプリ マニフェストには、2 つの新しいプロパティがあります。id プロパティを使用すると、PWA の一意の ID を指定できます。また、protocol_handlers プロパティを使用すると、インストール時に PWA をプロトコル ハンドラとして自動的に登録できます。新しいオリジン トライアルでは、リソースをダウンロードする際のフェッチ優先度を指定できます。ほかにも多数あります。
Lighthouse 9.0 の新機能
Lighthouse 9.0 では、レポートが更新され、ユーザーフローのサポートがプレビュー版としてご利用いただけます。
トラブルシューティングとロギング
Workbox のロギング機能と、ブラウザ内の Service Worker デバッグツールの概要。
事前キャッシュなしでのワークボックスの使用
workbox-build なしで Workbox で Service Worker をビルドする方法
ワークボックスを使用した事前キャッシュ
Workbox を使用して Service Worker でアセットを事前キャッシュする方法について説明します。
ネットワーク ファーストの HTML のナビゲーション プリロード
ナビゲーション プリロードの概要、ナビゲーションを高速化する方法、Workbox での使用方法。
フレームワークの統合
Workbox と統合されるフレームワークとプラグインのクイック リファレンス
Workbox の手法
Workbox のいくつかの使い方を確認します。
事前キャッシュの推奨事項と禁止事項
プレキャッシュの推奨事項と禁止事項について学習します。
Service Worker とアプリケーション シェルモデル
Application Shell モデルを SPA の Service Worker とペアリングする方法。
ユーザーフローを記録、再生、測定する
[Recorder] パネルでは、ユーザーフローの記録、リプレイ、測定、ステップの編集が可能です。
ユーザー エージェント文字列で Chrome のメジャー バージョンを 100 に強制する
Chrome のバージョン番号がまもなく 2 桁から 3 桁に変わり、ユーザー エージェント(UA)文字列を解析するすべてのコードに影響する可能性があります。Chrome 96 ~ 99 の機能フラグを使用すると、UA 文字列のメジャー バージョン番号を 100 にすることで、早期テストを行うことができます。
Chrome DevTools での CSP と Trusted Types のデバッグの実装
Chrome DevTools での、コンテンツ セキュリティ ポリシーと Trusted Types の問題のデバッグの実装方法。
EyeDropper API を使用して画面上のピクセルの色を選択する
クリエイティブ アプリケーションのデベロッパーは、EyeDropper API を使用して、ユーザーがブラウザ外のピクセルを含め、画面上のピクセルから色を選択できる選択ツールを実装できます。
効果的な画像コンポーネントの作成
画像は、ウェブ アプリケーションのパフォーマンス ボトルネックの一般的な原因であり、最適化の重要な重点分野です。このドキュメントでは、Google の Aurora チームが、デベロッパー指向のインターフェースを使用して、Next.js の強力な画像コンポーネントをどのように設計したかについて説明します。このコンポーネントは、デベロッパーにとって使いやすいインターフェースを使用して、多くの最適化が組み込まれています。この投稿では、このコンポーネントがどのように設計され、その過程で学んだ教訓についてお話しします。
DevTools の新機能(Chrome 96)
新しい [CSS の概要] パネルで、CSS 優先のコントラスト メディアや Chrome の自動ダークモードをエミュレートします。
CSS の概要: CSS で改善できる点を特定する
[CSS の概要] パネルで、CSS の改善点を特定できます。
サポートの終了と削除(Chrome 96)
計画に役立つ Chrome 96 のサポート終了と削除のまとめ。
自動ダークモード
ライトテーマのサイトのダークモードを自動生成する。
アーキテクチャごとに異なる Service Worker 戦略
2 種類のウェブサイト アーキテクチャの紹介。
Service Worker の開発エクスペリエンスの向上
Service Worker の使用時に発生する可能性のあるローカル開発の問題を解決する方法。
バグのある Service Worker の削除
問題の原因となっている Service Worker を修正する方法。
Service Worker のデプロイに関する期待事項
Service Worker がデプロイ後にウェブサイトに及ぼす影響を把握する。
Reporting API v1 に移行する
新しいバージョンの Reporting API をご利用いただけます。新しい API はよりスリムで、あらゆるブラウザでサポートされるようになります。
Reporting API を使用してウェブ アプリケーションをモニタリングする
Reporting API を使用して、セキュリティ違反や非推奨の API 呼び出しなどをモニタリングすることができます。
Chrome 95 の新機能
Chrome 95 がリリースされました。ブラウザに組み込まれた URLPattern によってルーティングが簡単になります。また、Eye Dropper API には色を選択するための組み込みツールが用意されており、減少した UA 文字列を今すぐ受け取る新しいオリジン トライアルを利用できます。
RenderingNG の詳細: LayoutNG
LayoutNG のアーキテクチャの大規模な変更によって、さまざまな種類のバグやパフォーマンスの問題がどのように軽減され、軽減されるかを説明します。
Chromium Chronicle #25: スレッドセーフなアノテーション
Clang の静的解析フレームワークがスレッドセーフなプルーフのトイルをどのように引き継ぐかについて学びます。
Chrome ユーザー デバイス特性レポート
開発者は常に、どのようなユーザー層を対象にアプリを開発しているのでしょうか。RAM の容量はどれくらいですか?お使いの Wi-Fi の種類は?新しいレポートでは、さまざまな国とプラットフォームに関する回答を確認できます。
2021 年第 3 四半期における Chrome ウェブストア ポリシーの更新
拡張機能の品質とデベロッパーのエクスペリエンスの一貫性を維持するため、セキュリティ要件を更新し、いくつかのポリシーをさらに明確にしました。
Workbox とは
一般的な Service Worker のルーティングとキャッシュ保存を簡素化する一連のモジュール、Workbox を紹介します。
Service Worker の概要
Service Worker の概要。
Service Worker のキャッシュ戦略
Service Worker でのキャッシュ保存の概要。
Service Worker の人生
オフライン アプリケーションを可能にするために Service Worker がどのように動作するかを理解する。
Manifest V3 への Chrome 拡張機能の移行
Manifest V3 への拡張機能の移行計画の詳細を共有
サポートの終了と削除(Chrome 95)
計画に役立つ Chrome 95 のサポート終了と削除のまとめ。
Chrome 94 の新機能
Chrome 94 がリリースされました。`` 要素のデフォルトの色空間が正式に SRGB として定義され、Display P3 に変更できます。ストリーミング ゲームや動画エディタなどにとって重要な、組み込みのオーディオ コーデックや動画コーデックにアクセスするための新しい低レベルの方法があります。WebGPU がオリジン トライアルを開始します。ほかにも多数あります。
DevTools の新機能(Chrome 95)
新しい CSS の長さ作成ツール、[問題] タブでの問題の非表示、プロパティの表示の改善など。
詳細: VideoNG
最新の再生システムと、Chromium が毎日の何億時間もの総再生時間を支えている仕組みをご確認ください。
DevTools での CSS インフラストラクチャのモダナイゼーション
DevTools での CSS インフラストラクチャの調査と更新を行う方法
Lighthouse 8.4 の新機能
Lighthouse 8.4 では、LCP 画像の遅延読み込みや、モバイル ビューポートのない FID の失敗に対する保護機能が追加されました。
VirtualKeyboard API によるフル コントロール
タッチデバイスの仮想キーボードが表示されたときに、ブラウザがコンテンツ オクルージョンに対応するよう管理します。
Chrome 93 の新機能
Chrome 93 がリリースされました。JavaScript モジュールと同様に、import ステートメントを使用して CSS スタイルシートを読み込めるようになりました。インストールされている PWA を URL ハンドラとして登録できるため、ユーザーは PWA に直接移動できます。皆様からのフィードバックに基づいて Multi-Screen Window Placement API が更新され、2 回目のオリジン トライアルが開始されます。安定版のリリース サイクルを 4 週間に短縮します。ほかにも多数あります。
サポートの終了と削除(Chrome 93)
計画に役立つ Chrome 93 でのサポート終了と削除のまとめ。
非推奨になった機能と削除(Chrome 94)
Chrome 94 でのサポート終了と削除のまとめ。計画の参考にしてください。
Chromium Chronicle #24: StrongAlias、IdType、TokenType
同じ型が互換性のないドメインの値を表すことがあり、バグが発生する可能性があります。幸いなことに、Chromium の //base では明示的な明確なタイプを簡単に導入できます。
プライベート ネットワーク アクセスの更新: 非推奨トライアルのご紹介
プライベート ネットワーク アクセスの仕様の一環として、Chrome 94 より、保護されていない公開ウェブサイトからプライベート ネットワーク エンドポイントにアクセスすることができなくなります。おすすめの対応方法について以下でご説明します。
最新のクライアントサイド ルーティング: Navigation API
シングルページ アプリケーションを構築するための改善された機能を追加する新しい API である Navigation API について説明します。
RenderingNG の主なデータ構造
RenderingNG アーキテクチャのコンポーネントと、レンダリング パイプラインがコンポーネントを通過する仕組みについて理解します。
DevTools の新機能(Chrome 94)
お好みの言語で DevTools を利用したり、新しい Google Nest Hub デバイスを利用したり、新しい CSS コンテナクエリのバッジなどを利用したりできます。
DevTools の CSS グリッドツール
DevTools での CSS グリッドツールのサポートを設計、実装した方法。
DevTools の CSS グリッドツール
DevTools での CSS グリッドツールのサポートを設計、実装した方法。
非推奨になった機能と削除(Chrome 92)
計画に役立つ Chrome 92 のサポート終了と削除のまとめ。
Chrome オリジン トライアルのトラブルシューティング
メタタグ、ヘッダー、スクリプト内のトライアル トークンに関する一般的な問題に対処します。また、Chrome DevTools でのデバッグのサポートについても学習します。
クロスオリジン オープナー ポリシー
manifest.json の cross_origin_opener_policy プロパティのリファレンス ドキュメント。
クロスオリジン分離
拡張機能のクロスオリジン分離の概要
クロスオリジン埋め込みポリシー
manifest.json の cross_origin_embedder_policy プロパティのリファレンス ドキュメント。
クロスオリジン埋め込みポリシー
manifest.json の cross_origin_embedder_policy プロパティのリファレンス ドキュメント。
サポートの終了と削除(Chrome 91)
計画に役立つ Chrome 91 のサポート終了と削除のまとめ。
クロスオリジン オープナー ポリシー
manifest.json の cross_origin_opener_policy プロパティのリファレンス ドキュメント。
OS Login で PWA を自動的に起動する
多くのオペレーティング システムには、ユーザーがログインしたときにアプリケーションを自動的に起動する機能があります。この機能は、インストール済みのウェブ アプリケーションでも利用できるようになりました。
COEP を使用して CORP ヘッダーなしでクロスオリジン リソースを読み込む: 認証情報なし
Chrome 93 以降、「Cross-Origin-Embedder-Policy: credentialless」はオリジン トライアルの対象になります。この新しい値により、ウェブページはクロスオリジン分離を有効にできるようになります。認証情報のないリクエストを送信することで、クロスオリジン リソースが「CORP: Cross-origin」ヘッダーで応答する必要はありません。
WebDriver BiDi - クロスブラウザ自動化の未来
WebDriver BiDi の概要と、クロスブラウザ自動化の未来について知る
Wasm モジュールの共有を同一オリジンに制限する
同一サイト環境間での WebAssembly モジュールの共有は、同一オリジンのみに制限されます。
DevTools の新機能(Chrome 93)
編集可能な CSS コンテナクエリ、ウェブバンドルのプレビュー、コンソールでの文字列処理の改善など。
WebOTP API を使用してパソコンで電話番号を確認する
Chrome 93 以降、パソコン版 Chrome でウェブサイトに対して電話番号の確認を行えるようになりました。
Chromium Chronicle #23: Chrome インフラにおける検証済みビルド
Chrome とインフラストラクチャにポリシー適用チェックを実装したことで、セキュリティに関する最低限の基準を満たしていることを確認できます。
RenderingNG アーキテクチャ
RenderingNG アーキテクチャのコンポーネントと、レンダリング パイプラインがコンポーネントを通過する仕組みについて学びます。
Android のコンセプト(ウェブ デベロッパー向け)
Android や Google Play を初めて使用するウェブ デベロッパー向けの、Android の関連で重要なコンセプト。
URLPattern は、ウェブ プラットフォームにルーティングをもたらします
一般的なパターン マッチングのユースケースを標準化するためのアプローチ
Chrome 拡張機能: 拡張機能に関するポリシーを明確化し、ウェブストアの安全性と一貫性を高めました
拡張機能の品質とデベロッパーのエクスペリエンスの一貫性を維持するため、セキュリティ要件を更新し、いくつかのポリシーをさらに明確にしました。
Chromium Chronicle #22: Know Thy(Depot)ツール
Depot Tools は、Git 上に構築されたツールのコレクションであり、Chromium コードベースと関連プロジェクトに寄与するデベロッパーのワークフローを簡素化します。
JavaScript フレームワークでのリソースのインライン化
プロジェクト Aurora の協力を得て、JavaScript フレームワークに実装された最新の最適化について説明します。
Manifest V3 での拡張機能の操作
Chrome 拡張機能には以前から Browser API と Page Actions API がありましたが、Manifest V3 はどちらも汎用の Actions API に置き換えられました。この投稿では、これらの API の歴史と Manifest V3 の変更点について説明します。
RenderingNG
2021 年に Google は、Chromium の次世代レンダリング アーキテクチャである RenderingNG の設計、構築、リリースのプロセスの大部分を完了しました。
アプリ向けの高パフォーマンス ストレージ: Storage Foundation API
Storage Foundation API は、基本的なファイル システムに似ており、バッファとオフセットを介して保存済みデータに直接アクセスできるストレージ API を提案しました。
CSP の XSS 攻撃に対する効果を確認する
厳格なコンテンツ セキュリティ ポリシー(CSP)によるクロスサイト スクリプティング(XSS)攻撃の防止について学習します。
TablesNG が 72 件の Chromium バグを解決して相互運用性を改善
-- テーブル用の新しいレンダリング エンジンにより、ウェブ全体で表形式データを作成する際の一貫性が向上しました。
Aurora の概要
この記事では、オープンソース フレームワークとの緊密なコラボレーションを目的とした Chrome イニシアチブである Aurora をご紹介します。
フレームワークへの準拠
この記事では、適合性(Google 内のフレームワークで使用されている手法)と、それを JavaScript フレームワーク エコシステムにオープンソース化する計画について説明します。
Memory Inspector のご紹介
この記事では、Chrome 91 で導入された Memory Inspector について説明します。ArrayBuffer、TypedArray、DataView、Wasm メモリを検査できます。
chrome.scripting のご紹介
Scripting API は、スクリプトに特化した新しい Manifest V3 API です。この変更の動機と、これまでとの違いを詳しく見てみましょう。
CSS グリッド レイアウトを検査する
Chrome DevTools を使用して CSS グリッドを表示、変更する方法を学習します。
Compute Pressure API
Compute Pressure は、システムへのプレッシャーを表すハイレベルの状態を提供します。実装では、基盤となる適切なハードウェア指標を使用して、システムに管理不能な負荷がかかっている場合を除き、ユーザーが利用可能なすべての処理能力を活用できるようにします。
URL ハンドラとしての PWA
PWA を URL ハンドラとして登録した後、登録済みの URL パターンのいずれかに一致するハイパーリンクをユーザーがクリックすると、登録済みの PWA が開きます。
DevTools の新機能(Chrome 92)
CSS グリッド エディタ、コンソールでの定数再宣言のサポート、ソース順序ビューアなど。
Chromium Chronicle #21: ChromeOS のエンドツーエンドの UI 自動化
Tast は、Chrome の a11y(ユーザー補助)ツリーを使用して ChromeOS UI を制御する新しい UI ライブラリです。このライブラリを使用すると、デベロッパーは表示されている UI サーフェスに対するエンドツーエンド テストを簡単に作成できます。
Chrome 91 の新機能
Chrome 91 がリリースされます。ファイルを操作するウェブアプリで、File System Access API の使用時にファイル名とディレクトリが提案されるようになりました。クリップボードからファイルを読み取ることもできます。サイトに複数のドメインがあり、それらが同じアカウント管理バックエンドを共有している場合は、それらのドメインを Chrome に統一して、パスワード マネージャーが適切な認証情報を提案できるようにします。I/O の動画もすべてご覧いただけます。他にもたくさんの動画が公開されています。
宣言型リンク キャプチャを使用して、スコープ内のリンクから PWA を開く方法を選択できます
宣言型リンク キャプチャは、「capture_links」と呼ばれるウェブアプリ マニフェスト プロパティの提案です。これにより、デベロッパーは、ナビゲーション スコープ外のコンテキストから、アプリケーションのナビゲーション スコープ内にある URL にブラウザが移動するように求められたときに、どうなるかを宣言的に決定できます。
Chromium でブラウザのフラグを設定する方法
Chromium で導入される新しい API の一部では、テスト用のブラウザ フラグを設定する必要があります。Google Chrome、Microsoft Edge など、さまざまな Chromium 派生プロダクトでこの操作を行う方法を学びます。
オフラインファーストの信頼できるウェブアクティビティ
ユーザーが初めてアプリを開いたときに接続が確立されていない場合に、代替のオフライン画面を表示する方法
PWA の URL プロトコル ハンドラ登録
PWA をプロトコル ハンドラとして登録した後、ブラウザまたはプラットフォーム固有のアプリから、mailto、Bitcoin、Web Music などの特定のスキームのハイパーリンクをクリックすると、登録済みの PWA が開いて URL が受信されます。
Chrome DevTools のスタック トレースを 10 倍高速化した方法
Chrome DevTools のスタック トレースを 10 倍高速化した方法
MediaStreamTrack の挿入可能なストリーム
MediaStreamTrack の挿入可能なストリームとは、MediaStreamTrack のコンテンツを新しいコンテンツの生成に操作または使用できるストリームとして公開することです。
Chromium Chronicle #20: ベンチマーク テストハーネス
ベンチマークの追加は、パフォーマンスの低下を防ぎ、パフォーマンスを向上させるための簡単な方法です。
拡張機能マニフェスト コンバータ
拡張機能を Manifest V3 に変換するためのオープンソース ツール。Service Worker やスクリプト インジェクションを使用するように適応するなど、機械的ではない変更を伴う場合は、コードを手動で更新する必要があります。
PWA インストール UI の拡充
機能豊富なインストール UI の概要と実装方法についてのガイダンス。
DevTools の新機能(Chrome 91)
ウェブに関する指標のポップアップ表示、CSS のスクロール スナップの表示、新しい Memory Inspector の表示など。
クロスオリジン分離制限に合わせてタイマーを設定する
Chrome 91 以降、クロスオリジン分離を行わないプラットフォームでは、明示的なタイマーの解像度が 100 マイクロ秒に制限されます。
Manifest V3 でアクセス可能なウェブ リソース
Manifest V3 を使用したウェブアクセス可能なリソースをリリース「manifest.json」で権限の定義がサポートされるようになりました。デベロッパーは、リクエスト元のサイトのオリジンまたは拡張機能の ID に基づいてリソースを制限できます。
Chrome 90 の新機能
Chrome 90 がリリースされました。CSS の overflow プロパティに新しい値が追加されました。Feature Policy API の名称が権限ポリシーに変更されました。また、Shadow DOM を HTML で直接実装して使用する新しい方法があります。その他にも多くの機能があります。
DevTools のアーキテクチャ更新: DevTools から TypeScript への移行
Chrome DevTools を Closure Compiler タイプ チェッカーから TypeScript に移行する方法
Chromium Chronicle #19: CLion による開発の高速化
CLion IDE を使用すると、シンボル間の移動やコードベースの検索などが可能になります。
Chrome 90 でのサポートの終了と削除
計画に役立つ Chrome 90 のサポート終了と削除のまとめ。
BigQuery の CrUX レポートにランク マグニチュードを追加
BigQuery の CrUX レポートにランク マグニチュードを追加
VersionHistory API リファレンス
VersionHistory ウェブサービス API に関する技術情報です。
VersionHistory API の例
VersionHistory ウェブサービス API の使用例。
VersionHistory API ガイド
VersionHistory ウェブサービス API を使用して Google Chrome のバージョン履歴情報にプログラムでアクセスするための入門ガイドです。
Google Chrome のリリース サイクルを短縮
今年後半には、リリース サイクルを短縮し、現在の 6 週間から 4 週間ごとに Google Chrome の新しいバージョンを Stable チャンネルにリリースする予定です。
Chrome 89 の新機能
Chrome 89 がリリースされました。WebHID、WebNFC、Web Serial のオリジン トライアルを終了し、安定版で利用できるようになりました。数人のデベロッパーの方が PWA のインストール可否チェックで利用していた抜け道をなくします。Web Share と Web Share Target がデスクトップに届きます。ほかにも多数あります。
DevTools の新機能(Chrome 90)
CSS Flexbox、ページ上のパフォーマンス ヘッドアップ表示、問題タブの更新などのデバッグ サポート。
DevTools での CSS-in-JS サポート
DevTools での CSS-in-JS のサポートと、通常の CSS との違い
DevTools での CSS-in-JS サポート
DevTools での CSS-in-JS のサポートと、通常の CSS との違い
明日の表示モードに備える
display_override プロパティを使用すると、デベロッパーは、PWA を表示するモードのフォールバック チェーンをカスタマイズして定義できます。
Chromium Chronicle #18: Chromium のコード カバレッジ
テスト カバレッジは、特定のテストスイートの実行時に実行されるソースコードの量を測定します。
ハードウェア アクセラレーション アニメーション機能の更新
Chromium のハードウェア アクセラレーション機能は、SVG アニメーション、パーセンテージ ベースの変換、クリップパス、背景画像などに更新されます。
コンソールでメッセージの書式設定とスタイルを設定する
コンソールでメッセージの書式設定とスタイル設定を行う方法を学習します。
2021 年国際母語デー
国際母語デーは、2 月 21 日に世界中で行われる文化の多様性を祝う日です。世界中で話されている言語の保存と保護を促進し、多言語性を称えます。
プログレッシブ ウェブアプリのオフライン サポートの検出機能を改善
オフライン サポートの検証は、当初から PWA のインストール基準に組み込まれていました。
DevTools の起動時間の短縮
フロントエンドでのメッセージ ディスパッチによる DevTools のパフォーマンス オーバーヘッドを削減します。
サポートの終了と削除(Chrome 89)
計画に役立つ Chrome 89 のサポート終了と削除のまとめ。
Chromium Chronicle #17: ブラウザテストのミックスイン
ブラウザのテストを作成する際に、ユーザーが手動で行えるセットアップ アクションをプログラマティックに実行したいと思うことはよくあります。そのために、Mixin は簡単なブラウザのテスト設定を再利用可能な方法で実行するためのツールスイートです。
Client Hints を使用したリソース選択の自動化
画像の最適化は困難で、自動化が成功の鍵となる。
Digital Goods API と Payment Request API を使用して Google Play 請求サービス経由で支払いを受け取る
Digital Goods API、Payment Request API、Trusted Web Activity を使用して、PWA で Google Play 請求サービス経由で支払いを受け取ります。
Puppeteer から TypeScript への移行
Puppeteer から TypeScript への移行方法
DevTools の新機能(Chrome 89)
Trusted Types 違反のデバッグのサポート、ビューポート以外のノードのスクリーンショットのキャプチャ、ネットワーク リクエスト用の新しい [トラスト トークン] タブなど。
Chrome 88 の新機能
Chrome 88 がリリースされました。Manifest V3 を使用した拡張機能を Chrome ウェブストアにアップロードできるようになりました。アスペクト比の CSS プロパティを使用すると、どの要素にも簡単にアスペクト比を設定できます。信頼できるウェブ アクティビティで Play 請求サービスを使用するなど、さまざまな機能をご利用いただけます。それでは、Chrome 88 のデベロッパー向けの新機能を詳しく見ていきましょう。
チェーン化された JS タイマーの大規模なスロットリング(Chrome 88 以降)
ページが 5 分以上非表示になっている、ページが 30 秒以上無音になっている、WebRTC が使用されていない、タイマーのチェーンが 5 以上の場合に、集中的なスロットリングが有効になります。
Android Chrome 88 とパソコン版 Chrome 92 での SharedArrayBuffer の更新
SharedArrayBuffer は Android Chrome 88 で利用できるようになります。クロスオリジン分離されたページでのみ利用できます。パソコン版 Chrome 92 以降では、クロスオリジン分離ページでのみ使用できるようになります。オリジン トライアルに登録すると、パソコン版 Chrome 113 まで現在の動作を維持できます。
Chromium Chronicle #16: デスクトップでの Google アプリの更新
パソコンで Chrome が自動的に最新の状態に保たれていると思ったことはありませんか?または、Chromebook、Chromecast、Android にアップデートを提供する方法も教えてください。
最新のツールを使用した WebAssembly のデバッグ
Chrome DevTools での WebAssembly の新しいデバッグ機能の段階的な概要。
DevTools アーキテクチャの更新: ウェブ コンポーネントへの移行
Chrome DevTools から Web Components に移行する理由と方法
サポートの終了と削除(Chrome 88)
計画に役立つ Chrome 88 のサポート終了と削除のまとめ。
新しい developer.chrome.com へようこそ。
サイトのリニューアルと 2021 年の計画の概要についてお知らせします。
Web In Play の最新情報
Trusted Web Activity を使用するウェブ アプリケーションの新機能をご紹介します。
Google Play 請求サービスを使用
Google Play 請求サービスには、カタログ、料金、定期購入、レポートの管理、Google Play ストアを利用した購入手続きフローのためのツールが用意されています。
アプリを Google Play ストアに追加する
TWA を Google Play ストアに追加する
ファサードを使用したサードパーティ リソースの遅延読み込み
ファサードでサードパーティ リソースを遅延読み込みする方法について学びます。
Chromium Chronicle #15: ターゲットの公開設定の制限
Chromium では、1 つのコンポーネント用に記述されたコードの中で、他の場所では役立つものの、隠れた制限がある可能性があるコードを見つけるのが一般的です。安全のため、ターゲットの公開設定を制限することで、危険な機能への外部アクセスを制限します。
信頼できるウェブ アクティビティで Play 請求サービスを使用する
Google Play 請求サービスを信頼できるウェブ アクティビティ プロジェクトに統合する方法について説明します。
isInputPending() を使用した JS スケジューリングの改善
読み込みパフォーマンスと入力応答性の間のトレードオフの回避に役立つ、新しい JavaScript API です。
Blink レンダラで色覚異常をシミュレートする
DevTools と Blink Renderer で色覚異常シミュレーションを実装する理由と方法
Chrome 87 の新機能
Chrome 87 がリリースされました。パン、チルト、ズームをサポートするウェブカメラでパン、ティルト、ズームを制御できるようになりました。また、範囲リクエストや Service Worker で必要な回避策が少なく、フォント アクセス API のオリジン トライアルなど多くの機能が用意されています。では、Chrome 87 のデベロッパー向けの新機能を詳しく見ていきましょう。
ワークボックスのレシピ
一般的なワークボックス パターンは、個々のパッケージから自身でセットアップしなくても簡単に使用できます。
DevTools の新機能(Chrome 88)
新しい CSS アングル可視化ツール、サポートされていない画像タイプと保存容量のエミュレート、新しいウェブに関する指標レーンなど。
信頼できるウェブ アクティビティでウェブ共有ターゲットを有効にする
Trusted Web Activity を使用してプロジェクトで Web Share Target を有効にする方法について説明します。
Puppetaria: ユーザー補助重視の Puppeteer のスクリプト
Puppetaria - ユーザー補助を重視した Puppeteer スクリプトです。CSS セレクタに依存せずに、ユーザー補助ツリーのクエリに基づいた代替クエリハンドラを使用できます。
Manifest V2 について
Chrome 拡張機能のデベロッパー向けドキュメント。
フィードバックのお願い: プライベート ネットワーク用の CORS(RFC1918)
クライアントの内部ネットワーク上のデバイスやサーバーが意図せずウェブ全体に公開されると、悪意のある攻撃に対して脆弱になります。CORS-RFC1918 は、パブリック ネットワークからのリクエストをブラウザ上でデフォルトでブロックし、内部デバイスがそうしたリクエストをオプトインできるようにする提案です。
Chromium Chronicle #14: ウォーターフォールへのテストの追加
Chrome の新機能の回帰を検出したい場合は、ウォーターフォールである Chrome の継続的なビルドとテストのインフラストラクチャにテストを追加します。
Chrome DevTools の [WebAuthn] タブの作成方法
デベロッパーが認証システムのエミュレート、機能のカスタマイズ、ステータスの検査を行うための Chrome DevTools の [WebAuthn] タブの作成方法。
インストール済みのウェブ アプリケーションをファイル ハンドラとして指定する
アプリをオペレーティング システムにファイル ハンドラとして登録します。 ウェブアプリが ファイルの読み取りと書き込みが可能 になったので、次は、デベロッパーがアプリが作成して処理できるファイルのファイル ハンドラとして、これらのウェブアプリを宣言できるようにすることが理にかなっています。File Handling API を使用すると、まさにこのことができます。テキスト エディタ アプリをファイル ハンドラとして登録してインストールしたら、macOS で.txt
非推奨になった機能と削除(Chrome 87)
計画に役立つ Chrome 87 のサポート終了と削除のまとめ。
WebCodecs による動画処理
エンコードされた動画または音声のフレームや、混合されていないチャンクなど、動画ストリームのコンポーネントを操作します。
Chrome 86 の新機能
Chrome 86 がリリースされました。ファイル システム アクセス API が安定版で利用可能になりました。ウェブ HID と Multi-Screen Window Placement API の新しいオリジン トライアルがあります。CSS には新しいものもありますでは、Chrome 86 のデベロッパー向けの新機能を詳しく見ていきましょう。
キャッシュをパーティショニングすることでセキュリティとプライバシーを確保
Chrome の HTTP キャッシュ パーティショニングにより、セキュリティとプライバシーが強化されます。
サードパーティのオリジン トライアル
埋め込みコンテンツのプロバイダが、ウェブ プラットフォームの新機能や試験運用版の機能を複数サイトでテストする方法について説明します。
DevTools の新機能(Chrome 87)
新しい CSS グリッド デバッグツール、[Web Authn] タブ、移動可能なツール、[Computed] サイドバー ペインが追加されました。
Chrome DevTools の [Issues] タブの作成方法
問題の検出と解決に関するデベロッパー エクスペリエンスを向上させるために、Chrome DevTools の [Issues] タブを作成する方法。
センサー: デバイス センサーをエミュレートする
[センサー] パネルを使用して、位置情報をオーバーライドしたり、デバイスの向きをシミュレートしたり、強制タップしたり、アイドル状態をエミュレートしたりできます。
Workbox v5 から v6 に移行する
Workbox v5 から v6 への移行に関するガイドです。
一般的ではない HID デバイスへの接続
WebHID API を使用すると、ウェブサイトは代替の補助キーボードや珍しいゲームパッドにアクセスできます。
Window Management API を使用して複数のディスプレイを管理する
Window Management API を使用すると、マシンに接続されているディスプレイを列挙したり、特定の画面にウィンドウを配置したりできます。
DevTools アーキテクチャの更新: JavaScript モジュールへの移行
Chrome DevTools から JavaScript モジュールへの移行方法
サポートの終了と削除(Chrome 86)
計画に役立つ Chrome 86 のサポート終了と削除のまとめ。
Chrome 85 の新機能
Chrome 85 がリリースされました。content-visibility: auto を使用すると、レンダリング パフォーマンスを改善できます。CSS で CSS プロパティを設定できるようになりました。getInstalledRelatedApps() API を使用して、Windows アプリまたは PWA がインストールされているかどうかを確認できるようになりました。アプリアイコンのショートカットは Windows でも機能します(今回は)。フェッチ アップロード ストリーミングのオリジン トライアルがあります。その他多数。では、Chrome 85 のデベロッパー向けの新機能を詳しく見ていきましょう。
ローカル フォントを使用して高度なタイポグラフィを使用する
Local Font Access API は、ユーザーのインストール済みのローカル フォントを列挙し、さまざまな TrueType/OpenType テーブルへの低レベルのアクセスを提供します。
DevTools の新機能(Chrome 86)
新しいメディアパネル、キャプチャ ノードのスクリーンショット、[Issues] タブの更新、欠落しているローカル フォントのエミュレート、非アクティブなユーザー、preferreds-reduced-data
シリアルポートに対して読み取り / 書き込みを行う
Web Serial API は、ウェブサイトがシリアル デバイスと通信できるようにすることで、ウェブと現実世界の橋渡しをします。
HTTP リクエスト ヘッダーを追加する
カスタムタブ インテントに HTTP CORS ヘッダーを追加するためのガイド
Chrome の新しいデフォルトの Referrer-Policy - strict-origin-when-cross-origin
Chrome の新しいデフォルトの Referrer-Policy - strict-origin-when-cross-origin
Keyboard Lock API でキーをキャプチャする
Keyboard Lock API を使用すると、通常は基盤となるオペレーティング システムによって予約されているキーをウェブサイトでキャプチャできます。全画面表示で没入できるエクスペリエンスを提供するウェブ アプリケーション(ゲームやリモート アクセス アプリなど)を対象としています。
browser-fs-access ライブラリを使用したファイルとディレクトリの読み取りと書き込み
最新のブラウザはすべて、ローカルのファイルとディレクトリを読み取ることができます。ただし、真の書き込みアクセス権、つまりファイルのダウンロード以外のアクセス権は、File System Access API を実装しているブラウザに限定されます。この投稿では、ブラウザ fs-access というサポート ライブラリを紹介します。これは、File System Access API 上で抽象化レイヤとして機能し、ファイル処理については従来のアプローチに透過的にフォールバックします。
サポートの終了と削除(Chrome 85)
計画に役立つ Chrome 85 のサポート終了と削除のまとめ。
フェッチ API を使用したストリーミング リクエスト
Chromium のバージョン 105 から、アップロード ストリーミングがサポートされるようになりました。つまり、全身を準備してからリクエストを開始できるようになりました。
Houdini - CSS に関する誤解の解消
Houdini は、CSS エンジンの内部をデベロッパーに公開するための API のコレクションです
Chrome 84 の新機能
Chrome 84 がリリースされました。ユーザーは、アプリアイコンのショートカットを使用して、アプリ内の一般的なタスクを開始できます。Web Animations API により、これまでサポートされていなかった多くの機能のサポートが追加されました。Wake Lock と Content Indexing API はオリジン トライアルを終了。アイドル検出と SIMD に新しいオリジン トライアルが追加されました。他にもさまざまな機能があります。では、Chrome 84 のデベロッパー向けの新機能を詳しく見ていきましょう。
Android 11 でのカスタムタブの使用
Android 11 でカスタムタブを使用する方法
使用していない JavaScript を削除する
Lighthouse の「未使用の JavaScript を削除する」の監査に合格する方法を確認する。
DevTools の新機能(Chrome 85)
CSS-in-JS フレームワークのスタイル編集、Lighthouse 6.0、JavaScript の新機能など。
CrUX API の使用方法
Chrome UX Report API を使用して、数百万ものウェブサイトにおける実際のユーザー エクスペリエンス データに RESTful アクセスする方法を紹介します。
User-Agent Client Hints API によるユーザーのプライバシーとデベロッパー エクスペリエンスの向上
User-Agent Client Hints は、Client Hints API の新しい拡張機能です。これにより、デベロッパーはプライバシーを保護し、使いやすい方法でユーザーのブラウザに関する情報にアクセスできます。 Client Hints を使用すると、デベロッパーは User-Agent(UA)文字列から解析する必要なく、ユーザーのデバイスや状態に関する情報を能動的にリクエストできます。この代替ルートを提供する方法は、最終的にユーザー
Looker Studio で CrUX ダッシュボードを作成する方法
Looker Studio は、Chrome UX レポートなどのビッグデータ ソース上にダッシュボードを構築できる強力なデータ可視化ツールです。このガイドでは、独自のカスタム CrUX ダッシュボードを作成してオリジンのユーザー エクスペリエンスを追跡する方法について説明します。
CrUX BigQuery データセットの使用方法
このガイドでは、BigQuery を使用して CrUX データセットに対するクエリを作成し、ウェブ上のユーザー エクスペリエンスの状態に関する有益な結果を抽出する方法を学習します。
WebTransport の使用
WebTransport は、低レイテンシの双方向のクライアント サーバー メッセージングを提供する API です。ユースケースや、今後の実装についてフィードバックをお寄せください。
サポートの終了と削除(Chrome 84)
計画に役立つ Chrome 84 のサポート終了と削除の概要。
Lighthouse 6.0 の新機能
新しい指標、パフォーマンス スコアの更新、新しい監査など。 本日、Lighthouse 6.0 をリリースします。 Lighthouse は、サイトのユーザー エクスペリエンスを改善するための改善点と診断情報をデベロッパーに提供する、自動ウェブサイト監査ツールです。Chrome DevTools、npm(Node モジュールと CLI として)、ブラウザ拡張機能( Chrome と Firefox で利用可能)で使用できます。 PageSpeed Insights など、多くの Google
Chrome 83 の新機能
Chrome 83 がリリースされました。クロスサイト スクリプティングの脆弱性を防ぐのに役立つ信頼できるタイプのサポートが追加されています。フォームの要素が大きく変わります。メモリリークを検出する新しい方法があります。ネイティブ ファイル システム API が、追加された機能を含む新しいオリジン トライアルを開始します。では、Chrome 83 のデベロッパー向けの新機能を詳しく見ていきましょう。
Idle Detection API で非アクティブ ユーザーを検出する
Idle Detection API は、ユーザーがアイドル状態であるときにデベロッパーに通知します。これは、キーボード、マウス、画面の操作がない、スクリーンセーバーがアクティブになっている、画面がロックされている、別の画面に移動しているなどを示します。デベロッパーが定義したしきい値で通知がトリガーされます。
問題: 問題を見つけて修正する
[問題] パネルを使用して、ウェブサイトの問題を見つけて修正します。
時間のかかる広告介入への対応
時間のかかる広告介入への対応
DevTools の新機能(Chrome 84)
新しい [問題] タブ、[検査モード] ツールチップのユーザー補助情報など。
文字セットの宣言がないか、HTML で宣言のタイミングが遅い
文字エンコード宣言を HTML に追加する方法を学びます。
サポートの終了と削除(Chrome 83)
計画に役立つ Chrome 83 のサポート終了と削除の概要。
Chrome 81 の新機能
Chrome 81 がリリースされました。アプリアイコンのバッジがオリジン トライアルを卒業する。ブラウザで拡張現実のヒットテストを利用できるようになりました。ウェブ NFC のオリジン トライアルを開始します。新しい Chrome のリリーススケジュールについて 最新情報をお伝えしましたでは、Chrome 81 のデベロッパー向けの新機能を詳しく見ていきましょう。
WebSocketStream: ストリームと WebSocket API の統合
WebSocketStream は、ストリームを WebSocket API と統合します。これにより、アプリは受信したメッセージにバックプレッシャーを適用できます。
Chromium Chronicle #13: RR によるタイムトラベル デバッグ
デバッガで同じテストを何度も実行して、コードがどうして不適切な状態になったのか調べたいと思ったことはありませんか?便利なツールをご用意しました。RR は実行トレースを記録し、後退したり、逆戻りしたり、変数の値が変化した場所や、オブジェクトで関数が最後に呼び出された日時を確認したりするのが容易になります。
DevTools の新機能(Chrome 83)
色覚異常のエミュレーション、ロケールのエミュレーション、COOP および COEP デバッグなど、多数の機能が用意されています。
非推奨になった機能と削除(Chrome 81)
計画に役立つ Chrome 81 のサポート終了と削除のまとめ。
Chrome for Android で NFC デバイスを操作する
Chrome for Android で、NFC タグの読み取りと書き込みを行えるようになりました。
Chrome ユーザー エクスペリエンス レポートへの通知権限データの追加
サイト所有者が通知権限の指標を理解できるように、Google は 202001 年のデータセットの Chrome ユーザー エクスペリエンス レポート(CrUX)にこのデータを追加します。これにより、サイト所有者は自分のサイトおよび同じカテゴリ内の比較サイトについて、一般的なユーザー通知権限の応答について理解を深めることができます。
Chromium Chronicle #10: Pixel テストで UI の回帰を把握する
Chrome のテスト戦略は、自動化された機能の正確性テストと手動テストに大きく依存していますが、どちらも軽微な UI の回帰を確実に検出することはできません。ピクセルテストを使用すると、パソコンのブラウザの UI テストを自動化できます。
WebView 内のリンクのカスタムタブを開く
WebView とカスタムタブを組み合わせて、ユーザー エクスペリエンスを向上させます。
地平
Trusted Web Activity を作成するためのライブラリとツールの概要。
統合ガイド
Android アプリで Trusted Web Activity を使用する方法について説明します。
概要
Trusted Web Activity を使用して、プログレッシブ ウェブアプリを Android アプリにシームレスに統合する方法をご紹介します。
Chrome 80 の新機能
Chrome 80 のリリースに伴い、デベロッパー向けの新機能が数多く追加されています。ワーカーのモジュール、JavaScript のオプション チェーン、新しいオリジン トライアル、オリジン トライアルから得られた機能など、さまざまなサポートがあります。では、Chrome 80 のデベロッパー向けの新機能を詳しく見ていきましょう。
Android カスタムタブの概要
Android アプリで URL を開く際に Android カスタムタブを使用するのに最適なタイミングについて説明します。
Custom Tab 低レベル API を使用する
androidx ブラウザ サポート ライブラリなしでカスタムタブを使用する方法について説明します。
Android デバイスにカスタムタブをサポートするブラウザが搭載されているかどうかを確認する
カスタムタブをサポートするブラウザが Android デバイスにあるかどうかを確認する方法について説明します。
DevTools の新機能(Chrome 81)
デバイスモードの Moto G4、Cookie 関連の新機能など。
クエリ パラメータを使用して信頼できるウェブ アクティビティに情報を渡す
Trusted Web Activity の起動時にネイティブ シェルからウェブアプリに情報を渡す方法
マルチオリジンの信頼できるウェブ アクティビティ
Trusted Web Activity を使用して、複数のオリジンを全画面表示で開けるアプリケーションを 1 つ作成する方法
Trusted Web Activity を構築するための新しいライブラリ android-browser-helper
Trusted Web Activity を構築するための新しいライブラリ android-browser-helper を導入しました。
Largest Contentful Paint
Lighthouse の Largest Contentful Paint 指標と、その測定と最適化の方法についてご説明します。
非推奨になった機能と削除(Chrome 80)
計画に役立つ Chrome 80 のサポート終了と削除のまとめ。
Workbox v4 から v5 に移行する
Workbox v4 から v5 への移行に関するガイドです。
Chromium Chronicle #9: ClusterFuzz
ClusterFuzz によって検出された優先度の高いセキュリティ バグを修正するよう求められる場合があります。概要: バグを真剣に受け止めるべきか?サポートするには
Content Indexing API を使ったオフライン対応ページのインデックス登録
PWA で記事やメディア ファイルがキャッシュされる場合があるかもしれませんが、そのページがオフラインでも動作することをユーザーが知るにはどうすればよいでしょうか。Content Indexing API を使えば、自分の PWA や他のインストール済みの PWA のコンテンツがインデックスに追加されると、サポートされているブラウザの専用領域に表示されます。
Chrome 79 の新機能
Chrome 79 がリリースされました。Android にインストール済みのプログレッシブ ウェブアプリで、マスク可能なアイコンがサポートされます。WebXR Device API を使用して、没入感のあるエクスペリエンスを作成できるようになりました。Wake Lock API と rendersubtree 属性のオリジン トライアルが開始されます。Chrome Dev Summit 2019 の動画はすべてオンラインでご覧いただけます。では、Chrome 79 のデベロッパー向けの新機能を詳しく見ていきましょう。
Chrome DevTools での WebAssembly デバッグの改善
DevTools 内から、コードのステップオーバー、ブレークポイントの設定、スタック トレースの解決をソース言語で行うことができます。
DevTools の新機能(Chrome 80)
コンソールでの Let 宣言とクラス再宣言のサポート、WebAssembly デバッグの改善など。
Chromium Chronicle #8: GWP-ASan: 野生のバグを検出する
GWP-ASan は、実際の環境で使用するように設計されたヒープのみのメモリエラー検出器です。use-after-frees、バッファのオーバーフロー/アンダーフロー、二重解放を検出します。ASan とは異なり、スタックやグローバルのエラーは検出されません。
ウェブバンドルのスタートガイド
ウェブバンドルを使用すると、ウェブサイトを 1 つのファイルとして Bluetooth 経由で共有し、元のコンテキストでオフラインで実行できます。
Periodic Background Sync API によるオフライン エクスペリエンスの拡充
定期的なバックグラウンド同期を使用すると、ウェブ アプリケーションで定期的にデータをバックグラウンドで同期できるため、ウェブアプリを iOS/Android/デスクトップ アプリの動作に近づけることができます。
Web Share Target API を使用して共有データを受信する
モバイル デバイスでもデスクトップ デバイスでも、共有ボタンをタップしてアプリを選択し、共有相手を選ぶだけで簡単に共有できるようにする必要があります。Web Share Target API を使用すると、インストール済みのウェブアプリを基盤となるオペレーティング システムに登録して、共有コンテンツを受信できます。
サポートの終了と削除(Chrome 79)
計画に役立つ Chrome 79 のサポート終了と削除のまとめ。
通知トリガー API
Notification Triggers API を使用すると、デベロッパーはネットワーク接続を必要としないローカル通知をスケジュール設定できるため、カレンダー アプリなどのユースケースに最適です。
Chromium Chronicle #7: 前処理のソース
Chromium のソースファイルを 1 つ手動でコンパイルすると、コンパイラの最適化オプションを試したり、マクロの詳細を把握したり、コンパイラのバグを最小限に抑えることができます。今月は、ソースの前処理方法について説明します。
Chrome 78 の新機能
Chrome 78 がリリースされました。CSS 変数に「型」を指定できるようになりました。importScripts() によってインポートされたスクリプトにバイト単位のチェックが実行されるようになったため、Service Worker がより新鮮です。さらに、ネイティブ ファイル システムや SMS Receiver など、便利な新機能を提供する 2 つの新しいオリジン トライアルの詳細もわかりました。さらに、Chrome DevSummit は 2019 年 11 月 11 ~ 12 日に開催されます。では、Chrome 78 のデベロッパー向けの新機能を詳しく見ていきましょう。
DevTools の新機能(Chrome 79)
Cookie がブロックされた理由をデバッグし、preferreds-color-scheme(ダーク)、コード カバレッジの更新などをシミュレートします。
Total Blocking Time
Lighthouse の Total Blocking Time の指標と、この指標の測定と最適化の方法をご確認ください。
WebOTP API を使用してウェブ上で電話番号を確認する
SMS で送信された OTP を検索、記憶、入力するのは面倒。WebOTP API は、ユーザーの OTP ワークフローを簡素化します。
Chromium Chronicle #6: モノレールのグリッドビュー
Chrome の Issue Tracker の Monorail では、グリッドビューで問題をかんばんスタイルのボードで可視化できます。このエピソードでは、グリッドモードの使用方法について説明します。
サポートの終了と削除(Chrome 78)
計画に役立つ Chrome 78 のサポート終了と削除のまとめ。
Lighthouse のアクセシビリティ スコア
Lighthouse でページのユーザー補助スコアを生成する仕組みをご確認ください。
Lighthouse のパフォーマンス スコアリング
Lighthouse でページの全体的なパフォーマンス スコアが生成される仕組みについて説明します。
デフォルトでより鮮度の高い Service Worker
Service Worker スクリプトの更新を確認する HTTP リクエストはデフォルトで HTTP キャッシュで処理されなくなり、インポートしたスクリプトが Service Worker の更新フローをトリガーできるようになります。
Chrome 77 の新機能
Chrome 77 がリリースされました。Largest Contentful Paint は、サイトのパフォーマンスをより効果的にトラッキングできる優れた方法です。フォームに新機能が追加されました。ネイティブ遅延読み込みを利用できます。Chrome DevSummit は、2019 年 11 月 11 ~ 12 日に開催されます。その他にもたくさん。では、Chrome 77 のデベロッパー向けの新機能を詳しく見ていきましょう。
バックグラウンド サービスをデバッグする
レポートを確認し、バックグラウンド サービス(バックグラウンドの取得、バックグラウンド同期、通知、プッシュ メッセージなど)をデバッグします。
DevTools の新機能(Chrome 78)
[Audits] パネルに Lighthouse 5.2 が表示され、[Performance] パネルに Largest Contentful Paint が表示されます。
クイック スタートガイド
基本の信頼できるウェブ アクティビティを構築するためのガイドです。
ウェブで GPU コンピューティングを使ってみる
この投稿では、試験運用版の WebGPU API について例を挙げて説明し、GPU を使ってデータ並列計算を開始する方法を紹介します。
Chromium Chronicle #5: サンドボックス外のコーディング
すべてのコードにバグがあります。Chrome ブラウザのプロセスにはサンドボックスがないため、そうしたバグによって悪意のあるコードがデバイス全体にフルアクセスする可能性があります。このエピソードでは、サンドボックスを使わずにコーディングする際の推奨事項と禁止事項について説明します。
ReportingObserver API でコードの状態を把握する
ReportingObserver は、サポートが終了した API をサイトで使用した場合や、ブラウザの介入が発生したときに通知を受け取ることができます。基本機能はもともと Chrome 69 で導入されました。Chrome 84 以降では、ワーカーで使用できます。とても簡単です。
サポートの終了と削除(Chrome 77)
計画に役立つ Chrome 77 のサポート終了と削除のまとめ。
ウェブ用の連絡先選択ツール
ユーザーの連絡先へのアクセスは、(ほぼ)頃から iOS/Android アプリの機能でした。Contact Picker API は、ユーザーが連絡先リストから 1 つまたは複数のエントリを選択し、選択した連絡先の限られた詳細情報をウェブサイトと共有できるオンデマンド API です。共有したいものだけを好きなときに共有でき、友だちや家族と連絡を取りやすくなる。
Chrome 76 の新機能
Chrome 76 がリリースされました。また、preads-color-scheme メディアクエリのサポートが追加され、ウェブサイトでダークモードを利用できるようになりました。アドレスバーにインストール ボタンが追加され、プログレッシブ ウェブアプリをパソコンに簡単にインストールできます。モバイルにミニ情報バーが表示されないようにする方法。WebAPK の更新頻度を増やします。その他にもたくさん。では、Chrome 76 のデベロッパー向けの新機能を詳しく見ていきましょう。
Chromium Chronicle #4: WPT を使用してウェブ プラットフォームの機能をテストする
ウェブに公開される機能をテストするには、ウェブ プラットフォーム テスト(WPT)を使用することをおすすめします。これは、GitHub を介して他のブラウザと共有されるためです。今月は、WPT のベスト プラクティスをご紹介します。
メディアの更新(Chrome 75)
暗号化されたメディアと video 要素の「playsInline」属性のヒントのサポートで、再生がスムーズで電力効率がよいかどうかを予測。
DevTools の新機能(Chrome 77)
要素のスタイルのコピー、レイアウト シフトの可視化など。
ウェブ コンポーネントの更新 - v1 API へのアップグレードに要する時間の延長
Web Components v0 ユーザーは、v1 にアップグレードする時間が長くなりますが、しっかりとテストしてください。
Chromium Chronicle #3: Gerrit でのコード カバレッジ
テストは、バグや回帰を発見し、より優れた設計を適用し、コードの保守を容易にするため、非常に重要です。今月は、Gerrit で徹底的なテストを実施する方法について説明します。
サポートの終了と削除(Chrome 76)
計画に役立つ Chrome 76 のサポート終了と削除のまとめ。
WebAPK の更新頻度を高める
Chrome 76 以降、WebAPK の更新頻度が高くなります。
LayoutNG
Chromium の新しいレイアウト エンジン
Chrome 75 の新機能
Chrome 75 がリリースされました。キャンバス要素のレイテンシを短縮する新しい方法があります。ウェブアプリで、システムレベルの共有シートを使用して、インストール済みの他のアプリとファイルを共有できるようになりました。Google I/O での講演はすべて Google の YouTube チャンネルで公開されています。その他にもたくさん。では、Chrome 75 のデベロッパー向けの新機能を詳しく見ていきましょう。
DevTools の新機能(Chrome 76)
CSS 値を使用したオートコンプリート、ネットワーク設定の新しい UI など。
Chromium Chronicle #2: テストの不安定さへの対処
不安定なテストは、Chrome でよく見られる問題です。他のデベロッパーの生産性に影響を及ぼし、時間の経過とともに無効になります。今月は、テストの不安定さに対処する方法について説明します。
Chrome 76 では、「ホーム画面に追加」画面のミニ情報バーを非表示にできます。
PWA 用のミニ情報バーの管理機能を強化(Chrome 76)。
モデルビューアによる拡張現実(AR)
2 月には、ウェブページに 3D モデルを宣言的に追加できる model-viewer ウェブ コンポーネントを導入しました。今回、ar 属性が追加され、Android で AR がサポートされるようになったことをお知らせします。
Paint Holding - 同一オリジン ナビゲーションでの白いフラッシュの低減
ペイントのホールドの概要を簡単に説明します。同一オリジン ナビゲーション時に白色の点滅を減らす Chrome の機能
複数のページ リダイレクトを避ける
ページ リダイレクトでウェブページの読み込みが遅くなる原因と、リダイレクトを回避する方法を確認しましょう。
ユーザーは入力フィールドに貼り付けることができません
ユーザーが入力フィールドへの貼り付けを許可して、サイトのログイン画面のユーザー エクスペリエンスを向上させる方法について説明します。
ドキュメントに有効な rel=canonical がありません
Lighthouse の監査については、「ドキュメントに有効な rel=canonical がない」をご覧ください。
サポートの終了と削除(Chrome 75)
計画に役立つ Chrome 75 のサポート終了と削除の概要。
ページの読み込み時に位置情報の利用許可をリクエストします
優れたユーザー エクスペリエンスを提供できるよう、責任を持って位置情報の利用許可をリクエストする方法をご確認ください。
非同期ヒントを使用した低レイテンシのレンダリング
ウェブ用に作成されたタッチペン ベースの描画アプリケーションでは、ウェブページでグラフィックの更新を DOM と同期させる必要があるため、遅延の問題が発生します。非同期に行われるコンテキストのヒントは、DOM をバイパスして遅延をなくします。
最新の形式で画像を配信する
use-webp-images 監査の詳細。
First Meaningful Paint
Lighthouse でサポートが終了した First Meaningful Paint の指標と、その測定と最適化の方法について説明します。
CSS を縮小する
非圧縮 CSS 監査の詳細
リンクに説明テキストが含まれていません
Lighthouse の監査結果については、「リンクに説明テキストがない」をご覧ください。
ページの HTTP ステータス コードが無効です
Lighthouse の監査結果については、「ページで HTTP ステータス コードが失敗しました」をご覧ください。
インタラクティブ コントロールはキーボードでフォーカス可能
ウェブページのカスタム コントロールをフォーカス可能にして、キーボード ユーザーがアクセスできるようにする方法を説明します。
ページ上での視覚的な順序は DOM の順序に従います
visual-order-follows-dom 監査の詳細をご覧ください。
初回入力遅延の最大許容値
Lighthouse でサポートを終了した Max Potential First Input Delay 指標と、その測定と最適化の方法をご確認ください。
重要なリクエストのチェーンを回避する
クリティカル リクエスト チェーンの概要、ウェブページのパフォーマンスへの影響、影響を軽減する方法について学習します。
操作可能になるまでの時間
Lighthouse の「Time to Interactive」指標と、この指標を測定および最適化する方法について説明します。
カスタム コントロールに ARIA ロールがある
カスタム コントロールに ARIA を追加してユーザー補助技術が解釈できるようにすることで、ユーザー補助の利便性を高める方法を学びます。
ページのインデックス登録がブロックされています
Lighthouse の監査で「ページのインデックス登録がブロックされる」に関する詳細
クロスオリジンのリンク先へのリンクは安全ではありません
別のホスト上のリソースに安全にリンクする方法を学習します。
ページに追加された新しいコンテンツにユーザーのフォーカスが移る
新たに追加されたコンテンツにフォーカスを移動して、支援技術のユーザーが理解しやすいウェブアプリの状態を変更する方法をご確認ください。
リクエスト数を減らし、転送サイズを小さくする
リソース数が多い場合や転送サイズが大きい場合に読み込みパフォーマンスへの影響について学習します。リクエスト数と転送サイズを削減するための戦略を確認します。
カスタム コントロールにラベルが関連付けられています
すべてのカスタム コントロールに、支援技術のユーザーがアクセスできるラベルを付けて、ユーザー補助機能を向上させる方法を学びます。
パッシブ リスナーを使用してスクロールのパフォーマンスを向上させる
パッシブなイベント リスナーを回避して、ページのスクロールの応答性を改善する方法をご確認ください。
ユーザーのフォーカスが誤ってリージョンに閉じ込められない
ページ領域にフォーカスが留まることを防ぎ、キーボード ユーザーのアクセシビリティを向上させる方法について説明します。
必要なオリジンに事前接続する
use-rel-preconnect 監査の詳細。
書類で判読可能なフォントサイズが使用されていません
Lighthouse の監査結果については、「ドキュメントで判読可能なフォントサイズを使用していない」をご覧ください。
効率的なキャッシュ ポリシーを使用して静的アセットを提供する
ウェブページの静的リソースをキャッシュに保存することで、リピーターのパフォーマンスと信頼性を向上させることができます。
サーバーの応答時間を短縮する
サーバー レスポンス時間の監査について説明します。
構造化データが有効
Lighthouse の監査について詳しくは、「構造化データは有効です」をご覧ください。
サードパーティのコードの影響を軽減する
広告掲載ネットワークや分析サービスなどのサードパーティのコードがページ読み込みのパフォーマンスに与える影響と、サードパーティのコードを最適化する方法についてご確認ください。
ページが論理的なタブオーダーになっている
タブストップを論理的な順序で配置して、キーボード ユーザーがウェブページ内を移動しやすくする方法について説明します。
ページの読み込み時に通知権限をリクエストします
優れたユーザー エクスペリエンスを提供できるよう、責任を持って通知権限をリクエストする方法を学びます。
document.write() を使用
document.write() を避けてページの読み込み時間を短縮する方法をご確認ください。
タップ ターゲットのサイズが適切でない
Lighthouse の監査については、「タップ ターゲットのサイズが適切でない」をご覧ください。
未使用の CSS を削除します
unused-css-rules の監査について学習する。
JavaScript を少なくする
圧縮されていない JavaScript の監査について確認する。
オフスクリーン画像の遅延読み込みを行う
画面外画像の監査について説明します。
適切なサイズの画像
use-responsive-images の監査について学びます。
サポートが終了した API を使用している
サポートが終了した API をウェブページから削除して置き換える方法を確認できます。
キー リクエストのプリロード
use-rel-preload 監査の詳細が
アニメーション コンテンツに動画フォーマットを使用する
効率的なアニメーション コンテンツの監査について学びます。
First Contentful Paint
Lighthouse の First Contentful Paint の指標と、その測定と最適化の方法について説明します。
ページに HTML doctype がないため、後方互換モードがトリガーされる
古いブラウザでページで後方互換モードがトリガーされないようにする方法をご確認ください。
ナビゲーションの改善に使用されている HTML5 ランドマーク要素
キーボードのユーザーがナビゲーションに使用できるランドマークを提供して、ウェブページのアクセシビリティを向上させる方法を学習します。
推定入力レイテンシ
Lighthouse の推定入力レイテンシの指標と、指標を測定および最適化する方法について説明します。
ドキュメントに有効な hreflang がありません
「ドキュメントに有効な hreflang の Lighthouse の監査がない」をご覧ください。
速度インデックス
Lighthouse の Speed Index 指標とその最適化方法について解説します。
JavaScript の実行時間を短縮する
JavaScript の実行がページのパフォーマンスを低下させる仕組みと、高速化する方法をご紹介します。
カスタム速度のマークと測定
User Timing API は、ウェブページの実際のパフォーマンス データを取得するのに役立ちます。
画像を効率的にエンコードする
Using-Optimized images の監査について学びます。
robots.txt が無効です
Lighthouse の監査結果については、「robots.txt が無効です」をご覧ください。
メインスレッドの作業を最小限に抑える
ブラウザのメインスレッドの詳細や、ウェブページを最適化してメインスレッドの負荷を軽減し、パフォーマンスを向上させる方法をご確認ください。
ドキュメントにメタ ディスクリプションがありません
Lighthouse の監査結果については、「ドキュメントにメタ ディスクリプションがない」をご覧ください。
アプリケーション キャッシュを使用
非推奨のアプリケーション キャッシュから Cache API にウェブページを移行する方法について説明します。
テキスト圧縮を有効にする
テキスト圧縮を有効にしてページ読み込みのパフォーマンスを向上させる方法について説明します。
ブラウザのエラーがコンソールに記録されました
ブラウザのエラーを特定して修正する方法をご確認ください。
操作可能な要素は目的と状態を示す
ウェブページでカスタム コントロールの目的と状態をすべてのユーザーに明示して、そのユーザー補助を改善する方法を学びます。
既知のセキュリティの脆弱性があるフロントエンドの JavaScript ライブラリを含みます
既知の脆弱性がある JavaScript ライブラリを置き換えて、ページのセキュリティを強化する方法を学びます。
ドキュメントでプラグインが使用されています
「ドキュメントでプラグインを使用する」の Lighthouse の監査について詳細をご覧ください。
すべてのリソースに HTTP/2 を使用していない
ページの読み込み時間にとって HTTP/2 が重要な理由と、サーバーで HTTP/2 を有効にする方法について説明します。
最初の CPU アイドル
Lighthouse で非推奨となった [First CPU Idle] 指標と、この指標を最適化する方法について説明します。
オフスクリーン コンテンツは支援技術によって隠される
画面外のコンテンツを支援技術から非表示にして、支援技術のユーザーのユーザー補助を改善する方法を学びます。
レンダリング ブロック リソースを排除する
レンダリング ブロック リソースの監査について確認します。
検出された JavaScript ライブラリ
Lighthouse の診断「検出された JavaScript ライブラリ」の監査について詳細を確認する。
不適切なアスペクト比の画像が表示される
レスポンシブな画像を正しいアスペクト比で表示する方法について説明します。
膨大なネットワーク ペイロードを避ける
ユーザーに提供するリソースの合計ファイルサイズを減らして、ウェブページの読み込み時間を改善する方法をご確認ください。
Chrome 74 の新機能
Google I/O の開催に合わせて、Chrome 74 がリリースされました。プライベート クラス フィールドのサポート、ユーザーがモーションの軽減をリクエストしたことを検出できるようにします。また、CSS 遷移イベントのサポートなど、多くの機能を追加しました。では、Chrome 74 のデベロッパー向けの新機能を詳しく見ていきましょう。
コンソールでメッセージをログに記録する
ログメッセージをコンソールに記録する方法を学習します。
Live Expressions を使用して JavaScript 値をリアルタイムで確認する
コンソールに同じ JavaScript 式を繰り返し入力する場合は、代わりに Live Expressions をお試しください。
コンソール機能リファレンス
Chrome DevTools のコンソール UI に関連するすべての機能と動作に関する包括的なリファレンスです。
DevTools の新機能(Chrome 75)
オートコンプリートの有意義なプリセット値、コマンド メニューからのサイトデータの消去など。
Chromium Chronicle #1: タスク スケジューリングのベスト プラクティス
Chrome チームが Chromium Chronicle を発表いたします。これは、ブラウザを構築するデベロッパーである Chromium デベロッパー専用の月刊シリーズです。今月は、タスクのスケジュール設定のベスト プラクティスを見ていきます。
Web SQL データを表示する
Chrome DevTools の [Application] パネルで Web SQL データを表示する方法について説明します。
キャッシュ データを表示する
Chrome DevTools の [Application] パネルでキャッシュ データを表示する方法について説明します。
非推奨: Chrome DevTools を使用してアプリケーション キャッシュ データを表示する
Chrome DevTools の [Application] パネルでアプリケーション キャッシュ データを表示する方法について説明します。
現在選択されている DOM ノード
現在選択されている DOM ノードを取得する、クイック コンソールのショートカットについて学びます。
サポートの終了と削除(Chrome 74)
計画に役立つ Chrome 74 のサポート終了と削除の概要。
IndexedDB データの表示と変更
[Application] パネルとスニペットを使用して IndexedDB データを表示および変更する方法
ローカル ストレージの表示と編集
[ローカル ストレージ] ペインとコンソールで localStorage を表示および編集する方法
セッション ストレージを表示、編集する
[Session Storage] ペインとコンソールで「sessionStorage」を表示および編集する方法。
Chrome 73 の新機能
Chrome 73 では、Signed HTTP Exchange を使用してポータブル コンテンツを簡単に作成できるようになりました。作成可能なスタイルシートを使用すると、スタイルを動的に変更する操作がはるかに簡単になります。また、Mac のプログレッシブ ウェブアプリのサポートを追加し、すべてのデスクトップおよびモバイル プラットフォームで PWA をサポートするようになりました。これにより、ウェブ経由で配信されるインストール可能なアプリを簡単に作成できます。では、Chrome 73 のデベロッパー向けの新機能を詳しく見ていきましょう。
KV ストレージ - ウェブ初の組み込みモジュール
新しい KV Storage API、組み込みモジュール、マップのインポートの概要。
DevTools の新機能(Chrome 74)
CSS プロパティ、Lighthouse v4、WebSocket バイナリ メッセージ ビューアなどの影響を受けるノードをハイライト表示します。
DOM の表示と変更のスタートガイド
ノードの表示、ノードの検索、ノードの編集、コンソールでの参照ノード、ノード変更時のブレークなどを行う方法。
ウェブ開発エコシステム チーム - 2 月のまとめ
2 月のまとめで、ウェブ デベロッパー エコシステム チームの活動を振り返ります。
Workbox v3 から v4 に移行する
Workbox v3 から v4 への移行に関するガイドです。
ワークボックス ウィンドウ
Service Worker の登録、更新の管理、ライフサイクル イベントへの対応に役立つモジュール。
アプリの JavaScript のホットパスを WebAssembly に置き換える
WebAssembly が提供する主なメリットの 1 つは、ブラウザ間でのパフォーマンスが予測可能であることです。しかし、JavaScript で記述されたホットパスを WebAssembly に変換するにはどうすればよいでしょうか。
String.prototype.matchAll() で結果の一致率を向上
Chrome 73 では、String.prototype.matchAll() メソッドが導入されました。match() と同じように動作しますが、特にグループをキャプチャするためにアクセスする必要がある場合、一致を簡単に反復処理できます。
デフォルトでホイールのスクロールを高速にする
スクロールの応答性は、モバイルでのウェブサイトに対するユーザー エンゲージメントにとって重要ですが、ホイール イベント リスナーはスクロールのパフォーマンスに深刻な問題を引き起こすことがよくあります。ユーザーとデベロッパーがデフォルトで高速に動作できるよう Google がどのように支援しているかをご覧ください。
サポートの終了と削除(Chrome 73)
計画に役立つ Chrome 73 のサポート終了と削除のまとめ。
メディアの更新(Chrome 73)
ハードウェア メディアキーのサポート、HDCP ポリシー チェック、ピクチャー イン ピクチャーのオリジン トライアルなど
高速のテンプレートとウェブ コンポーネント - lit-html と LitElement
lit-html と LitElement は、高速で軽量なテンプレートと相互運用可能なコンポーネントを最新のウェブに提供します。
JavaScript を無効にする
コマンド メニューを開き、[JavaScript を無効にする] コマンドを実行します。
RTCQuicTransport のオリジン トライアルがまもなく開催(Chrome 73)
RTCQuicTransport は、QUIC プロトコルを使用して任意のデータをリモートピアと交換できる新しいウェブ プラットフォーム API です。
Chrome 72 の新機能
Chrome 72 では、JavaScript でのパブリック クラス フィールドの作成がはるかに見やすくなり、新しい User Activation API でページが有効になっているかどうかを確認でき、リストのローカライズがはるかに簡単になりました。では、Chrome 72 のデベロッパー向けの新機能を詳しく見ていきましょう。
Lighthouse によるスタックパックのプロトタイピング
スタックパックは、一般的なアドバイスのみを表示するだけでなく、Lighthouse を拡張して特定のツールに関する追加のメッセージを含めることもできます。
DevTools の新機能(Chrome 73)
ログポイント、検査モードの詳細なツールチップなど。
API 間で一貫したユーザー アクティベーションを実現
Chrome バージョン 72 では、User Activation v2 がリリースされます。これにより、有効化制限のあるすべての API でユーザー有効化が利用可能になり、ユーザー有効化の不整合が解消されます。
Shape Detection API: 1 つの画像には 1,000 の単語、顔、バーコードの価値がある
Shape Detection API は、画像内の顔、バーコード、テキストを検出します。
WebUSB 用デバイスの作成
WebUSB API を最大限に活用するデバイスを構築する。 この記事では、 WebUSB API を最大限に活用できるデバイスを作成する方法について説明します。API 自体の概要については、 ウェブで USB デバイスにアクセスする をご覧ください。 ユニバーサル シリアル バス(USB)は、周辺機器をデスクトップ コンピューティング デバイスやモバイル コンピューティング デバイスに接続するための最も一般的な物理インターフェースになっています。USB
サポートの終了と削除(Chrome 72)
計画に役立つ Chrome 72 のサポート終了と削除のまとめ。
Screen Wake Lock API で画面をロックしない
バッテリーの消耗を防ぐため、ほとんどのデバイスはアイドル状態のままですぐにスリープ状態になります。ほとんどの場合は、これで問題ありませんが、アプリによっては、処理を完了するために画面をスリープ状態から復帰させておく必要があります。Screen Wake Lock API を使用すると、アプリケーションの実行を継続する必要がある場合に、デバイスの画面が暗くなったり、ロックされたりするのを防ぐことができます。
Chrome DevTools を開く
Chrome DevTools を開くすべての方法を紹介します。
トラック要素のフォーカス
コンソールを開き、Live Expression を作成して、式を document.activeElement に設定します。
アプリアイコンのバッジ
App Badging API を使用すると、インストール済みのウェブアプリで、アプリケーション全体のバッジを設定できます。このバッジは、シェルフやホーム画面など、アプリケーションに関連するオペレーティング システム固有の場所に表示されます。バッジを使用すると、注意が必要な新しいアクティビティがあることをユーザーに簡単に通知したり、未読件数など少量の情報を示すために使用したりできます。
Chrome 71 の新機能
Chrome 71 では、新しい Intl.RelativeTimeFormat() API を使用して相対的な時間値を簡単に表示できるようになりました。縦方向に流れるテキストについて、テキストのどの側に下線を引くかを指定できます。また、音声合成 API を使用する場合、コンピュータが音声を認識する前にユーザー アクティベーションが必要となるようになりました。では、Chrome 71 のデベロッパー向けの新機能を詳しく見ていきましょう。
バックグラウンド取得の概要
バックグラウンド取得を使用すると、ブラウザを閉じても大容量のダウンロードを処理できます。
DevTools の新機能(Chrome 72)
パフォーマンス指標の視覚化、テキストノードのハイライト表示、JS パスの DOM ノードへのコピー、[Audits] パネルの更新が可能です。
ウェブ オーディオ、自動再生ポリシー、ゲーム
2017 年 9 月に、Chrome の自動再生動作ポリシーで音声の処理方法が変更されることをお知らせしました。このポリシーの変更は、2018 年 5 月の Chrome 66 Stable でリリースされました。 Web Audio 開発コミュニティからのフィードバックを受け、デベロッパーがウェブサイトを更新するための猶予期間を長くするため、自動再生ポリシーの Web Audio に関する部分のリリースを延期しました。また、Web Audio
新機能のステータス
ウェブアプリは、プラットフォーム固有のアプリができることなら何でもできる必要があります。ウェブアプリの新しい機能のステータスを確認する。
Signed HTTP Exchange
Signed Exchange を使用すると、ウェブサイトはウェブ コンテンツへの署名が可能となり、コンテンツの配信元に対してコンテンツを安全に再配信し、確認することができます。
サポートの終了と削除(Chrome 71)
計画の参考に、Chrome 71 でのサポートの終了と廃止のまとめ。
音声と動画の更新(Chrome 70)
Chrome 70 における音声と動画の更新の概要 - クロス コーデックとクロスバイト ストリームのバッファリングと再生、MSE 対応の MP4 の Opus、Android でデフォルトで許可される保護されたコンテンツの再生。
ピクチャー イン ピクチャーで動画を視聴する
ウェブサイトの動画要素のピクチャー イン ピクチャーを管理します。
Chrome 70 の新機能
Chrome 70 では、Windows と Linux でのデスクトップ プログレッシブ ウェブアプリのサポート、Credential Management API の公開鍵認証情報のサポート、専任ワーカーへの名前指定など、多くの機能が追加されました。では、Chrome 70 のデベロッパー向けの新機能を詳しく見ていきましょう。
cache.addAll() と importScripts() を微調整(Chrome 71)
cache.addAll()、importScripts、および Chrome 71 には、いくつかの小さな変更が導入されます。
Chrome 69 でペイントのタイミングに関する問題
Chrome 69 では、ペイントタイミング指標に誤った変更が行われました。これはレンダリング パイプラインをより多く取得することを意図したものでしたが、タイムスタンプが不正確になっていました。
DevTools の新機能(Chrome 71)
Live Expression で DOM ノードをハイライト表示したり、ノードをグローバル変数として保存したりできます。
Houdini のアニメーション ワークレット
アニメーション ワークレットを使用すると、デバイスのネイティブ フレームレートで実行される命令型アニメーションを記述して、ジャンクのないスムーズさを向上させ、メインスレッドのジャンクに対するアニメーションの耐性を高め、時間ではなくスクロール可能なリンクにすることができます。
ホスト権限のユーザー コントロール: 移行ガイド
Chrome 70 以降、ランタイム ホストの権限の変更に対応して拡張機能を更新するためのガイドラインです。
最新のウェブブラウザの詳細(パート 4)
コンポジタ スレッドによる入力イベントの処理
最新のウェブブラウザの詳細(パート 3)
ブラウザ レンダリング エンジンの内部動作
メディアの更新(Chrome 70)
クロス コーデックとクロスバイト ストリームのバッファリングと再生、MSE 対応の MP4 の Opus、Android ではデフォルトで保護されたコンテンツの再生。
非推奨になった機能と削除(Chrome 70)
計画に役立つ Chrome 68 のサポート終了と削除の概要。
最新のウェブブラウザの詳細(パート 2)
ブラウザがナビゲーション リクエストを処理する仕組みをご確認ください。
HTTP Cookie への非同期アクセス
Cookie Store API は HTTP Cookie への非同期アクセスを提供し、Cookie の jar を Service Worker に開きます。
最新のウェブブラウザの詳細(パート 1)
アーキテクチャの概要からレンダリング パイプラインの詳細まで、ブラウザでコードを機能的なウェブサイトに変える方法を学習します。
Chrome 69 の新機能
Chrome が最初にリリースされてから 10 年が経ちます。それ以降、状況は大きく変化しましたが、最新のウェブ アプリケーションの強固な基盤を構築するという Google の目標は今も変わりません。Chrome 69 では、CSS Scroll Snapping のサポート、ノッチとウェブロックのサポート、CSS4 の新機能がいくつか追加されました。では、Chrome 69 のデベロッパー向けの新機能を詳しく見ていきましょう。
DevTools の新機能(Chrome 70)
コンソールでのライブ式、積極的評価での DOM ノードのハイライト表示など。
メディアの更新(Chrome 69)
Chrome 69 でのメディア アップデートのまとめ: AV1 と HDCP のポリシー チェック。
ReportingObserver: コードの健全性を把握する
ReportingObserver は、デベロッパーがコードの動作に関する分析情報を提供します。ReportingObserver は、非推奨や介入、これまで DevTools コンソールでしか確認できなかったメッセージなどの問題に関する情報を表示します。
速度が Google 検索と Google 広告のランディング ページ要素になりました
速度は、Google 検索と Google 広告のランディング ページ要素になりました。
Chrome 68 の新機能
Chrome 68 では、Android でのホーム画面への追加の動作が変更され、より細かな設定が可能になりました。Page Lifecycle API は、タブが一時停止または復元されたタイミングを示します。また、Payment Handler API により、ウェブベースの支払いアプリで Payment Request エクスペリエンスをサポートできるようにします。では、Chrome 68 のデベロッパー向けの新機能を詳しく見ていきましょう。
NoState Prefetch のご紹介
Chrome 63 では NoState Prefetch が導入されました。NoState Prefetch は、非推奨の事前レンダリング プロセスよりもメモリ使用量が少ない、リソースを事前に取得するためのメカニズムです。
PWACompat - すべてのブラウザのウェブアプリ マニフェスト
PWACompat ライブラリを使用して、ウェブアプリ マニフェストをすべてのブラウザに導入します。
workbox-navigation-preload
ナビゲーション リクエストに対するネットワーク レスポンスを高速化するには、ナビゲーションのプリロードを有効にします。
ウェブ デベロッパー向けのサイト分離
パソコン版 Chrome 67 では、サイト分離と呼ばれる新機能がデフォルトで有効になっています。この記事では、サイト分離の概要、必要な理由、ウェブ デベロッパーがサイト分離を認識すべき理由について説明します。
Chrome ユーザー エクスペリエンス レポートでの初回入力遅延に関するテスト
Chrome ユーザー エクスペリエンス レポートに First Input Delay(FID)の試験運用版指標が追加されました。
機能ポリシーの概要
機能ポリシーを使用すると、デベロッパーはブラウザ内の特定の API や機能の動作を選択的に有効化、無効化、変更できます。CSP に似ていますが、機能に特化しています。Chrome 60 で提供されます。
保存容量について
保存容量の問題を回避するために Workbox を構成するためのガイドです。
ネイティブ エコー キャンセラの追加
エコー キャンセラのネイティブ サポートを拡大
オーディオ ワークレットの設計パターン
オーディオ ワークレットの設計パターン
ウェブ向けの拡張現実(AR)
拡張現実(AR)では、仮想オブジェクトを現実世界のビュー内に配置し、トラッキングできます。
Chacmool: Chrome Canary の拡張現実
教育用ウェブデモの Chacmool では、ウェブベースの AR で魅力的な体験を簡単に構築できることを示しています。
インライン インストールのサポート終了と移行に関するよくある質問
Chrome 拡張機能のインライン インストールのサポート終了に関するよくある質問。
サポートの終了と削除(Chrome 68)
計画に役立つ Chrome 68 のサポート終了と削除の概要。
ホーム画面の動作に追加する変更
Android 版 Chrome 68 以降では、「ホーム画面に追加」の動作が変更され、ユーザーにプロンプトを表示するタイミングや方法を、より細かく制御できるようになります。サイトがホーム画面に追加するための条件を満たしている場合、Chrome では、ホーム画面に追加するためのバナーが自動的に表示されなくなります。代わりに、保存された beforeinstallprompt イベントで prompt() を呼び出して、[ホーム画面に追加] ダイアログのプロンプトをユーザーに表示する必要があります。
Chrome 67 の新機能
Chrome 67 では、プログレッシブ ウェブアプリがデスクトップで登場します。汎用センサー API のサポートを追加しました。これにより、加速度計やジャイロスコープなどのデバイス センサーに簡単にアクセスできるようになります。また、BigInts のサポートが追加され、大きな整数の処理がはるかに簡単になりました。では、Chrome 67 のデベロッパー向けの新機能を詳しく見ていきましょう。
DevTools の新機能(Chrome 68)
積極的評価、引数のヒント、関数のオートコンプリート、Lighthouse 3.0 などがあります。
WebAuthn による強力な認証の有効化
Chrome 67 ベータ版では、Web Authentication(WebAuthn)API が導入され、ブラウザが公開鍵ベースの認証情報を操作、管理できるようになりました。これにより、取り外し可能なセキュリティ キーと、指紋スキャナなどの組み込みのプラットフォーム認証システムを使用して、強力な認証を行うことができます。
Lighthouse を使用したページ読み込みのパフォーマンス向上
プリロード、事前接続、GIF などの新しいパフォーマンス監査。
Lighthouse v3 移行ガイド
Lighthouse v2 から v3 に移行する方法。
Lighthouse 3.0 のリリース
監査の迅速化、ばらつきの軽減、新しいレポート UI、新しい監査などの機能が追加されました。
サポートの終了と削除(Chrome 67)
計画に役立つ Chrome 67 のサポート終了と削除のまとめ。このバージョンでは、公開鍵のピニングのサポート終了、安全でないコンテキストでの AppCache の削除、接頭辞の削除が加えられています。
イベント ドリブン バックグラウンド スクリプトに移行する
Chrome 拡張機能のパフォーマンスを改善するために、永続的なバックグラウンド スクリプトをイベントベースの非永続的なモデルに移行する方法を紹介します。
コンソールで JavaScript を実行する
コンソールで JavaScript を実行する方法を学習します。
Chrome 66 の新機能
Chrome 66 では、新しい CSS Typed Model Object で CSS の操作が簡単になり、クリップボードへのアクセスが非同期になりました。また、canvas 要素の新しいレンダリング コンテキストが追加され、JavaScript を使ってより効率的に音声を処理できるようになりました。では、Chrome 66 のデベロッパー向けの新機能を詳しく見ていきましょう。
最高のパフォーマンスを達成する
高パフォーマンスの Chrome 拡張機能の構築方法に関するガイドラインです。
DevTools の新機能(Chrome 67)
ネットワーク ヘッダーの検索、フェッチとしてのリクエストのコピー、パソコンの条件を使用したページの監査など、多くの機能があります。
ワークスペースでファイルを編集、保存する
DevTools で行った変更をソースファイルに保存する方法について説明します。
セカンダリ接続ディスプレイにウェブページを表示する
Chrome 66 では、ウェブページで Presentation API を介してセカンダリ接続ディスプレイを使用し、Presentation Receiver API を介してそのコンテンツを制御できます。
Chrome 66 でのサポートの終了と削除
計画に役立つ Chrome 66 のサポート終了と削除の概要。このバージョンでは、Service Worker のセキュリティの向上、CSS の位置値の変更などが行われています。
macOS ネイティブのエコー キャンセラ
Chrome で macOS ネイティブのエコー キャンセラを使用する
SmooshGate に関するよくある質問
SmooshGate が標準開発とウェブ プラットフォームについて学べることこの文章は概要です。
ユーザーのプライバシーを保護する
Chrome 拡張機能でユーザーのプライバシーを確実に保護するためのガイドラインです。
ユーザーのプライバシーを保護する
Chrome 拡張機能でユーザーのプライバシーを確実に保護するためのガイドラインです。
ユーザー インターフェースをデザインする
Chrome 拡張機能の UI とデザインのガイドラインです。
Workbox v2 から v3 に移行する
Workbox v2 から v3 への移行に関するガイドです。
セキュリティの確保
Chrome 拡張機能を安全に保護する方法
セキュリティの確保
Chrome 拡張機能を安全に保護する方法
Chrome 65 の新機能
Chrome 65 では、新しい CSS Paint API のサポートが追加され、プログラムで画像を生成できるようになりました。Server Timing API を使用すると、HTTP ヘッダーを介してサーバーのパフォーマンスのタイミング情報を提供できます。また、新しい CSS display: content プロパティを使用すると、ボックスを非表示にできます。では、Chrome 65 のデベロッパー向けの新機能を詳しく見ていきましょう。
DevTools の新機能(Chrome 66)
[ネットワーク] パネルでスクリプトを無視する、デバイスモードでズームを自動調整する、など
Lighthouse 2.8 の更新情報
新しいパフォーマンス監査と SEO 監査、レポートの最初のセクションとしての perf など。
サポートの終了と削除(Chrome 65)
計画に役立つ Chrome 65 のサポート終了と削除のまとめ。このバージョンでは、Symantec の証明書とクロスオリジン ダウンロードのブロックに関するリマインダーが表示され、document.all は読み取り専用になりました。
Meltdown/Spectre
ウェブ デベロッパーに対する影響と Chrome でのリスク軽減策
ワークボックスのビルド
Service Worker の生成、既存のコードへのプリキャッシュ マニフェストの挿入、プリキャッシュ マニフェストの作成が可能なモジュール。
sw-precache または sw-toolbox から移行する
sw-precache または sw-toolbox から Workbox に移行するためのガイドです。
Chrome ユーザー エクスペリエンス レポート - 新しい国のディメンション
Chrome ユーザー エクスペリエンス レポートに新しい国のディメンションがリリースされたことをお知らせします。
Chrome 64 の新機能
Chrome 64 では、要素のコンテンツ長方形のサイズが変更されたときに通知を受け取る ResizeObservers のサポートが追加されています。モジュールが import.metadata を使用して、ホスト固有のメタデータにアクセスできるようになりました。ポップアップ ブロッカーが強力になり、機能が大幅に向上しました。では、Chrome 64 のデベロッパー向けの新機能を詳しく見ていきましょう。
CSS Paint API
Houdini の CSS Paint API を使用すると、プログラムで CSS 画像を描画できます。
DevTools の新機能(Chrome 65)
ローカルのオーバーライド、ユーザー補助ツール、パフォーマンスと SEO の監査など。
Headless Chrome: サーバーサイド レンダリングを行う JavaScript サイトのご紹介
ヘッドレス Chrome は、動的な JavaScript サイトを静的 HTML ページに変換するドロップイン ソリューションです。
DevTools の新機能(Chrome 64)
パフォーマンス モニター、コンソール サイドバー、コンソールのグループ化があります。
ハードウェア ノイズ キャンセレーションを無効にする
ハードウェア ノイズ キャンセレーションを無効にする(Chrome 64)
広告の改善に関する最新情報
広告のパフォーマンス向上に関する最新情報。
workbox-webpack-plugin
webpack ビルドツールを使用して、Service Worker を生成するか、プリキャッシュ マニフェストを挿入します。
Chrome ユーザー エクスペリエンス レポート - 上位 100 万以上のオリジンに拡大
本日、Google は新しい Chrome ユーザー エクスペリエンス レポートを発表いたします。このレポートでは、ウェブ上の 100 万を超える上位のオリジンの対象範囲が拡大されます。
Linux 用のセルフホスト
Linux ユーザー用に、個人用サーバーから crx ファイルをパッケージ化、ホスト、更新する方法。
Chrome 64 で chrome.loadTimes() API のサポートを終了
標準以外の chrome.loadTimes() API は、すべての便利な機能について標準ベースの同等の API が存在するため、Chrome 64 でサポートが終了します。
Linux への拡張機能のインストール
個人用サーバーの crx ファイルをパッケージ化、ホスト、更新する方法。
サポートの終了と削除(Chrome 64)
計画に役立つ Chrome 64 のサポート終了と削除の概要。このバージョンでは、パフォーマンス API の変更、複数のシャドウルートのサポート終了、WebKit API の削除が行われています。
オーディオ ワークレットがデフォルトで使用できるようになりました
待望の Web Audio API の新機能(オーディオ ワークレット)が Chrome 64 でリリース
Lighthouse 2.6 の更新情報
新しいパフォーマンス監査、ユーザー補助スコアの見直し、ユーザー エクスペリエンスの改善に関するレポート、バグの修正などを実施しています。
Chrome 63/64 のメディアの更新
Chrome 64 では、予測可能なメディア再生、Windows 10 での HDR、永続ライセンスによるオフライン再生などの機能をご利用いただけます。
Device Memory API
Device Memory API を使用すると、デベロッパーはデバイスのメモリ能力に応じてユーザーにさまざまなリソースを提供できます。
Chrome 63 の新機能
Chrome 63 では、JavaScript モジュールを動的にインポートできます。私が好きな面接のコーディングに関する質問は、非同期イテレータとジェネレータを使えば簡単に実現できます。また、CSS の overscroll-behavior プロパティで、ブラウザのデフォルトのオーバーフロー スクロール動作をオーバーライドできます。
#workboxbroadcast-update
新しいレスポンスでキャッシュが更新されたら、ページにメッセージを送信します。
DevTools の新機能(Chrome 63)
マルチクライアント リモート デバッグ、カスタムデータを使用したプッシュ通知、ワークスペース 2.0。
workbox-range-requests
このモジュールにより、以前にキャッシュされたデータのスライスを使用して Range:リクエストに応答できるようになります。
workbox-cacheable-response
レスポンスのステータス コードまたはヘッダーに基づいて、キャッシュに保存するリクエストを制限します。
#workbox-google-analytics
Google アナリティクスのオフライン操作を再生できるようになりました。
ワークボックス SW
ビルドステップなしで Workbox ランタイムを読み込む方法を提供します。
workbox-cli
コマンドラインから、Service Worker の生成、プリキャッシュ マニフェストの挿入、ワークボックス ライブラリのローカルコピーの作成を行います。
workbox-expiration(ワークボックスの有効期限)
キャッシュ内のアイテム数またはキャッシュされたリクエストの経過時間に基づいて、キャッシュされたリクエストを削除しました。
ワークボックスコア
ログレベルとキャッシュ名を変更します。すべてのワークボックス ライブラリで使用される共有コードが含まれています。
workbox-background-sync
バックグラウンド同期を使用すると、ユーザーがオフラインの場合でも確実にネットワーク リクエストを行うことができます。
ワークボックス戦略
リクエストへの応答を処理する一連のランタイム キャッシュ戦略。通常は「workbox-routing」で使用されます。
ワークボックスのプレキャッシュ
ファイルセットを簡単に事前キャッシュし、ファイルの更新を効率的に管理できます。
ワークボックス ルーティング
Service Worker のリクエストを特定のキャッシュ戦略またはコールバック関数に転送します。
スクロールの制御 - 下にスワイプして更新やオーバーフロー効果のカスタマイズ
CSS のオーバースクロール動作プロパティの概要。
::Shadow と /deep/ の削除(Chrome 63)
シャドウ ピアスの CSS セレクタはもう不要です。
Chrome 63 でのサポートの終了と削除
計画に役立つ Chrome 63 のサポート終了と削除の概要。このバージョンでは、インターフェース プロパティの新しい動作、Webkit 関数の削除、RTCRtcpMuxPolicy の変更が行われています。
バッファリングの割り当てを超過する
QuotaExceededError に対処する方法はいくつかあります。
Chrome 62 の新機能
Chrome 62 では、ネットワーク品質インジケーターによってネットワーク情報 API が改善され、OpenType 可変フォントのサポートが開始され、Media Capture from DOM element API を使用して HTMLMediaElements からメディア ストリームをキャプチャして処理できるようになりました。
Lighthouse 2.5 の更新情報
5 つの新しい監査、Chrome Launcher スタンドアロン ノード モジュール、新しいスロットリング ガイドが追加されています。
ぼかしをアニメーション化する
ぼかしを効率的にアニメーション化するには、いくつかの工夫が必要です。
WebVR の変更(Chrome 62)
WebVR API の変更点をご確認ください。
中止可能な取得
新しいウェブ プリミティブ(中止コントローラ)を使用してフェッチを中止する
CSS position:sticky イベント
position - sticky と IntersectionObserver を併用して、要素が固定表示されるタイミングを判断します。スクロール イベントなしでスクロール効果を適用できます。
ウェブ向けセンサー
センサーは多くのアプリで使用され、実行するデバイスの向きや加速度を考慮するゲームなどの高度な機能を可能にします。Generic Sensor API は、ウェブ上でこのようなセンサーデータにアクセスするための汎用インターフェースを提供します。
サポートの終了と削除(Chrome 62)
計画に役立つ Chrome 62 のサポート終了と削除の概要。このバージョンでは、セキュリティの改善、Webkit のサポート終了などについて説明しています。
Chrome のバックフォワード キャッシュを確認する
bfcache は以前アクセスしたページにすぐに移動できるようにキャッシュを作成します。
Chrome の自動再生ポリシー
Chrome の新しい自動再生ポリシーで、優れたユーザー エクスペリエンスを実現するためのおすすめの方法をご確認ください。
メディアの更新(Chrome 62)
永続ライセンスと Widevine L1 を使用した Android のオフライン再生、動画トラックの最適化、デバイスを回転させたときの動画フルスクリーンの自動表示、MS のライブ ストリームでのシーク可能な範囲のカスタマイズ、MSE 対応の MP4 形式の FLAC を利用できます。
ピクチャー イン ピクチャー(PIP)
デスクトップ上にフローティング動画ウィンドウをウェブサイトが作成できるようにする Web API について説明しましょう。
Chrome 61 の新機能
Chrome 61 では JavaScript モジュールがネイティブでサポートされ、モジュラー JavaScript の記述方法が統一されました。navigator ドット共有を使用して、Android のネイティブ共有ダイアログをトリガーできるようになりました。また、WebUSB API もリリースされ、ユーザーが許可された USB デバイスにウェブアプリからアクセスできるようになりました。ほかにも多数あります。
visualViewport の導入
Vision ビューポート API を使用すると、ユーザーによるページのズームやスクロールの詳細を確認できます。
DevTools の新機能(Chrome 62)
コンソールのトップレベルの Await 演算子、新しいスクリーンショット ワークフロー、CSS グリッドのハイライト表示など。
サポートの終了と削除(Chrome 61)
計画に役立つ Chrome 61 のサポート終了と削除の概要。このバージョンでは、セキュリティの改善、Webkit のサポート終了などについて説明しています。
使用可能な保存容量の見積もり
navigator.storage.estimate() は、ウェブアプリのストレージ制約に関する分析情報を提供します。
音声と動画の更新(Chrome 61)
Chrome 61 での音声と動画の更新のまとめ。
メディアの更新(Chrome 61)
背景動画トラックの最適化と、デバイスの回転時に動画が自動的に全画面表示されるようになりました。
Chrome 60 の新機能
Chrome 60 では、Paint Timings API を使用して、First Paint の時間と First Contentful Paint の時間を測定できるようになりました。フォントのレンダリング方法は font-display CSS プロパティで制御できます。WebAssembly がリリースされ、さらに多くの機能が実装されました。
今後予定されている正規表現機能
JavaScript 正規表現に追加される新機能の概要(名前付きキャプチャ、dotAll フラグ、Unicode プロパティのエスケープ、後方アサーションなど)
DevTools の新機能(Chrome 61)
Chrome 61 でリリースされる DevTools の新機能と変更点。
配置された入力イベント
スムーズなユーザー エクスペリエンスを提供することは、ウェブにとって重要です。Google では、Chrome の過去数回のリリースにおいて、こうしたデバイス全体で入力レイテンシを短縮してきました。
ライブ配信ブログの強化 - コード分割
WebPack と同様に、コード分割とルートベースのチャンクを実装しました。
DOMException - play() リクエストが中断される
「DOMException - play() リクエストが中断されました」で実際にどうなっているのですか?
ヘッドレス Chrome による自動テスト
ヘッドレス Chrome による自動テスト
認証情報管理 API の最新情報
認証情報管理 API の最新情報
Chrome 60 でのサポートの終了と削除
計画に役立つ Chrome 60 のサポート終了と削除の概要。このバージョンでは、セキュリティの改善、Webkit のサポート終了などについて説明しています。
Budget API の概要
Budget API を使用すると、デベロッパーはユーザーに通知せずにバックグラウンド アクションを実行できるため、サイレント プッシュなどのユースケースを実現できます。
Chrome 59 の新機能
Chrome 59 では、ユーザー インターフェースや周辺機器を使わずに、自動化された環境で Chrome を実行できます。macOS の通知はネイティブ macOS の通知システムから直接表示されます。また、画像キャプチャ API を使用して最大解像度の写真をキャプチャするなど、さまざまな機能が追加されました。
DevTools の新機能(Chrome 60)
Chrome 60 でリリースされる DevTools の新機能と変更点。
サポートの終了と削除(Chrome 59)
計画に役立つ Chrome 59 のサポート終了と削除のまとめ。
ヘッドレス Chrome スタートガイド
ヘッドレス Chrome スタートガイド
macOS のネイティブ通知システムへの移行
macOS で Chrome 59 からネイティブ通知が表示されるようになります。
Chrome 58 の新機能
Chrome 58 では、プログレッシブ ウェブアプリでの全画面表示による没入感が増しています。IndexedDB 2.0 がサポートされるようになりました。また、サンドボックス化された iFrame のオプションが増えました。ピート レページが、Chrome 58 の新しいデベロッパー機能の使い方や使い方を詳しく説明します。
DevTools の新機能(Chrome 59)
Chrome 59 でリリースされる DevTools の新機能と変更点。
JavaScript ダイアログに関する Chromium ポリシー
同期型のアプリモーダルの JavaScript ダイアログは、残念ながらユーザーに害を及ぼすためによく使用されています。そのため、Chromium チームでは JavaScript ダイアログを使用しないことを強くおすすめします。
パフォーマンスに優れた展開と折りたたみのアニメーションを作成する
展開と折りたたみのエフェクトを作成するときは、スケール変換を使用して UI のパフォーマンスを維持できます。
CSS Deep-Dive - フレーム完璧なカスタム スクロールバーのための matrix3d()
カスタム変換行列を使用すると、フレームごとに最適なカスタム スクロールバーを作成できます。
メディアの更新(Chrome 58)
メディア コントロールのカスタマイズ、ホーム画面に追加されたプログレッシブ ウェブアプリの自動再生、非表示になっているときはミュートされた動画の自動再生の一時停止、色域のメディアクエリなどを利用できます。
(メディアの)ストリームを横断します
現在、Chrome で Media Source Extensions(MSE)を使用する場合、暗号化されたストリームとクリアされたストリームを切り替えることはできません。Chrome 58 以降では、この点がすべて変更されています。
サポートの終了と削除(Chrome 58)
計画に役立つ Chrome 58 のサポート終了と削除のまとめ。
音声と動画の更新(Chrome 58)
Chrome 58 での音声と動画の更新のまとめ。
Chrome 57 のバックグラウンド タブ
Chrome 57 のバックグラウンド タブ
Chrome 57 の新機能
Chrome 57 では、display: grid を使用したグリッドベースのレイアウト、メディア セッション API を使用してロック画面と再生中のメディアに関する情報を含む通知などをカスタマイズできるようになりました。ピート レページが、Chrome 57 の新しいデベロッパー機能の使い方や使い方を詳しく説明します。
DevTools の新機能(Chrome 58)
Chrome 58 でリリースされる DevTools の新機能と変更点。
Lighthouse による 2017 年 1 月の更新内容
Lighthouse 1.5 の新機能
メディア通知のカスタマイズ、プレイリストの処理
新しい Media Session API を使用して、ウェブ メディア通知をカスタマイズし、メディア関連のイベントに応答します。
マニフェスト - アクション ハンドラ
manifest.json の action_handlers プロパティのリファレンス ドキュメント。
API のサポート終了と削除(Chrome 57)
計画に役立つ Chrome 57 のサポート終了と削除の概要。
Payment Request API の変更点
Chrome 56 と 57 では、仕様の変更に伴い、Payment Request API にいくつかの変更が加えられています。概要をご確認のうえ、ご自身で実装に変更を加えてください。
CSS グリッド – テーブル レイアウトが復活しました。存在感をアピールし、正方形に。
CSS グリッドは、ウェブ用の新しいレイアウト システムです。
Chrome 56 の新機能
Chrome 56 では、ウェブアプリは Web Bluetooth API を使用して付近の Bluetooth Low Energy デバイスと通信できるようになりました。CSS の位置は固定され、元の位置に戻ります。これにより、ビューポートの上部に固定されるまで通常どおりスクロールする要素を簡単に作成できます。また、HTML5 by Default がすべてのユーザーに有効になっています。
デフォルトでタップ スクロールを高速にする
スクロールの応答性は、モバイルのウェブサイトに対するユーザー エンゲージメントにとって重要ですが、タッチイベント リスナーはスクロールのパフォーマンスに深刻な問題を引き起こすことがよくあります。ユーザーとデベロッパーがデフォルトで高速に動作できるよう Google がどのように支援しているかをご覧ください。
JavaScript デバッグ リファレンス
Chrome DevTools のデバッグ機能に関する包括的なリファレンスで、新しいデバッグ ワークフローをご確認ください。
Lighthouse を使った優れたウェブの構築
Lighthouse の新機能再設計、新しいベスト プラクティスの監査、オンライン レポートの閲覧者。
URL バーのサイズ変更
URL バーを非表示にしても、モバイルページのサイズ変更は行われなくなりました。
Chrome DevTools - JavaScript CPU プロファイリング(Chrome 58)
Chrome 58 では "JavaScript CPU プロファイルを記録" が変更されました。
Chrome DevTools: JavaScript CPU プロファイリング(Chrome 58)
Chrome 58 では JavaScript CPU プロファイルの記録が変更されました。
API のサポート終了と削除(Chrome 56)
計画に役立つ Chrome 56 のサポート終了と削除のまとめ。
position:sticky を Chrome に戻します
position:sticky再登場!
写真の撮影とカメラ設定の制御
画像キャプチャは、カメラの設定を制御して写真を撮影するための API です。
パフォーマンスに優れたパララックス
少し数学的なくねりを加えるだけで、ブラウザのアーキテクチャとうまく連携する視差効果が得られます。
Chrome 55 の新機能
Chrome 55 では、async と await を使用して、Promise ベースのコードを同期のように記述できます。PointerEvents は、すべての入力イベントを処理する統一された方法を提供します。永続ストレージはオリジン トライアルを卒業する。
Chrome Dev Summit 2016 に備えよう
Chrome Dev Summit 2016 を、11 月 10 日、11 日(木)に開催します。
Chrome で安全でないという警告を回避する
Chrome ではまもなく、パスワードやクレジット カードの入力欄を含む安全でないページについて、URL バーに「保護されていません」というマークが表示されます。
CSS でハイフンを管理する
Chrome 55 では、ハイフン プロパティが実装され、ソフト ハイフンが表示されるタイミングとその動作を制御できます。
DevTools Digest、2016 年 10 月
コンソールの新機能、コンテキスト セレクタのバグの更新、新しい UC Browser ユーザー エージェント。
タップ操作のオプション
タップ操作では、要素に対するユーザーの操作方法を定義できます。Chrome 55 では、タップ操作のオプションが幅広くサポートされるようになりました。
イベント リスナーが発生すると
addEventListener が once オプションをサポートするようになり、後でクリーンアップするイベントを簡単に定義できるようになりました。
今後の方向性を示す
ポインタ イベントにより、ブラウザのポインタ入力モデルが統合され、タップ、ペン、マウスが単一のイベントセットにまとめられます。
キャンバス、動画、またはオーディオ要素から MediaStream をキャプチャする
captureStream() メソッドを使用すると、Android およびデスクトップのキャンバス、音声、または動画要素から MediaStream をキャプチャできます。
API のサポート終了と削除(Chrome 55)
計画に役立つ Chrome 56 のサポート終了と削除のまとめ。
auxclick が Chrome 55 に登場
メイン以外のマウスボタンのクリックに対して、新しい auxclick イベントが発生します。
Chrome 54 の新機能
Chrome 54 では、カスタム要素 v1 を使用して独自のカスタム HTML タグを作成し、再利用可能なウェブ コンポーネントを作成できるようになりました。BroadcastChannel API を使用すれば、同じオリジンの開いているウィンドウやタブ間でメッセージを簡単に送信できるようになります。Android ではメディア エクスペリエンスが向上し、外部取得もオリジン トライアルとしてご利用いただけるようになりました。
developers.google.com/web の更新
新しいウェブの基礎 - 操作性の向上、新しいコンテンツなど
Lighthouse の概要
Lighthouse を設定してウェブアプリを監査する方法について学びます。
縮尺が変更されたときに合成レイヤを再ラスターする
will-change - Transform は高速でアニメーション化することを意味します。
クロスオリジン Service Worker - 外部フェッチの実験
サードパーティ サービスでは、独自のネットワーク リクエスト ハンドラのデプロイを開始できます。
CacheQueryOptions が Chrome 54 で到着
CacheQueryOptions の全セットがサポートされているため、必要なキャッシュに保存されているレスポンスを簡単に見つけることができます。
PushSubscription のオプション
push するユーザーを登録する際に使用するオプションにアクセスできるようになりました。
DevTools ダイジェスト、2016 年 9 月 - パフォーマンス総まとめ
最近の Chrome リリースにおける DevTools のパフォーマンス ツールの改善。
BroadcastChannel API - ウェブ用のメッセージバス
BroadcastChannel API は、ウィンドウ、タブ、iframe、ワーカーの間の単純な Pub/Sub に使用できます。
document.write() に対する介入
document.write() を使用して追加されたスクリプトの一部が Chrome でブロックされています
Web Animations API がクロスブラウザのマイルストーンを達成
Chrome に Firefox 48 が加わり、Web Animations API のネイティブ実装がリリースされます。
API のサポート終了と削除(Chrome 53)
Chrome のサポート終了と削除の概要を予定に役立てましょう。
DevTools Digest、2016 年 8 月
[リソース] パネル、新機能、コミュニティ アクティビティの最新情報
ウェブプッシュの相互運用性の成功事例
Chrome の最新版では、ウェブプッシュにいくつかの更新が行われています。GCM でウェブ プッシュ プロトコルがサポートされるようになりました。VAPID を使用している場合は、Google デベロッパー プロジェクトに登録する必要はなく、FCM エンドポイントが提供されます。
モバイルでのミュート状態での自動再生 - キャンバスのハッキングやアニメーション GIF は不要です。
Chrome 53 以降、Android で動画のミュートされた自動再生がサポートされるようになりました。これまで、動画要素で再生を開始するにはユーザーの操作が必要でした。
プログレッシブ ウェブアプリをデバッグする
[Application] パネルを使用して、ウェブアプリ マニフェスト、Service Worker、Service Worker のキャッシュを検査、変更、デバッグします。
オフラインの Google アナリティクスが簡単に
sw-offline-google-analytics ライブラリには必要なものがすべて揃っています。
無限スクローラーの複雑さ
無限スクローラーは、一般的な UI パターンです。ここでは、60 fps で実行されるメモリ控えめな方法でこのパターンを実装する方法について説明します。
短いセッション終了 - Service Worker を使用してウェブ上の Cookie 管理を改善する提案
Service Worker を使用してセッションを保持するための概念実証設計を導入する。
Flexbox が絶対位置の子に対する新しい動作を取得する
Flexbox が絶対位置の子に対する新しい動作を取得する
WebRTC 向け ECDSA - セキュリティ、プライバシー、パフォーマンスの向上
Chrome バージョン 52 以降では、デフォルトで ECDSA が使用されます。ECDSA は WebRTC 証明書の鍵生成の効率的で安全なアルゴリズムです。また、RTCCertificates を IndexedDB で保存できるようになりました。
Chrome for Android での Service Worker のキャッシュ保存、PlaybackRate、音声と動画の blob URL
バージョン 52 以降の Android Chrome では、基盤となるプラットフォームの実装に依存するのではなく、デスクトップ Chrome と同じメディア スタックを使用します。これにより、Service Worker のメディア キャッシュ保存、可変再生レート、Android での blob URL、API 間の MediaStream 受け渡し、容易なクロス プラットフォーム デバッグが可能になります。
API のサポート終了と削除(Chrome 52)
Chrome のサポート終了と廃止のまとめ。計画の参考にしてください。
CSS コンテインメント(Chrome 52)
新しい「CSS Containment」プロパティを使用すると、デベロッパーはブラウザのスタイル、レイアウト、ペイント作業の範囲を制限できます。
パフォーマンス オブザーバー - パフォーマンス データに効率的にアクセス
Chrome 52 の新機能である Performance Observer のインターフェースでは、パフォーマンスのタイムライン データに、より効率的にイベント単位でアクセスできます。
DevTools ダイジェスト、2016 年 9 月 - 2016 年以降の DevTools
2016 年以降の DevTools の大きなテーマとトレンド
パッシブ イベント リスナーによるスクロール パフォーマンスの改善
Chrome 51 の新機能であるパッシブ イベント リスナーを使用すると、スクロールのパフォーマンスが大幅に向上する可能性があります。
ストリーミング配信ですぐに返信
ReadableStreams を使用すると、できるだけ早く Service Worker のレスポンスの処理を開始できます。
DevTools ダイジェスト - 新しいコマンド メニューで機能を強化
超高速なワークフローを実現する DevTools の新しいコマンド メニューと 60 以上のアクションについて説明します。
保護されていないオリジンから Geolocation API を削除(Chrome 50)
Chrome バージョン 50 以降、保護されていない接続を介した HTML5 Geolocation API のサポートを終了しました。
API のサポート終了と削除(Chrome 51)
Chrome のサポート終了と廃止のまとめ。計画の参考にしてください。
認証情報管理 API を使用したログインフローの効率化
高度なユーザー エクスペリエンスを提供するには、ユーザーがウェブサイトで認証できるようにすることが重要です。しかし、エンドユーザーにとって、パスワードの作成、記憶、入力は面倒な作業になりがちです(特にモバイル デバイスの場合)。
KeyboardEvents の新機能を教えてください。キーとコードです。
2 つの新しい属性により、ウェブでのキーボード イベント処理に一貫性を持たせることができます。
テスト期間 - スクロール アンカー
スクロール アンカーは、コンテンツを読み始めるとウェブページが動かないようにする機能です。
ウェブ上の USB デバイスへのアクセス
WebUSB API は、USB をウェブに持ち込むことで、より安全で使いやすくなります。
概要
Google Chrome に組み込まれているウェブ デベロッパー ツールの利用を開始します。
Console API リファレンス
Console API を使用してコンソールにメッセージを書き込む
モバイル第 1 世代向けの新しいデバイスモード
Chrome 49 で導入された新しい Device Mode の Chrome DevTools について、詳細をご確認ください。
Intel Edison を使用したウェブ対応 IoT デバイスの作成
最近ではモノのインターネットが身近な存在ですが、ウェブブラウザからアクセスする IoT デバイスを作成できるとしたらどうでしょうか。この記事では、Intel® Edison Arduino ブレイクアウト ボード上で動作する、フィジカル ウェブ、ウェブ Bluetooth、Node.js を使用してこれを行う方法について説明します。
API のサポート終了と削除(Chrome 50)
Chrome でのサポート終了と API の削除のまとめ。計画の参考にしてください。
検査と変更のための FormData メソッド
Chrome 50 では、送信前に FormData インスタンスを操作できるようになりました。
Chrome 50 でデバイスの向きが変更されます
DeviceOrientationEvent では相対角度が使用され、新しい DeviceOrientationAbsoluteEvent が追加されました。
Chrome 50 で Canvas toBlob() のサポートを追加
Chrome 50 で canvas.toBlob に対応しました。
createImageBitmap() をサポート(Chrome 50)
Chrome 50 でリリース予定のワーカーでの画像デコードをサポート。
フォーカス管理の悩みを解消
「シーケンシャル フォーカス ナビゲーション開始ポイント」機能は、フォーカスされたエリアがないときにシーケンシャル フォーカス ナビゲーション([Tab] または [Shift-Tab])でフォーカス可能な要素の検索を開始する場所を定義します。特に、リンクのスキップやドキュメント内のフォーカスの管理などのユーザー補助機能に役立ちます。
DOMTokenList の検証を追加(Chrome 50)
さまざまな機能のサポートをコードで直接確認できます(Chrome 50 で導入予定)。
Media Source API - メディア セグメントが付加順に自動でシームレスに再生される
Media Source API を使用すると、JavaScript で再生用のメディア ストリームを作成できます。Chrome 50 以降では、SourceBuffer シーケンス モードを使用して、メディア セグメントを追加の順序で、ギャップなしにタイムラインで自動的に再配置できるようになりました。
ウェブ アニメーションの改善(Chrome 50)
Chrome 50 では、仕様遵守の改善と新機能の追加が予定されています。
ウェブの push ペイロード暗号化
ウェブプッシュでペイロードがサポートされるようになりました。この便利な新機能の活用方法をご覧ください。
link rel='preload' を使ってリソースの優先順位を付ける
Chrome 50 では rel='preload' のサポートを追加し、rel='subresource' のサポートを終了しました。
ウェブ通知の改善(Chrome 50) - アイコン、終了イベント、再通知の設定、タイムスタンプ
Chrome 50 に通知の新機能が数多く搭載されています。
HTMLMediaElement.play() が Promise を返す
自動再生の不確実性が解消されました。play() が Promise を返すようになりました。
リモート デバッグ、授業、深夜の独自ショーなど、
刷新された [デバイスの検査] UI のすべてを学び、修正されたスタイルパネルでクラスを簡単に切り替えたり、DevTools Tonight のパイロット プログラムの様子をご覧ください。
[ソース] で変数を監視
Chrome DevTools を使用すると、アプリケーション全体の複数の変数を簡単に確認できます。
DevTools がダークに、@keyframe の編集、よりスマートなオートコンプリートが使用可能に
DevTools でよりスマートなコンソール オートコンプリートを使用して入力を減らす方法、[Styles] ペインで直接 @keyframe ルールを編集する方法、CSS カスタム変数の活用方法、ダークサイドに参加する方法について学びます。
ウェブ音声の更新(Chrome 49)
Chrome の Web Audio API に関する最新エディションのまとめ。
ES2015 プロキシの概要
ES2015 プロキシ(Chrome 49 以降)は、介入 API を備えた JavaScript を提供します。これにより、ターゲット オブジェクトに対するすべてのオペレーションをトラップまたはインターセプトし、このターゲットの動作を変更できます。
滑らかなスクロール(Chrome 49)
スクロールの揺れにうんざりしていませんか?Chrome 49 では購入後すぐにスムーズにスクロールできます。
font-display によるフォント パフォーマンスの制御
@font-face 用の新しいフォント表示記述子により、デベロッパーはウェブフォントをどのようにレンダリング(またはフォールバック)するかを、読み込みにかかる時間に応じて決定できます。
CSS 変数 - メリット
Chrome 49 で CSS 変数(より正確には「CSS カスタム プロパティ」)が導入されます。これは、CSS の繰り返しを減らすためだけでなく、テーマの切り替えや、将来的な CSS 機能の拡張/ポリフィルといったランタイムで効果を発揮する場合にも役立ちます。
MediaRecorder で音声と動画を記録する
MediaRecorder API を使用すると、ウェブアプリから音声と動画を記録できます。この機能は現在 Firefox、Chrome for Android、およびデスクトップでご利用いただけます。
VP9 が WebRTC で利用可能に
パソコン版 Chrome 48 および Android 版 Chrome 48 以降では、WebRTC を使用したビデオ通話用のビデオ コーデックとして VP9 がオプションになります。
通知アクション(Chrome 48)
ユーザーは [通知の操作] ボタンを使用することで、ページを開かなくてもサイトを操作できます
イベントの高解像度タイムスタンプ
DOMHighResTimeStamp を使用すると、イベントが発生したタイミングをマイクロ秒単位の精度で検出できます。
URLSearchParams による簡単な URL 操作
URL のクエリ文字列への簡単なアクセスと操作 TURLSearchParams
Android 版 Chrome 用 Google Cast
Android 版 Chrome で、Presentation API と Cast Web SDK を使用してモバイルサイトを Google Cast デバイスに表示できるようになりました。
プログレッシブ ウェブアプリのスタートガイド
プログレッシブ ウェブアプリの構築を開始する方法
Chrome DevTools にセキュリティ パネルを追加
Chrome DevTools の新しい [セキュリティ] パネルの詳細をご確認ください。
バックグラウンド同期の導入
バックグラウンド同期は、ユーザーの接続が安定するまでアクションを延期できる新しいウェブ API です。これは、ユーザーが送信したいものがすべて実際に送信されるようにする場合に便利です。
DevTools Digest(CDS Edition): 将来像と RAIL プロファイリング
効率化された新しい Device Mode の常時稼働により、DevTools のモバイル ファースト化について説明します。カラーボタンを使ってセレクタに色を簡単に追加したり、DevTools に近日追加される機能を確認したりできます。
Application Shell アーキテクチャによるウェブアプリの即時読み込み
Application Shell アーキテクチャは、さまざまなテクノロジーを活用してプログレッシブ ウェブアプリを構築するための手法です。
DevTools ダイジェスト - 効率的な要素編集、Service Worker のデバッグ、マテリアル デザイン シェード
DOM パネルの新しいコンテキスト メニューを使用して、ノードを効率的に編集できます。[リソース] パネルから直接 Service Worker をデバッグできます。カラー選択ツールですべてのマテリアル デザイン シェードから選択できます。JS ライブラリのブラックボックス化が簡単に。
ウェブ アニメーションのリソース
Web Animations API のリソースなど
「タップして検索」のトリガーを管理する
「タップして検索」がトリガーされるタイミングと仕組みを理解する
通知 needInteraction - デスクトップでのスムーズな通知 UX
デスクトップ通知はしばらくすると自動的に閉じます。
DevTools ダイジェスト - タブの並べ替え、Console on 2、フレームワーク イベント リスナー
DevTools のタブを好みに合わせて並べ替え、フレームワーク イベントがバインドされた正確な場所を確認します。
入力デバイス機能
PointerEvents がない場合にマウスとタップのロジックを合理化する簡単な方法
ウェブアプリからカメラ、マイク、スピーカーを選択する
MediaDevices インターフェースは、カメラ、マイク、スピーカーなど、ブラウザで利用可能な入出力デバイスにアクセスできます。
JavaScript のスニペットを実行する
スニペットは、Chrome DevTools の [ソース] パネルで作成および実行できる小さなスクリプトです。どのページからでもアクセスして実行できます。スニペットを実行すると、現在開いているページのコンテキストから実行されます。
EME ロガー拡張機能
EME Logger は、Encrypted Media Extensions(EME)のイベントと呼び出しを DevTools コンソールに記録する Chrome 拡張機能です。
Service Worker Cache API の更新
Chrome 46 では、Chrome 47(おそらく 48 程度)と同様に、キャッシュに新しいメソッドが導入されました。終わりはありません。
History API - スクロールの復元
History API が更新され、見づらいスクロール ジャンプを防止できるようになりました。
Chrome でタブが破棄される - メモリ節約のテスト
Chrome のメモリ使用量の削減は、今年のチームの最優先事項の一つです。
HPKP レポートを使用した公開鍵ピニングのロールアウト
Chrome 46 には、より厳密な形式の SSL をサイトに展開するのに役立つ HPKP レポートと呼ばれる機能が付属しています。
ウェブアプリ マニフェストを使用してサイト全体のテーマカラーを指定する
マニフェストでテーマカラーを設定し、ホーム画面から起動したときにサイトのすべてのページで使用できるようにします。
より大規模なネットワーク パネル フィルタ、その他
[ネットワーク] パネルのフィルタでは、便利なカスタム検索ラベルがいくつかサポートされています。
スタイル ペインで使用する簡単なキーボードのコツ
便利なキーボードの使い方を使って、スタイル ペインを効果的に操作する方法を学びます。
DevTools ダイジェスト - タイムラインの詳細、カラーパレットなどを集約
タイムラインの集計詳細でパフォーマンスの問題を引き起こすサードパーティ スクリプト、新しいカラーパレットで一貫した色を選択する方法などをご確認ください。
マテリアル デザイン Lite の新しいリリース - 1.0.4
マテリアル デザイン Lite が新しくリリースされ、多くのバグの修正とビルドプロセスの改善が導入されました。
requestIdleCallback を使用する
requestIdleCallback は、ブラウザがアイドル状態のときに処理をスケジュールするための新しいパフォーマンス API です。
プラグイン コンテンツでのポスター画像の使用
Chrome でオブジェクト要素にカスタムのポスター画像を追加できるようになりました。これにより、Flash などのプラグインの読み込みのパフォーマンスが向上します。
DOM ノードを簡単に複製
HTML を巨大な文字列として編集することなく、DOM を簡単に変更できます。
コンソール パネルで HTML を編集する
[要素] パネルに表示されている DOM ノードのコンテキスト メニューも、コンソール パネルに表示されています。
コンソール パネルで使用する 5 つのコツ
コンソール パネルで使用する 5 つのコツ
DevTools の新しいホーム
developers.google.com/web/tools/chrome-devtools という新しいホーム画面で、新しいチュートリアルやヒントをご覧いただけます。
ソース内の CSS のライブ編集
[ソース] で CSS をライブ編集し、ページをリアルタイムで更新できることをご存じですか?
DOM パンくずリストの改善
[要素] パネルにパンくずリストがあることをご存じですか?
DevTools ダイジェスト - フィルム ストリップとスロットリングの新しい機能
DevTools ダイジェスト版の第 1 弾として、新しいフィルム ストリップ機能などの詳細をご紹介します。
MediaStream のサポート終了
MediaStream API は、同期された音声または動画のストリームを表します。MediaStream.ended、MediaStream.label、MediaStream.stop() が非推奨になりました。代わりに MediaStream.active、MediaStreamTrack.label、MediaStreamTrack.stop() を使用してください。
新しいカスタム デバイスをプリセットとして追加
特定の次元のデバイスを頻繁にエミュレートするか。DevTools の Device Mode で、新しいデバイス プリセットを追加できます。
JavaScript 経由で Bluetooth デバイスと通信する
Web Bluetooth API を使用すると、ウェブサイトと Bluetooth デバイス間の通信が可能になります。
Service Worker でのパフォーマンスを測定する
Service Worker でリクエストのパフォーマンスを測定できない場合、パフォーマンスの向上をどう表現できるでしょうか。そこで、Chrome の最近の変更内容をご紹介します。
rotationAngle と touchRadius を使用する
Chrome 45 では、優れたタッチベースのアプリを簡単に開発していただけるように、いくつかの変更が加えられています。
Android 版 Chrome でのメディア再生通知
ウェブページで音声または動画を再生しているときに、通知トレイとロック画面にページタイトルを示す通知と再生/一時停止ボタンが表示されます。この通知を使用して、再生を一時停止/再開したり、メディアを再生しているページに戻ることができます。
次回実行を選択するためのショートカット
[Sources] パネル エディタで、Cmd + D を使用して次のオカレンスを選択できます。
CSS メディアクエリを調査して表示する
Device Mode には、レスポンシブ デザインを容易にするメディアクエリ インスペクタが組み込まれています。
[Sources] パネルでコードブロックを選択して実行する
ショートカット Ctrl + Shift + E を使用して、[Sources] パネルでハイライト表示されたコードブロックを実行します。
特定の条件に基づいてブレークポイントを設定する
ブレークポイントを設定すると、式の結果に基づいて条件を設定できます。
DevTools パネルをすばやく切り替える
Cmd+](または Cmd[)を使用すると、DevTools でパネル間を移動できます。
コンソールから簡単なスタック トレースを出力する
console.trace() を使用すると、迅速かつ簡単なスタック トレースを取得でき、コード実行フローについての理解を深めることができます。
検査員の検査は誰が行いますか?
DevTools で DevTools を確認できることをご存じですか?
要素で疑似クラスをトリガーする
CSS のホバー効果をデバッグしようとして、要素にマウスが移動しなかったことはありますか?方法は次のとおりです
オプションのファイル スコープを使用したプロジェクト全体の検索
DevTools でプロフェッショナルな検索を行うためのシークレット コマンドについて学びます。
ネットワークの色グループ
リソースを識別しやすくするために、どの色がどのリソースタイプと一致するかを確認します。
デバッグ中に JavaScript 値をインラインでプレビューする
デバッグ中に DevTools で JavaScript 変数の値をプレビューする方法について説明します。
[要素] パネルでリソースをすばやく編集/表示
[要素] パネルでリソースをすばやく編集/表示
event_rules
manifest.json の event_rules プロパティのリファレンス ドキュメント。
event_rules
manifest.json の event_rules プロパティのリファレンス ドキュメント。
オーディオ用 Media Source Extensions
Media Source Extensions(MSE)は、HTML5 の音声要素と動画要素向けの拡張バッファリングと再生コントロールを提供します。もともと Dynamic Adaptive Streaming over HTTP(DASH)ベースの動画プレーヤーをサポートするために開発されましたが、MSE はオーディオ、特にギャップレス再生に使用できます。
通知の変更を通知する
Chrome 44 では 2 つの新しい API が追加され、プッシュ通知での操作とカスタマイズが簡単になりました。
キーボードでコールスタック間を移動
キーボード ショートカットでブレークポイントを設定し、コールスタック内を移動する方法
現在選択されている DOM ノード
現在選択されている DOM ノードを取得する、クイック コンソールのショートカットについて学びます。
未完了のネットワーク リクエスト
Is:running の詳細ネットワーク フィルタを使用すると、未完了のネットワーク リクエスト(実行中のリクエストなど)を確認できます。
要素のクイック編集タグ
[要素] パネルでノードの開始タグ名をダブルクリックすると編集できます。
一致するセレクタを表示
スタイル ペインでセレクタを表示しているとき、カンマ区切りのセレクタ部分は、選択した DOM ノードと一致するかどうかによって色分けされます。
コンソール パネルからイベントを迅速にモニタリング
コマンドライン API のメソッド monitorEvents(object [, events]) を使用して、オブジェクトにディスパッチされたすべてのイベントをログに記録できます。
データ URI として画像をコピー
[リソース] パネルで画像プレビューを右クリックし、データ URI(Base 64 エンコード)としてコピーします。
Alt キーを押しながらクリックすると、すべての子ノードを展開します
Alt + クリックするとすべての子ノードを展開します
要素パネルに表示
コンソールの要素パネルに DOM ノードを表示する。
ソースパネルに複数のカーソルを追加するためのコマンドクリック
DevTools のソースパネルでマルチカーソルを編集する方法を学習します。
イージング エディタ
イージングの CSS プロパティを選択すると、動作をアニメーションでプレビューできます。
カラー選択ツールの UI と機能の一部の強化
DevTools のカラー選択ツールがアップグレードされます。 現在の Chrome Canary
イベント リスナーを取得してデバッグする
次のコンソール コマンドを使用して、DevTools でイベント リスナーを取得してデバッグします。
例外が発生すると自動的に一時停止
DevTools では、例外が発生すると自動的に一時停止できます(特にキャッチされなかった例外で便利です)。
CSS 値をすばやく変更する
キーボードまたはマウスホイールを使用して CSS 値をすばやく変更する
cURL でネットワーク リクエストを再生する
コマンドラインからネットワーク リクエストをデバッグする方法を学習します。
角かっこ表記のオートコンプリート
[Sources] パネルで角かっこ表記をオートコンプリートできます。
DOM ブレークポイントを表示、変更する
DevTools の [Breakpoints] ペインで DOM ブレークポイントを表示、変更する方法
要素をビューポートにスクロールする
検査している要素がビューの外にある場合、次の手順でビューポートに取ります。
疑似クラスのトリガー
CSS を適切にデバッグするために、:active などの疑似クラスをトリガーする方法について説明します。
[ネットワーク] パネルのフィルム ストリップ
ネットワーク パネルを視覚的に操作し、ページの読み込み中にキャプチャしたスクリーンショットを表示する
CSS の短縮形プロパティを開く
[スタイル] ペインでは、CSS の短縮プロパティ(Flex や padding など)を展開して、定義されているすべてのプロパティを確認できます。
ポート転送
DevTools のポート転送を使用すると、localhost URL でもモバイルで機能できます。
CSS セレクタで DOM ツリーを検索
[要素] パネルで DOM を参照する際は、CSS セレクタで CMD/Ctrl+F を使用してノードを検索してみてください。
入力時に JS エラーが通知されます
コンソール パネルにエラーが表示された場合は、それをクリックして [Sources] パネルの行で、エラーの表示を確認します。
簡単なタイムライン録画
DevTools のドッキングを解除して別のウィンドウに移動し、ページの中でアクションを実行する必要がある部分の近くに記録ボタンが配置されるようにします。
特定の列の行番号に移動する
[ソース] パネルで特定の行番号に移動する方法について説明します。
マニフェスト - USB プリンタ
manifest.json の usb_printers プロパティのリファレンス ドキュメント。
ハードウェア デコードを備えた高性能な動画
ハードウェア動画のサポートにより、HTML5 動画だけでなくプラグインでも効率的なデコードが可能になります。Flash ユーザーは、古いスタイルの Video から StageVideo オブジェクトに切り替える必要があります。
イベント リスナーに簡単にジャンプ
任意のノード上の登録済みイベント リスナーの関数定義を表示する方法を学習します。
文言の要点
実行されたステートメントが詳細にハイライト表示されます。
ハードリロード
DevTools を開いた状態で、再読み込みボタンを長押しすると、その他のオプションを表示します。
ローカルの変更
ローカルの変更では、特定のソースファイルに対して(DevTools を介して)行われた変更を確認できます。
ビジネス情報を順番に編集
カーソル位置の履歴はソースパネルに保持されるため、Alt キー(戻る)または Alt キー(進む)を使用して前の編集位置を巡回できます。
ネットワーク リソースのレスポンスをクリップボードにコピーします
ネットワーク リソースのリクエスト/レスポンス ヘッダーをコピーするだけでなく、レスポンス自体をコピーすることもできます。
ドラッグして列を選択する
Alt キーを押しながらマウスをドラッグすると、ソースパネル エディタで列を選択できます。
事前定義スニペット
ウェブページで事前定義されたコード スニペットを実行する方法
要素のタグのクイック編集
[要素] パネルでノードの開始タグ名をダブルクリックすると編集できます。
データ URI として画像をコピー
[リソース] パネルで画像プレビューを右クリックし、データ URI(Base 64 エンコード)としてコピーします。
[要素] パネルに表示
コンソールの [要素] パネルで DOM ノードを表示する。
一致するセレクタを表示
スタイル ペインでセレクタを表示しているとき、カンマ区切りのセレクタ部分は、選択した DOM ノードと一致するかどうかによって色分けされます。
コンソール パネルからイベントを迅速にモニタリング
コマンドライン API のメソッド monitorEvents(object [, events]) を使用して、オブジェクトにディスパッチされたすべてのイベントをログに記録できます。
ソースパネルに複数のカーソルを追加するためのコマンドクリック
DevTools のソースパネルでマルチカーソルを編集する方法を学習します。
Alt キーを押しながらクリックすると、すべての子ノードを展開します
Alt + クリックするとすべての子ノードを展開します
キーボード ショートカットで DevTools のドック状態を切り替える
Cmd + Shift + D キーを使用して、DevTools のドック状態を最近使用した 2 つの状態に切り替えます。
キーボード ショートカットで DevTools のドック状態を切り替える
Cmd + Shift + D キーを使用して、DevTools のドック状態を最近使用した 2 つの状態に切り替えます。
未完了のネットワーク リクエスト
Is:running の詳細ネットワーク フィルタを使用すると、未完了のネットワーク リクエスト(実行中のリクエストなど)を確認できます。
イージング エディタ
イージングの CSS プロパティを選択すると、動作をアニメーションでプレビューできます。
モバイル用の自動大文字表記
テキスト入力に対するもう一つの不満は解消されます。
切り取りとコピーのコマンド
切り取りコマンドとコピーコマンドがサポートされているため、選択したテキストを切り取り、ユーザーのクリップボードにコピーできます。
WebView のリモート デバッグ
Chrome デベロッパー ツールを使用して、ネイティブ Android アプリの WebView をデバッグします。
ソースマップを使用してデプロイするのではなく、オリジナル コードをデバッグする
クライアントサイドのコードを結合、圧縮、コンパイルした後でも、可読性およびデバッグ可能な状態を維持する。
Console Utilities API リファレンス
Chrome DevTools Console で使用できる便利な関数のリファレンスです。
Android デバイスのリモート デバッグ
Windows、Mac、Linux パソコンから Android デバイスでライブ コンテンツのリモート デバッグを行います。
プロトタイプ チェーンに DOM 属性を追加
Chrome は仕様に準拠しています。属性の反映に WebKit ロジックを使用しているかどうか、サイトを確認してください
他のブラウザのエミュレートとテスト
仕事は Chrome と Android でサイトが適切に動作するかどうかを確認することで終わります。Device Mode は iPhone などの他のさまざまなデバイスをシミュレートできますが、エミュレーションについては、他のブラウザ ソリューションを確認することをおすすめします。
ページのリソースを表示
フレーム、ドメイン、タイプなどの条件でリソースを整理できます。
ウェブ用 Permissions API
Permissions API では、API の権限のステータスを一元的にチェックできます。
ウェブ アニメーションの命名における概念の簡素化
デベロッパーの皆様からのフィードバックに基づき、ウェブ アニメーションで今後提供予定の機能の名称を変更しました。
DevTools の新しいホーム
developer.google.com/web に移転しました。新しいチュートリアルやヒントが満載です。
DevTools のタイムライン - 詳細を説明します
Chrome DevTools の [タイムライン] パネルがアップグレードされ、サイトのランタイム パフォーマンスをより詳しく把握できるようになりました。
OpenWeb でのプッシュ通知
Chrome 42 でプッシュ メッセージと通知機能をリリースします。
HTML5 オフライン ストレージの管理
Chrome アプリをクライアントサイドで保存し、オフラインで使用できるようにする方法。
Web Components と JSON-LD を使用したセマンティック サイトの作成
schema.org のマークアップをコンポーネントに追加して、検索エンジンと相性の良いものにしましょう。
Chrome Dev Summit 2014 - Polymer を使ってアプリを作成しましょう
Polymer を使ったアプリの構築。
ES6 テンプレート文字列によるリテラルの取得
式が埋め込まれたテンプレート文字列リテラル。私たちは長い間、これを待ち望んできました。文字どおり
仮想ビューポートとは
仮想ビューポートにより、ビューポートのレイアウトと表示が分離されます。
image-rendering:pixelated
国全体のモザイク。Chrome 41 に対応
moveBefore() を使用して DOM ミューテーション中に状態を保持する
重要な状態を失うことなく DOM 内でノードを移動する
共有モジュール
Chrome 拡張機能間でコードを共有する方法
Chrome Dev Summit 2014 - Polymer - 労働組合の状況
ポリマーユニオンの状態。
共有モジュール
Chrome 拡張機能間でコードを共有する方法
ネイティブ アプリのインストール プロンプト
ネイティブ アプリ インストール バナーを使用すると、ユーザーがブラウザを離れることなく、アプリストアからデバイスにネイティブ アプリを迅速かつシームレスにインストールできます。
ネイティブ メッセージング
Chrome アプリからネイティブ アプリとメッセージを交換する方法
ウェブ アニメーションの再生コントロール(Chrome 39)
ウェブ アニメーションの再生の詳細
モバイルウェブ開発の基礎
デベロッパーがウェブ開発に着手し、サイトでイテレーションができるように、Chrome チームが行っている取り組みの一部をご紹介します。
デベロッパーからのフィードバックが必要 - Frame Timing API
現在、実際の 1 秒あたりのフレーム数を測定するための新しい API の開発が進行中ですが、皆様のフィードバックが必要です。
Android 版 Chrome 39 でテーマカラーをサポート
Chrome for Android でツールバーの色を設定するには、 theme-color を使用します。
ステップ 2: 既存のウェブアプリをインポートする
既存のウェブアプリを Chrome アプリ プラットフォームに適応させる方法
ステップ 3:アラームと通知を追加する
Chrome アプリを指定した間隔で起動して通知を使用する方法。
ステップ 4: WebView で外部リンクを開く
Chrome アプリで外部のウェブ コンテンツを表示する方法
Todo Chrome アプリを作成する
Codelab の概要。
ステップ 5: ウェブから画像を追加する
XHR と ObjectURL を使用して Chrome アプリに画像を追加する方法
ステップ 7: アプリを公開する
Chrome ウェブストアで Chrome アプリを公開する方法
ステップ 6: Todo をファイル システムにエクスポートする
Chrome アプリからファイル システムに書き込む方法
ステップ 1: Chrome アプリを作成して実行する
基本的な Chrome アプリを作成、インストール、実行、デバッグする方法。
生成ツール - 雑念な要素
ES6 Generator の詳細を確認します。
ビーコンデータを送信する(Chrome 39)
Chrome 39 では Beacon API が実装されており、ページのアンロード イベント中に小規模な非同期 HTTP リクエストを送信できます。
精密なタッチ操作で正確な操作が可能
画面密度の変化に対応するために、Chrome で TouchEvents が整数ではなく浮動小数点値を返すように変更されました。これにより、遅いジェスチャーでも詳細なフィードバックが得られます。
ES6 による収集と反復処理
Maps、Set、for...反復処理は、データ コレクションの処理方法を変更できる ES6 機能です。
Encoding API を使用した ArrayBuffer から文字列への変換を容易に
ネイティブの Encoding API を使用すると、未加工のバイナリデータと JavaScript 文字列を簡単に変換できます。
M36 でのウェブ オーディオの変更
Chrome 36 でのウェブ オーディオ標準のクリーンアップ処理について
Chrome 37 ベータ版でリリースされたダイアログ要素
Chrome ベータ版で要素のネイティブ サポートを開始
DevTools ダイジェスト - Chrome 35
Chrome 35 のデベロッパー ツールの更新
Notifications API を使用する
Chrome 拡張機能のユーザーに通知を表示します。
リッチ通知 API
Chrome 拡張機能のユーザーに通知を表示する方法。
Chrome Dev で IndexedDB の Blob サポートを開始
Chrome で待望の機能である IndexedDB に対する Blob のサポートが Chrome Dev でリリースされました。
ウェブ パフォーマンス測定の自動化
PSI を使用して、ウェブ パフォーマンス指標をビルドプロセスに組み込みます。
ゲームエンジン
Chrome アプリで推奨されるゲームエンジン
ウェブ アニメーション - element.animate() を Chrome 36 で利用可能に
Web Animations は、ウェブ プラットフォームでのアニメーションと同期をサポートするためのモデルを定義します。element.animate() は、これらのピースのうち Chrome に最初に導入されるものです。
互換性が向上し、スムーズなタッチ操作を実現
タッチに反応してスムーズにスクロールするモバイル ウェブアプリが必要です。開発は簡単であるべきですが、残念ながら、スクロール中にモバイル ウェブブラウザがタッチイベントにどのように反応するかについては、[TouchEvent](https://www.w3.org/TR/touch-events/) の仕様の実装の詳細として残されています。
Apache Cordova を使用してモバイルで Chrome アプリを実行する
Apache Cordova を使用して Android デバイスや iOS デバイスで動作する Chrome アプリを設定する方法についてのガイドです。
Chrome DevTools を使用して非同期 JavaScript をデバッグする
JavaScript を独自たらしめている強力な機能の 1 つが、コールバック関数を介して非同期で動作する機能です。非同期コールバックを割り当てると、イベントドリブン コードを記述できますが、JavaScript がリニアに実行されないため、バグの追跡が困難になります。 幸い、Chrome DevTools では、非同期 JavaScript コールバックの 完全な コールスタックを確認できます。 DevTools
CSS グリッドを利用する
CSS グリッド レイアウトは、ウェブ アプリケーションに最適な新しいレイアウト プリミティブを提供する新しい CSS3 モジュールです。
マニフェスト - Bluetooth
manifest.json の bluetooth プロパティのリファレンス ドキュメント。
Bluetooth
Chrome アプリから Bluetooth デバイスと通信する方法。
Chrome 33 でのホスティングの変更
Chrome バージョン 33 から開始された Chrome 拡張機能のホスティングの変更に関する詳細。
チュートリアル: Manifest V2 に移行する
マニフェスト v1 からマニフェスト v2 への移行方法に関するガイドラインです。
はじめに
Chrome 拡張機能を作成する詳しい手順。
WebView ワークフロー
Yeoman、Gradle、Grunt を使用してウェブ アプリケーションを作成する方法を説明するチュートリアル。
ヒントとコツ
WebView アプリケーションを改善するためのヒントとコツ。
ウェブ デベロッパー向けの WebView アプリケーション
Yeoman、Gradle、Grunt を使用してウェブ アプリケーションを作成する方法を説明するチュートリアル。
よくある質問
Chrome 拡張機能に関するよくある質問。
ピクセル パーフェクトの WebView
完璧な WebView UI を作成する方法。
DevTools ダイジェスト
Chrome 33 のデベロッパー ツールの更新
chrome.location
chrome.location API のリファレンス ドキュメント。
Yeoman マンスリー ダイジェスト
ヤーマン語の質の高い記事、ジェネレータ、プロジェクト ニュースを毎月お届けするダイジェストです。
Chrome 設定のオーバーライド
Chrome 拡張機能から Chrome の設定をオーバーライドする方法。
Chrome 設定のオーバーライド
Chrome 拡張機能から Chrome の設定をオーバーライドする方法。
Yo Polymer – ウェブ コンポーネント ツールの Whirlwind ツアー
Web Components や Polymer、それら用のフロントエンド ツールについて簡単にご紹介します。
会話するウェブアプリ - Speech Synthesis API の概要
Web Speech API の合成機能の概要です。
Chrome Dev Summit - プラットフォームの概要
プラットフォーム
Chrome Dev Summit - オープン ウェブ プラットフォームの概要
Open Web Platform の機能は、かつてないスピードで進化しています。Chrome Dev Summit では、プラットフォーム向けに Blink、セキュリティ、メディアを改善する取り組みについてお話ししました。
Chrome Dev Summit - パフォーマンスの概要
パフォーマンスが重要
ソケット
manifest.json の sockets プロパティに関するリファレンス ドキュメント。
Chrome Dev Summit - Polymer の宣言型、カプセル化、再利用可能なコンポーネント
Polymer は、ウェブ コンポーネントの未来の未来を築く入り口としての役割を果たします。Chrome Dev Summit でウェブ コンポーネントと Polymer について詳しく知る
Chrome Dev Summit - モバイルの概要
これは Chrome Dev Summit のレポートのパート 1 です。これまでモバイルとクロスデバイス開発に重点が置かれていたため、本編からスタートします。
Yeoman マンスリー ダイジェスト
Yeoman コミュニティによる記事、動画、講演の定期的なまとめ。
blink の新しいウェブ アニメーション エンジンで CSS アニメーションと遷移を制御
CSS のアニメーションと遷移を強化する Web Animations 1.0 の実装が Blink に導入されました。
DevTools ダイジェスト 2013 年 12 月
Chrome DevTools の変更点の最新アップデートです。
タップ遅延 300 ミリ秒(廃止)
モバイル ブラウザでのクリック操作はすべて 300 ミリ秒の遅延で妨げられますが、これはモバイル デバイス向けサイトの Chrome 32 で解消されました。
DevTools ターミナル
DevTools からターミナルを使用する
マネージド ストレージのマニフェスト
manifest.json のストレージ プロパティに関するリファレンス ドキュメント。
ストレージ領域のマニフェスト
manifest.json のストレージ プロパティに関するリファレンス ドキュメント。
モバイル向け Chrome DevTools
スクリーンキャストとエミュレーション
Chrome DevTools 11 月のダイジェスト
Chrome DevTools は迅速に動作するので、いくつかのコンポーネントに導入されたいくつかの新機能と改善点に注目してください。具体的には UI の変更、JavaScript の高精度プロファイリング、 Workspaces の新機能について説明します。 CPU プロファイリング は、JavaScript の効率を確認するのに非常に便利な機能です。従来のプロファイル ビューに加えて、今年の夏に フレームチャート が導入されました。これは、ページの JavaScript
Yeoman マンスリー ダイジェスト
Yeoman コミュニティによる記事、動画、講演の定期的なまとめ。
フロントエンド開発の自動化の現状(スライド)
ワークフローを自動化するツールでフロントエンドの生産性を向上させる方法を学びます。
シリアル デバイス
Chrome アプリからシリアル デバイスと通信する方法。
ウェブオーディオのライブ音声入力 - Android で利用可能に
Chrome for Android(v31.0.1650)で、Web Audio API を介した音声入力のサポートを開始しました。
Flexbox のレイアウトは遅くない
朗報!新しい Flexbox は古い Flexbox より 2.3 倍高速
DevTools での回答 - フォントは何でしょうか?
テキストのレンダリングにどのフォントが実際に使用されているのか疑問に思ったことはありませんか?Chrome DevTools ですべてがわかるので、もう心配する必要はありません。
ダイアログ要素 - モーダルを簡単に
独自のモーダル ダイアログ ボックスを作成したことはありますか?まもなく、ダイアログ ボックスはウェブ プラットフォームの一部になりつつあります。
url_handlers
manifest.json の url_handlers プロパティのリファレンス ドキュメント。
externally_connectable
manifest.json の external_connectable プロパティのリファレンス ドキュメント。
externally_connectable
manifest.json の external_connectable プロパティのリファレンス ドキュメント。
Analytics
Google アナリティクスを Chrome アプリに統合する方法
Chrome 動画のアルファ透明度
WebM ではアルファ透明度が追加され、Chrome 31 でサポートされています。
Chrome DevTools の革命(2013 年)
ウェブ アプリケーションの複雑さと機能が増加するにつれ、Chrome DevTools も進化してきました。Paul Irish による Google I/O 2013 の講演「 Chrome DevTools Revolutions 2013 」のまとめでは、ウェブ アプリケーションの構築とテスト方法に革命をもたらす最新機能をご紹介します。 ポールの講演をご覧いただけなかった場合は、上記の動画をご覧ください(どうぞ、お待ちしております)。または、新機能のまとめに直接進んでください。
sourceMappingURL と sourceURL の構文を変更しました
sourceMappingURL と sourceURL の構文を変更しました
マニフェスト - ウェブでアクセス可能なリソース
manifest.json の web_accessible_resources プロパティのリファレンス ドキュメント。
マニフェスト - 要件
manifest.json の requirements プロパティのリファレンス ドキュメント。
マニフェスト - 名前
manifest.json の name プロパティのリファレンス ドキュメント。
マニフェスト - シークレット モード
manifest.json の Incognito プロパティのリファレンス ドキュメント。
マニフェスト - アイコン
manifest.json の icon プロパティのリファレンス ドキュメント。
マニフェスト - 名前と略称
manifest.json の name プロパティと short_name プロパティのリファレンス ドキュメント。
マニフェスト - 説明
manifest.json の description プロパティのリファレンス ドキュメント。
マニフェスト - short_name
manifest.json の short_name プロパティのリファレンス ドキュメント。
マニフェスト - シークレット モード
manifest.json の Incognito プロパティのリファレンス ドキュメント。
マニフェスト - バージョン
manifest.json のバージョン プロパティに関するリファレンス ドキュメント。
マニフェスト - サンドボックス
manifest.json の sandbox プロパティのリファレンス ドキュメント。
マニフェストのバージョン
manifest.json の manifest_version プロパティのリファレンス ドキュメント。
Manifest V2 - バージョン [非推奨]
manifest.json のバージョン プロパティに関するリファレンス ドキュメント。
マニフェスト - Nacl モジュール
manifest.json の nacl_modules プロパティのリファレンス ドキュメント。
マニフェスト - 説明
manifest.json の description プロパティのリファレンス ドキュメント。
マニフェスト - デフォルト ロケール
manifest.json の default_locale プロパティのリファレンス ドキュメント。
マニフェスト - 要件
manifest.json の requirements プロパティのリファレンス ドキュメント。
マニフェスト - ホームページの URL
manifest.json の home_url プロパティのリファレンス ドキュメント。
マニフェスト - キー
manifest.json の主要なプロパティのリファレンス ドキュメント。
マニフェスト - サンドボックス
manifest.json の sandbox プロパティのリファレンス ドキュメント。
マニフェスト - デフォルト ロケール
manifest.json の default_locale プロパティのリファレンス ドキュメント。
マニフェスト - ウェブでアクセス可能なリソース
manifest.json の web_accessible_resources プロパティのリファレンス ドキュメント。
マニフェスト - Chrome の最小バージョン
manifest.json の minimum_chrome_version プロパティに関するリファレンス ドキュメント。
マニフェスト - キー
manifest.json の主要なプロパティのリファレンス ドキュメント。
マニフェスト - アイコン
manifest.json の icon プロパティのリファレンス ドキュメント。
マニフェスト - ホームページの URL
manifest.json の home_url プロパティのリファレンス ドキュメント。
マニフェスト - オフライン有効
manifest.json の offline_enabled プロパティのリファレンス ドキュメント。
マニフェスト - アプリ
manifest.json のアプリ プロパティのリファレンス ドキュメント。
マニフェスト - ファイル ハンドラ
manifest.json の file_handlers プロパティのリファレンス ドキュメント。
キオスクアプリ
manifest.json の kiosk_enabled プロパティに関するリファレンス ドキュメント。
カスタム フィルタ(CSS シェーダー)の概要
カスタム フィルタ(CSS シェーダー)の概要
Shadow DOM のコンセプトの可視化
Shadow DOM のコンセプトの可視化
拡張機能とは
Chrome 拡張機能の目的と開発方法の概要。
DevTools の連続描画モードを使用した長い描画時間のプロファイリング
DevTools の連続描画モードを使用した長い描画時間のプロファイリング
WebRTC - RTCDataChannel デモ、API の変更、Chrome と Firefox の通信
WebRTC - RTCDataChannel デモ、API の変更、Chrome と Firefox の通信
モバイル WebKit ブラウザに CSS 背景の短縮形を追加
モバイル WebKit ブラウザに CSS 背景の短縮形を追加
音声駆動型ウェブアプリ - Web Speech API の概要
音声駆動型ウェブアプリ - Web Speech API の概要
WebRTC による画面共有
WebRTC による画面共有
キャンバス ドリブンの背景画像
canvas または webgl を使用して CSS 背景を強化する
WebRTC が Firefox、Android、iOS に対応
WebRTC が Firefox、Android、iOS に対応
AngularJS を使用したアプリの作成
AngularJS を使用して Chrome アプリを作成するためのガイドです。
Object.observe で変更に対応する
Object.observe で変更に対応する
コンテンツ セキュリティ ポリシー 1.0 が公式に
コンテンツ セキュリティ ポリシー 1.0 が公式に
Sencha Ext JS でアプリを作成する
Sencha Ext JS フレームワークを使用して Chrome アプリを構築する方法。
権限を宣言する
manifest.json 内の権限プロパティの有効な値の概要。
CSS シェーダーと Google マップを備えたインタラクティブな地球
CSS シェーダーと Google マップを使用したインタラクティブな地球
ActiveTab 権限
Chrome 拡張機能で activeTab 権限を使用する方法について説明します。
ユーザーに選択肢を提供する
ユーザーが拡張機能をカスタマイズできるようにする方法。
一致パターン
Chrome 拡張機能の URL 一致パターンについて
マニフェスト ファイル形式
Chrome 拡張機能で使用できる manifest.json プロパティの概要です。
サンドボックス化された iframe で eval() を使用する
Chrome 拡張機能で eval() を使用する方法
アーキテクチャの概要
Chrome 拡張機能のソフトウェア アーキテクチャの概要。
クロスオリジンの XMLHttpRequest
Chrome 拡張機能にクロスオリジン XHR を実装する方法。
チュートリアル: Google アナリティクス
Google アナリティクスで拡張機能の使用状況をトラッキングする詳しい手順。
Chrome ページをオーバーライドする
Chrome 拡張機能の Chrome ブックマーク マネージャー、履歴、新しいタブのページをオーバーライドする方法について説明します。
ユーザーに選択肢を提供する
ユーザーが拡張機能をカスタマイズできるようにする方法。
ローカライズ メッセージの形式
Chrome 拡張機能の messages.json ファイルの形式に関するリファレンス ドキュメント。
拡張機能をデバッグする
Chrome 拡張機能のデバッグ手順。
Google アナリティクス 4 を使用
Google アナリティクス 4 で拡張機能の使用状況をトラッキングする詳しい手順。
ライブウェブ音声入力が有効
ライブウェブ音声入力が有効
一致パターン
ホスト権限とコンテンツ スクリプトのパターン マッチングの仕組みと例。
テーマとは
テーマの作成方法に関するガイドライン。
権限を宣言してユーザーに警告する
ユーザーと拡張機能を保護するための権限を実装する方法。
テーマとは
テーマの作成方法に関するガイドライン。
OAuth2: Google でユーザーを認証する
Google People API、Chrome Identity API、OAuth2 を介してユーザーの Google コンタクトにアクセスする拡張機能を作成する詳細な手順。
クロスオリジン ネットワーク リクエスト
Chrome 拡張機能でクロスオリジン ネットワーク リクエストを実装できます。
Chrome ページのオーバーライド
Chrome 拡張機能の Chrome ブックマーク マネージャー、履歴、新しいタブのページをオーバーライドする方法について説明します。
Chrome Web Store
Chrome ウェブストアで拡張機能をホストし、Chrome ウェブストアでホストされている拡張機能を更新する方法。
マニフェストのバージョン
manifest.json の manifest_version プロパティは、Chrome 拡張機能が対象とするマニフェスト仕様のバージョンを示します。
Chrome 拡張機能で eval を使用する
Chrome 拡張機能で eval() を使用する方法
OAuth 2.0: Google Cloud でユーザーを認証
Google People API、Chrome Identity API、OAuth2 を介してユーザーの Google コンタクトにアクセスする拡張機能を作成する詳細な手順。
マニフェスト ファイル形式
Chrome 拡張機能の manifest.json プロパティの概要。
拡張機能のデバッグ
Chrome 拡張機能をデバッグする詳しい手順。
メッセージ受け渡し
拡張機能とコンテンツ スクリプトの間でメッセージを渡す方法
メッセージ受け渡し
拡張機能とコンテンツ スクリプトの間でメッセージを渡す方法
webKit によるリッチ通知
Chrome 拡張機能で通知を実装する方法。
拡張機能の開発の概要
Chrome 拡張機能の機能とコンポーネントの概要。
マニフェストのバージョン
manifest.json の manifest_version プロパティのリファレンス ドキュメント。
Chrome アプリのライフサイクル
Chrome アプリのライフサイクルの概要。
オフライン最優先
オフラインで動作する Chrome アプリを作成する方法。
その他の拡張機能の配信方法
Chrome ウェブストア以外で Chrome 拡張機能を配布する方法
初めてのアプリを作成する
基本的な Chrome アプリの作成方法を説明するチュートリアル
ウェブ API
Chrome アプリでは、ウェブサイトで利用可能な API をすべて使用できます。
自動更新
Chrome アプリの自動更新を有効にする方法。
外部コンテンツ
Chrome アプリで外部コンテンツを表示する方法。
ユーザー認証
Chrome アプリでユーザーを認証する方法。
コンテンツ スクリプト
コンテンツ スクリプトについての説明と、Chrome 拡張機能でそれらを使用する方法について説明します。
DevTools の拡張
Chrome DevTools に機能を追加する Chrome 拡張機能を作成する方法。
バックグラウンド スクリプトでイベントを管理する
Chrome 拡張機能のバックグラウンド スクリプトからブラウザのトリガー(イベント)に応答する方法。
MVC アーキテクチャ
モデルビュー コントローラのソフトウェア アーキテクチャ モデルの概要。
DevTools の拡張
Chrome DevTools に機能を追加する Chrome 拡張機能を作成する方法。
ユーザー補助(a11y)
Manifest V2 Chrome 拡張機能にアクセスできるようにする方法。
Chrome アプリのアーキテクチャ
Chrome アプリのソフトウェア アーキテクチャの概要。
コンテンツ セキュリティ ポリシー
Chrome アプリの CSP の概要と準拠方法。
別のインストール方法を使用する
環境設定 JSON または Windows レジストリを使用して Chrome 拡張機能をインストールする方法
コンテンツ スクリプト
コンテンツ スクリプトについての説明と、Chrome 拡張機能でそれらを使用する方法について説明します。
USB デバイス
Chrome アプリから USB デバイスと通信する方法。
ストレージ API
Chrome アプリでストレージを管理する方法
ネットワーク通信
Chrome アプリで TCP と UDP を使用する方法
ユーザー補助をサポートする
Chrome 拡張機能にアクセスできるようにする方法
position:fixed 要素のスタック変更
position:fixed 要素へのスタック変更
頑張って! ポジション - WebKit で固定的ポジション
頑張って! ポジション - WebKit で固定的ポジション
input[type=file] と Filesystem API の統合
input[type=file] と Filesystem API の統合
ミリ秒単位では不十分な場合 - performance.now
ミリ秒単位では不十分な場合 - performance.now
範囲/色入力のデータリストには、いくつかのデフォルトの選択肢があります。
範囲/色入力のデータリストには、いくつかのデフォルトの選択肢があります。
Google Chrome での input[type=date] に関するよくある質問
Google Chrome での input[type=date] に関するよくある質問
ブラウザのグラフィック パフォーマンスを測定する方法
ブラウザのグラフィック パフォーマンスを測定する方法
Chrome にフォルダをドラッグ&ドロップできるようになりました
Chrome にフォルダをドラッグ&ドロップできるようになりました
到着しました!xhr.send(ArrayBufferViews)
到着しました!xhr.send(ArrayBufferViews)
2D キャンバスで GPU アクセラレーションを利用する
2D キャンバスで GPU アクセラレーションを利用する
CSS Regions と 3D 変換を使用してフリップ可能な書籍を作成する
CSS Regions と 3D 変換を使用してフリップ可能な書籍を作成する
コンテンツ セキュリティ ポリシー
コンテンツ セキュリティ ポリシーによって、最新のブラウザでのクロスサイト スクリプティング攻撃のリスクと影響を大幅に低減できます。
ArrayBuffer と String の間で変換する方法
ArrayBuffer と String の間で変換する方法
blob は構築せず、構築する
File API に関する最近の仕様変更には Blob 用の新しいコンストラクタが含まれており、本質的に BlobBuilder は無関係です。
Chrome DevTools での WebSocket Frame Inspection の提供
WebSocket でデータを送受信するデータに検査機能を追加
Chrome Canary 版データリストの提供
「datalist」を使用すると、ユーザーが選択する必要がある検索結果候補のリストをアプリで定義できます。リストからオプションを選択するか、自由形式のテキストを入力します。
WebRTC プロトソン
3 月 24 日、Google は世界初の WebRTC デベロッパー イベントである WebRTC Protothon を開催しました。
PHP での XHR2 ファイルのアップロードを処理する
ファイルのアップロードを処理する方法を示すサーバーコードの例
requestAnimationFrame API - ミリ秒未満の精度を実現
equestAnimationFrame API の一部に変更を加えようとしています
DOM パフォーマンスが大幅に向上 - WebKit の innerHTML は 240% 高速になりました
Chrome エンジニアの原健太氏は、WebKit 内で 7 つのコードを最適化し、Safari(JavaScriptCore)と Chrome(V8)のパフォーマンスを向上させました。
ウェブブラウザの内部リソースの概要
ウェブブラウザの仕組みについて説明しているリソースのほとんどは、
HTML5 FileSystem API を使用してページ全体をオフラインにする
FileSystem API を使用すると、プログラムによってローカル(サンドボックス化された)ファイル システムにファイルとフォルダ階層を保存し、必要に応じて個々のリソースを追加、更新、削除できます
JavaScript ソースマップの概要
クライアント側のコードを結合して圧縮した後も、パフォーマンスに影響を与えることなく、読みやすく、さらにはデバッグ可能な状態にしておきたいと思ったことはありませんか? ソースマップ を使えば、その問題を解決できます。 ソースマップは、結合または圧縮されたファイルをビルド前状態にマッピングする方法です。本番環境用にビルドするときに、複数の JavaScript ファイルを最小化して組み合わせると同時に、元のファイルの情報を保持するソースマップを生成します。生成された JavaScript
JavaScript の最適化
JavaScript は比較的高速ですが、いつでも速く行えます。JavaScript を最適化してパフォーマンスを高める方法の詳細
新しい試験運用版機能 - スコープ設定されたスタイルシート
Chromium には最近、HTML5 の新しい機能であるスコープ設定されたスタイルシートが実装されました。
WebGL と Web Audio API のデモのまとめ
ここでは、ここ数週間で目にした WebGL と Web Audio API の優れたデモをご覧ください。
SwiftShader が Chrome にソフトウェア 3D レンダリングを導入
SwiftShader は、Chrome 18 で使用されるソフトウェア 3D レンダラです。これにより、拒否リストに入っている GPU でも CSS 3D と WebGL を使用できます。
ミューテーション オブザーバーを使用して DOM の変更を検出する
Mutation Observer の概要。
Gmail ですべての mailto を処理する - registerProtocolHandler を使用するリンク
navigator.registerProtocolHandler() を使用すると、すべての mailto リンクに対して Gmail をデフォルトのメール クライアントとして設定できます。
Chrome for Android - モバイルウェブの高速化
Chrome for Android(ベータ版)は、Chromium オープンソース プロジェクトのベースであり、Chrome デベロッパーが慣れ親しんでいる最新の HTML5 機能の多くが組み込まれています。
Pointer Lock API によりブラウザで FPS ゲームが可能に
Pointer Lock API を使用すると、ウェブ用の適切なファーストパーソン シューティング ゲームを記述できます。
HTML5 オーディオと Web Audio API は BFF
createMediaElementSource() を使用すると、HTML5 と Web Audio API の可視化、フィルタ、処理能力を組み合わせることができます。
同期 XHR の廃止
ご案内: XMLHttpRequest2 の仕様は最近、XMLHttpRequest.responseType が設定されているときに同期リクエストの送信を禁止するように変更されました。
ウェブ オーディオに関するよくある質問
このクイック アップデートは、Web Audio API をより快適にご利用いただくために、いくつかのよくある質問にお答えすることを目的としています。
動画プレーヤーのサンプルのご紹介
Video Player Sample は、60 Minutes アプリや RedBull.tv アプリと同じアーキテクチャを使用して構築されたオープンソースの動画プレーヤー ウェブアプリです。
WebKit への CSS フィルタ エフェクトの適用
Adobe は、この素晴らしいテクノロジーを CSS にもたらすべく懸命に取り組んできました。具体的には、WebKit が実装を開始した CSS Filter Effects 1.0 です。
転送可能なオブジェクト - 超高速
転送可能なオブジェクトを使用すると、データはあるコンテキストから別のコンテキストに転送されます。ゼロコピーであるため、Worker にデータを送信するパフォーマンスが大幅に向上します。
可能であれば、WebGL で中程度の精度を使用する
実際の OpenGL ES 2.0 ハードウェアで WebGL をテストしている Opera の同僚によるお知らせです。
スピードアップのための Chrome デベロッパー ツール
Chrome でデベロッパー ツールを使用してアプリの速度を向上させる
MediaSource API を使用して動画をストリーミングする
MediaSource API は `HTMLMediaElement` を拡張し、JavaScript が再生用のメディア ストリームを生成できるようにします。
WebGL デモのまとめ
ここでは、ウェブから公開されている新しい WebGL デモを使って、ブラウザで実際に何ができるかを紹介します。
アプリ キャッシュ ツールと自動生成ツール
アプリケーション キャッシュを使用すると、ウェブアプリをオフラインで実行できるため、起動時間が大幅に短縮され、帯域幅の使用量が削減されます。
IndexedDB トランザクションのスコープの定義
IndexedDB は、ブラウザに大量の構造化データを保存するための、進化を続けるウェブ標準です。
コンテンツでの説明 - Fullscreen API
Fullscreen API を使用すると、ウェブアプリはページ上のコンテンツを JavaScript からプログラマティックに指示し、ブラウザの全画面表示モードに移行させることができます。
Chrome Canary で WebSocket が最新バージョンに更新された
Chrome Canary で WebSocket API が最新バージョン(13)に改訂されました
HTML5 とブラウザ サポートの最新情報
こうした機能を使いこなすのは大変なことですが、どこを見ればいいかわかりません。
Three.js の使用
すでに OpenGL のエキスパートであれ、新規の冒険者であれ、新しい 3D デモを作成する開発者は増え続けています。
HTML5 ゲーム デベロッパー向け New Game Conference のクーポン
New Game で HTML5 と WebGL のゲームの書き方を学んで、TPS レポートの完成を控えてほしい。
7 分間の動画 - JavaScript コンソールのヒントと新しい DOM API
Chrome DevTools で JavaScript コンソールをレベルアップします。
ワーカー ❤ ArrayBuffer
Chrome 13 と FF5 では、Web Worker との間の「ArrayBuffer」(または型付き配列)の送信がサポートされています。
新しい WebSocket プロトコルの相違点
WebSocket プロトコルの仕様は、以前のセキュリティ上の懸念を解決するために最近更新され、おおむね安定しています。
insertAdjacentHTML をすべての場所に
HTML ドキュメントにコンテンツを挿入する
Filesystem API のデバッグ
HTML5 ファイル システムは強力な API です。パワーアップには複雑さがつきものです。複雑さが増すと、デバッグの煩わしさが増します。
File System API でローカル ファイルをシークする
File オブジェクトがある場合は、ファイル全体をメモリに読み込まなくても、そのオブジェクト内をシークしてチャンクを読み取ることができます。
HTML5 ライブラリ/ポリフィル - 7 月中旬
あちこちに素晴らしい図書館が次々と登場
HTML5 ゲーム デベロッパー向けカンファレンス、New Game のお知らせ
2011 年 11 月 1 日~ 2 日にカリフォルニア州サンフランシスコで開催される New Game へのご参加をお待ちしております。
フレームを見逃さない - Page Visibility API と HTML5 動画を使用
Page Visibility API を使用すると、現在のタブが表示されているかどうかを確認できます。
WebGL でのクロスドメイン画像の使用
WebGL の仕様により、クロスドメインでの画像のリクエスト方法に関する重要な更新が行われます。
HTML5 ライブラリ - 6 月下旬
最近、面白いライブラリがいくつか切り替わりました。
Page Visibility API - ご確認いただけましたでしょうか?
幸い、新しい Page Visibility API を使用すると、アプリが公開されているかどうかを判断できます。
HTML5 + Web Audio API での反対
GWT、HTML5、Web Audio API の力のおかげで、誰もがお気に入りのチートコードの先駆者である Contra を構築できました。
Chrome Dev チャンネルの navigator.onLine
HTML5 のオフライン API を使えば、完璧なオフライン体験をユーザーに提供できなくてはなりません。
updates.html5rocks.com へようこそ
デベロッパーの皆様に情報を速やかにお届けするため、この「HTML5 更新ストリーム」は、共有する価値のある魅力的なコンテンツを紹介することを目的としています。
ウェブアプリの速度を監査する
高速なウェブアプリは成功するウェブアプリです。デベロッパーとしての作業は、アプリの実際のパフォーマンスとユーザーが感じるパフォーマンスの両方を最適化するまで完了しません。これは、ユーザーに優れたエクスペリエンスを提供するために必要なことであるだけでなく、最適化には実用的で重要なビジネス上の理由もあります。Amazon では、サイトのレイテンシが 100 ミリ秒長くなるごとに売り上げが 1% 減少し、Google では 0.5 秒の遅延ごとにトラフィックが 20% 減少することが測定されています(
Chrome デベロッパー ツールの概要(パート 1)
Google Chrome は機能豊富でパワフルなウェブブラウザであり、ウェブ上のアプリケーションでできることの可能性を開拓しています。Google は、非常に高速で安定した、豊富な機能を備えたブラウジング エクスペリエンスをエンドユーザーに提供できるよう尽力してきました。また Google は、デベロッパーの皆様が Chrome を快適にご利用いただけるようにしています。デベロッパー ツールは Chrome と Safari にバンドルされており、ウェブ
Use the Chrome Web Store Publish API
How to programmatically create, update, and publish items in the Chrome Web Store.
Google Play for Education Addendum to the Google Chrome Web Store Developer Agreement
In connection with the Google Chrome Web Store, Google may make certain Chrome Web Store applications available in Google's Play for Education site. If You or Your organization is interested in participating, please verify that the
Chrome Web Store API Reference
This reference describes the methods and resource representation available for the Chrome Web Store Publish API. Each resource type has one or more data representations and one or more methods. See Using the Chrome Web Store Publish API for a guide
Policies
Extension policies
How NRK uses scroll-driven animations to bring stories to life
Learn how scroll-driven and scroll-triggered animations enhance storytelling articles
How Google Search uses speculation rules
Learn about how Google Search used the Speculation Rules API to anonymously prefetch search results to improve user experience
Feedback and support
Receive support for the Chrome User Experience Report (CrUX).
Capabilities
Find out how to use Chrome's capabilities to build rich and engaging web experiences.
What is ChromeDriver?
ChromeDriver is a standalone server that implements the W3C WebDriver standard.
Design Docs and discussions
WebDriver BiDi Backend Design [Microsoft] Async Command Processing for WebDriver in Chromium Browser Tools- and Testing WG, Day 2, TPAC 2019, Fukuoka Browser Tools- and Testing WG, Day 1, TPAC 2019, Fukuoka
Chrome Web Store
Chrome Web Store An online marketplace where users can browse for extensions and themes. Publish your extension there and make it accessible to the world. dashboard Developer Dashboard Publish your extension and manage your store items. local_mall
Accessibility
Digital accessibility, commonly abbreviated a11y, is about designing and building websites and web apps that disabled people can interact with in a meaningful and equivalent way. This course is created for beginner and advanced web developers. You
Chrome's 2024 recap for devs: Re-imagining the web with AI in DevTools, built-in Gemini, and new UI capabilities
Check out Chrome for Developers' 2024 year-end roundup of the latest web features, capabilities, and tools.
chrome.declarativeWebRequest
Note: this API is deprecated. Check out the declarativeNetRequest API instead. Use the chrome.declarativeWebRequest API to intercept, block, or modify requests in-flight. It is significantly faster than the chrome.webRequest API because you can
chrome.systemLog
Use the chrome.systemLog API to record Chrome system logs from extensions. string Adds a new log record. MessageOptions The logging options. function optional The callback parameter looks like: Promise<void> Promises are supported in Manifest
chrome.webNavigation
Use the chrome.webNavigation API to receive notifications about the status of navigation requests in-flight. All chrome.webNavigation methods and events require you to declare the "webNavigation" permission in the extension manifest. For example: For
chrome.tts
Use the chrome.tts API to play synthesized text-to-speech (TTS). See also the related ttsEngine API, which allows an extension to implement a speech engine. Chrome provides this capability on Windows (using SAPI 5), Mac OS X, and ChromeOS,
chrome.input.ime
Use the chrome.input.ime API to implement a custom IME for Chrome OS. This allows your extension to handle keystrokes, set the composition, and manage the candidate window. You must declare the "input" permission in the extension manifest to use the
chrome.documentScan
Use the chrome.documentScan API to discover and retrieve images from attached document scanners. The Document Scan API is designed to allow apps and extensions to view the content of paper documents on an attached document scanner. string Provides
Sign up for the Language Detection API origin trial
The Language Detection API is now available in a Chrome origin trial.
Chrome 129
Chrome 129 is rolling out now! You can yield in long tasks to improve performance, you can animate elements with intrinsic sizes, there are some changes to anchor positioning syntax, and there's plenty more.
chrome.devtools.performance
Use the chrome.devtools.performance API to listen to recording status updates in the Performance panel in DevTools. See DevTools APIs summary for general introduction to using Developer Tools APIs. The chrome.devtools.performance API allows
What's missing from HTML and CSS?
Do you agree with the CSS Day attendees about what should be added to the web?
More efficient IndexedDB storage in Chrome
A new optimization in Chrome improves how IndexedDB data is stored on disk. This document summarizes the key points of this update.
chrome.devtools.network
Use the chrome.devtools.network API to retrieve the information about network requests displayed by the Developer Tools in the Network panel. Network requests information is represented in the HTTP Archive format ( HAR ). The description of HAR is
Creating a great listing page
Best practices on how to make a high-quality, engaging listing page for your item in the Chrome Web Store.
Help with ChromeDriver
If you have a general question or need help using ChromeDriver, you can email the chromedriver-users group. Before filing a bug, look at the existing issues for the same topic. ChromeDriver is an open source project, worked on by various
Clicking issues
ChromeDriver clicking works by simulating a mouse click in the middle of the element's first client rect (or bounding client rect if it doesn't have a first client rect). The easiest way to find out where ChromeDriver is attempting to click is to
Contribute to ChromeDriver
ChromeDriver is a Chromium project and the code lives in the Chromium repository. Chromium is the open source project on which Google Chrome is based. Follow the instructions to check out the entire Chromium source tree. After you have your source
Deceptive Installation Tactics FAQ
Frequently asked questions about Chrome Web Store's policies on deceptive installation tactics.
Listing Requirements
If your product has a blank description field or is missing an icon or screenshots, it will be rejected. Ensure your product's listing information is up to date, accurate, and comprehensive. We don't allow extensions with misleading, inaccurate,
Deceptive Installation Tactics
Extensions must be marketed responsibly. The set of functionalities promised by the extension must be stated clearly and in a transparent manner. The outcome of any user interaction should match the reasonable expectations that were set with the
Best Practices and Guidelines
Research and understand the Chrome Web Store policies. Before developing a Chrome extension, it is important to review the Chrome Web Store Developer Program Policies and ensure your extension complies with all guidelines and requirements. Extensions
Extensions quality guidelines FAQ
Frequently asked questions about the single purpose policy.
Quality guidelines
An extension must have a single purpose that is narrow and easy to understand. Don't create an extension that requires users to accept bundles of unrelated functionality. If two pieces of functionality are clearly separate, they should be put into
Aurora
A collaboration between Chrome and open-source web frameworks to improve user experience on the web.
CrUX methodology
Technical documentation on CrUX eligibility, metrics, dimensions and accessing the data.
chrome.enterprise.hardwarePlatform
Use the chrome.enterprise.hardwarePlatform API to get the manufacturer and model of the hardware platform where the browser runs. Note: This API is only available to extensions installed by enterprise policy. string string Obtains the manufacturer
chrome.enterprise.deviceAttributes
Use the chrome.enterprise.deviceAttributes API to read device attributes. Note: This API is only available to extensions force-installed by enterprise policy. Fetches the administrator-annotated Location. If the current user is not affiliated or no
chrome.enterprise.networkingAttributes
Use the chrome.enterprise.networkingAttributes API to read information about your current network. Note: This API is only available to extensions force-installed by enterprise policy. string optional The device's local IPv4 address (undefined if not
Chrome release notes and updates
Chrome's latest releases
Workbox
Build progressive web apps (PWAs) with Workbox - the Service Worker library from the Chrome team
Extensions / Develop
Learn how to develop extensions
Content filtering
An explanation of content filtering and how to approach it in your Chrome Extension.
Reference
Reference for APIs available to Chrome Apps
chrome.tabCapture
Use the chrome.tabCapture API to interact with tab media streams. The chrome.tabCapture API lets you access a MediaStream containing video and audio of the current tab. It can only be called after the user invokes an extension, such as by clicking
chrome.desktopCapture
The Desktop Capture API captures the content of the screen, individual windows, or individual tabs. Enum used to define set of desktop media sources used in chooseDesktopMedia(). "screen" "window" "tab" "audio" Mirrors SelfCapturePreferenceEnum.
chrome.system.memory
The chrome.system.memory API. number The amount of available capacity, in bytes. number The total amount of physical memory capacity, in bytes. Get physical memory information. function optional The callback parameter looks like: MemoryInfo
chrome.processes
Use the chrome.processes API to interact with the browser's processes. number The part of the cache that is utilized, in bytes. number The size of the cache, in bytes. number optional The most recent measurement of the process's CPU usage, expressed
chrome.power
Use the chrome.power API to override the system's power management features. Using this API, you can specify the Level to which power management is disabled. The "system" level keeps the system active, but allows the screen to be dimmed or turned
chrome.types
The chrome.types API contains type declarations for Chrome. The ChromeSetting type provides a common set of functions ( get(), set(), and clear() ) as well as an event publisher ( onChange ) for settings of the Chrome browser. The proxy
chrome.system.cpu
Use the system.cpu API to query CPU metadata. string The architecture name of the processors. string[] A set of feature codes indicating some of the processor's capabilities. The currently supported codes are "mmx", "sse", "sse2", "sse3", "ssse3",
chrome.vpnProvider
Use the chrome.vpnProvider API to implement a VPN client. Typical usage of chrome.vpnProvider is as follows: Create VPN configurations by calling createConfig(). A VPN configuration is a persistent entry shown to the user in a ChromeOS UI. The user
chrome.wallpaper
Use the chrome.wallpaper API to change the ChromeOS wallpaper. You must declare the "wallpaper" permission in the app's manifest to use the wallpaper API. For example: For example, to set the wallpaper as the image at https://example.com/a_file.png,
chrome.accessibilityFeatures
Use the chrome.accessibilityFeatures API to manage Chrome's accessibility features. This API relies on the ChromeSetting prototype of the type API for getting and setting individual accessibility features. In order to get feature states the extension
chrome.devtools.inspectedWindow
Use the chrome.devtools.inspectedWindow API to interact with the inspected window: obtain the tab ID for the inspected page, evaluate the code in the context of the inspected window, reload the page, or obtain the list of resources within the page.
chrome.proxy
Use the chrome.proxy API to manage Chrome's proxy settings. This API relies on the ChromeSetting prototype of the type API for getting and setting the proxy configuration. You must declare the "proxy" permission in the extension manifest to use the
chrome.system.storage
Use the chrome.system.storage API to query storage device information and be notified when a removable storage device is attached and detached. "success" The ejection command is successful -- the application can prompt the user to remove the device.
chrome.webAuthenticationProxy
The chrome.webAuthenticationProxy API lets remote desktop software running on a remote host intercept Web Authentication API (WebAuthn) requests in order to handle them on a local client. string The PublicKeyCredentialCreationOptions passed to
chrome.tabGroups
Use the chrome.tabGroups API to interact with the browser's tab grouping system. You can use this API to modify and rearrange tab groups in the browser. To group and ungroup tabs, or to query what tabs are in groups, use the chrome.tabs API. The
chrome.printerProvider
The chrome.printerProvider API exposes events used by print manager to query printers controlled by extensions, to query their capabilities and to submit print jobs to these printers. string optional Printer's human readable description. string
chrome.topSites
Use the chrome.topSites API to access the top sites (i.e. most visited sites) that are displayed on the new tab page. These do not include shortcuts customized by the user. You must declare the "topSites" permission in your extension's manifest to
chrome.search
Use the chrome.search API to search via the default provider. "CURRENT_TAB" Specifies that the search results display in the calling tab or the tab from the active browser. "NEW_TAB" Specifies that the search results display in a new tab.
chrome.scripting
Use the chrome.scripting API to execute script in different contexts. To use the chrome.scripting API, declare the "scripting" permission in the manifest plus the host permissions for the pages to inject scripts into. Use the "host_permissions" key
chrome.devtools.recorder
Use the chrome.devtools.recorder API to customize the Recorder panel in DevTools. devtools.recorder API is a preview feature that allows you to extend the Recorder panel in Chrome DevTools. See DevTools APIs summary for general introduction to using
chrome.printingMetrics
Use the chrome.printingMetrics API to fetch data about printing usage. "BLACK_AND_WHITE" Specifies that black and white mode was used. "COLOR" Specifies that color mode was used. "ONE_SIDED" Specifies that one-sided printing was used.
chrome.accessibilityFeatures
Use the chrome.accessibilityFeatures API to manage Chrome's accessibility features. This API relies on the ChromeSetting prototype of the type API for getting and setting individual accessibility features. In order to get feature states the extension
chrome.extensionTypes
The chrome.extensionTypes API contains type declarations for Chrome extensions. The origin of injected CSS. "author" "user" Details of the CSS to remove. Either the code or the file property must be set, but both may not be set at the same time.
chrome.extensionTypes
The chrome.extensionTypes API contains type declarations for Chrome extensions. The origin of injected CSS. "author" "user" Details of the CSS to remove. Either the code or the file property must be set, but both may not be set at the same time.
Skip review for eligible changes
An overview of expedited review for Declarative Net Request changes.
Version selection
Version selection is the process of matching a Chrome binary of a given version to a compatible ChromeDriver binary. Starting with M115 the ChromeDriver release process is integrated with that of Chrome. The latest Chrome + ChromeDriver releases per
Rollback a published Chrome Web Store item
How to rollback an extension that you previously published on the
Additional Requirements for Manifest V3
Extensions using Manifest V3 must meet additional requirements related to the extension's code. Specifically, the full functionality of an extension must be easily discernible from its submitted code, unless otherwise exempt as noted in Section 2.
Chrome for Developers
google-site-verification: google2d9992045b4571ad.html
chrome.privacy
Use the chrome.privacy API to control usage of the features in Chrome that can affect a user's privacy. This API relies on the ChromeSetting prototype of the type API for getting and setting Chrome's configuration. You must declare the "privacy"
Extensions / How to
Solve common development tasks around Chrome extensions
Changes to BFCache behavior with extension message ports
We are making changes to Chrome BFCache which potentially impact extensions using message ports.
Mature & Sexually Explicit Material
We don't allow content that contains nudity, graphic sex acts, sexually explicit material, or content that drives traffic to commercial pornography sites. We also don't allow content that promotes incest, bestiality, necrophilia, or non-consensual
Announcing Chrome for Developers in China
We are publishing our sites on a .cn domain to make them easier to access in China.
chrome.location
The chrome.location API is no longer supported. We recommend using open web alternatives such as the Geolocation API instead.
Register your developer account
How to register as a Chrome Web Store developer.
Trader/Non-Trader developer identification and verification
Developer's requirement to disclose and verify their trader/non-trader status.
Extensions / Samples
Samples Explore samples from the Chrome Extension samples repository. Use these to learn how extensions work or as starting points for building your own extensions. action.disable action.enable action.getBadgeBackgroundColor action.getBadgeText
Overview of CrUX
Introduction to the CrUX dataset.
Permissions
A list of permissions and user warnings available on the extensions platform.
Chromium Issue Tracker migration is complete
Chromium issue tracking is now migrated.
Chromium Issue Tracker migration beginning Feb 2, 2024 at 5pm PST
The Chromium Issue Tracker migration begins today.
Program Policies
The Web Store program policies.
Project Fugu API Showcase
Project Fugu API Showcase The Project Fugu API Showcase is a collection of apps that make use of APIs that were conceived in the context of Project Fugu. You can learn more about Project Fugu on the Capabilities landing page. Absolute Orientation
Join Privacy Sandbox Office Hours #12: Learn about Chrome-facilitated testing
Join the 12th edition of Privacy Sandbox office hours dedicated to Chrome-facilitated testing, where the Privacy Sandbox team will provide some Privacy Sandbox tester updates and answer your questions with product and technical leads.
Real-time Updates in Extensions
Managing real-time updates in Extensions
Distribute your extension
How to host your Chrome extension.
Extensions / Reference
Reference for the extensions manifest, related permissions and APIs
Chrome Archive
Chrome Archive Chrome Apps Chrome-specific APIs to create experiences with more access to the underlying operating system. These were deprecated in 2020, supported only for ChromeOS until Jan 2025. Native Client A sandbox to run compiled C and C++
Chromium Chronicle
Chromium Chronicle
Chromium
Find resources on the Chromium project.
Chrome 121 beta
CSS Scrollbars, the Storage Buckets API, the Speculation Rules API, and more.
Get Inspired
Read these case studies to find inspiration for your next project with Chrome.
Feeds
You can add the following RSS feeds to your feed reader to get automatic updates for areas of the site you are particularly interested in.
Extensions / Manifest V3
Manifest V3 Manifest V3 is the latest version of the extensions platform. We have made a number of changes to the available APIs and added a number of new features. Manifest V3 aims to be the first step in our platform vision to improve the privacy,
chrome.webstore
As of 06/12/2018, inline installation is deprecated. For more information, read our Chromium Blog post and Migration FAQ.
User interface components
A catalog of user interface elements available in extensions.
Modules
Dig deeper into specific Workbox modules.
Set up your developer account
How to set up your Chrome Web Store developer account.
Prepare your extension
Prepare your extension files.
Submit a feature request
Submit a request for a feature that you believe could improve the extension platform.
Support and feedback
Give us feedback to help us improve the platform and fix its bugs.
Storage and cookies
Overview of how web storage APIs and cookies work in extensions.
Chrome for Developers
User-agent: * Disallow: Sitemap: https://developer.chrome.com/sitemap.xml
Use your Google Analytics account with the Chrome Web Store
See analytics for your Chrome Web Store listing in addition to the metrics offered in the Developer Dashboard.
Better full screen mode with the Keyboard Lock API
Use the Keyboard Lock API to capture the Escape key in full screen mode. If you've ever played a full screen web game that popped up an in-game dialog that you instinctively canceled with the Escape key, you probably found yourself kicked out of full
Help test bounce tracking mitigations
We plan to launch mitigations to limit tracking from a particular technique called "bounce tracking" later this year. We would like to invite developers to test this new feature with feature flags and provide feedback.
Specify how multiple animation effects should composite with animation-composition
When multiple animations affect the same property simultaneously, should they replace each other, add, or accumulate?
Manifest V3 migration checklist
A quick reference for upgrading your extensions from Manifest V2 to Manifest V3.
More control over :nth-child() selections with the of S syntax
Pre-filter a set of child elements before applying An+B logic on it.
Test service worker termination with Puppeteer
A guide explaining how to test service worker termination using Puppeteer.
Affiliate Ads
Any affiliate program must be described prominently in the product's Chrome Web Store page, user interface, and before installation. Related user action is required before the inclusion of each affiliate code, link, or cookie. Some example violations
Affiliate Ads FAQ
Frequently asked questions about Chrome Web Store's policies on affiliate ads.
Minimum Functionality
Do not post an extension with a single purpose of installing or launching another app, theme, webpage, or extension. Extensions with broken functionality—such as dead sites or non-functioning features—are not allowed. Extensions must provide a basic
Use of Permissions
Request access to the narrowest permissions necessary to implement your Product's features or services. If more than one permission could be used to implement a feature, you must request those with the least access to data or functionality. Don't
Chrome Apps
To ensure a great user experience, Chrome Apps distributed through the Chrome Web Store must follow the additional quality guidelines listed below. The guidelines in this section apply only to Chrome Apps. Packaged apps should: Take advantage of the
Disclosure Requirements
You must be transparent in how you handle user data (e.g., information provided by a user or collected about a user or a user's use of the Product or Chrome Browser), including by disclosing the collection, use, and sharing of the data. If your
Featured Products
The Chrome Web Store features products that align with our standards, values, and that we believe will produce valuable user experiences. Certain products that don't meet these standards, but which do not explicitly violate Chrome Web Store
Spam and Abuse
We don't allow any developer, related developer accounts, or their affiliates to submit multiple extensions that provide duplicate experiences or functionality on the Chrome Web Store. Extensions should provide value to users through the creation of
Repeat Abuse
Serious or repeated violations of the Chrome Web Store Distribution Agreement or these Program Policies will result in the suspension of your developer account, and possibly related developer accounts. Additionally, you may be banned from using the
Code Readability Requirements
Developers must not obfuscate code or conceal functionality of their extension. This also applies to any external code or resource fetched by the extension package. Minification is allowed, including the following forms: Removal of whitespace,
Ads
Ads are considered part of your Product for purposes of content review and compliance with developer terms, and therefore must comply with the above content policies. Ads which are inconsistent with the content rating of your products or extension
Hate Speech and Violent Behavior
Depictions of gratuitous violence are not allowed. Products should not contain materials that threaten, harass, or bully other users. We don't allow content or products that advocating against or inciting hatred towards groups of people based on
Accepting Payment From Users
If you collect sensitive personal information through your Product for sales, you must follow these requirements: You must securely collect, store, and transmit all credit card and other sensitive personal information in accordance with privacy and
Limited Use
This policy establishes the Chrome Web Store's minimum user data privacy requirements; you or your Product must comply with applicable laws. You must limit your use of the data to the practices you disclosed. Collection and use of web browsing
Impersonation & Intellectual Property
Don't pretend to be someone else, and don't represent that your product is authorized by, endorsed by, or produced by another company or organization, if that is not the case. Your Product and its user experience also must not mimic functionality or
Notification and appeals
In the event that your Product is removed from the Chrome Web Store, you will receive an email notification to that effect, with further instructions if applicable. Verify that the associated publisher account with your Product can receive emails
Regulated goods and services
Don't engage in or promote unlawful activities in your product, such as rape, illegal sex work, or the sale of prescription drugs without a prescription. We will remove content which promotes, glorifies, or encourages dangerous or illegal activity
2-Step Verification
To ensure the security of Chrome Web Store accounts, 2-Step Verification is required for all developer accounts prior to publishing an extension or updating an existing extension. Developers can activate 2-Step Verification for their Google accounts
Enforcement Circumvention
Any attempt to circumvent intended limitations or enforcement actions will result in the immediate termination of your developer account, and possibly related developer accounts.
Handling Requirements
If your product is associated with a security vulnerability that could be exploited to compromise another application, service, browser, or system, we may remove your product from the Chrome Web Store and take other measures to protect users. In such
Privacy Policies
If your Product handles any user data, then you must post an accurate and up to date privacy policy. The privacy policy must, together with any in-Product disclosures, comprehensively disclose: How your Product collects, uses and shares user data All
Misleading or Unexpected Behavior
We do not allow products that deceive or mislead users, including in the content, title, description, or screenshots. If any of your product's content, title, icon, description, or screenshots contains false or misleading information, we may remove
Malicious and Prohibited Products
Don't transmit viruses, worms, defects, Trojan horses, malware, or any other products of a destructive nature. We don't allow content that harms or interferes with the operation of the networks, servers, or other infrastructure of Google or any
API Use
Extensions must use existing Chrome APIs for their designated use case. Use of any other method, for which an API exists, would be considered a violation. For example, overriding the Chrome New Tab Page through any means other than the URL Overrides
Meeting you where you are
Find out how you can meet the Chrome team.
Known issues when migrating to Manifest V3
Recently, we announced changes to the Manifest V2 deprecation timeline, and while we remain firmly committed to Manifest V3 we acknowledge there is more work to do on our part. We are committed to closing the following gaps before announcing a new
Discovery on the Chrome Web Store
An overview of how users find items on the Chrome Web Store, and how our editors select items to feature.
Chrome Web Store review process
An overview of the review process and how enforcement actions result from detected policy violations.
Manifest V2 support timeline
Details of the Manifest V2 phase-out and end of life.
Manage user feedback
Follow-up on reviews and provide user support in the Chrome Web Store.
Check on your review status
How to check the review status of your Chrome Web Store item.
Analyze your store listing metrics
Understanding metrics and performance of your Chrome Web Store store listing.
Cross-origin isolation
Overview of cross-origin isolation for extensions
Enterprise publishing options
How to distribute extensions to enterprise users
Prepare to publish: set up payment and distribution
How to choose which countries will list your item and who will see it in the Chrome Web Store.
Complete your listing information
How to add listing information for your Chrome Web Store item.
Update your Chrome Web Store item
How to update an extension or theme ("item") that you previously published on the Chrome Web Store.
Troubleshooting Chrome Web Store violations
Guidelines for understanding why an item was rejected or removed from the Chrome Web Store and how to fix the problem.
Chrome Web Store payments deprecation
Why the payments is deprecated, details about the deprecation timeline, and more.
Human interface devices on the web: a few quick examples
There is a long tale of human interface devices (HID) that are too new, too old, or too uncommon to be accessible by systems' device drivers. The WebHID API solves this by providing a way to implement device-specific logic in JavaScript.
Deleting Chrome Web Store developer accounts
How to delete a developer or group publisher account on the Chrome Web Store.
Set up a group publisher
How to share ownership of your Chrome Web Store items with other developers.
Fill out the privacy fields
Use the privacy practices tab to help the Chrome Web Store team review your extension as quickly as possible.
Spam policy FAQ
Frequently asked questions about Chrome Web Store's spam policy.
Navigate Chrome DevTools with assistive technology
A guide on navigating Chrome DevTools using assistive technology like screen readers.
Unlocking new capabilities for the web
Web apps should be able to do anything native apps can. Through Project Fugu, we want to make it possible to build and deliver any kind of app on the open web.
Supplying Images
Guidelines about the kinds of images you need to supply to the Chrome Web Store.
Branding Guidelines
Guidelines for use of Google trademarks.
Beyond SPAs - alternative architectures for your PWA
Building a Progressive Web App doesn't mean building a single page app! Read about alternative architectures for content-focused PWAs, to help you make the right decision for your use case.
Working with the new CSS Typed Object Model
CSS Typed Object Model (Typed OM) brings types, methods, and a flexible object model to working with CSS values. Shipped in Chrome 66.
Best Practices
How to create a high-quality extension and Chrome Web store listing.
API Deprecations and Removals in Chrome 54
An round up of the deprecations and removals in Chrome to help you plan.
Trader FAQ: Chrome Web Store
Frequently asked questions about Chrome Web Store's user data policy.
Updated Privacy Policy & Secure Handling Requirements
Frequently asked questions about Chrome Web Store's user data policy.
API Deprecations and Removals in Chrome 49
An round up of the deprecations and API removals in Chrome to help you plan.
Chrome 47 WebRTC: Media Recording, Secure Origins and Proxy Handling
Chrome 47 has several significant WebRTC enhancements and updates including audio and video recording, proxy handling and mandatory secure origins for getUserMedia().
Better incognito DevTools
Some appearance preferences are now persisted through to incognito windows.
Better incognito DevTools
Some appearance preferences are now persisted through to incognito windows.
Timeline event reference
The timeline events mode displays all events triggered while making a recording. Use the timeline event reference to learn more about each timeline event type.
What is the Chrome Web Store?
An explanation of the Chrome Web Store and why you might want to use it.
Chrome Dev Summit 2014 - The applied science of runtime performance
The story of building the Chrome Dev Summit site.
Publish in the Chrome Web Store
How to publish a new extension or theme to the Chrome Web Store.
Google Chrome Web Store Developer Agreement
The legal agreement governing the relationship between Chrome Web Store developers and the Chrome Web Store.
Content Ratings Guidelines
Guidelines about how the Chrome Web Store rates the maturity of content.
The "activeTab" permission
How to use the activeTab permission in your Chrome Extension.
Localization message formats
Reference documentation about the format of the messages.json file for Chrome Extensions.
Publish Your App
How to publish your Chrome App.
What Are Chrome Apps?
An overview of Chrome Apps and why you might want to build them.
CSS layout gets smarter with calc()
You can use calc() anywhere a length or number is used, so you can use it for positioning things, or in rgb() color values as well, so it has lots of great uses in a style sheet.
Summarizer
Get a short summary of every webpage.
Multiple side panels
This recipe shows how to use sidePanel.getOptions() to retrieve the current side panel and switch between side panels.
Google Gemini Demo
Try the Gemini Models.
Global side panel
Shows how to display the same side panel on every site using the Side Panel API.
Custom Cursor Extension
Adds a custom cursor on developer.chrome.com.
Chrome Built-in AI Demo
Try the built-in AI preview in Chrome.
Dictionary side panel
Provides definitions in the side panel.
Privacy API sample
Uses the chrome.privacy.services property to get and set privacy settings.
Hello World
Basic Hello World Extension
WebGPU Extension
Generate a red triangle with WebGPU in an extension service worker.
User Scripts API Demo
Uses the chrome.userScripts API to inject JavaScript into web pages.
Keep Awake
Override system power-saving settings.
Conifer Music - Official app in the Microsoft Store
Conifer is FAST Conifer integrates perfectly with your PC Conifer offers beautiful music visualizations Conifer is completely cross-platform Conifer is a fast, cross-platform music player that lets your play all of YOUR music, you know, the music you actually own. Have some CDs? Rip them to your computer and add them to Conifer! Have some MP3s? Add them to Conifer!
Stadia Bluetooth mode
Switch your Stadia Controller to Bluetooth mode to keep gaming wirelessly on your favorite devices and services after Stadia shuts down
Wavacity
Wavacity is a port of the Audacity audio editor to the web browser. Free and open-source. No install required.
Native Messaging Example
Send a message to a native application.
Reading List API Demo
Uses the chrome.readingList API to display, update and remove reading list entries.
Winamp for Creators - Start your Creator's journey
Winamp for Creators puts the power back in your hands by giving you access to all the artist services you need to take control of your musical journey.
Transitions DJ
Transitions DJ is a web-based, ad-free DJ mixing app. Mix music online from SoundCloud or your own music collection.
Get started
Explore the fundamentals of music via Ableton's interactive website. Experiment with beats, melody, harmony, basslines, and song structure in your web browser.
Mammoth - Official app in the Microsoft Store
Discover a simpler way to socialize online with Mammoth, the Mastodon app that prioritizes ease-of-use and clean design. Experience the open-source, decentralized social network without the clutter. Join communities, share your thoughts, and connect with like-minded individuals all with just a few taps. Say goodbye to overwhelming feeds and complicated features, Mammoth simplifies the social media experience. AI Enhanced: - Struggling to find that perfect image to go along with your post? Have a funny idea for an image on a post? Generate it right in Mammoth with the magic of AI - Not understanding something in a post, or just want to learn more about a specific topic in a post? Click the search button on a post to have AI help you understand the post! - AI driven autocomplete and status generation: Have something to say but not sure how to say it best? Ask Mammoth to write it for you! Customizable: - Dark and light mode support - Theming User Friendly: - Cross Platform - Fast
Maskable.app
Preview maskable icons in the browser!
Netflix Spain - Watch TV Shows Online, Watch Movies Online
Watch Netflix movies & TV shows online or stream right to your smart TV, game console, PC, Mac, mobile, tablet and more.
AudioMass
AudioMass is a free full-featured web-based audio & waveform editing tool
Home · Semaphore
An alternative web client for Mastodon, focused on speed and simplicity.
kota-yata editor
WYSIWYG Markdown editor with pdf viewer
Spatial Fusion is Mixed Reality for the Web
A Mixed Reality WebXR technology showcase designed in collaboration between Meta, and PHORIA and LUSION.
Home · Pinafore
An alternative web client for Mastodon, focused on speed and simplicity.
S.E.P.I.A.
S.E.P.I.A. is an app and framework for your own server-based, extendable, private, intelligent assistant.
Spotify - Web Player: Music for everyone
Spotify is a digital music service that gives you access to millions of songs.
Terra - Notícias, esportes, coberturas ao vivo, diversão e estilo de vida
Veja no Terra as últimas notícias e as melhores coberturas ao vivo do Brasil e do Mundo, Esportes, Diversão, Vida e Estilo e assista os melhores vídeos no TerraTV.
Tylify: Create seamless patterns in seconds
Web-based pattern-making application. All image formats supported (SVG, PNG, JPG, etc). Export seamless patterns as SVG or PNG.
The best free, adless Chess server
Free online chess server. Play chess in a clean interface. No registration, no ads, no plugin required. Play chess with the computer, friends or random opponents.
DEV Community
A constructive and inclusive social network for software developers. With you every step of your journey.
file-tree Web Component
A file tree web component giving access to a device's file system using the File System Access API
Download our software
Download Tidepool Uploader for Mac and Windows, and Tidepool Mobile on iOS and Android.
TikTok - Make Your Day
TikTok - trends start here. On a device or on the web, viewers can watch and discover millions of personalized short videos. Download the app to get started.
Descript
Descript is an all-in-one audio/video editor and screen recorder that works like a doc.
The Playroom
Babylon.js Playroom - a demo of Babylon.js using the Havok physics engine for the web introduced in Babylon 6.0
Experience GeForce NOW Gaming Anywhere & Anytime
Instantly play the most demanding PC games and seamlessly play across your devices.
Play Fortnite
Play Fortnite with Xbox Cloud Gaming (Beta). The future of Fortnite is here. Be the last player standing in Battle Royale and Zero Build, explore and survive in LEGO Fortnite, blast to the finish with Rocket Racing or headline a concert with Fortnite Festival. Play thousands of free creator made islands with friends including deathruns, tycoons, racing, zombie survival and more! Join the creator community and build your own island with Unreal Editor for Fortnite (UEFN) or Fortnite Creative tools. Each Fortnite island has an individual age rating so you can find the one that's right for you and your friends. Find it all in Fortnite!
PPG.report
Weather report tailored for paramotor pilots, worldwide. Combines winds aloft, nearby Terminal Aerodrome Forecasts, hourly forecasts, NWS active alerts and TFRs.
Logi Web Connect
Logi Web Connect gives you pairing flexibility to connect your Logi mice & keyboards through your Bolt Receiver. And is the perfect solution to pair your devices to computers without installing any software.
A privacy-first, open-source knowledge base
A privacy-first, open-source platform for knowledge management and collaboration.
WealthPosition: Personal Finance & Budgeting App
WealthPosition, the best personal finance app to budget and track your finances for financial independence
Polypad – Virtual Manipulatives – Mathigon
Virtual manipulatives, dynamic geometry, graph plotting, data science and more: explore the ultimate mathematical playground!
Snae player
Lightweight on device music player right in your browser.
Snapdrop
Instantly share images, videos, PDFs, and links with people nearby. Peer2Peer and Open Source. No Setup, No Signup.
D&D Tokenizer
Generate image tokens with fancy borders for D&D and other table games characters. Perfect for adding visuality to your gaming experience.
Xchart.com
Automatic anesthesia charting. Focus on your patient — not your paperwork.
ZQuest Classic
Play one of hundreds of quests in ZQuest Classic, or create your own! ZQuest Classic is a game engine where you can make your classic adventure game
Average Colour
Average Colour is a tool to find the average colour in an image.
PaintZ
MS Paint for Chromebooks. Create and edit drawings and other images. Simple, fast, works offline, touch- and mouse-friendly, and no plug-ins required!
PWA Haven
Collection of small, fast, simple PWA's to replace native OS apps.
LiveHeats
Helping organisers run sophisticated competitions with minimal effort. All-in-one platform for live scoring, heat draws, scheduling, rankings and registration.
Pointland
Web Metaverse with Point Cloud
Oryx: The ZSA Keyboard Configurator
A powerful, visual tool to configure your keyboard. Based on the open-source QMK firmware.
Emberly - Your knowledge. Organized.
Emberly’s visual organization of bookmarks, notes, and files let you master information overload and learn better.
JSON utility tool
Web site created using create-react-app
Ok! So...
The drawing app to express, grasp, and organize your thoughts and ideas
Elk
A nimble Mastodon web client
ESC Configurator - for Bluejay, BLHeli_S and AM32
Flash and manage your ESCs online without needing to download anything. Supports BLHeli_S, Bluejay and AM32 firmware.
Application to help utilities management.
Budgeting app
Sqlime - Online SQLite playground
Sqlime is an online SQLite playground for debugging and sharing SQL snippets.
Flipper Lab
Web platform for your Flipper
Ruby
Ruby (V3) is customizable, free, and fast.
Smart Text Editor
The text editor that requires only a browser and a keyboard!
Discover the best Creators in the Fanzone
Embrace your inner fan, subscribe to your favorite creators to get Winamp-exclusive content.
bundlejs
Visit bundlejs.com - bundlejs is a quick and easy way to bundle, minify, and compress your ts, js, and npm packages all online.
Ensō
Writing is Thinking
Home Planner - Target
Plan your home, room by room. Design & style it virtually—then shop, share or save for later.
StackEdit – In-browser Markdown editor
Full-featured, open-source Markdown editor based on PageDown, the Markdown library used by Stack Overflow and the other Stack Exchange sites.
Postr.me
Capture social network post to nice image and video
drum utility - teenage engineering
a utility for creating sample packs for the OP-1 field, OP-1, and OP-Z
Your connected workspace for wiki, docs & projects
A new tool that blends your everyday work apps into one. It's the all-in-one workspace for you and your team.
Toaster
Toaster is a 3D editor that models in pure CSS + HTML. No WebGL, no canvas. Impractical? Yes. Useless? Also yes.
NFC Tools Online
Online tools to read and write the data on your NFC tags.
[md.edit]
A markdown editor web app based on the File System Access API
Memos AI
Memos AI allows you to record notes with ACCURATE transcriptions, powered by AI, on any device. Need to record a lecture to help with notes? Memos AI can do that AND give you an accurate transcript of what was said.
Hindi Bollywood » Live Online Fm Radio From India Stations
Click here Download Apk
Figma: The Collaborative Interface Design Tool
Figma is the leading collaborative design tool for building meaningful products. Seamlessly design, prototype, develop, and collect feedback in a single platform.
WTFOS Configurator
Root and configure your DJI HD FPV goggles and air-units via web interface.
Lynx Toolbox
Lynx Toolbox is an online tool to help you manage your Lynx headset. You can use it to install apps, update your device, or perform various other actions.
Beautiful Free Images & Pictures
Beautiful, free images and photos that you can download and use for any project. Better than any royalty free or stock photos.
AirConsole - Multiplayer games for friends
AirConsole is an online video game console. Play over 190 multiplayer games. Your smartphones are the controllers.
Web Serial Controller
Connect to any USB or Bluetooth Serial Device from your browser using the Web Serial API Controller
Edit Photos and modify with Effects PhotoPWA.com
This online tool helps you easily cut and edit your photos. You can trim them just right, change the size, add cool filters, and make your images better with no hassle. The website as PWA is easy to use, so you can make your photos perfect and use fun filters.
Descript
There are simple podcast & video editors and there are powerful ones. Only Descript is both & it features magical AI, so you can skip the hard part of editing. Get started for free.
Globs Designer
Design with globs, a stretchy new design primitive. Tired of the pen tool? Need smarter curves? Want to design from code? Get started with globs.
Edit Photo
No ads, no popups, no cookies, no account. The fastest way to edit photos online
Last Finger Standing
Need to pick someone to go first? To pay the bill? To buy milk? Just have everyone put a finger on the screen and wait. Last Finger Standing will make your choice automatically! A quick and easy app to randomly select someone from a group of people.
The Session
An online community dedicated to traditional Irish music.
ESP Web Tools
Easily allow users to flash new firmware for their ESP-devices on the web.
Readonly
Readonly links, for your read only.
Graphtoy
Graphing functions easily on the web
VRoid Hub
VRoid Hubは、3Dキャラクターのための投稿・共有プラットフォームです。モデルデータをアップロードするだけでキャラクターが活き活きとアニメーションするプロフィールページを作成でき、利用条件と共にモデルデータを配布することもできます。登録した3Dモデルは、VRoid Hubと連携した各種VR/ARプラットフォームや3Dコンテンツ上で利用可能です
Barcode/QR code Scanner
A Progressive Web Application (PWA) that scans barcodes of various formats, using the Barcode Detection API.
GDevelop game making app
Build your own game super fast and without programming. Publish on mobile, desktop and on the web.
Online Virtual Piano Keyboard with MIDI Functionality
This virtual piano gives you a simple way to practice your piano/keyboard skills online. Just connect a MIDI controller and start playing right away.
GIFWorks
GIFWorks makes movies from shared screens and webcams. Once recorded, videos can be optimized and saved as GIF or downloaded as WebM.
Kiwix JS PWA
Offline Wikipedia reader
Oxygen Saturation Monitor
Monitor your oxygen saturation and heart rate with a bluetooth pulse oximeter
Ilaria Food & Home – Ricette e stile di vita sostenibile
Ricette e stile di vita sostenibile
Squoosh
Squoosh is the ultimate image optimizer that allows you to compress and compare images with different codecs in your browser.
Open Video
Open local video files using the browser.
Amazingly Simple Graphic Design Software – Canva
Amazingly Simple Graphic Design Software – Canva
Soundslice
Learn music better with our living sheet music.
GrapheneOS web installer
Web-based installer for GrapheneOS, a security and privacy focused mobile OS with Android app compatibility.
Leonidas Esteban, Google Developer Expert en Web Technologies
Te enseño el cómo y el porqué de cada línea de código, aprendamos a programar juntos.
pixiv Sketch - お絵かきコミュニケーションアプリ
日々のお絵かきを手軽に楽しめるお絵かきコミュニケーションアプリ。落書きや描きかけの絵も気軽にシェア、いつでもどこでもお絵かきを楽しめます。
Toot Café
A Mastodon instance mostly populated by folks interested in web design and development.
Telegram
Telegram is a cloud-based mobile and desktop messaging app with a focus on security and speed.
Trovo
Trovo is an interactive live streaming platform, you can check out the hottest games live, share your own gaming experiences, and join an amazing community created especially for gamers, creators and do-ers.
Radio Garden
Explore live radio by rotating the globe.
X. It’s what’s happening
From breaking news and entertainment to sports and politics, get the full story with all the live commentary.
Top War
In Top War, modern tanks are merged out of basic gunman, everything can be merged here.No more upgrade waiting times, merge two together and the upgrade will finish instantly.
Play board games online from your browser
The world's #1 platform for playing board games online. Play hundreds of board games from your browser for free.
Amazon Luna – Amazon Cloud Gaming
Amazon Luna is a cloud gaming platform developed and operated by Amazon. Play great games on devices you already own.
Popular MIDIs — BitMidi
Listen to free MIDI songs, download the best MIDI files, and share the best MIDIs on the web.
YouTube Audio Player
An awesome audio player for YouTube videos
WebAssembly demo with File System Access
A demo showing WebAssembly + WASI apps running on the Web with access to a real filesystem.
Vectorpea
Vectorpea Online Vector Editor lets you edit vector graphics, AI, SVG and PDF files!
Learning Synths
Learn about synthesizers via Ableton’s interactive website. Play with a synth in your browser and learn to use the various parts of a synth to make your own sounds.
Getting Started
UsTaxes is an open source webapp for filing US federal income tax. All tax calculations are performed in the browser, so no personal information is stored on external servers!
Creating Kaleidoscopes from Photos with Online Tool
Discover the mesmerizing world of kaleidoscopes and unlock your artistic potential with our user-friendly online tool. Whether you're drawn to the symmetrical beauty of mandalas or nostalgic for the classic kaleidoscopes of your childhood, our tool offers endless possibilities
Edit • Video
No ads, no popups, no cookies, no account. The fastest way to edit video online
Roland50.studio
Emulate the sound of Roland's most famous and influential musical instruments from Yuri Suzuki and Roland.
Pokémon of the Week
A game of collecting and collaborating
Excalidraw — Collaborative whiteboarding made easy
Excalidraw is a virtual collaborative whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them.
1tuner
Listen to radio, podcasts and create playlists.
Snapchat. Now on the web.
Try the new Snapchat for Web on your computer to chat, call friends, use Lenses, and more
VIA
Your keyboard's best friend
Markwhen
It's about time. Markwhen is a simple language for creating beautiful calendars, timelines, and more.
Free and open source 2D and 3D game engine
Use the Godot Engine editor directly in your web browser, without having to install anything.
Narrow One
Capture the flag medieval style!
Capture QR Code
Instantly snap QR codes on mobile and desktop without installing an app.
web.autocad.com
Access AutoCAD® in the web browser on any computer. With the AutoCAD web app, you can edit, create, and view CAD drawings and DWG files anytime, anywhere.
MConverter: Easy to Use Online File Converter
Convert securely video, audio, image, e-book, office & archive files. Bulk convert large files up to 2 GB. Free and easy to use converter.
Find all Unicode characters from Hieroglyphs to Dingbats – Codepoints
Codepoints is a site dedicated to Unicode and all things related to codepoints, characters, glyphs and internationalization.
MOMO Pro
Impeccable timing and knowledge separate the stock trading elite. MOMO Stock Discovery App gives real-time stock market insight and alerts to time trades from desktop browser, iPhone, or Android.
Look Scanned
Look Scanned is a pure frontend site that makes your PDFs look scanned! No need for printers and scanners anymore - everything you need to do is just a few clicks.
Microsoft MakeCode Computer Science Education
MakeCode brings computer science to life for all students with fun projects, immediate results, and both block and text editors for learners at different levels.
Construct 3 r368.2 ★★★★★
Launch Construct 3 r368.2. Make games with the world's easiest browser-based game creator. Try for free now and begin your game development journey.
Adobe Photoshop
Best-in-class editing and design tools to create, modify, refine, and remix images into content you'll love. Straight from your browser.
Make music in an online DAW
Produce music online. Make beats, record audio, and collaborate.
Learn a language for free
Learn languages by playing a game. It's 100% free, fun, and scientifically proven to work.
Remap
Remap allows you to find, build, set up and customize your keyboard quickly and easily in Web Browser.
SVGcode
SVGcode is a Progressive Web App that lets you convert raster images like JPG, PNG, GIF, WebP, AVIF, etc. to vector graphics in SVG format.
Hostme
Hostme is everything you need to successfully run your restaurant business!
Runway
Everything you need to make anything you want.
Music Instrument tuner app
Tune guiter, bass, ukulele. Also allows you to tune with chromatic tuner. This also has a useful metronome that you can use while you jam.
Free Online Games on CrazyGames
Play free online games at CrazyGames, the best place to play high-quality browser games. We add new games every day. Have fun!
Linear – A better way to build products
Linear streamlines issues, sprints, and product roadmaps. It’s the new standard for modern software development.
Notepad - Offline capable
An offline capable notepad powered by ServiceWorker. It's quick, distraction-free, dark mode enabled, mobile compatible(Android, iOS) and minimalist in nature.
Voyager for Lemmy
Voyager is a beautiful mobile web client for Lemmy. Enjoy a seamless experience browsing the fediverse.
Ace Seventh Heaven
Visual Day scheduler.
Craft — A fresh take on documents
Get started today, it's free.
IRCCloud
IRCCloud is a modern IRC client that keeps you connected, with none of the baggage. Stay synced and notified wherever you are with our web and mobile apps.
Live Online Music Collaboration
Sessionwire Studio is a powerhouse creative communication suite for your production team featuring live video and studio quality HQ Audio.
WebGamer 🎮 Play Free Online Games
Play free online games instantly in your browser. WebGamer is a portal of next-gen web games you can play now without installing anything!
STORZ & BICKEL
STORZ & BICKEL Web App for Bluetooth Devices.
Improv Wi-Fi: Open standard for setting up Wi-Fi via Bluetooth LE and Serial
Free and open standard with ready-made SDKs that offer a great user experience to configure Wi-Fi on devices.
Free Online AI Photo Editor, Image Generator & Design tool
Get creative with Pixlr’s online photo editing & design tools. Including AI image generator, batch editor, animation design, enhancer & more. Try now for FREE!
Wormhole - Simple, private file sharing
Wormhole lets you share files with end-to-end encryption and a link that automatically expires.
Songwhip - Free music links to all platforms
In one click, Songwhip finds your music everywhere & makes a page you can share with everyone
Hoppscotch • Open source API development ecosystem
Helps you create requests faster, saving precious time on development.
glTF Report
Viewer, analysis tool, script editor, and validator for 3D models in glTF 2.0 format.
bridge. v2
bridge. is a light-weight IDE for Minecraft Add-Ons
BandLab - Make Music Online
The cloud platform where musicians and fans create music, collaborate, and engage with each other across the globe
Error
Daily Writing Builder
Visual Studio Code for the Web
Build with Visual Studio Code, anywhere, anytime, entirely in your browser.
TgStorage
Advanced Saved Messages of the Telegram. Organize your notes, links, checklists, photos and any documents in the free unlimited Telegram Cloud.
Adobe Podcast
Next generation audio from Adobe is here. Record, transcribe, edit, share. Crisp and clear, every time.
regex101: build, test, and debug regex
Regular expression tester with syntax highlighting, explanation, cheat sheet for PHP/PCRE, Python, GO, JavaScript, Java, C#/.NET, Rust.
GoldWave Infinity Audio Editor
GoldWave Infinity audio editing, recording, conversion, and visual analysis app.
daedalOS
Desktop environment in the browser
Slack is your productivity platform
Slack is a new way to communicate with your team. It’s faster, better organized, and more secure than email.
Photopea
Photopea Online Photo Editor lets you edit photos, apply effects, filters, add text, crop or resize pictures. Do Online Photo Editing in your browser for free!
SQLite Viewer Web App
A free online SQLite Explorer, inspired by DB Browser for SQLite and Airtable. Use this web-based SQLite Tool to quickly and easily inspect sqlite files on the web.
Link Cleaner
Remove tracking code and other variables from web links with the press of a button!
Senomix Timesheets - Sign-In
Senomix Time and Expense Tracking Software for Mac and Windows
Discover recipes, home ideas, style inspiration and other ideas to try.
Real Time Lightning Map
See lightning strikes in real time across the planet. Free access to maps of former thunderstorms. By Blitzortung.org and contributors.
WebScan
An experimental project to bring document/image scanning to the web (USB scanners).
Wootility Web
Instantly edit your Wooting keyboard profiles and colors from the browser.
Codeit
Run projects, code your ideas, and share it all on Codeit.
STEM.TECH
Hear in a new way with STEM
Speakflow — Online Teleprompter - AI Powered
Speakflow is an online teleprompter! Write and save scripts; collaborate with your team; Includes voice-activated scrolling. Works on Windows, Mac, iOS, Android, and more!
Tinder
With 55 billion matches to date, Tinder® is the world’s most popular dating app, making it the place to meet new people.
tldraw
A free and instant collaborative diagramming tool.
PocketLab Notebook
Create your free account or sign in here.
Build expressive charts or dashboards with code
Turn your most complex data into actionable insights faster with Observable. The future of data visualization, dashboards, and data apps starts here.
YT Playlist Notifier
Get notified when YouTube playlists are updated.
HexEd.it - Browser-based Online and Offline Hex Editing
HexEd.it is a free hex editor for Windows, MacOS, Linux and all other modern operating systems, which uses HTML5 and JavaScript (JS) technology to enable hexediting online, directly in your browser.
Create an account or log in to Instagram - A simple, fun & creative way to capture, edit & share photos, videos & messages with friends & family.
Shared Game Timer
A board game timer that synchronizes across multiple devices.
Bluesky Social
See what's next.
CrosKeys by CrosExperts
Unlock your Chromebook's potential with a powerful keyboard launcher!
ManifoldCAD
Fast, reliable, parametric solid modeling web app. Programmatic 3D design with JavaScript, inspired by and improving upon OpenSCAD & JSCAD. Demonstrates a new GPU-parallel, open-source geometry kernel: Manifold.
Typst: Compose papers faster
Focus on your text and let Typst take care of layout and formatting. Sign up now and speed up your writing process.
SnapperGPS - Home
Home page of SnapperGPS - A small, low-cost, low-power wildlife tracking system.
CityHop
Take leisurely walks and drives around the world while chilling to lofi music 🎶
BPM Techno - Free Online Real-Time BPM Counter for DJ
Produce some beats using any player, launchpad, keyboard, and mix them live with another track easily and precisely using this free online real-time BPM counter
Soundtrap - Make music online
Make music together online. Free instruments, loops, drum kits, and vocal tuner in one studio. Record, edit, mix, and master your audio, no downloads - sign up for free.
TopDecked Unified
The essential Magic App for brewers, collectors, traders, competitors, and fans.
Beatport DJ
Beatport DJ is the world's first web based DJ software built for music discovery and playlist management. Subscribe to Beatport Streaming and start mixing with millions of tracks.
Fotor - Free Online Photo Editing Tools
Upload image in Fotor online photo editor to crop image, add text to photo, enhance image, remove background, create graphics & more for free.
みんなのネバーランド - 約束のネバーランド公式コミュニティ -
みんネバは約束のネバーランド好きが集まる公式コミュニティです。考察やファンアート、約ネバの話題で盛り上がろう!
GoodNotes
GoodNotes app
dot big bang
dot big bang is a way to create and share games with your friends. Create on your own or with your friends, share with anyone by just sending a link!
Color Picker - ThreeJS
A ThreeJS color picker
Boxy SVG
Create and edit Scalable Vector Graphics (SVG) files online
PhotoStack
PhotoStack has moved to https://photostack.app
Journalistic
A micro journaling app with minimalistic design, pristine writing experience, and powerful insights.
What PWA Can Do Today
A showcase of what is possible with Progressive Web Apps today.
Accessible UK Train Timetables
A blazingly small and fast UK train times journey planner and live departure boards, with bookmarkable URLs as a web app, and offline saving of viewed journeys.
Hypertext
HTML Document Editor
Pixel-Art Editor & NFTs Laboratory
Make pixel art from real life images and draw on the image you can edit for free, filters, layers, library, are within the editor.
Pokedex.org
A mini-encyclopedia of Pokémon species, types, evolutions, and moves.
Create Amazing Mockups
Create Amazing Mockups
Geolocation - popup
Shows how to get geolocation access within a popup.
Notifications API sample
Demonstrates the creation of, and interaction with, each of the notification template types.
Devtools - Chrome Query
Uses the devtools API to add a sidebar that displays the jQuery data associated with the selected DOM element.
Typed URL History
Uses the chrome.history API to display in a popup the user's most visited pages.
il8n API Example
Demonstrates the chrome.i18n API by localizing text in the extension popup.
Chromium Milestones
Shows the Chromium release milestone a given code review was merged into.
Stylizr
Demonstrates how to use the chrome.storage API.
Test Screenshot Extension
Uses the chrome.tabs API to take a screenshot of the active tab.
Bookmark Viewer
Uses the chrome.bookmarks API to search through, add, and delete bookmarks from the user's bookmark tree.
Optional Permissions New Tab
Demonstrates optional permissions in extensions
Quick API Reference
Quick API can speed up the building of Chrome extensions.
No Cookies
Uses the chrome.declarativeNetRequest API to remove the "Cookie" header from requests.
Tab Inspector
Demonstrates the chrome.tabs API and the chrome.windows API by providing a user interface to manage tabs and windows.
Keyboard Pin
Uses the chrome.tabs API to toggle the pinned state of the current tab.
BrowsingData API: Basics
Uses the chrome.browsingData API to clear the user's history without requiring the user to visit the history page.
CO2 meter extension
Demonstrates using WebHID to connect to a CO2 meter.
My Bookmarks
A browser action with a popup dump of all bookmarks, including search, add, edit and delete.
chrome.commands
Uses the chrome.commands API by creating a new keyboard macro for switching tabs in the browser window.
Font Settings API Sample
Demonstrates the chrome.fontSettings API by allowing users to modify the size of fonts on webpages.
History Override
Demonstrates how to override the default history page.
Sandboxed Frame Sample
Demonstrates creation of a tab with a sandboxed iframe to which the main page passes a counter variable.
topSites API sample
Uses the chrome.topSites API to suggest which sites a user should visit.
Catifier
Replace every image by a cat's image in a website you visit
Omnibox Simple Example
Demonstrates the "omnibox" manifest key and most members of the omnibox API.
Action API Demo
Uses the Action API to change the badge text, icon, hover text, or popup page.
Tab Capture Example
Demonstrates how to use the chrome.tabCapture API.
Hello Extensions
Base Level Extension
Web Accessible Resources Demo
Uses the web_accessible_resources key in the manifest.json file to control access to assets within an extension.
Sandboxed Content Sample
Demonstrates creating a tab for a sandboxed iframe. The sandbox calls eval() to write HTML to its own document.
Oliver Focus Mode
Example extension from DevTools Tips video.
Cookie Clearer
Uses the chrome.cookies API by letting a user delete their cookies via a popup.
Tab Capture - Recorder
Records the current tab in an offscreen document.
Google Analytics Demo
How to use Google Analytics 4 in your extension.
Print Extension
Demonstrates all four methods of the chrome.printing namespace.
no-cookies Rule Manager
Demonstrates the chrome.declarativeNetRequest API by providing a UI to manipulate declarativeNetRequest rules dynamically.
Merge Windows
Uses the chrome.windows and chrome.tabs APIs to manage tabs across different windows.
File Handling Demo
Shows how to use the file_handlers manifest key with the web platform's Launch Handler API.
Idle - Simple Example
Demonstrates the Idle API
webRequest.onAuthRequired Demo
Demonstrates the webRequest.onAuthRequired listener to detect an authentication request and log the user into the designated site.
WASM Load Example - Helloworld (no-modules)
Shows how to use WebAssembly (WASM) in Manifest V3.
Favicon API in a popup
Demonstrates the favicon manifest permission by displaying the favicon of a url in the extension popup.
Geolocation - offscreen
Shows how to get geolocation access within a service worker.
Advanced Font Settings
Demonstrates the chrome.fontSettings API by allowing users to modify the style of displayed fonts on web pages.
Alarms API Demo
Uses the chrome.alarms API to allow the user to set alarms using an extension page.
Debugger Extension
Uses the chrome.debugger API to capture network events on web pages.
Content settings
Uses chrome.contentSettings to display the settings of a given page in the extension's popup.
Open side panel
Shows how to call sidePanel.open() to open a global side panel.
Top Sites
Uses the chrome.topSites API to get the user's most visited sites.
Blank new tab page
Uses the "chrome_url_overrides" manifest key by replacing the user's default new tab page with a new html file.
Context Menus Sample
Uses the chrome.contextMenus API to customize the context menu.
Devtools - inspectedWindow API sample
Uses devtools.inspectedWindow to collect and use data on the resouces used in a web page.
Omnibox - New Tab Search
Demonstrates the "omnibox" manifest key and API by creating a keyword that opens a browser search in a new tab.
Favicon API in content scripts
Demonstrates fetching the favicon from www.google.com and inserting it at the top left of every page.
URL Redirect
Uses the chrome.declarativeNetRequest API to redirect requests.
Tabs zoom API Demo
Uses the tabs.zoom API to manipulate the zoom level of the current tab.
Getting Started Example
Build an Extension!
Global Google Search
Uses the context menu to search a different country's Google
WASM Load Example - Helloworld
Shows how to use WebAssembly (WASM) as a module in Manifest V3.
WebSocket Demo
How to use WebSockets in your Chrome Extension.
Drink Water Event Popup
Demonstrates usage and features of the event page by reminding user to drink water
Site-specific side panel
Shows how to display the side panel only on google.com using the Side Panel API.
Offscreen API - DOM Parsing
Shows how to use DOMParser in an extension service worker using the offscreen document.
Broken Background Color
Fix an Extension!
webNavigation API Sample
Uses the webNavigation API to send notifications.
Geolocation - content script
Shows how to get geolocation access within a content script.
Scripting API Demo
Uses the chrome.scripting API to inject JavaScript into web pages.
Offscreen API - Clipboard
Shows how to write a string to the system clipboard using the offscreen document.
URL Blocker
Uses the chrome.declarativeNetRequest API to block requests.
Page Redder
Turns the page red when you click the icon
Focus Mode
Enable focus mode on Chrome's official Extensions and Chrome Web Store documentation.
Reading time
Add the reading time to Chrome Extension documentation articles