Chrome のご紹介
chrome.i18n
chrome.i18n インフラストラクチャを使用して、アプリまたは拡張機能全体に国際化を実装します。 拡張機能に /_locales ディレクトリがある場合は、 manifest で "default_locale" を定義する必要があります。 ユーザーに表示される文字列はすべて、 messages.json という名前のファイルに格納する必要があります。新しい言語 / 地域を追加するたびに、 /_locales/_localeCode_ という名前のディレクトリにメッセージ
- Chrome 拡張機能
Windows の Chromium ベースのブラウザでテキストのレンダリングが改善
Edge チームは、Chromium で Windows ClearType チューナーの値を直接尊重するサポートを追加しました。これにより、Windows の Chromium ベースのブラウザでテキストのレンダリングが改善されました。
- Chrome
chrome.storage
chrome.storage API を使用して、ユーザーデータの変更を保存、取得、追跡します。 storage API を使用するには、拡張機能の manifest で "storage" 権限を宣言します。次に例を示します。 Storage API は、ユーザーデータと状態を保持するための拡張機能固有の方法を提供します。これはウェブ プラットフォームのストレージ API( IndexedDB 、 Storage
- Chrome 拡張機能
chrome.storage
chrome.storage API を使用して、ユーザーデータの変更を保存、取得、追跡します。 Storage API は、ユーザーデータと状態を保持するための拡張機能固有の方法を提供します。これはウェブ プラットフォームのストレージ API( IndexedDB 、 Storage )に似ていますが、拡張機能のストレージのニーズを満たすように設計されています。主な機能は次のとおりです。 拡張機能は、一部のコンテキスト(ポップアップやその他の HTML ページ)で [ Storage
- Chrome 拡張機能
人工知能
Chrome の AI AI による次世代のウェブへようこそ。デベロッパーがウェブで優れたエクスペリエンスを簡単に構築できるよう、AI がどのように役立つかをご確認ください。 Chrome の Gemini Nano でできることを再考。 組み込みの AI Gemini エコシステムの最も効率的なモデルである Gemini Nano が Chrome に導入されます。 クライアントサイドで作業する クライアントサイド AI
Docs
開発に必要なコードサンプル、ガイド、API リファレンス。
Chrome for Developers
皆様がウェブで構築、成長、革新できるようお手伝いします。
- Chrome
chrome.userScripts
userScripts API を使用して、ユーザー スクリプトのコンテキストでユーザー スクリプトを実行します。 User Scripts API chrome.userScripts を使用するには、manifest.json に "userScripts" 権限を追加し、スクリプトを実行するサイトの "host_permissions" を追加します。 ユーザー スクリプトは、ウェブページに挿入されるコード スニペットで、ウェブページの外観や動作を変更します。 Content
- Chrome 拡張機能
拡張機能 / スタートガイド
Chrome 拡張機能の基本を学ぶ
- Chrome 拡張機能
chrome.printing
chrome.printing API を使用して、Chromebook にインストールされているプリンタに印刷ジョブを送信します。 すべての chrome.printing メソッドとイベントでは、 拡張機能マニフェスト で "printing" 権限を宣言する必要があります。次に例を示します。 次の例は、printing 名前空間の各メソッドの使用を示しています。このコードは、extensions-samples GitHub リポジトリの api-samples/printing
- Chrome 拡張機能
chrome.printing
chrome.printing API を使用して、Chromebook にインストールされているプリンタに印刷ジョブを送信します。 すべての chrome.printing メソッドとイベントでは、 拡張機能マニフェスト で "printing" 権限を宣言する必要があります。次に例を示します。 次の例は、printing 名前空間の各メソッドの使用を示しています。このコードは、extensions-samples GitHub リポジトリの api-samples/printing
- Chrome 拡張機能
メディアの再生時にピクチャー イン ピクチャーを自動的に開始する
Chrome では、メディアを再生しているウェブアプリがピクチャー イン ピクチャーを自動的に開始できます。
- Chrome
Chrome 134 ベータ版
Chrome に追加される最新機能を紹介します。
- Chrome
chrome.enterprise.platformKeys
chrome.enterprise.platformKeys API を使用して鍵を生成し、その鍵の証明書をインストールします。この証明書はプラットフォームで管理され、TLS 認証やネットワーク アクセスに、または chrome.platformKeys を介して他の拡張機能で使用できます。 この API を使用してクライアント証明書を登録する一般的な手順は次のとおりです。 enterprise.platformKeys.getTokens を使用して、使用可能なすべてのトークンを取得します。
- Chrome 拡張機能
chrome.enterprise.platformKeys
chrome.enterprise.platformKeys API を使用して鍵を生成し、その鍵の証明書をインストールします。この証明書はプラットフォームで管理され、TLS 認証やネットワーク アクセスに、または chrome.platformKeys を介して他の拡張機能で使用できます。 この API を使用してクライアント証明書を登録する一般的な手順は次のとおりです。 enterprise.platformKeys.getTokens()
- Chrome 拡張機能
Chrome 133
CSS の高度な attr()、text-box-trim、scroll-state コンテナ クエリなど。
- Chrome
Chrome 133 の新機能
Chrome 133 のリリースが開始されました。エキサイティングな新しい CSS 機能など、他にも多くの機能があります。
- Chrome
PWA のタブ形式アプリケーション モード
タブ付きアプリケーション モードでは、プログレッシブ ウェブアプリのデベロッパーは、スタンドアロン PWA にタブ付きドキュメント インターフェースを追加できます。
Android 向け Auth Tab でウェブベースのログインフローを改善する
Android 向け Auth Tab でウェブベースの認証を改善する
- Chrome
アプリ固有の履歴でユーザーのブラウジング エクスペリエンスを向上させる
Android アプリでアプリ固有の履歴を使用する方法
Chrome カスタムタブのアプリ固有の履歴でユーザー エンゲージメントを深める
Android 版 Chrome カスタムタブのアプリ固有の履歴の導入
- Chrome
[認証] タブを使用して認証を簡素化する
Android アプリで専用の [認証] タブを使用する方法
エフェメラル カスタムタブでユーザーのウェブ プライバシーを強化
Android アプリでエフェメラル カスタムタブを使用する方法
chrome.permissions
chrome.permissions API を使用して、 宣言された省略可能な権限 をインストール時ではなく実行時にリクエストします。これにより、ユーザーは権限が必要な理由を理解し、必要な権限のみを付与できます。 API によって付与される機能について説明する権限に関する警告がありますが、これらの警告の一部は明白でない場合があります。Permissions API
- Chrome 拡張機能
chrome.runtime
chrome.runtime API を使用して、サービス ワーカーを取得し、マニフェストの詳細を返します。また、拡張機能のライフサイクルでイベントをリッスンして応答します。この API を使用して、URL の相対パスを完全修飾 URL に変換することもできます。 Runtime API には、拡張機能で使用できるさまざまな機能領域をサポートするメソッドが用意されています。 Runtime API のほとんどのメソッドでは、 nativeMessaging 権限が必要な
- Chrome 拡張機能
chrome.permissions
chrome.permissions API を使用して、 宣言された省略可能な権限 をインストール時ではなく実行時にリクエストします。これにより、ユーザーは権限が必要な理由を理解し、必要な権限のみを付与できます。 API によって付与される機能について説明する権限に関する警告がありますが、これらの警告の一部は明白でない場合があります。Permissions API
- Chrome 拡張機能
Chrome 133 の DevTools の新機能
AI チャット履歴の永続化、ナビゲーションの改善、[パフォーマンス] のリスト無視とスタック トレース、新しい [新機能] パネルなど。
- Chrome
- Chrome DevTools
WebGPU の新機能(Chrome 133)
unorm8x4-bgra と 1 コンポーネントの頂点形式が追加され、未定義の値で不明な上限をリクエストできるようになりました。また、WGSL の配置ルールが変更され、破棄による WGSL のパフォーマンスが向上しました。
- Chrome
- WebGpu
Chrome 拡張機能の今後の予定(2025 年 1 月)
Chrome 拡張機能の最近の変更の概要と、デベロッパーが期待できる今後の拡張機能の魅力的な機能について説明します。
- Chrome 拡張機能
- Chrome
chrome.bookmarks
chrome.bookmarks API を使用すると、ブックマークの作成、整理、その他の操作ができます。カスタムのブックマーク マネージャー ページを作成するには、 ページのオーバーライド もご覧ください。 bookmarks API を使用するには、 拡張機能マニフェスト で「bookmarks」権限を宣言する必要があります。次に例を示します。 ブックマークはツリー形式で整理されます。ツリーの各ノードは、ブックマークまたはフォルダ( グループ )です。ツリーの各ノードは
- Chrome 拡張機能
chrome.bookmarks
この権限は 警告をトリガーします 。 chrome.bookmarks API を使用すると、ブックマークの作成、整理、その他の操作ができます。カスタムのブックマーク マネージャー ページを作成するには、 ページのオーバーライド もご覧ください。 bookmarks API を使用するには、 拡張機能マニフェスト で「bookmarks」権限を宣言する必要があります。次に例を示します。 ブックマークはツリー形式で整理されます。ツリーの各ノードは、ブックマークまたはフォルダ( グループ
- Chrome 拡張機能
Prompt API を使用したセッション管理のベスト プラクティス
このガイドでは、Prompt API を使用したセッション管理のベスト プラクティスについて説明します。
リリースノート
デベロッパーに影響する Chrome の変更について
- Chrome
Chrome の新機能
Chrome の新機能 ドキュメントとブログで Chrome の最新情報をご確認ください。 新しいコンテンツとドキュメントの重要な更新。 article LLM がレスポンスをストリーミングする仕組み サーバーおよびクライアントの AI でストリーミング データがどのように機能するかを学ぶための新しいドキュメント。 article Chrome ウェブストアに関する通知と再審査請求 Chrome ウェブストアの通知と再審査請求のプロセスが更新されました。 article オリジン トライアルの
Chrome ウェブストアのポリシーの更新: デベロッパーにとって明確で一貫性のあるポリシーを実現
Chrome ウェブストアは、デベロッパーとユーザーにとって高品質で信頼できるエコシステムの構築に取り組んでいます。この目標に沿って、Google は、プラットフォーム全体で明確かつ一貫したポリシーを適用するための一連のポリシーの更新を発表します。今回の更新では、機能、コンテンツ基準、デベロッパー ガイダンスの主要な分野に対応しています。 Google は、 再審査請求プロセス を効率化し、透明性を高めるために、プロセスを合理化しています。今後、デベロッパーはポリシー違反ごとに 1
- Chrome
- Chrome 拡張機能
ストリーミングされた LLM レスポンスをレンダリングする際のベスト プラクティス
以下のフロントエンドのベスト プラクティスに沿って、ストリーミングをサポートする API(Prompt API など)を使用して、Gemini からストリーミングされたレスポンスを表示します。
パスキーの WebAuthn 機能検出の簡素化
「getClientCapabilities()」を使用して WebAuthn の機能を検出し、ユーザーに合わせて認証ワークフローを調整する方法を学びます。
- パスキー
- Chrome
LLM がレスポンスをストリーミングする仕組み
ストリーミングの概要と、AI と LLM でのストリーミングの仕組みを理解する。
AI を組み込んだ翻訳
組み込みの Translator API を使用すると、任意のコンテンツをソース言語からターゲット言語に翻訳できます。オリジン トライアルに参加して API を試す。
省エネモードでのフリーズ
Chrome 133 以降では、省エネモードが有効になっているときに、CPU 使用率の高いバックグラウンド タブがフリーズされるようになりました。
- Chrome
DevTools のヒント
DevTools のヒント
- Chrome DevTools
メディア
ウェブサイトやアプリに画像や動画などを追加する方法を改善します。
iOS で Google パスワード マネージャーのパスキーを利用できるようになりました
iOS 17 以降の Chrome で、Google パスワード マネージャー(GPM)でパスキーを作成、同期、認証できるようになりました。これにより、Chrome が利用できるすべてのデバイスで GPM のパスキーを使用できるようになります。
- パスキー
- Chrome
CSS attr() のアップグレード
カスタム プロパティを含む任意の CSS プロパティで attr() を使用できるようになりました。また、値を文字列以外のデータ型に解析できるようになりました。
- Chrome
CSS scroll-state()
コンテナクエリに似ていますが、停止したクエリ、スナップされたクエリ、オーバーフローしたクエリに使用します。
- Chrome
Chrome 133 ベータ版
Chrome に搭載される最新機能について学びます。
- Chrome
Chrome Extensions
Chrome 拡張機能の開発方法をご確認ください。
- Chrome 拡張機能
Chrome 132 の新機能
Chrome 132 のリリースが開始されました。Dialog 要素は ToggleEvent を取得し、要素レベルの動画共有をサポートします。File System Access API は Android と WebView をサポートします。
- Chrome
Chrome DevTools に Gemini を導入した方法
DevTools の新しい AI アシスタント パネルの楽しいユースケースについて学びます
- Chrome DevTools
- Chrome
CSS text-box-trim
テキスト コンテンツの上下にスペースを追加して、視覚的なバランスをとる。
- Chrome
Chrome 132
ダイアログの ToggleEvent、要素レベルの動画共有のサポート、Android と WebView をサポートする File System Access API など。
- Chrome
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 拡張機能
chrome.tabs
chrome.tabs API を使用して、ブラウザのタブシステムを操作します。この API を使用すると、ブラウザのタブを作成、変更、並べ替えることができます。 Tabs API には、タブの操作と管理のための機能だけでなく、タブの 言語 の検出、 スクリーンショット の撮影、タブのコンテンツ スクリプトとの 通信 も可能です。 ほとんどの機能を使用するのに権限は必要ありません。たとえば、新しいタブの 作成 、タブの 再読み込み 、別の URL への ナビゲーション などです。 Tabs
- Chrome 拡張機能
任意の要素から動画ストリームをキャプチャする
Element Capture API は、現在のタブのキャプチャを DOM サブツリーのキャプチャに変換するための、パフォーマンスが高く堅牢な方法です。
ウェブ バイタル拡張機能のサポート終了
Web Vitals 拡張機能と DevTools の統合が完了し、拡張機能のサポートは終了しました。
- Chrome
- Chrome DevTools
組み込み AI チャレンジの受賞者
組み込み AI チャレンジで受賞したアプリと拡張機能をご覧ください。このチャレンジでは、Chrome の Gemini Nano でできることを再考していただきました。
- Chrome
chrome.ttsEngine
chrome.ttsEngine API を使用して、拡張機能を使用してテキスト読み上げ(TTS)エンジンを実装します。拡張機能がこの API を使用して登録されている場合、拡張機能または Chrome アプリが tts API を使用して音声を生成すると、発話される音声とその他のパラメータを含むイベントが拡張機能に届きます。拡張機能は、利用可能なウェブ技術を使用して音声を合成して出力し、呼び出し元の関数にイベントを返してステータスを報告できます。
- Chrome 拡張機能
chrome.cookies
chrome.cookies API を使用して、Cookie のクエリと変更を行い、Cookie が変更されたときに通知を受け取ります。 cookies API を使用するには、マニフェストで「cookies」権限と、Cookie にアクセスするホストの ホスト権限 を宣言する必要があります。次に例を示します。 パーティショニングされた Cookie を使用すると、特定の Cookie をトップレベル フレームのオリジンに対してキー付けする必要があることをサイトがマークできます。つまり、サイト
- Chrome 拡張機能
chrome.ttsEngine
chrome.ttsEngine API を使用して、拡張機能を使用してテキスト読み上げ(TTS)エンジンを実装します。拡張機能がこの API を使用して登録されている場合、拡張機能または Chrome アプリが tts API を使用して音声を生成すると、読み上げ対象の音声とその他のパラメータを含むイベントが拡張機能に届きます。拡張機能は、利用可能なウェブ技術を使用して音声を合成して出力し、呼び出し元の関数にイベントを送り返してステータスを報告できます。
- Chrome 拡張機能
chrome.cookies
chrome.cookies API を使用して、Cookie のクエリと変更を行い、Cookie が変更されたときに通知を受け取ります。 cookies API を使用するには、マニフェストで "cookies" 権限と、Cookie にアクセスするホストの ホスト権限 を宣言します。次に例を示します。 パーティショニングされた Cookie を使用すると、特定の Cookie をトップレベル フレームのオリジンに対してキー付けする必要があることをサイトがマークできます。たとえば、サイト A
- Chrome 拡張機能
chrome.appviewTag
appview タグを使用して、他の Chrome アプリを Chrome アプリ内に埋め込みます( 使用方法 をご覧ください)。 オブジェクト 埋め込まれるアプリが埋め込みの決定を行う際に使用できる、デベロッパーが指定するオプションのデータ。 文字列 埋め込みリクエストを送信したアプリの ID。 void 埋め込みリクエストを許可します。 allow 関数は次のようになります。 文字列 埋め込むコンテンツを指定します。 void 埋め込みリクエストを防止します。 deny
XFO または CSP を使用してクリックジャッキを軽減する
クリックジャッキング攻撃の軽減の詳細
WebGPU の新機能(Chrome 132)
テクスチャビューの使用、32 ビット浮動小数点テクスチャのブレンド、GPUDevice の adapterInfo 属性、無効な形式でキャンバス コンテキストを構成する JavaScript エラーの発生、テクスチャのサンプラー制限のフィルタリング、拡張サブグループの試験運用版、デベロッパー エクスペリエンスの向上、16 ビット正規化テクスチャ形式の試験運用版のサポートなど。
- Chrome
- WebGpu
Chrome 拡張機能の新機能
Chrome 拡張機能のプラットフォーム、ドキュメント、ポリシーに関する最近の変更
- Chrome 拡張機能
WebGPU
ガイド、デモ、最新ニュースで WebGPU について学ぶことができます
Chrome でビルドする
Chrome の最新の Stable リリースと Beta リリースに含まれる内容を確認する。
お支払い
Chrome で最新の Payment API を使用する方法を学ぶ
プライバシーとセキュリティ
Chrome のプライバシーとセキュリティの機能をご確認ください。
アプリ
基盤となるオペレーティング システムにアクセスしやすいエクスペリエンスを構築するために、このテクノロジーが非推奨になりました。
操り人形師
ヘッドレス Chrome または Chromium を制御するための高レベル API を提供する Node.js ライブラリ
Android でのウェブ
Android でウェブアプリを開発するための Chrome の機能についてご紹介します。
chrome.certificateProvider
この API を使用して証明書をプラットフォームに公開すると、そのプラットフォームはこの証明書を TLS 認証に使用できます。 この API を使用してクライアント証明書を ChromeOS に公開する一般的な手順は次のとおりです。 実際の手順は異なる場合があります。たとえば、証明書を自動的に選択するエンタープライズ ポリシーが使用されている場合、ユーザーに証明書の選択を求めるメッセージは表示されません( AutoSelectCertificateForUrls と ユーザー向けの Chrome
- Chrome 拡張機能
chrome.extension
chrome.extension API には、任意の拡張機能ページで使用できるユーティリティがあります。拡張機能とそのコンテンツ スクリプト間、または拡張機能間でのメッセージ交換がサポートされています。詳しくは、 メッセージ パススルー をご覧ください。 拡張機能ビューのタイプ。 「タブ」 「popup」 シークレット タブ内で実行されるコンテンツ スクリプトと、シークレット プロセス内で実行される拡張機能ページの場合、true です。後者は、incognito_behavior
- Chrome 拡張機能
灯台
Lighthouse を使用してウェブ パフォーマンス監査を自動化する
パフォーマンス
Chrome のパフォーマンス ツールを使ってウェブ アプリケーションのパフォーマンスを最適化しましょう。
chrome.system.display
system.display API を使用してディスプレイのメタデータをクエリします。 ディスプレイが検出され、システムで使用されているかどうかを示す列挙型。ディスプレイがシステムで検出されない場合(接続が切断されている場合や、スリープ モードのため接続が切断されていると見なされる場合など)は、ディスプレイは「非アクティブ」と見なされます。この状態は、すべてのディスプレイが切断されたときに既存のディスプレイを保持するために使用されます。 「active」 「無効」 数値
- Chrome 拡張機能
chrome.system.display
system.display API を使用してディスプレイのメタデータをクエリします。 ディスプレイが検出され、システムで使用されているかどうかを示す列挙型。ディスプレイがシステムで検出されない場合(接続が切断されている場合や、スリープ モードのため接続が切断されていると見なされる場合など)は、ディスプレイは「非アクティブ」と見なされます。この状態は、すべてのディスプレイが切断されたときに既存のディスプレイを保持するために使用されます。 「active」 「無効」 数値
- Chrome 拡張機能
chrome.action
chrome.action API を使用して、Google Chrome ツールバーの拡張機能のアイコンを制御します。 この API を使用するには、次のキーを マニフェスト で宣言する必要があります。 chrome.action API を使用するには、 "manifest_version" を 3 に指定し、 マニフェスト ファイル に "action" キーを含めます。 "action"
- Chrome 拡張機能
ブラウザのサポート
カスタムタブ機能と利用可能なブラウザの概要。
ID
ウェブ認証など、Chrome の ID 機能について説明します。
chrome.commands
commands API を使用して、拡張機能でアクションをトリガーするキーボード ショートカットを追加します。たとえば、ブラウザ アクションを開くアクションや、拡張機能にコマンドを送信するアクションなどです。 この API を使用するには、次のキーを マニフェスト で宣言する必要があります。 Commands API を使用すると、拡張機能のデベロッパーは特定のコマンドを定義し、デフォルトのキーの組み合わせにバインドできます。拡張機能が受け入れる各コマンドは、 拡張機能のマニフェスト で
- Chrome 拡張機能
リモート デバッグの使用時はオペレーションがサポートされません
一部の WebDriver コマンド(ブラウザ ウィンドウのサイズ変更など)では、Chrome 拡張機能をブラウザに読み込む必要があります。通常、ChromeDriver は新しい Chrome セッションを起動するたびに、この「自動化拡張機能」を読み込みます。 ただし、ChromeDriver に、新しい Chrome セッションを起動するのではなく、既存の Chrome セッションに接続するよう指示できます。これは、 Capabilities (ChromeOptions
ChromeOS
すべての ChromeOS テストイメージには、 /usr/local/chromedriver/ に ChromeDriver バイナリがインストールされています。バイナリは、そのテストイメージ内の同じバージョンの Chrome に更新されます。つまり、常に ChromeDriver の最新ビルドを使用します。 テストで ChromeDriver バイナリの安定版ビルドを実行する場合は、テストに独自のコードを記述して、特定のバイナリをダウンロードし、
WebView の概要
WebView コンポーネントは、Chromium オープンソース プロジェクトをベースにしています。
chrome.certificateProvider
この API を使用して証明書をプラットフォームに公開すると、そのプラットフォームはこの証明書を TLS 認証に使用できます。 この API を使用してクライアント証明書を ChromeOS に公開する一般的な手順は次のとおりです。 実際の手順は異なる場合があります。たとえば、証明書を自動的に選択するエンタープライズ ポリシーが使用されている場合、ユーザーに証明書を選択するよう求められることはありません( AutoSelectCertificateForUrls と ユーザー向けの Chrome
- Chrome 拡張機能
chrome.extension
chrome.extension API には、任意の拡張機能ページで使用できるユーティリティがあります。拡張機能とそのコンテンツ スクリプト間、または拡張機能間でのメッセージ交換がサポートされています。詳しくは、 メッセージ パススルー をご覧ください。 拡張機能ビューのタイプ。 「タブ」 「popup」 シークレット タブ内で実行されるコンテンツ スクリプトと、シークレット プロセス内で実行される拡張機能ページの場合、true です。後者は、incognito_behavior
- Chrome 拡張機能
パフォーマンス ログ
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 の調査によると、自動入力を使用するユーザーはフォームの入力が速く、放棄率が低くなります。
- Chrome
カスタマイズ可能な選択リクエストの回答から得られた結果(デベロッパー フィードバック フォーム)
貴重な時間を割いてフィードバックを送信していただき、詳細を確認して標準の策定にご協力いただきありがとうございました。
- Chrome
組み込みの AI を使ってみる
AI を組み込んだ機能やアプリケーションの構築を開始するための要件について学びます。
AI を組み込んだ言語検出
Language Detector API は、ウェブでブラウザ内で利用できる組み込みの言語検出機能です。
アロケーション タイムライン ツールの使用方法
割り当てタイムライン ツールを使用して、適切にガベージ コレクションされず、メモリを保持し続けているオブジェクトを見つけます。
- Chrome DevTools
合成されていないアニメーションを避ける
Lighthouse の監査に合格する方法(「複合化されていないアニメーションを避ける」)
DevTools でパフォーマンス トレースを記録して分析する
DevTools でパフォーマンス トレースを記録して分析する。
- Chrome
- Chrome DevTools
Chrome 132 の DevTools の新機能
Gemini を使用してネットワーク リクエスト、ソースファイル、パフォーマンス トレースをデバッグしたり、AI チャット履歴を表示したりできます。
- Chrome DevTools
- Chrome
CSS ラップ 2024
Chrome DevRel チームとスケートボードに乗った Chrome Dino と一緒に、2024 年に Chrome とウェブ プラットフォーム向けにリリースされた最新の CSS を学びましょう。
メモリの用語
このセクションでは、メモリ分析で使用される一般的な用語について説明します。これらの用語は、さまざまな言語のさまざまなメモリ プロファイリング ツールに適用できます。
- Chrome DevTools
拡張機能のストレージを表示、編集する
[拡張機能のストレージ] パネルで拡張機能のストレージを表示、編集する方法。
- Chrome DevTools
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 拡張機能
chrome.app.runtime
chrome.app.runtime API を使用してアプリのライフサイクルを管理します。アプリ ランタイムは、アプリのインストールの管理、イベントページの制御、アプリのいつでもシャットダウンを行えます。 "new_note" アプリは、新しいメモの作成など、特定のアクションを念頭に置いて起動できます。アプリが起動されたアクションのタイプは、LaunchData インスタンスの actionData フィールドで確認できます。 任意( 省略可 )
chrome.usb
chrome.usb API を使用して、接続された USB デバイスを操作できます。この API を使用すると、アプリのコンテキストから USB 操作にアクセスできます。この API を使用すると、アプリはハードウェア デバイスのドライバとして機能します。この API によって生成されたエラーは、 runtime.lastError を設定し、関数の通常のコールバックを実行することによって報告されます。この場合、コールバックの通常のパラメータは未定義になります。 ブール値
Chrome 拡張機能の Prompt API
Chrome 拡張機能の Prompt API の無限の可能性をご紹介します。
拡張機能と AI
AI を使用して拡張機能を開発する方法
- Chrome 拡張機能
強力な HSTS ポリシーを使用する
強力な HTTP Strict Transport Security(HSTS)ポリシーの構成の詳細
[パフォーマンス分析情報] パネルのサポート終了
試験運用版の [パフォーマンス分析情報] パネルは 2025 年 1 月に削除され、[パフォーマンス] パネル自体に新しい分析情報が追加されます。
- Chrome DevTools
- Chrome
Chrome DevTools
AI アシスタントに関する最新情報やユースケースをご確認ください
- Chrome DevTools
chrome.documentScan
chrome.documentScan API を使用すると、接続されているドキュメント スキャナから画像を検出、取得できます。
- Chrome 拡張機能
chrome.desktopCapture
Desktop Capture API は、画面、個々のウィンドウ、個々のタブのコンテンツをキャプチャします。 chooseDesktopMedia() で使用されるデスクトップ メディアソースのセットを定義するために使用される列挙型。 「screen」 「window」 「タブ」 「audio」 SelfCapturePreferenceEnum をミラーリングします。 "include" 「除外」 SystemAudioPreferenceEnum をミラーリングします。 "include"
- Chrome 拡張機能
chrome.dns
DNS 解決には chrome.dns API を使用します。 この API を使用するには、 manifest で "dns" 権限を宣言する必要があります。 次のコードは resolve() を呼び出して、 example.com の IP アドレスを取得します。 service-worker.js: 文字列(省略可) IP アドレスのリテラルを表す文字列。resultCode が成功を示す場合にのみ指定します。 数値 結果コード。0 は成功を示します。 指定されたホスト名または IP
- Chrome 拡張機能
chrome.declarativeContent
chrome.declarativeContent API を使用すると、ページのコンテンツの読み取り権限を必要とせず、ページのコンテンツに応じた操作を行うことができます。 Declarative Content API を使用すると、 ホスト権限 を追加したり、 コンテンツ スクリプト を挿入したりすることなく、ウェブページの URL に応じて、または CSS セレクタがページ上の要素と一致する場合に、拡張機能のアクションを有効にできます。 activeTab
- Chrome 拡張機能
chrome.system.storage
chrome.system.storage API を使用してストレージ デバイスの情報をクエリし、取り外し可能なストレージ デバイスが接続または切断されたときに通知します。 「success」 取り外しコマンドが成功しました。アプリケーションは、デバイスを取り外すようユーザーにプロンプトを表示できます。 "in_use" デバイスが別のアプリによって使用されています。取り出しが成功しませんでした。他のアプリがデバイスの使用を終了するまで、デバイスを取り外さないでください。
- Chrome 拡張機能
chrome.contentSettings
chrome.contentSettings API を使用して、ウェブサイトが Cookie、JavaScript、プラグインなどの機能を使用できるかどうかを制御する設定を変更します。より一般的な話として、コンテンツ設定を使用すると、Chrome の動作をグローバルではなくサイトごとにカスタマイズできます。 API を使用するには、拡張機能のマニフェストで "contentSettings" 権限を宣言する必要があります。次に例を示します。
- Chrome 拡張機能
chrome.contextMenus
chrome.contextMenus API を使用して、Google Chrome のコンテキスト メニューにアイテムを追加します。コンテキスト メニューの追加を適用するオブジェクトの種類(画像、ハイパーリンク、ページなど)を選択できます。 API を使用するには、拡張機能のマニフェストで "contextMenus" 権限を宣言する必要があります。また、メニュー項目の横に表示する 16 x 16 ピクセルのアイコンを指定する必要があります。次に例を示します。 コンテキスト メニュー
- Chrome 拡張機能
chrome.audio
chrome.audio API は、ユーザーがシステムに接続されているオーディオ デバイスに関する情報を取得し、制御できるようにするために提供されています。この API は現在、ChromeOS のキオスクモードでのみ使用できます。 文字列 デバイス名。 DeviceType 端末のタイプ。 文字列 ユーザー フレンドリーな名前(「USB マイク」など)。 文字列 音声デバイスの一意の識別子。 ブール値 これが現在アクティブなデバイスである場合、true になります。 数値
- Chrome 拡張機能
chrome.alarms
chrome.alarms API を使用して、定期的に、または将来の特定の時刻にコードを実行するようにスケジュールします。 chrome.alarms API を使用するには、 manifest で "alarms" 権限を宣言します。 信頼性の高い動作を確保するには、API の動作を理解することが役立ちます。
- Chrome 拡張機能
自動入力
ブラウザとデベロッパーは、ユーザーがデータをすばやく入力し、データを再入力しなくて済むようにすることができます。
CrUX ツール
CrUX ツールに関する技術ドキュメント。
- Chrome UX レポート
chrome.declarativeNetRequest
chrome.declarativeNetRequest API は、宣言型ルールを指定してネットワーク リクエストをブロックまたは変更するために使用されます。これにより、拡張機能はネットワーク リクエストをインターセプトしてコンテンツを表示することなく、リクエストを変更できるため、プライバシーが保護されます。 「 declarativeNetRequest 」権限と「 declarativeNetRequestWithHostAccess
- Chrome 拡張機能
chrome.devtools.panels
chrome.devtools.panels API を使用して、拡張機能をデベロッパー ツール ウィンドウの UI に統合します。独自のパネルを作成したり、既存のパネルにアクセスしたり、サイドバーを追加したりできます。 各拡張機能パネルとサイドバーは、個別の HTML ページとして表示されます。デベロッパー ツール ウィンドウに表示されるすべての拡張機能ページは、 chrome.devtools API のすべての部分と、他のすべての拡張機能 API にアクセスできます。
- Chrome 拡張機能
chrome.fileBrowserHandler
chrome.fileBrowserHandler API を使用すると、ChromeOS ファイル ブラウザを拡張できます。たとえば、ウェブサイトにユーザーがファイルをアップロードできるようにする場合にこの API を使用できます。 ChromeOS ファイル ブラウザは、ユーザーが Alt+Shift+M キーを押すか、SD カード、USB キー、外部ドライブ、デジタル カメラなどの外部ストレージ デバイスを接続すると表示されます。ファイル
- Chrome 拡張機能
chrome.readingList
chrome.readingList API を使用して、 リーディング リスト のアイテムを読み取り、変更します。 Reading List API を使用するには、拡張機能の マニフェスト ファイルに "readingList" 権限を追加します。 manifest.json: Chrome のサイドパネルにはリーディング リストが表示されます。ウェブページを保存して、後で読む、またはオフラインで読むことができる。 Reading List API
- Chrome 拡張機能
WebGPU の今後
最新の GPU for the Web ワーキング グループ ミーティングで議論された、新しい AI とレンダリング機能について学びます。
- Chrome
- WebGpu
動画のユーザー補助機能が Gemini API デベロッパー コンペティションのウェブ賞を受賞
Gemini API デベロッパー コンペティションのウェブ アワードに ViddyScribe が選ばれました。動画の音声による説明を生成することで、ウェブ上の動画をよりアクセスしやすくする方法について、Gemini を例に説明しました。
- Chrome
新しい拡張機能メニューのテスト開始に備えて拡張機能を準備する
新しい拡張機能メニューに対応するよう拡張機能を準備する方法。
- Chrome
パスキー
より簡単かつ安全なパスワードの置き換え。
chrome.networking.onc
chrome.networking.onc API は、ネットワーク接続(モバイル、イーサネット、VPN、Wi-Fi)の構成に使用されます。この API は、自動起動された ChromeOS キオスク セッションで使用できます。 ネットワーク接続の構成は、 Open Network Configuration(ONC) 仕様に従って指定します。 注: ほとんどの辞書プロパティと列挙型の値では、JavaScript の lowerCamelCase 表記法ではなく、ONC 仕様に一致するように
パフォーマンス パネルで直接トレースにアノテーションを付ける
DevTools の新しいアノテーション機能を使用してパフォーマンス トレースをよりわかりやすくする方法を学びます。
- Chrome
Translator API オリジン トライアルに参加する
ローカル AI モデルを使用して、ブラウザでテキストをリアルタイムで翻訳します。ユーザーは母国語で投稿できるようになりました。
- Chrome
パフォーマンスの AI アシスタンス
AI を活用したパフォーマンス プロファイルの把握
- Chrome DevTools
Chrome 132 ベータ版
Chrome に搭載される最新機能について学びます。
- Chrome
AI によるクライアントサイド翻訳
Translator API を使用して、グローバルなカスタマー サポートを強化する。
AI アシスタント パネル
AI を活用してウェブサイトの仕組みを理解する
- Chrome DevTools
組み込みの AI
組み込みの AI は、センシティブ データを保護してレイテンシを改善しながら、パワフルなモデルをユーザーに提供できる最新のサービスです。
ソースの AI アシスタンス
AI を活用してウェブサイトのリソースを把握する
- Chrome DevTools
ネットワークの AI アシスタンス
AI を活用してウェブサイトのネットワーク トラフィックを把握する
- Chrome DevTools
パソコン版 Chrome のパスキーの Signal API
パソコン版 Chrome のパスキーの Signal API の導入
- Chrome
- パスキー
Chrome 拡張機能の Prompt API オリジン トライアルに参加する
Chrome 拡張機能の Prompt API オリジン トライアルに参加して、Chrome で Gemini Nano にアクセスします。
- Chrome
Chrome 131
CSS ハイライトの継承の変更、details 要素の CSS スタイルの追加、ページ マージン ボックスによる印刷レイアウトの簡素化など。
- Chrome
Chrome 131 の新機能
Chrome 131 のリリースが開始されました。詳細要素の CSS スタイル設定の追加、ページ マージン ボックスによる印刷レイアウトの簡素化など、さまざまな機能が追加されています。
- Chrome
Summarizer API オリジン トライアルに参加する
オリジン トライアルに参加して、ユーザーは長い記事や複雑なドキュメント、さらにはチャットでの活発な会話から、簡潔で洞察力に富んだ要約を作成できます。
- Chrome
Signal API を使用して、パスキーとサーバー上の認証情報の整合性を保つ
WebAuthn Signal API を使用すると、信頼できる当事者は既存の認証情報の状態をパスキー プロバイダに通知できるため、パスキーがサーバー上の認証情報と整合するようになります。
- Chrome
- パスキー
組み込みの 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 を使用して、メモリリーク、メモリの肥大化、頻繁なガベージ コレクションなど、ページのパフォーマンスに影響するメモリの問題を見つける方法について説明します。
- Chrome DevTools
WebGPU の新機能(Chrome 131)
WGSL、GPUCanvasContext getConfiguration()、点と線のプリミティブのクリップ距離には、深度バイアス、サブグループ用のインクルーシブ スキャン組み込み関数、マルチ描画間接の試験運用版サポート、シェーダー モジュールのコンパイル オプションの厳密な計算、GPUAdapter requestAdapterInfo() の削除などがあってはなりません。
- Chrome
- WebGpu
スタイル設定のその他のオプション(<詳細>)
新しい ::details-content 疑似要素を使用して、表示タイプを設定したり、展開と閉じを切り替える部分のコンテナにスタイルを適用したりできるようになりました。
メモリパネルの概要
メモリ割り当てに関する詳細な分析情報を取得し、低レベルのメモリの問題を調査して、ガベージ コレクションを管理します。
- Chrome DevTools
シームレスな認証情報の共有により、ユーザーのログインがスムーズになる
シームレスな認証情報共有を使用すると、ユーザーが Android アプリとウェブサイトで同じ認証情報を使用してログインできることをパスワード マネージャーに安全に通知できます。
- Chrome
DevTools のカスタマイズ
Chrome DevTools をカスタマイズする方法のリスト。テーマ、配置、パネルの順序、言語などを変更できます。
- Chrome DevTools
バッジのリファレンス
さまざまなオーバーレイを切り替え、バッジを使用して DOM ツリー ナビゲーションを高速化できます。
- Chrome DevTools
[パフォーマンス] パネルで Core Web Vitals のリアルタイム指標をモニタリングする
[パフォーマンス] パネルで Core Web Vitals の指標をリアルタイムでモニタリングする。
- Chrome
- Chrome DevTools
CSS を使用して印刷するときにウェブページの余白にコンテンツを追加する
ウェブページの印刷時にカスタムのヘッダーとフッターを作成する。
- Chrome
DevTools の新機能(Chrome 131)
Gemini で CSS をデバッグし、検出結果にアノテーションを付け、[パフォーマンス] パネルで分析情報を取得し、過度のレイアウト シフトや合成されていないアニメーションなどを検出します。
- Chrome
- Chrome DevTools
ユーザー(手書き入力)を認識する
手書き入力認識 API を使用すると、ウェブ アプリケーションで高度な手書き入力認識サービスを使用して、手書き入力のテキストをリアルタイムで認識できます。
WebGPU: トラブルシューティングのヒントと修正
Chrome ブラウザで WebGPU が無効になっている、または動作しない理由をご確認ください。
Chrome から --headless=old を削除
Chrome 132 では、古いヘッドレス モードが削除されました。Chrome ヘッドレス シェルまたは新しいヘッドレス モードに移行します。
- Chrome
ランタイム パフォーマンスを分析する
Chrome DevTools でランタイム パフォーマンスを評価する方法について説明します。
- Chrome DevTools
DevTools の新しいスクロール バッジ: スクロール可能な要素をすばやく見つける
DevTools の新しいスクロール バッジによって、スクロール可能な要素のデバッグがどのように簡素化されるか(およびその作成方法)について説明します。
- Chrome
DevTools の AI アシスタンスでおすすめすべき 5 つのこと
DevTools の新しい AI アシスタント パネルの楽しいユースケースについて学びます
- Chrome
Cache-Control: no-store の bfcache の有効化
Chrome では、安全に Cache-Control: no-store を使用しているページで bfcache の使用を許可するように変更されます。デベロッパーの皆様への影響をご確認ください。
Chrome ヘッドレス モード
Chrome のヘッドレス モードは、Chrome の通常のヘッドフル モードに近づけることで、デベロッパーにとってさらに便利になりました。
- Chromium
組み込みの AI API
組み込みの AI は、センシティブ データを保護してレイテンシを改善しながら、パワフルなモデルをユーザーに提供できる最新のサービスです。
Chrome 131 ベータ版
Chrome の最新ベータ版に追加される機能をご確認ください。
- Chrome
API リファレンス
Chrome 拡張機能で利用できるすべての API の完全なリファレンス。これには、サポートが終了した Chrome アプリ プラットフォーム用の API や、ベータ版および開発中の API が含まれます。
- Chrome 拡張機能
スタイル設定における AI アシスタント
DevTools の AI を使用してウェブサイトのスタイル設定がどのように行われるかを理解する。
- Chrome DevTools
WebGPU の新機能(Chrome 130)
デュアルソース ブレンディング、Metal でのシェーダーのコンパイル時間の改善、GPUAdapter requestAdapterInfo() のサポート終了など。
- Chrome
- WebGpu
Chrome 130 の新機能
Chrome 130 のリリースが開始されました。ドキュメントのピクチャー イン ピクチャーでは、ピクチャー イン ピクチャー ウィンドウをより細かく制御できます。CSS ネスト宣言により、厄介なエッジケースを修正できます。また、複数行に分割された要素のデコレーションをどのように動作させるかを指定できます。Chrome 130 のデベロッパー向け新機能について、Pete LePage が詳しく説明しています。
- Chrome
Chrome 130
Chrome 130 のリリースが開始されました。ドキュメントのピクチャー イン ピクチャーでは、ピクチャー イン ピクチャー ウィンドウをより細かく制御できます。CSS のネストされた宣言では、厄介なエッジケースを修正できます。要素の装飾が複数行に分割された場合の動作を指定することもできます。他にも多くの機能があります。
- Chrome
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
ネットワーク アクティビティを検査する
Chrome DevTools の最も一般的なネットワーク関連機能に関するチュートリアルです。
- Chrome DevTools
Box-decoration-break プロパティ(Chrome 130)
Chrome 130 では、接頭辞のない box-decoration-break が完全にサポートされています。
- Chrome
Chrome 拡張機能の今後の予定(2024 年 10 月)
Chrome 拡張機能の最近の変更の概要と、デベロッパーが期待できる今後の拡張機能の魅力的な機能について説明します。
- Chrome
- Chrome 拡張機能
ネイティブ クライアント
コンパイルされた C / C++ コードをブラウザで実行するためのサンドボックス。サポートを終了しました。
プライベート ネットワーク アクセスの保留
プライベート ネットワーク アクセス(PNA)のロールアウトは保留中です。
- Chrome
CSS 選択のスタイル設定の継承の変更
Chrome 134 では、CSS ハイライトの継承に変更が加えられます。
- Chrome
Translation API が早期プレビュー版で利用可能に
Translation API が、組み込み AI 早期プレビュー プログラムの参加者にご利用いただけるようになりました。
- Chrome
CSS anchor positioning API
アンカー ポジショニング API を使用して、要素を相互に配置します。
Chrome DevTools での予測を把握する: 難しい理由とその改善方法
例外がキャッチされるかどうかを DevTools デバッガが予測する方法を学びます。
- Chrome
Google Chrome 組み込み AI チャレンジに参加する
Chrome の Gemini Nano でできることを再考する「組み込み AI チャレンジ」を開催します。
- Chrome
WebAuthn: 認証システムをエミュレートする
Chrome DevTools で、認証システムをエミュレートして WebAuthn をデバッグします。
- Chrome DevTools
Chrome ウェブストア デベロッパー ダッシュボードのモバイル エクスペリエンスを改善
このたび、Chrome ウェブストア デベロッパー ダッシュボードの UI を変更し、レスポンシブ性とモバイル フレンドリー性を高めました。これにより、店舗掲載情報のパフォーマンスのモニタリング、掲載情報の変更、店舗の拡張機能の管理がより便利でアクセスしやすくなることを願っています。 すべてのグラフと分析ページが更新され、レスポンシブ性が向上しました。これにより、モバイル デバイスでの拡張機能のストア掲載情報のパフォーマンスをより適切に確認できるようになりました。
- Chrome 拡張機能
- Chrome
検索: 読み込まれたすべてのリソースからテキストを検索する
検索パネルを使用して、読み込まれたすべてのリソースからテキストを検索できます。
- Chrome DevTools
機能リファレンス
Chrome DevTools の [レコーダー] パネルの機能に関する総合的なリファレンス。
- Chrome DevTools
Chrome 130 の DevTools の新機能
パフォーマンス パネルで移動できるライブ指標とパンくずリストの推奨事項、ネットワーク フィルタの刷新、HAR エクスポートのクリーンアップなど。
- Chrome
- Chrome DevTools
対象範囲: 使用していない JavaScript と CSS を見つける
Chrome DevTools で使用していない JavaScript や CSS コードを見つけて分析する方法
- Chrome DevTools
[ソース] パネルの概要
Chrome DevTools の [ソース] パネルで、ファイルの表示と編集、スニペットの作成、JavaScript のデバッグ、ワークスペースの設定を行います。
- Chrome DevTools
セキュリティ: セキュリティの問題を理解する
[セキュリティ] パネルを使用して、ページが HTTPS で完全に保護されていることを確認します。
- Chrome DevTools
シングルページ アプリケーションでの同一ドキュメント ビュー遷移
シングルページ アプリケーションで使用する同一ドキュメントのビュー遷移を使ってみましょう。
[レイヤ] パネル: ウェブサイトのレイヤを探索する
ウェブサイトを構成するレイヤを調べます。
- Chrome DevTools
キャッシュの解明: キャッシュの調査、クリア、無効化
DevTools を使用してキャッシュを検査し、トラブルシューティングします。
- Chrome DevTools
- Chrome
Web Vitals 拡張機能が DevTools に追加されました
ウェブバイタル拡張機能は Chrome DevTools のパフォーマンス パネルと統合され、2025 年 1 月にスタンドアロン サポートが終了します。
- Chrome
- Chrome DevTools
コンソールの概要
Chrome DevTools コンソールの主な用途は、メッセージの記録と JavaScript の実行です。
- Chrome DevTools
ウェブアプリ マニフェスト ID プロパティを使用して一意に識別する PWA
オプションの `id` プロパティは、ウェブアプリ マニフェストの仕様に含まれており、PWA に使用する識別子を明示的に定義できます。マニフェストに id プロパティを追加すると、start_url またはマニフェストの場所への依存関係が削除され、今後更新できるようになります。
Chrome で Google パスワード マネージャーのパスキーをパソコンと Android 間で同期
パソコン版 Chrome では、まもなく Google パスワード マネージャー(GPM)でパスキーを作成して、Android に加えてこれらのプラットフォーム間で同期できるようになります。
- Chrome
- パスキー
Writer API と Rewrite API の早期プレビューを公開
EPP の参加者は、Chrome の書き込み API と書き換え API を使用してプロトタイプを作成できるようになりました。
- Chrome
フィードバックが必要: CSS 組積造をどのように定義すればよいでしょうか?
提案されている 2 つの組積造の仕様の比較。
- Chrome
Chrome 130 ベータ版
最新の Chrome ベータ版の機能と変更点を使ってサイトをテストします。
- Chrome
パフォーマンス パネル: ウェブサイトのパフォーマンスを分析する
ウェブサイトの読み込みと実行時のパフォーマンスを分析する
- Chrome DevTools
Chrome 試験運用版: プロセスの共有
プロセス共有の試験運用と、Chrome DevTools のデベロッパー エクスペリエンスへの影響。
- Chrome
WebGPU の新機能(Chrome 129)
キャンバス トーン マッピング モードでの HDR サポート、サブグループのサポートの拡大など。
- Chrome
- WebGpu
Chrome 129 の新機能
Chrome 129 のリリースが開始されました。長いタスクでは、パフォーマンスを向上させるために、固有のサイズで要素をアニメーション化できます。また、アンカー配置の構文にもいくつかの変更があります。Chrome 129 のデベロッパー向けの新機能について、Pete LePage が詳しく説明しています。
- Chrome
高さまでアニメーション化: auto;(および他の固有のサイズ設定キーワード)を CSS 内で指定
「interpolate-size」と「calc-size()」を使用して、固有のサイズ設定キーワードとの間でアニメーション化する
ローカルと実際のユーザーの Core Web Vitals のパフォーマンスを DevTools でモニタリングする
Chrome DevTools の [Performance] パネルでは、ローカルの Core Web Vitals のパフォーマンスをモニタリングし、フィールドの実際のユーザーデータと比較する新しい方法が導入されています。
- Chrome DevTools
- Chrome
Web Serial の Bluetooth RFCOMM の更新
Web Serial で Bluetooth RFCOMM シリアルポートが使用可能になったことを検出する方法について学びます。
- Chrome
デベロッパー フィードバックのリクエスト: カスタマイズ可能な選択
カスタマイズ可能な新しい選択機能をいち早くご紹介します。
- Chrome
画面をフリーズして消える要素を検査する
DOM 内の要素をフリーズして、DevTools で調査できるようにします。
- Chrome DevTools
- Chrome
リリースノート
CrUX データセットの最新の変更に関する詳細。
- Chrome UX レポート
「動画」だけでなく、すべての要素でピクチャー イン ピクチャーで使用可能
常時オンのウィンドウに任意の HTML コンテンツを表示します。
Keyboard Lock と Pointer Lock API には、Chrome 131 の権限が必要です
Keyboard Lock API を使用すると、デベロッパーは、インタラクティブなウェブサイト、ゲーム、リモート デスクトップやアプリのストリーミングなど、さまざまなユースケースで没入感のあるフルスクリーン エクスペリエンスを提供できます。これは、ウェブサイトがホスト オペレーティング システムで許可されているすべての鍵を使用できるようにすることで実現します。 Pointer Lock API を使用すると、デスクトップ アプリケーションでポインタ アイコンを非表示にして、マウスの動きを 3D
- Chrome
マニフェスト - 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 を検査できます。
- Chrome DevTools
変更: HTML、CSS、JavaScript の変更をトラッキングする
HTML、CSS、JavaScript に対する変更のトラッキング
- Chrome DevTools
Chrome のウェブサイト間でシームレスな認証情報共有が可能に
同じアカウント管理バックエンドを共有する複数のドメインを使用している場合、Digital Asset Links を使用して認証情報をシームレスに共有することもできます。これにより、ユーザーは認証情報を一度保存し、Chrome パスワード マネージャーで関連するウェブサイトに対して提案できるようになります。
コマンド メニューでコマンドを実行する
コマンド メニューを開く方法、コマンドを実行する方法、ファイルを開く方法、その他のアクションを表示する方法などに関するガイドです。
- Chrome DevTools
Digital Credentials API のオリジン トライアルのご紹介
Digital Credentials API のオリジン トライアルは、Chrome 128 以降開始されます。Digital Credentials API は、運転免許証やデジタル ウォレットに保存されている国民識別カードなどのデジタル認証情報を通じて、ウェブサイトがユーザーに関する検証可能な情報を選択的にリクエストできるようにする新しいウェブ プラットフォーム API です。
- Chrome
アンカー ポジショニングの構文の変更
注意が必要なアンカー ポジショニング API に関連する変更。
- Chrome
DevTools の新機能(Chrome 129)
[パフォーマンス] > [検索リクエスト]ネットワーク、自動入力を使用した住所フォームでのテストデータの使用、レコーダー パネルで Firefox 用 Puppeteer にエクスポートしたり、[Performance] パネルでモニタリングでパフォーマンスの問題をひと目で把握したりできます。
- Chrome DevTools
- Chrome
ウェブ プラットフォーム
Chrome の仕組み、オリジン トライアルに参加して、あらゆる場所で Chrome を使って構築しましょう。
Chrome で WebAuthn のヒント、関連オリジン リクエスト、JSON シリアル化を導入
Chrome の WebAuthn で、ヒント、関連オリジン リクエスト、JSON シリアル化を使用できるようになりました
- Chrome
機能と ChromeOptions
機能とは、ChromeDriver セッションのカスタマイズと構成に使用できるオプションです。
Language Detection API の早期プレビュー版が利用可能
EPP の参加者は、Chrome の言語検出 API を使用してプロトタイプを作成できるようになりました。
- Chrome
chrome.declarativeNetRequest
chrome.declarativeNetRequest API は、宣言型ルールを指定することで、ネットワーク リクエストをブロックまたは変更する場合に使用します。これにより拡張機能は、リクエストをインターセプトしてコンテンツを閲覧することなく、ネットワーク リクエストを変更できるため、プライバシーが強化されます。 declarativeNetRequestFeedback host_permissions 上記の権限に加えて、特定の種類のルールセット(具体的には静的ルールセット)では、
- Chrome 拡張機能
Lighthouse: ウェブサイトの速度を最適化する
Chrome Lighthouse でウェブサイトの読み込み時間を短縮しましょう。
- Chrome DevTools
chrome.sidePanel
chrome.sidePanel API を使用すると、ウェブページのメイン コンテンツとともにブラウザのサイドパネルでコンテンツをホストできます。 Side Panel API を使用するには、拡張機能の マニフェスト ファイルに "sidePanel" 権限を追加します。 manifest.json: Side Panel API を使用すると、拡張機能でサイドパネルに独自の UI を表示できるようになり、ユーザーのブラウジング ジャーニーを補完する永続的なエクスペリエンスを実現できます。
- Chrome 拡張機能
chrome.webRequest
chrome.webRequest API を使用して、トラフィックをモニタリングおよび分析し、処理中のリクエストをインターセプト、ブロック、変更します。 ウェブ リクエストを使用するには、 拡張機能のマニフェスト で "webRequest" 権限を宣言する必要があります API と必要な ホスト権限 。サブリソース リクエストをインターセプトするには、 拡張機能は、リクエストされた URL とそのイニシエータの両方にアクセスできる必要があります。例: webRequestBlocking
- Chrome 拡張機能
chrome.omnibox
アドレスバー API を使用すると、Google Chrome のアドレスバーにキーワードを登録できます。アドレスバーはアドレスバーとも呼ばれます。 ユーザーが拡張機能のキーワードを入力すると、拡張機能のみの操作を開始する。 あります。キー入力はそれぞれ拡張機能に送信され、ユーザーはそれに対する候補を提示できます。 候補は、さまざまな方法で豊富な形式にできます。ユーザーが候補を承認すると 拡張機能が通知を受け、処理される可能性があります。 アドレスバー API を使用するには、 マニフェスト に
- Chrome 拡張機能
chrome.pageAction
chrome.pageAction API を使用して、Google Chrome のメインツールバーのアドレスバーの右にアイコンを配置します。ページ操作とは、現在のページで実行できる操作のうち、すべてのページには適用されない操作のことです。無効な場合、ページ操作はグレー表示されます。 例: 次のスクリーンショットの RSS アイコンは、RSS を購読できるページ アクションを表しています。 現在のページのフィードです 非表示のページ操作はグレー表示されます。たとえば、下の RSS
- Chrome 拡張機能
chrome.windows
chrome.windows API を使用してブラウザ ウィンドウを操作します。この API を使用すると、ブラウザのウィンドウの作成、変更、並べ替えを行うことができます。 リクエストされると、 windows.Window には tabs.Tab オブジェクトの配列が含まれます。必要なこと url にアクセスする必要がある場合は、 マニフェスト で "tabs" 権限を宣言します。 pendingUrl 、 title 、または tabs.Tab の favIconUrl プロパティ。例:
- Chrome 拡張機能
chrome.i18n
chrome.i18n インフラストラクチャを使用して、アプリまたは拡張機能全体に国際化を実装します。 ユーザーに表示されるすべての文字列を、 messages.json という名前のファイルに配置する必要があります。毎回 新しい言語 / 地域を追加する場合は、 _locales/_localeCode_ という名前のディレクトリにメッセージ ファイルを追加します。 localeCode は、英語の場合は en などのコードです。 英語( en
- Chrome 拡張機能
chrome.browserAction
ブラウザ操作を使用して、Google Chrome のメイン ツールバーのアドレスバーの右にアイコンを配置します。ブラウザのアクションには、 アイコン に加えて、 ツールチップ 、 バッジ 、 ポップアップ を表示できます。 次の図では、アドレスバーの右側にある色とりどりの正方形が、 できます。アイコンの下にポップアップが表示されます。 常にアクティブとは限らないアイコンを作成するには、ブラウザではなく ページ アクション を使用します できます。 次のように、 拡張機能のマニフェスト
- Chrome 拡張機能
chrome.webRequest
chrome.webRequest API を使用して、トラフィックをモニタリングおよび分析し、処理中のリクエストをインターセプト、ブロック、変更します。 ウェブ リクエストを使用するには、 拡張機能のマニフェスト で "webRequest" 権限を宣言する必要があります API と必要な ホスト権限 。サブリソース リクエストをインターセプトするには、 拡張機能は、リクエストされた URL とそのイニシエータの両方にアクセスできる必要があります。例: Chrome 108 以降では、
- Chrome 拡張機能
chrome.fileBrowserHandler
chrome.fileBrowserHandler API を使用して ChromeOS のファイル ブラウザを拡張します。たとえば、この API を使用して、ユーザーがウェブサイトにファイルをアップロードできるようにすることができます。 Alt+Shift+M キーを押すか、SD カード、USB キー、外部ドライブ、デジタルカメラなどの外部ストレージ デバイスを接続すると、ChromeOS ファイル ブラウザが表示されます。ファイル
- Chrome 拡張機能
chrome.devtools.panels
chrome.devtools.panels API を使用して拡張機能をデベロッパー ツールのウィンドウ UI に統合し、独自のパネルの作成、既存のパネルへのアクセス、サイドバーの追加を行います。 この API を使用するには、次のキーを マニフェストで 宣言する必要があります。 デベロッパー ツール API の使用方法の概要については、 DevTools API の概要 をご覧ください。 拡張機能パネルとサイドバーはそれぞれ個別の HTML
- Chrome 拡張機能
マニフェスト ファイル形式
すべてのアプリには manifest.json という名前の JSON 形式のマニフェスト ファイルがあります。このファイルには、 情報です。 次のコードは、アプリでサポートされているマニフェスト フィールドと、 説明していきます。
chrome.system.cpu
system.cpu API を使用して CPU メタデータをクエリします。 文字列 プロセッサのアーキテクチャ名。 string[] プロセッサの機能の一部を示す機能コードのセット。現在サポートされているコードは、「mmx」、「sse」、「sse2」、「sse3」、「ssse3」、「sse4_1」、「sse4_2」、「avx」です。 文字列 プロセッサのモデル名。 数値 論理プロセッサの数。 ProcessorInfo [] 各論理プロセッサに関する情報。 数値 [] CPU
- Chrome 拡張機能
chrome.enterprise.networkingAttributes
chrome.enterprise.networkingAttributes API を使用して、現在のネットワークに関する情報を読み取ります。注: この API は、企業ポリシーによって自動インストールされた拡張機能でのみ使用できます。 文字列(省略可) デバイスのローカル IPv4 アドレス(構成されていない場合は未定義)。 文字列(省略可) デバイスのローカル IPv6 アドレス(構成されていない場合は未定義)。 文字列 デバイスの MAC アドレス。 デバイスのデフォルト
- Chrome 拡張機能
chrome.gcm
chrome.gcm を使用して、アプリと拡張機能が Firebase Cloud Messaging (FCM)でメッセージを送受信できるようにします。 メッセージ内のすべての Key-Value ペアの最大サイズ(バイト単位)。 4096 アプリケーションを FCM に登録します。登録 ID は callback によって返されます。同じ senderIds のリストを指定して register が再度呼び出されると、同じ登録 ID が返されます。 string[]
- Chrome 拡張機能
chrome.instanceID
chrome.instanceID を使用してインスタンス ID サービスにアクセスします。 アプリ インスタンス ID をリセットし、関連付けられているすべてのトークンを取り消します。 関数(省略可) callback パラメータは次のようになります。 約束 <void> Promise は Manifest V3 以降でのみサポートされています。他のプラットフォームではコールバックを使用する必要があります。 付与されたトークンを取り消します。 オブジェクト deleteToken
- Chrome 拡張機能
chrome.wallpaper
ChromeOS の壁紙を変更するには chrome.wallpaper API を使用します。 「壁紙」を宣言する必要があります使用するための権限をアプリの マニフェスト に記載 使用できます。例: たとえば、壁紙を https://example.com/a_file.png さん、 chrome.wallpaper.setWallpaper を呼び出すことができます できます。 サポートされている壁紙レイアウト。 "ストレッチ" 「CENTER」 "CENTER_CROPPED" 指定した
- Chrome 拡張機能
chrome.history
chrome.history API を使用して、アクセスしたページのブラウザの記録を操作します。ブラウザの履歴では、URL の追加、削除、照会を行うことができます。履歴ページを独自のバージョンでオーバーライドするには、 ページをオーバーライドする をご覧ください。 「履歴」を申告する必要がある 拡張機能のマニフェスト で History API の使用を許可する必要があります。次に例を示します。 History API は 遷移タイプ を使用して、ブラウザが特定の URL
- Chrome 拡張機能
chrome.loginState
chrome.loginState API を使用して、ログイン状態を読み取り、モニタリングします。 "SIGNIN_PROFILE" 拡張機能がログイン プロファイルにあることを指定します。 "USER_PROFILE" 拡張機能がユーザー プロフィールにあることを指定します。 "UNKNOWN" セッション状態が不明であることを指定します。 "IN_OOBE_SCREEN" ユーザーが開封確認画面にいることを指定します。 "IN_LOGIN_SCREEN"
- Chrome 拡張機能
chrome.input.ime
chrome.input.ime API を使用して、ChromeOS のカスタム IME を実装します。これにより、拡張機能でキー入力の処理、構成の設定、候補ウィンドウの管理を行うことができます。 「input」パラメータを宣言し、 拡張機能のマニフェスト で input.ime API の使用権限を宣言する必要があります。次に例を示します。 次のコードは、入力された文字を大文字に変換する IME を作成します。 アシスト ウィンドウ内のボタンの ID。 「元に戻す」
- Chrome 拡張機能
chrome.printingMetrics
chrome.printingMetrics API を使用して、印刷の使用状況に関するデータを取得します。 "BLACK_AND_WHITE" モノクロ モードが使用されたことを示します。 "COLOR" カラーモードが使用されたことを示します。 "ONE_SIDED" 片面印刷が使用されたことを示します。 &quot;TWO_SIDED_LONG_EDGE&quot; 両面印刷(長辺をめくる)を指定します。
- Chrome 拡張機能
chrome.fontSettings
chrome.fontSettings API を使用して Chrome のフォント設定を管理します。 Font Settings API を使用するには、「fontSettings」クラスを宣言し、拡張機能の権限に 使用します 。例: Chrome で一部のフォント設定を特定の汎用フォント ファミリーと言語に依存可能に 使用できます。たとえば、sans Serif の簡体字中国語に使用するフォントは、フォントと異なる場合があります。 使用します。 Chrome でサポートされている汎用フォント
- Chrome 拡張機能
chrome.platformKeys
chrome.platformKeys API を使用して、プラットフォームが管理するクライアント証明書にアクセスします。ユーザーまたはポリシーが権限を付与した場合、拡張機能はその証明書をカスタム認証プロトコルで使用できます。例:これにより、サードパーティの VPN でプラットフォームが管理する証明書を使用できるようになります( chrome.vpnProvider を参照)。 ArrayBuffer[] サーバーで許可されている認証局の識別名のリスト。各エントリは、DER でエンコードされた
- Chrome 拡張機能
chrome.devtools.inspectedWindow
chrome.devtools.inspectedWindow API を使用して、検査対象ウィンドウを操作します。検査対象ページのタブ ID の取得、検査対象ウィンドウのコンテキストにおけるコードの評価、ページの再読み込み、ページ内のリソースリストの取得を行います。 この API を使用するには、次のキーを マニフェストで 宣言する必要があります。 chrome.devtools.inspectedWindow を使用して検査対象ウィンドウを操作し、対象のウィンドウのタブ ID
- Chrome 拡張機能
chrome.sessions
ブラウジング セッションのタブとウィンドウをクエリして復元するには、 chrome.sessions API を使用します。 文字列 外部デバイスの名前。 セッション [] 外部デバイスで開いているウィンドウ セッションのリスト。セッションが新しい順に並べられます。 数値(省略可) リクエストされたリストで取得するエントリの最大数。最大エントリ数( sessions.MAX_SESSION_RESULTS )をフェッチするには、このパラメータを省略します。 数値
- Chrome 拡張機能
chrome.processes
chrome.processes API を使用してブラウザのプロセスとやり取りします。 数値 キャッシュで使用される部分(バイト単位)。 数値 キャッシュのサイズ(バイト単位)。 数値(省略可) プロセスのすべてのスレッドによる、1 つの CPU コアの合計使用率として表される、プロセスの CPU 使用率の最新の測定値。これにより、ゼロから CpuInfo.numOfProcessors*100 までの値が得られます。この値は、マルチスレッド プロセスでは 100%
- Chrome 拡張機能
chrome.tts
chrome.tts API を使用して、合成テキスト読み上げ(TTS)を再生します。関連する ttsEngine API もご覧ください。この API を使用すると、拡張機能で音声エンジンを実装できます。 Chrome は、Windows(SAPI 5 を使用)、Mac OS X、ChromeOS で音声をネイティブにサポートしています。 音声合成機能を使用できます。どのプラットフォームでも 自身を代替音声エンジンとして登録する拡張機能をインストールします。 拡張機能から speak()
- Chrome 拡張機能
chrome.enterprise.hardwarePlatform
chrome.enterprise.hardwarePlatform API を使用して、ブラウザが実行されているハードウェア プラットフォームのメーカーとモデルを取得します。注: この API は、企業ポリシーによってインストールされた拡張機能でのみ使用できます。 文字列 文字列 ハードウェア プラットフォームのメーカーとモデルを取得し、拡張機能が承認されている場合は callback を介して返します。 関数(省略可) callback パラメータは次のようになります。
- Chrome 拡張機能
chrome.identity
chrome.identity API を使用して OAuth2 アクセス トークンを取得します。 文字列 アカウントの一意の識別子。この ID は、アカウントが存続期間中に変更されることはありません。 SYNC メイン アカウントで同期が有効になっていることを指定します。 "ANY" メイン アカウントが存在することを指定します(存在する場合)。 文字列 [] 省略可 拡張機能に付与されている OAuth2 スコープのリスト。 文字列(省略可) リクエストに関連付けられている特定のトークン。
- Chrome 拡張機能
chrome.devtools.recorder
chrome.devtools.recorder API を使用して、DevTools の [Recorder] パネルをカスタマイズします。 デベロッパー ツール API の使用方法の概要については、 DevTools API の概要 をご覧ください。 devtools.recorder API は、Chrome DevTools の [ Recorder パネル ] を拡張できるプレビュー機能です。 Chrome M105 以降では、エクスポート機能を拡張できます。Chrome M112
- Chrome 拡張機能
chrome.dom
chrome.dom API を使用して拡張機能用の特別な DOM API にアクセスする 指定された要素でホストされている、開いているシャドウルート、または閉じられたシャドウルートを取得します。この要素が Shadow ルートにアタッチされていない場合は、null が返されます。 HTMLElement オブジェクト https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot をご覧ください。
- Chrome 拡張機能
chrome.tabCapture
chrome.tabCapture API を使用して、タブのメディア ストリームを操作します。 chrome.tabCapture API を使用すると、動画とファイルを含む MediaStream にアクセスできます。 読み上げることもできますこれは、ユーザーが拡張機能を呼び出した後にのみ呼び出すことができます。 拡張機能の 操作ボタン をクリックする。これは Pod の IP アドレス activeTab 権限。 タブで MediaStream
- Chrome 拡張機能
chrome.webNavigation
chrome.webNavigation API を使用して、処理中のナビゲーション リクエストのステータスに関する通知を受け取ります。 すべての chrome.webNavigation メソッドとイベントで、「webNavigation」を宣言する必要があります。権限 拡張機能のマニフェスト 内で指定します。例: ナビゲーションが正常に完了すると、イベントは次の順序で発生します。 プロセス中にエラーが発生すると、 onErrorOccurred イベントが発生します。特定の
- Chrome 拡張機能
chrome.management
chrome.management API を使用すると、インストール済みのアプリと拡張機能を管理できます。 「management」として 拡張機能のマニフェスト で管理権限を使用するための権限を API例: management.getPermissionWarningsByManifest 、 management.uninstallSelf 、 management.getSelf には管理権限は必要ありません。 アイテムが無効になっている理由。 「不明」
- Chrome 拡張機能
chrome.topSites
chrome.topSites API を使用して、新しいタブページに表示される上位のサイト(よくアクセスするサイト)にアクセスします。ユーザーがカスタマイズしたショートカットは含まれません。 「topSites」をこの API を使用するには、 拡張機能のマニフェスト に権限を設定する必要があります。 この API を試すには、 chrome-extension-samples から topSites API の例 をインストールしてください。 できます。
- Chrome 拡張機能
chrome.search
デフォルトのプロバイダ経由で検索するには、 chrome.search API を使用します。 "CURRENT_TAB" 通話タブまたはアクティブなブラウザのタブに検索結果を表示することを指定します。 "NEW_TAB" 検索結果を新しいタブで表示するように指定します。 "NEW_WINDOW" 検索結果を新しいウィンドウで表示するように指定します。 Disposition オプション 検索結果を表示する場所。 CURRENT_TAB がデフォルトです。 数値(省略可)
- Chrome 拡張機能
chrome.idle
chrome.idle API を使用して、マシンのアイドル状態の変化を検出します。 「アイドル状態」であることを宣言する必要があります。アイドル状態の API を使用する権限を付与する必要があります。次に例を示します。 「有効」 "アイドル状態" 「ロック中」 アイドル状態のときに画面が自動的にロックされるまでの時間を秒単位で取得します。画面が自動的にロックされない場合は、期間 0 を返します。現在、ChromeOS でのみサポートされています。 関数(省略可) callback
- Chrome 拡張機能
chrome.types
chrome.types API には Chrome 用の型宣言が含まれています。 ChromeSetting プロトタイプは、共通の関数セット( get() 、 set() 、 clear() )を提供します。 また、Chrome ブラウザの設定にはイベント パブリッシャー( onChange )も使用できます。 プロキシ設定 例 は、これらの関数がどのように使用されるかを示しています。 Chrome では、次の 3 種類のブラウザ設定の範囲を区別しています。 Chrome
- Chrome 拡張機能
chrome.enterprise.deviceAttributes
デバイスの属性を読み取るには、 chrome.enterprise.deviceAttributes API を使用します。注: この API は、企業ポリシーによって自動インストールされた拡張機能でのみ使用できます。 管理者が注釈を付けたビジネスを取得します。現在のユーザーが関連付けられていない場合、または管理者によって位置情報のアノテーションが設定されていない場合は、空の文字列が返されます。 関数(省略可) callback パラメータは次のようになります。 文字列
- Chrome 拡張機能
chrome.windows
chrome.windows API を使用してブラウザ ウィンドウを操作します。この API を使用すると、ブラウザのウィンドウの作成、変更、並べ替えを行うことができます。 リクエストされると、 windows.Window には tabs.Tab オブジェクトの配列が含まれます。必要なこと url にアクセスする必要がある場合は、 マニフェスト で "tabs" 権限を宣言します。 pendingUrl 、 title 、または tabs.Tab の favIconUrl プロパティ。例:
- Chrome 拡張機能
chrome.power
chrome.power API を使用して、システムの電源管理機能をオーバーライドします。 デフォルトでは、オペレーティング システムはユーザーが非アクティブになると画面が暗くなり、最終的に ありませんPower API を使用すると、アプリや拡張機能でシステムを起動したままにすることができます。 この API を使用すると、電源管理を無効にする レベル を指定できます。 "system"
- Chrome 拡張機能
chrome.pageCapture
chrome.pageCapture API を使用してタブを MHTML として保存します。 MHTML は、ほとんどのブラウザでサポートされている 標準形式 です。ページを 1 つのファイルにカプセル化し そのすべてのリソース(CSS ファイル、画像など)が含まれます。 なお、セキュリティ上の理由から、MHTML ファイルはファイル システムからのみ読み込むことができます。また、 メインフレームでのみ読み込むことができます。 「pageCapture」をpageCapture
- Chrome 拡張機能
chrome.systemLog
chrome.systemLog API を使用して拡張機能から Chrome システムログを記録します。 文字列 新しいログレコードを追加します。 MessageOptions ロギングのオプション。 関数(省略可) callback パラメータは次のようになります。 約束 <void> Promise は Manifest V3 以降でのみサポートされています。他のプラットフォームではコールバックを使用する必要があります。
- Chrome 拡張機能
chrome.privacy
chrome.privacy API を使用して、ユーザーのプライバシーに影響する可能性がある Chrome の機能の使用を管理します。この API は、Chrome の構成を取得、設定するために、 API タイプの ChromeSetting プロトタイプ を使用します。 「プライバシー」を申告する必要があります拡張機能の マニフェスト で API の使用権限を付与する必要があります。次に例を示します。 Chrome 設定の現在値を簡単に読み取ることができます。まず、 次に、そのオブジェクトの
- Chrome 拡張機能
chrome.fileSystemProvider
chrome.fileSystemProvider API を使用してファイル システムを作成し、ChromeOS のファイル マネージャーからこのシステムにアクセスできるようにします。 「fileSystemProvider」を権限と、 拡張機能のマニフェスト のセクション(File System Provider API を使用するための設定)例: file_system_provider セクションは、次のように宣言する必要があります。 ファイルアプリは、関連する UI
- Chrome 拡張機能
chrome.notifications
chrome.notifications API を使用すると、テンプレートを使用してリッチ通知を作成し、システムトレイにその通知を表示できます。 文字列(省略可) Mac OS X ユーザーにはボタン アイコンが表示されません。 文字列 文字列 このアイテムに関する補足情報。 文字列 リスト通知の 1 つのアイテムのタイトル。 文字列(省略可) アプリアイコンのマスクは、Mac OS X ユーザーには表示されません。 アプリアイコン マスクの URL。URL には iconUrl
- Chrome 拡張機能
chrome.devtools.network
デベロッパー ツールの [Network] パネルに表示されるネットワーク リクエストに関する情報を取得するには、 chrome.devtools.network API を使用します。 この API を使用するには、次のキーを マニフェストで 宣言する必要があります。 デベロッパー ツール API の使用方法の概要については、 DevTools API の概要 をご覧ください。 ネットワーク リクエスト情報は、HTTP アーカイブ形式( HAR )で表されます。説明 HAR
- Chrome 拡張機能
chrome.downloads
この権限により 警告がトリガーされます chrome.downloads API を使用して、ダウンロードをプログラムで開始、モニタリング、操作、検索します。 この API を使用するには、 拡張機能のマニフェスト で "downloads" 権限を宣言する必要があります。 chrome.downloads API の簡単な使用例は、 examples/api/downloads にあります。 されます。その他の例とソースコードの表示については、 サンプル をご覧ください。 ブール値(省略可)
- Chrome 拡張機能
chrome.vpnProvider
chrome.vpnProvider API を使用して VPN クライアントを実装します。 vpnProvider の一般的な使用方法は次のとおりです。 createConfig メソッドを使用して VPN 構成を作成します。VPN 構成は永続的なエントリで、ネイティブの ChromeOS UI でユーザーに表示されます。ユーザーはリストから VPN 構成を選択して、接続または接続解除できます。 イベント onPlatformMessage 、 onPacketReceived 、
- Chrome 拡張機能
chrome.proxy
chrome.proxy API を使用して Chrome のプロキシ設定を管理します。この API は、 API タイプの ChromeSetting プロトタイプ を利用してプロキシ構成を取得、設定します。 「プロキシ」を宣言する必要があります。 拡張機能のマニフェスト でプロキシ設定を使用するための権限 API例: プロキシ設定は、 proxy.ProxyConfig オブジェクトで定義されます。Chrome のプロキシ設定によっては 設定には、 proxy.ProxyRules または
- Chrome 拡張機能
chrome.printerProvider
chrome.printerProvider API は、印刷マネージャーが使用するイベントを公開して、拡張機能で制御されるプリンタへのクエリ、拡張機能の機能の照会、これらのプリンタへの印刷ジョブの送信を行います。 文字列(省略可) 人が読める形式のプリンタの説明。 文字列 固有のプリンタ ID。 文字列 人間が読める形式のプリンタ名。 onPrintRequested イベントに応答して返されるエラーコード。 "OK" オペレーションが正常に完了したことを示します。 "FAILED"
- Chrome 拡張機能
chrome.events
chrome.events 名前空間には、重要なことが起きたときに通知するためにイベントをディスパッチする API で使用される一般的なタイプが含まれています。 Event は、何か興味深いことが起きたときに通知を受け取ることができるオブジェクトです。こちらが chrome.alarms.onAlarm イベントを使用して、アラームが経過するたびに通知されるようにする例: 例に示すように、 addListener() を使用して通知の登録を行います。この引数は、 addListener()
- Chrome 拡張機能
chrome.events
chrome.events 名前空間には、重要なことが起きたときに通知するためにイベントをディスパッチする API で使用される一般的なタイプが含まれています。 Event は、何か興味深いことが起きたときに通知を受け取ることができるオブジェクトです。こちらが chrome.alarms.onAlarm イベントを使用して、アラームが経過するたびに通知されるようにする例: 例に示すように、 addListener() を使用して通知の登録を行います。この引数は、 addListener()
- Chrome 拡張機能
chrome.idle
chrome.idle API を使用して、マシンのアイドル状態の変化を検出します。 アイドル状態の API を使用するには、拡張機能のマニフェストで "idle" 権限を宣言する必要があります。次に例を示します。 「有効」 "アイドル状態" 「ロック中」 アイドル状態のときに画面が自動的にロックされるまでの時間を秒単位で取得します。画面が自動的にロックされない場合は、期間 0 を返します。現在、ChromeOS でのみサポートされています。 関数(省略可) callback
- Chrome 拡張機能
chrome.offscreen
offscreen API を使用して、画面外ドキュメントを作成、管理します。 Offscreen API を使用するには、 拡張機能のマニフェスト で "offscreen" 権限を宣言します。例: Service Worker には DOM アクセスはなく、多くのウェブサイトには、 コンテンツ スクリプトの機能を制限する。Offscreen API を使用すると、拡張機能で DOM を使用できるようになります。 新しいウィンドウを開いたり、ユーザー
- Chrome 拡張機能
chrome.pageCapture
chrome.pageCapture API を使用してタブを MHTML として保存します。 MHTML は、ほとんどのブラウザでサポートされている 標準形式 です。ページを 1 つのファイルにカプセル化し そのすべてのリソース(CSS ファイル、画像など)が含まれます。 なお、セキュリティ上の理由から、MHTML ファイルはファイル システムからのみ読み込むことができます。また、 メインフレームでのみ読み込むことができます。 「pageCapture」をpageCapture
- Chrome 拡張機能
chrome.fileSystemProvider
chrome.fileSystemProvider API を使用してファイル システムを作成し、ChromeOS のファイル マネージャーからこのシステムにアクセスできるようにします。 「fileSystemProvider」を権限と、 拡張機能のマニフェスト のセクション(File System Provider API を使用するための設定)例: file_system_provider セクションは、次のように宣言する必要があります。 ファイルアプリは、関連する UI
- Chrome 拡張機能
chrome.dom
chrome.dom API を使用して拡張機能用の特別な DOM API にアクセスする 指定された要素でホストされている、開いているシャドウルート、または閉じられたシャドウルートを取得します。この要素が Shadow ルートにアタッチされていない場合は、null が返されます。 HTMLElement オブジェクト https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot をご覧ください。
- Chrome 拡張機能
chrome.debugger
chrome.debugger API は、Chrome の リモート デバッグ プロトコル の代替トランスポートとして機能します。 chrome.debugger を使用して 1 つ以上のタブにアタッチし、ネットワーク インタラクションの測定、JavaScript のデバッグ、DOM と CSS の変更などを行います。 Debuggee プロパティの tabId を使用して、 sendCommand でタブをターゲットにし、 onEvent コールバックからの tabId
- Chrome 拡張機能
chrome.management
chrome.management API を使用すると、インストール済みのアプリと拡張機能を管理できます。 「management」として 拡張機能のマニフェスト で管理権限を使用するための権限を API例: management.getPermissionWarningsByManifest() 、 management.uninstallSelf() 、 management.getSelf() には管理権限は必要ありません。 アイテムが無効になっている理由。 「不明」
- Chrome 拡張機能
chrome.omnibox
アドレスバー API を使用すると、Google Chrome のアドレスバーにキーワードを登録できます。アドレスバーはアドレスバーとも呼ばれます。 ユーザーが拡張機能のキーワードを入力すると、拡張機能のみの操作を開始する。 あります。キー入力はそれぞれ拡張機能に送信され、ユーザーはそれに対する候補を提示できます。 候補は、さまざまな方法で豊富な形式にできます。ユーザーが候補を承認すると 拡張機能が通知を受け、処理される可能性があります。 この API を使用するには、次のキーを マニフェストで
- Chrome 拡張機能
chrome.downloads
chrome.downloads API を使用して、ダウンロードをプログラムで開始、モニタリング、操作、検索します。 この API を使用するには、 拡張機能のマニフェスト で "downloads" 権限を宣言する必要があります。 chrome.downloads API の簡単な使用例は、 examples/api/downloads にあります。 されます。その他の例とソースコードの表示については、 サンプル をご覧ください。 ブール値(省略可) ブール値(省略可)
- Chrome 拡張機能
chrome.history
chrome.history API を使用して、アクセスしたページのブラウザの記録を操作します。ブラウザの履歴では、URL の追加、削除、照会を行うことができます。履歴ページを独自のバージョンでオーバーライドするには、 ページをオーバーライドする をご覧ください。 ユーザーのブラウザ履歴を操作するには、History API を使用します。 History API を使用するには、 拡張機能のマニフェスト で "history" 権限を宣言します。次に例を示します。 History API
- Chrome 拡張機能
chrome.notifications
chrome.notifications API を使用すると、テンプレートを使用してリッチ通知を作成し、システムトレイにその通知を表示できます。 文字列(省略可) Mac OS X ユーザーにはボタン アイコンが表示されません。 文字列 文字列 このアイテムに関する補足情報。 文字列 リスト通知の 1 つのアイテムのタイトル。 文字列(省略可) アプリアイコンのマスクは、Mac OS X ユーザーには表示されません。 アプリアイコン マスクの URL。URL には iconUrl
- Chrome 拡張機能
chrome.gcm
chrome.gcm を使用して、アプリと拡張機能が Firebase Cloud Messaging (FCM)でメッセージを送受信できるようにします。 メッセージ内のすべての Key-Value ペアの最大サイズ(バイト単位)。 4096 アプリケーションを FCM に登録します。登録 ID は callback によって返されます。同じ senderIds のリストを指定して register が再度呼び出されると、同じ登録 ID が返されます。 string[]
- Chrome 拡張機能
chrome.instanceID
chrome.instanceID を使用してインスタンス ID サービスにアクセスします。 アプリ インスタンス ID をリセットし、関連付けられているすべてのトークンを取り消します。 関数(省略可) callback パラメータは次のようになります。 約束 <void> Promise は Manifest V3 以降でサポートされていますが、 下位互換性が確保されます同じ関数呼び出しで両方を使用することはできません。「 Promise
- Chrome 拡張機能
chrome.loginState
chrome.loginState API を使用して、ログイン状態を読み取り、モニタリングします。 "SIGNIN_PROFILE" 拡張機能がログイン プロファイルにあることを指定します。 "USER_PROFILE" 拡張機能がユーザー プロフィールにあることを指定します。 "UNKNOWN" セッション状態が不明であることを指定します。 "IN_OOBE_SCREEN" ユーザーが開封確認画面にいることを指定します。 "IN_LOGIN_SCREEN"
- Chrome 拡張機能
chrome.platformKeys
chrome.platformKeys API を使用して、プラットフォームが管理するクライアント証明書にアクセスします。ユーザーまたはポリシーが権限を付与した場合、拡張機能はその証明書をカスタム認証プロトコルで使用できます。例:これにより、サードパーティの VPN でプラットフォームが管理する証明書を使用できるようになります( chrome.vpnProvider を参照)。 ArrayBuffer[] サーバーで許可されている認証局の識別名のリスト。各エントリは、DER でエンコードされた
- Chrome 拡張機能
chrome.identity
chrome.identity API を使用して OAuth2 アクセス トークンを取得します。 文字列 アカウントの一意の識別子。この ID は、アカウントが存続期間中に変更されることはありません。 SYNC メイン アカウントで同期が有効になっていることを指定します。 "ANY" メイン アカウントが存在することを指定します(存在する場合)。 文字列 [] 省略可 拡張機能に付与されている OAuth2 スコープのリスト。 文字列(省略可) リクエストに関連付けられている特定のトークン。
- Chrome 拡張機能
chrome.sockets.tcp
chrome.sockets.tcp API を使用して、TCP 接続を使用してネットワーク経由でデータを送受信します。この API は、 chrome.socket API に以前あった TCP 機能よりも優先されます。 この API を使用するには、次のキーを マニフェストで 宣言する必要があります。 数値 新しく作成されたソケットの ID。この API で作成されたソケット ID は、非推奨の [ socket ](../socket/) API など、他の API から作成されたソケット
chrome.hid
chrome.hid API を使用して、接続された HID デバイスを操作できます。この API を使用すると、アプリのコンテキストから HID オペレーションにアクセスできます。この API を使用すると、アプリはハードウェア デバイスのドライバとして機能します。この API によって生成されたエラーは、 runtime.lastError を設定して関数の通常のコールバックを実行することによって報告されます。この場合、コールバックの通常のパラメータは未定義になります。 数値(省略可)
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 の次期リリースのプレビューをご確認いただけます。
- Chrome
extensibility API を使用してパフォーマンス データをカスタマイズする
extensibility API を使用してパフォーマンス データをカスタマイズする
- Chrome DevTools
chrome.browsingData
chrome.browsingData API を使用して、ユーザーのローカル プロフィールから閲覧データを削除します。 この API を使用するには、 拡張機能のマニフェスト で "browsingData" 権限を宣言する必要があります。 この API
- Chrome 拡張機能
chrome.system.memory
chrome.system.memory API。 数値 使用可能な容量(バイト単位)。 数値 物理メモリ容量の合計(バイト単位)。 物理メモリ情報を取得します。 関数(省略可) callback パラメータは次のようになります。 MemoryInfo Promise&lt; MemoryInfo &gt; Promise は Manifest V3 以降でのみサポートされています。他のプラットフォームではコールバックを使用する必要があります。
- Chrome 拡張機能
chrome.dns
DNS 解決に chrome.dns API を使用します。 この API を使用するには、 マニフェスト で "dns" 権限を宣言する必要があります。 次のコードは、 resolve() を呼び出して example.com の IP アドレスを取得します。 service-worker.js: 文字列(省略可) IP アドレスのリテラルを表す文字列。resultCode が成功を示す場合にのみ提供されます。 数値 結果コード。0 は成功を示します。 指定されたホスト名または IP アドレス
- Chrome 拡張機能
API リファレンス
Chrome 拡張機能で利用できるすべての API の完全なリファレンス。これには、サポートが終了した Chrome アプリ プラットフォーム用の API や、ベータ版および開発中の API が含まれます。
- Chrome 拡張機能
Chrome DevTools
Chrome DevTools を使用して、ウェブ アプリケーションのデバッグと最適化を行います。
- Chrome DevTools
WebGPU の新機能(Chrome 128)
サブグループのテスト、線とポイントの深度バイアスの設定のサポート終了、未キャプチャ エラーの DevTools の警告の非表示(PreventDefault の場合)、WGSL が最初にサンプリングを補間する、その他。
- Chrome
- WebGpu
Chrome 128 の新機能
Chrome 128 がリリースされました。改行のある Ruby 要素の表示が改善され、Promise.try で Promise チェーンの開始が簡単になり、PointerEvent インターフェースが拡張されて複数のペンを一意に識別できるようになりました。その他、他にも多くの要素があります。Chrome 128 のデベロッパー向け新機能について、Adriana Jara が詳しく解説します。
- Chrome
Chromium のユーザー補助のパフォーマンスを改善
Ahmed Elwasefi が Google Summer of Code を通じて Chromium コントリビューターになった経緯を語った投稿。
- Chrome
Chrome 128
2024 年 8 月 20 日より、Chrome 128 のロールアウトが開始されます。CSS の ruby-align プロパティや Promise.try など、多数の機能が追加されています。
- Chrome
WebGPU でアプリをビルドする
ウェブおよび特定のプラットフォーム向けに WebGPU を使用してアプリを構築する方法を学びます。
File System Observer API のオリジン トライアル
Chrome チームは、ファイル システムへの変更をデベロッパーに通知する新しい File System Observer API をテストしています。
- Chrome
メディア: メディア プレーヤー情報の表示とデバッグ
メディアパネルを使用して、ブラウザタブごとに情報を表示し、メディア プレーヤーをデバッグします。
- Chrome DevTools
chrome.contentSettings
ウェブサイトが Cookie、JavaScript、プラグインなどの機能を使用できるかどうかを制御する設定を変更するには、 chrome.contentSettings API を使用します。大まかに言うと、コンテンツ設定では、Chrome の動作をグローバルではなくサイト単位でカスタマイズできます。 "contentSettings"権限があること。次に例を示します。 各コンテンツ設定が影響を及ぼすウェブサイトをパターンを使って指定できます。たとえば
- Chrome 拡張機能
chrome.alarms
chrome.alarms API を使用して、コードを定期的に、または将来の指定した時刻に実行するようにスケジュールします。 chrome.alarms API を使用するには、 マニフェスト で "alarms" 権限を宣言します。 以下の例は、アラームの使用方法と応答方法を示しています。この API を試すには、 chrome-extension-samples から Alarm API の例 をインストールする できます。 次の例では、拡張機能のインストール時に Service
- Chrome 拡張機能
chrome.contextMenus
chrome.contextMenus API を使用して、Google Chrome のコンテキスト メニューに項目を追加します。画像、ハイパーリンク、ページなど、コンテキスト メニューの追加を適用するオブジェクトの種類を選択できます。 コンテキスト メニューの項目は、file:// を含むドキュメント(またはドキュメント内のフレーム)に表示できます。 または chrome:// の URL を入力します。どのドキュメントにアイテムを表示するかを制御するには、 create() または
- Chrome 拡張機能
chrome.audio
chrome.audio API は、ユーザーがシステムに接続されているオーディオ機器に関する情報を取得してコントロールできるようにするために提供されます。この API は現在、ChromeOS のキオスクモードでのみ使用できます。 文字列 デバイス名。 DeviceType 端末のタイプ。 文字列 わかりやすい名前(「USB マイク」など)。 文字列 オーディオ機器の一意の識別子。 ブール値 現在アクティブなデバイスの場合は true。 数値 デバイスの音量、出力の音量、入力のゲイン。
- Chrome 拡張機能
chrome.commands
Command API を使用すると、拡張機能での操作(ブラウザの操作を開く操作や拡張機能にコマンドを送信する操作など)をトリガーするキーボード ショートカットを追加できます。 この API を使用するには、次のキーを マニフェストで 宣言する必要があります。 拡張機能のデベロッパーは Commands API を使用して特定のコマンドを定義し、それらをデフォルトにバインドできる できます。拡張機能が受け入れる各コマンドは、 拡張機能のマニフェスト 内の "commands" オブジェクト。
- Chrome 拡張機能
chrome.declarativeContent
chrome.declarativeContent API を使用すると、ページのコンテンツの読み取り権限がなくても、ページのコンテンツに応じてアクションを実行できます。 Declarative Content API を使用すると、アプリケーションの URL に応じて拡張機能のアクションを有効にできます。 また、CSS セレクタがページの要素と一致する場合に、 ホスト権限 を追加するか、 コンテンツ スクリプト を挿入します。 activeTab 権限を使用して、ユーザーが できます。
- Chrome 拡張機能
chrome.debugger
chrome.debugger API は、Chrome の リモート デバッグ プロトコル の代替トランスポートとして機能します。 chrome.debugger を使用して 1 つ以上のタブにアタッチし、ネットワーク インタラクションの測定、JavaScript のデバッグ、DOM と CSS の変更などを行います。 Debuggee プロパティの tabId を使用して、 sendCommand でタブをターゲットにし、 onEvent コールバックからの tabId
- Chrome 拡張機能
chrome.browsingData
chrome.browsingData API を使用して、ユーザーのローカル プロフィールから閲覧データを削除します。 「browsingData」を 拡張機能のマニフェスト で、この API を使用するための権限を設定する必要があります。 この API
- Chrome 拡張機能
File System Access API: ローカル ファイルへのアクセスを簡素化
File System Access API を使用すると、開発者は IDE、写真と動画のエディタ、テキスト エディタなど、ユーザーのローカル デバイス上のファイルを操作する高度なウェブアプリを作成できます。ユーザーがウェブアプリにアクセス権を付与すると、ユーザーはデバイス上のファイルやフォルダの変更を直接読み取り、保存できます。
Summarization API の早期プレビュー版が利用可能に
EPP の参加者は、Chrome で Gemini Nano の Summarization API を使用してプロトタイプを作成できるようになりました。
- Chrome
スクロール スナップ イベント
新しい JavaScript イベントを 2 つ導入しました。scrollSnapChange と ScrollSnap 試験
- Chrome
ソフト ナビゲーションの測定実験
Chrome チームは、シングルページ アプリケーションで使用されるいわゆるソフト ナビゲーションの測定精度の向上に取り組んでいます。また、新しい API をフラグの背後で使用し、サイトでもテストできるようにしています。
DevTools でスクリーンショットをキャプチャする 4 つの方法
DevTools でスクリーンショットをキャプチャする 4 つのユニークな方法を紹介します。
- Chrome DevTools
- Chrome
WebDriver BiDi を Firefox、Chrome、Puppeteer で本番環境に対応
Puppeteer 23 では、Firefox 129 以降の安定版サポートが導入され、WebDriver BiDi をベースとした Chrome と Firefox の自動化のための統合 API が提供されます。
- Chrome
DevTools の新機能(Chrome 128)
コンソールの分析情報をヨーロッパで公開したり、[パフォーマンス] パネルでトラックをカスタマイズするための強化されたネットワーク トラックと API を利用したりできます。
- Chrome DevTools
- Chrome
Blog
Chrome デベロッパー リレーションズ チームからの最新ニュース
- Chrome
Chrome の組み込みの AI 機能の試験運用版にご参加ください
組み込みの AI、Prompt API、Chrome の AI プランに関する最新情報
- Chrome
Android 版 Chrome のパスキー UX の更新
Android 版 Chrome に認証情報マネージャーが統合され、Android 14 以降でサードパーティのパスワード マネージャーがパスキーを提供できるようになりました
- Chrome
作成者が定義した CSS 名と Shadow DOM: 仕様上と実際
CSS の Shadow DOM で使用されている、作成者が定義した名前の現在の相互運用性の状況を説明します。
WebDriver BiDi による自動化が BrowserStack で利用可能に
BrowserStack が WebDriver BiDi のサポートを導入: イベント ドリブンの自動化で Selenium Grid テストを強化します。
- Chrome
正規表現以外の処理: Chrome DevTools の CSS 値の解析機能を強化
DevTools チームが [Styles] タブでのスタイルの表示を改善した方法をご覧ください。
- Chrome
Early Hints とともにサーバーの思考時間を使用してページ読み込みを高速化
重要なサブリソースに関するヒントをサーバーからブラウザに送信する方法をご確認ください。
CrUX API
CrUX API に対するリクエストを作成し、レスポンスを解析する方法について説明します。
- Chrome UX レポート
CrUX History API
CrUX History API を使用して、過去 6 か月間の過去の CrUX の傾向をクエリする方法を学びます。
- Chrome UX レポート
改行可能な ruby 要素と CSS ruby-align プロパティ
改行可能な ruby 要素と CSS ruby-align プロパティ
- Chrome
ネットワーク パネル: ネットワークの負荷とリソースを分析する
ネットワークの負荷とリソースを分析する
- Chrome DevTools
サンプル
Chrome 拡張機能のサンプルは GitHub で入手できます。
- Chrome 拡張機能
アプリを公開する
TODO
- Chrome 拡張機能
マニフェスト - バージョン
この拡張機能のバージョンを識別する、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
Chrome 127 の新機能
Chrome 127 がリリースされました。font-size-adjust のサポートにより、Document Picture-in-Picture API、キーボードのフォーカス可能なスクロール コンテナなど、多くのユーザー アクティベーションが伝播されます。Chrome 127 のデベロッパー向け新機能について、Adriana Jara が詳しく解説します。
- Chrome
ユーザーが重要なアプリのインストールを Chrome でサポートする方法
Chrome の内部ユーザー調査によると、多くのユーザーはウェブアプリのインストールを重視しています。次のようなメリットがあります。 Chrome とウェブ デベロッパーが支援する方法は複数あります。たとえば、新しい ML プロモーション機能などです。この記事では、ユーザーがアプリをインストールする方法の概要について説明します。 Chrome の インストール可能条件 を満たすアプリには、Chrome デスクトップ ブラウザのアドレスバーにインストール
- Chrome
WebGPU の新機能(Chrome 127)
Android での OpenGL ES の試験運用版のサポート、GPUAdapter 情報属性、WebAssembly の相互運用の改善など。
- Chrome
- WebGpu
Chrome 127
2024 年 7 月 23 日より、Chrome 127 のロールアウトが開始されます。CSS の font-size-adjust や、キーボードのフォーカス可能なスクロール コンテナなど、多数の機能が盛り込まれています。
- Chrome
読み取りフローと display: コンテンツを使用した要素に関するデベロッパー フィードバックのお願い
読み上げフローがお客様のニーズに合ったものになるよう、ぜひご協力ください。
- Chrome
ネットワーク機能のリファレンス
Chrome DevTools の [Network] パネルの機能に関する包括的なリファレンスです。
- Chrome DevTools
設定
[設定] タブのリファレンス。
- Chrome DevTools
レコーダー パネル: ユーザーフローを記録して測定する
ユーザーフローを分析、記録する。
- Chrome DevTools
ビュー遷移に関する誤解
View Transition API を検討する人が増えている今、いくつかの誤解を解くときが来ています。
- Chrome
Chrome 拡張機能: ポリシーの重要な更新
このお知らせでは、デベロッパー プログラム ポリシーのページを更新し、高品質のプロダクトの開発を促し、虚偽の振る舞いを防止し、ユーザーが十分な情報に基づき同意を得ることを目的にしています。
- Chrome
- Chrome 拡張機能
Chrome 拡張機能の変更内容
Chrome 拡張機能の最近の変更の概要と、今後リリースが予定されている拡張機能に関するデベロッパー向けのご案内です。
- Chrome 拡張機能
- Chrome
DevTools の新機能(Chrome 127)
Elements での CSS アンカー配置、Sources の「Never Pause Here」の拡張、新しいスクロール スナップ イベント リスナー、更新されたネットワーク スロットリング プリセットなど。
- Chrome DevTools
- Chrome
検査モード: 要素のプロパティをすばやく分析する
ウェブアプリの要素を検査する
- Chrome DevTools
パフォーマンス機能のリファレンス
Chrome DevTools でパフォーマンスを記録、分析するためのあらゆる方法に関するリファレンスです。
- Chrome DevTools
YouTube に Trusted Types を導入
YouTube は、クロスサイト スクリプティング攻撃を防ぐために Trusted Types を使用してプラットフォームのセキュリティを強化していますが、拡張機能に影響する可能性があります。
- Chrome
- Chrome 拡張機能
Long Animation Frame API をリリース
Long Animation Frame API(LoAF)は Chrome 123 からリリースされました。また、この新しい API を最大限に活用できるように、ツールとガイダンスも更新しました。
- Chrome
過度な DOM サイズの回避
DOM サイズが大きいとウェブページのパフォーマンスが低下する仕組みと、読み込み時に DOM のサイズを小さくする方法をご確認ください。
Chrome でページを事前レンダリングしてページ ナビゲーションを即時に行う
Chrome チームでは、ユーザーがアクセスする可能性の高い今後のページを完全に事前レンダリングする機能の開発に取り組んできました。
Chrome ウェブストアの舞台裏: 信頼性と安全性について質問する
Chrome ウェブストアのレビューを担当するチームと話し合いました。
- Chrome
- Chrome 拡張機能
ストレージ バケットでの IndexedDB の最大パフォーマンス
Chrome チームは、IndexedDB(IDB)の実装に関して、パフォーマンス関連のいくつかの改善を行いました。
- Chrome
ブラウザに AI モデルをキャッシュに保存する
AI を活用したアプリケーションの今後のリリースを迅速化するには、モデルデータをデバイス上に明示的にキャッシュに保存します。
WebGPU の新機能(Chrome 126)
maxTextureArrayLayers の上限の引き上げ、Vulkan バックエンドのバッファ アップロードの最適化、シェーダーのコンパイル時間の改善、送信されるコマンド バッファの一意性の確保、Dawn の更新。
- Chrome
- WebGpu
新しい HTML <permission>> 要素のオリジン トライアル
Chrome チームは、ユーザーに強力な機能へのアクセスをリクエストする、新しい宣言型の HTML <権限>要素をテストしています。
- Chrome
Chrome 127 ベータ版
ベータ版をダウンロードすると、Chrome の最新機能をお試しいただけます。
- Chrome
CSS とウェブ UI の最新情報: I/O 2024 のまとめ
Google I/O 2024 での CSS とウェブ UI に関するすべてのお知らせをお読みください。
- Chrome
Chrome 126
Chrome 126 は 2024 年 6 月 11 日にリリースが開始されます。ドキュメント間のビュー遷移、CloseWatcher API の再有効化、Gamepad API のトリガー ランブルなど、多くの機能が追加されています。
- Chrome
Chrome 126 の新機能
Chrome 126 がリリースされました。ViewTransitions API でのドキュメント間の遷移のサポートにより、CloseWatcher API が再度有効化され、Gamepad API に対してトリガー ランブルが行われるなど、多くの機能が追加されています。Adriana Jara が、Chrome 126 のデベロッパー向けの新機能について詳しく説明しています。
- Chrome
アンロード イベントの非推奨
アンロード イベントは、Chrome 117 以降、段階的にサポート終了となります。この変更の意味と、サイトや企業がこれに備える方法についてご確認ください
プロトコル モニター: CDP リクエストの表示と送信
CDP のリクエストとレスポンスをモニタリングする。
- Chrome DevTools
DevTools のパフォーマンス ワークフローをカスタマイズするための 3 つの新機能
パフォーマンス パネルを整理し、必要な情報に焦点を合わせるのに役立つ最新機能について学びましょう
- Chrome
- Chrome DevTools
Chrome UX Report
CrUX 指標に関する技術ドキュメント。
- Chrome UX レポート
スタイル再計算イベント中の CSS セレクタのパフォーマンスを分析する
スタイル再計算イベント中の CSS セレクタのパフォーマンスを分析します。
- Chrome DevTools
広告表示オプションに適用される変更の確認をスキップする
このたび、Declarative Net Request API を使用して、Manifest V3 拡張機能に対する対象となる変更の審査プロセスをスキップできる新機能をリリースいたしました。
- Chrome
幅または初期スケールのタグがない
Lighthouse の監査結果については、「幅または初期スケールのタグがない」をご覧ください。
ネットワーク条件: ユーザー エージェント文字列をオーバーライドする
[ネットワークの状態] パネルで他のブラウザをエミュレートする方法をご確認ください。
- Chrome DevTools
DevTools の新機能(Chrome 126)
トラック構成モードの改善、フレームチャートの無視リスト、[パフォーマンス] パネルでの CPU の 20 倍のスロットリングなど。
- Chrome
- Chrome DevTools
JavaScript をデバッグする
Chrome DevTools を使用して JavaScript のバグを見つけて修正する方法をご確認ください。
- Chrome DevTools
Google I/O 2024 における Chrome 拡張機能
開催後は Google I/O を開催し、拡張機能に関する最新情報をすべてご紹介しました。
- Chrome
Chrome DevTools で投機ルールをデバッグする
今後のページ ナビゲーションのプリフェッチと事前レンダリングに使用される推測ルールをデバッグするための Chrome DevTools の機能について、すべて学習します。
- Chrome DevTools
クイック ソース パネル
ソースファイルを表示し、他のツールにアクセスする。
- Chrome DevTools
パフォーマンス モニター パネル
ウェブサイトのランタイム パフォーマンスをリアルタイムで分析します。
- Chrome DevTools
AI で商品レビューを評価する
オンデバイス AI は、センシティブ データを保護してレイテンシを改善しながら、パワフルなモデルをユーザーに提供するための最新のサービスです。
ビュー遷移の新機能(Google I/O 2024 の更新)
MPA のドキュメント間のビュー遷移、アクティブ タイプによる選択的なビュー遷移、ビュー遷移クラスを使用したアニメーション スタイルの共有を発表しました。
- Chrome
Web AI を高速化するための WebAssembly と WebGPU の機能強化、パート 2
パート 2/2.WebAssembly と WebGPU の拡張機能により、ウェブ上での機械学習のパフォーマンスがどのように向上するかについて説明します。
- Chrome
I/O 2024 ウェブ AI のまとめ: ウェブアプリ用の新しいモデル、ツール、API
I/O 2024 でウェブ AI のまとめをご覧ください。ウェブアプリの新たなモデル、ツール、API をご紹介します。
- Chrome
- WebGpu
クライアントサイドのウェブ AI で有益な商品レビューを促進する
次の Codelab では、クライアントサイド AI について説明します。AI 開発の知識、サーバー、API キーは必要ありません。
Chrome 126 ベータ版
Chrome 126 ベータ版には、ドキュメント間のビュー遷移や、Gamepad API トリガーランブル拡張機能などの機能が含まれています。
- Chrome
WebAssembly と WebGPU の強化による Web AI の高速化、パート 1
パート 1/2。WebAssembly と WebGPU の強化により、ウェブ上での ML のパフォーマンスがどのように向上するかについて学びます。
- Chrome
JavaScript フレームワークの新機能(2024 年 5 月)
このドキュメントでは、JavaScript フレームワーク エコシステムの最近の動向を簡単にご紹介します。
- Chrome
Windows での UIA サポートの導入
Chrome 126 以降では、Windows UI オートメーション フレームワークがサポートされています。
- Chrome
Async Clipboard API 向け SVG サポート
Async Clipboard API で SVG 画像を処理できるようになりました。
- Chrome
DevTools のヒント: ネットワーク レスポンスをオーバーライドしてモックする
DevTools を使用してネットワーク レスポンスをオーバーライドしてモックする方法について説明します。
- Chrome
- Chrome DevTools
Google I/O 2024 で発表された 10 の最新情報: すべてのウェブ デベロッパーのために AI の力を活用
Google I/O デベロッパー基調講演とセッションから、優れた機能をご紹介します。
- Chrome
Chrome 125
Chrome 125 は 2024 年 5 月 14 日にリリースが開始され、CSS Anchor Positioning、Compute Pressure API、新しい Baseline 機能など、多数の新機能が追加されます。
- Chrome
クライアントサイド AI を選択するタイミング
クライアントサイド AI は、センシティブ データを保護し、レイテンシを改善しながら、強力なモデルをユーザーに提供する最新のサービスです。
Chrome 125 の新機能
Chrome 125 がリリースされました。CSS Anchor Positioning API、Compute Pressure API、Storage Access API への拡張など、多数の機能が用意されています。Adriana Jara が、Chrome 125 のデベロッパー向けの新機能について詳しく説明しています。
- Chrome
ウェブ コンテンツと HTTP レスポンス ヘッダーをローカルでオーバーライドする
ローカル オーバーライドを使用してリモート リソースをモックし、ページ読み込み後も DevTools で行った変更を保持します。
- Chrome DevTools
Spotify が Picture-in-Picture API を使用して Spotify ミニプレーヤーを開発した方法
Spotify ミニプレーヤーが、キャンバスをハックする機能から Document Picture-in-Picture API によって実現される洗練されたエクスペリエンスへと進化した方法をご紹介します。
- Chrome
CSS アンカー ポジショニング API のご紹介
新しい Anchor Positioning API を使用して、要素を互いに相対的に配置します。
- Chrome
コンソール分析情報でエラーと警告をより深く理解する
Gemini を使用すると、コンソール内のエラーと警告についての理解を深めることができます。
- Chrome DevTools
Chrome を使用して企業にテストを実装する
エンタープライズ環境でのテストで課題を克服する方法について学ぶ
- Chrome
スムーズな自動テストを実現する Chrome のツール
Puppeteer、Chrome ヘッドレス、Chrome for Testing の概要と、Chrome ツールチームが提供したその他のリソースです。
- Chrome
DevTools の新機能(Chrome 125)
コンソールのエラーの原因、パフォーマンスの CSS セレクタの統計情報、ネットワークの Early Hints ヘッダーなど。
- Chrome
- Chrome DevTools
WebGPU の新機能(Chrome 125)
開発中のサブグループは、3D テクスチャのスライスにレンダリングされます。
- Chrome
- WebGpu
スクロールドリブン アニメーションの事例紹介
Policybazaar、redBus、Tokopedia のスクロールドリブン アニメーションのメリットをご確認ください。
- Chrome
:has() の事例紹介
Policybazaar と Tokopedia が :has() を使用することでどのようなメリットが得られるかをご覧ください。
- Chrome
e コマースサイトで CSS と UI の機能が重要な理由
最新の CSS や UI 機能(ビュー遷移、スクロールドリブン アニメーション、Popover API など)を実装することで、e コマースサイトがどのように役立つかを学びます。
- Chrome
コンテナクエリに関する事例紹介
redBus と Tokopedia のコンテナクエリのメリットについて説明します。
- Chrome
移行の事例紹介を見る
redBus、Policybazaar、Tokopedia のいずれも View Transition API を使用しており、パフォーマンスと滑らかな UI の恩恵を受けています。
- Chrome
「スクロールドリブン アニメーションの力を活用」のご紹介
スクロールドリブン アニメーションのすべてを学ぶ、全 10 部の動画コースです
- Chrome
WebGPU の概要
WebGPU により、ウェブ上で高性能 3D グラフィックスとデータ並列計算を実行できます。
- WebGpu
CSS メーソンリーの代替案
メーソンリーとグリッドを異なる仕様で定義するための提案。
- Chrome
マニフェスト - Chrome の最小バージョン
manifest.json の minimum_chrome_version プロパティに関するリファレンス ドキュメント。
- Chrome 拡張機能
ポップオーバーの事例紹介
Tokopedia は、Popover API を使用してアプリケーションのコード量を削減しています。
- Chrome
セキュアでないコンテキストのプライベート ネットワーク アクセス(PNA)の非推奨トライアルが終了します - PNA 権限プロンプトを実装してください
HTTPS に変換できないウェブサイトからプライベート ネットワーク デバイスにアクセスするには、権限プロンプトを使用して混合コンテンツのチェックを緩和する必要があります。
- Chrome
キャプチャしたタブをスクロールしてズームする
Captured Surface Control API を使用すると、ウェブアプリでキャプチャされたタブをスクロールしたりズームしたりできます。
マニフェスト - トライアル トークン
manifest.json の trial_tokens プロパティのリファレンス ドキュメント。
- Chrome 拡張機能
WebAudio: WebAudio API の指標を表示する
WebAudio パネルで WebAudio API の指標を表示する
- Chrome DevTools
Chrome 125 ベータ版
CSS Anchor Positioning、CSS のステップ関数、Compute Pressure API など。
- Chrome
カスタム スプラッシュ画面用に設定されていない
プログレッシブ ウェブアプリ用のカスタム スプラッシュ画面を作成する方法について説明します。
有効な apple-touch-icon が指定されていません
プログレッシブ ウェブアプリで iOS のホーム画面に表示するアイコンを指定する方法について説明します。
page と start_url を制御する Service Worker を登録しない
プログレッシブ ウェブアプリの機能(オフライン機能、プッシュ通知、インストール可能性など)をサポートする Service Worker の登録方法について説明します。
ウェブアプリ マニフェストがインストール要件を満たしていません
プログレッシブ ウェブアプリをインストールできるようにする方法をご覧ください。
アニメーション: CSS のアニメーション効果を調査して変更する
[Animations] パネルでアニメーションを調査し、変更します。
- Chrome DevTools
Chrome 124
Chrome 124 は 2024 年 4 月 16 日にリリースが開始されます。setHTMLUnsafe や WebSocket のストリームなど、多くの機能が追加されます。
- Chrome
コンテンツがビューポートに合わせて適切にサイズ設定されていません
ウェブページのコンテンツをモバイル画面に合わせてサイズ設定する方法について説明します。
クロスブラウザ対応のサイト
Workbox を使用してウェブページがどのブラウザでも動作するようにする方法を説明します。
現在のページはオフライン時に 200 の応答がありません
プログレッシブ ウェブアプリをオフラインで動作させる方法をご紹介します。
モバイル ネットワーク使用時のページ読み込み速度が十分ではありません
モバイル ネットワーク上でウェブページをすばやく読み込めるようにする方法について説明します。
アドレスバーのテーマカラーが設定されていない
プログレッシブ ウェブアプリのアドレスバーのテーマの色を設定する方法について説明します。
ページの切り替えがネットワーク上での妨げにならない
ネットワーク速度が遅い場合でも、ウェブページ間の遷移をレスポンシブにする方法を説明します。
Chrome 拡張機能の変更内容
Chrome 拡張機能の最近の変更の概要と、今後リリースが予定されている拡張機能に関するデベロッパー向けのご案内です。
- Chrome
- Chrome 拡張機能
自動入力: 保存した住所の検査とデバッグ
自動入力パネルを使用すると、Chrome に保存されている住所を検査してデバッグできます。
- Chrome DevTools
Foldable API のオリジン トライアル
Foldable API は、デベロッパーが折りたたみ式デバイスをターゲットにできるように設計された Chrome の 2 つの API です。
- Chrome
Chrome 124 の新機能
Chrome 124 がリリースされました。JavaScript から宣言型 Shadow DOM を使用できるようにする新しい API が 2 つあります。Web Sockets でストリームを使用できます。ビュー遷移が改良されました他にもたくさんあります。Chrome 124 におけるデベロッパー向けの新機能について、Pete LePage が詳しく説明しています。
- Chrome
JavaScript が利用できない場合の代替コンテンツを提供しない
JavaScript が利用できない場合に、ユーザーがウェブページの少なくとも一部のコンテンツを表示できるようにする方法をご覧ください。
MIDI デバイスにアクセスするにはユーザー権限が必要になりました
Chrome では、権限プロンプトによって Web MIDI API 全体を制御できるようになりました。
- Chrome
HTTPS を使用しない
HTTPS でウェブサイトを保護する方法をご覧ください。
HTTP トラフィックを HTTPS にリダイレクトしない
すべてのページを HTTPS にリダイレクトして、サイトのセキュリティを強化する方法をご確認ください。
スロットル処理
[スロットル処理] タブのリファレンス。
- Chrome DevTools
各ページに URL がある
Lighthouse では「各ページに URL がある」の監査について解説します。
マニフェストにマスク可能なアイコンが含まれていません
マスク可能なアイコンのサポートを PWA に追加する方法について説明します。
オフラインのときに start_url が 200 の応答を返さない
プログレッシブ ウェブアプリの start_url を設定して、アプリがオフラインでアクセスできるようにする方法を説明します。
マルチページ アプリケーションのドキュメント間のビュー遷移
マルチページ アプリケーション(MPA)で使用するために、ドキュメント間のビュー移行を開始します。
View Transition API によるスムーズな遷移
View Transition API を使用すると、ウェブサイトのビュー間の遷移を追加できます。
パワフルで楽しい: Chrome DevTools の概要
DevTools でウェブ アプリケーション開発を改善する方法をご確認ください。
- Chrome DevTools
- Chrome
WebGPU の新機能(Chrome 124)
読み取り専用と読み取り / 書き込みのストレージ テクスチャ、Service Worker と共有ワーカーのサポート、新しいアダプタ情報属性、バグの修正。
- Chrome
- WebGpu
CrUX で使用可能なナビゲーション タイプ
Chrome ユーザー エクスペリエンス レポート(CrUX)の新しい nav_types 指標と、この指標を使用してウェブ パフォーマンス指標を説明および最適化する方法について説明します。
- Chrome
PageSpeed Insights で Chrome UX レポートデータを表示する方法
PageSpeed Insights(PSI)は、ページのパフォーマンスとその改善方法を把握するためのウェブ デベロッパー向けツールです。このガイドでは、PSI を使用して CrUX から分析情報を抽出し、ユーザー エクスペリエンスについての理解を深める方法について説明します。
- Chrome UX レポート
CrUX ガイド
わかりやすいガイドで CrUX の使い方を学ぶ
- Chrome UX レポート
Chrome ウェブストア デベロッパー ダッシュボードでのバージョン ロールバック
今週、デベロッパーが Chrome ウェブストアで公開済みの以前のバージョンに拡張機能をロールバックできる新機能をリリースします。Google の目標は、特に Manifest V3 への移行に伴い、デベロッパーがアップデートを公開する際に安心していただけるようにすることです。 本日より、バグ修正を含む拡張機能の新しいバージョンを送信して審査に合格するまで待つ必要がなくなります。代わりに、[ その他 ] メニューまたはアイテムのパッケージ ページからロールバックを開始できます。
- Chrome
- Chrome 拡張機能
BigQuery の CrUX
BigQuery の CrUX データセットの構造について学習する。
- Chrome UX レポート
ウェブフォントの読み込み時にテキストが表示されたままにする
font-display API を使用して、ウェブページのテキストが常にユーザーに表示されるようにする方法を学習します。
JS Profiler は廃止され、[パフォーマンス] パネルで CPU をプロファイリングする
CPU パフォーマンスをプロファイリングする今後のプロセスと、JavaScript Profiler を非推奨とする理由とその方法について説明します。
- Chrome
DevTools の新機能(Chrome 124)
スクロールドリブン アニメーションのサポート、新しい自動入力パネル、ネットワーク スロットリングにおける WebRTC の新しいオプションなど。
- Chrome
- Chrome DevTools
バックフォワード キャッシュの notRestoredReasons API
ドキュメント内のフレームがナビゲーション時にバックフォワード キャッシュの使用をブロックされたかどうかについて、情報をレポートします。
[パフォーマンス] パネルで Node.js のパフォーマンスをプロファイリングする
[パフォーマンス] パネルで Node.js アプリケーションのパフォーマンスをプロファイリングする方法について説明します。
- Chrome DevTools
WebAssembly JavaScript Promise 統合(JSPI)のオリジン トライアルの開始
JavaScript Promise Integration(JSPI)は、WebAssembly にコンパイルされた同期シーケンシャル コードが非同期 Web API にアクセスできるようにする API です。
- Chrome
fetchLater API オリジン トライアル
fetchLater API(現在はオリジン トライアルで)について説明します。この API は、ページが閉じられていても完了する遅延フェッチをリクエストする新しい API です。
- Chrome
ネットワーク リクエスト: ネットワーク リクエストをブロックしてサイトをテストする
不足しているリソースをサイトでどのように処理するかをテストします。
- Chrome DevTools
キーボードのフォーカス可能なスクローラー
tabindex 値が設定されていないスクローラーと、フォーカス可能な子のないスクローラーを、キーボードでフォーカス可能にするための変更がロールアウトされます。
- Chrome
Chrome 124 ベータ版
書き込み候補の HTML 属性、WebSocketStream API、優先 HTTP リクエスト ヘッダーなど。
- Chrome
Chrome 123 の新機能
Chrome 123 がリリースされました。新しい Light-dark 関数、Long Animation Frames API、Service Worker Static Routing API など、多くの機能があります。Adriana Jara が、Chrome 123 のデベロッパー向けの新機能について詳しく説明しています。
- Chrome
プライベート ネットワーク アクセス: ウェブワーカーとナビゲーション フェッチに対する保護の強化
ウェブ ワーカー、ナビゲーション フェッチ、今後の保護のためのプライベート ネットワーク アクセスの主なセキュリティ メカニズムについて説明します。このドキュメントでは、ウェブサイトの所有者がプライベート ネットワークを利用する場合に行うべきことについても説明します。
- Chrome
Service Worker Static Routing API を使用して、特定のパスで Service Worker をバイパスする
Chrome 123 から提供されるこの新しい API の使用方法をご確認ください。
- Chrome
拡張機能のリクエストの非表示と [ネットワーク] パネルの改善点
Chrome DevTools の [Network] パネルの最新の改善点をご確認ください。このパネルはウェブ デバッグをシンプルにするために設計されています。
- Chrome DevTools
- Chrome
2024 年以降のパフォーマンス ツール
DevTools の [パフォーマンス] パネルを改善するための Chrome チームの計画についてご確認ください。
- Chrome DevTools
- Chrome
[要素] パネルの概要
DOM に即座に変更を加える。
- Chrome DevTools
他のエフェクトを適用する: 自動ダークモードの有効化、フォーカスのエミュレーションなど
広告フレームのハイライト表示、ページ上でのフォーカスのエミュレーション、ローカルのフォントと画像形式の無効化、自動ダークテーマの有効化、視覚障がい者のエミュレーションを行うことができます。
- Chrome DevTools
CSS 機能リファレンス
Chrome DevTools で CSS を表示、変更するための新しいワークフローをご覧ください。
- Chrome DevTools
ブレークポイントでコードを一時停止する
Chrome DevTools でコードを一時停止する方法をすべてご紹介します。
- Chrome DevTools
CSS の表示と変更
Chrome DevTools を使用してページの CSS を表示、変更する方法について説明します。
- Chrome DevTools
WebGPU の新機能(Chrome 123)
DP4a 組み込み関数のサポート、制限のないポインタ パラメータ、WGSL で複合を逆参照するための構文シュガーなど。
- Chrome
- WebGpu
共有辞書で圧縮効率を向上
ウェブでの圧縮は、共有辞書圧縮によって大幅に強化されています。圧縮がどのようなもので、どのように機能するのか、ウェブ上の静的リソースと動的リソースの両方について、標準の圧縮よりもさらに読み込み時間を大幅に短縮できる方法をご確認ください。
- Chrome
古いヘッドレス Chrome を chrome-headless-shell としてダウンロードします
ユーザー向けのすべての Chrome リリースで、古いヘッドレス Chrome をスタンドアロン バイナリとしてダウンロードできるようになりました。
- Chrome
アプリケーション パネルの概要
ウェブアプリに関する重要な情報をブラウザから直接取得できます。
- Chrome DevTools
インターフェースを国際化する
chrome.i18n API を使用して、複数の言語でインターフェースをレンダリングします。
- Chrome 拡張機能
Speculation Rules API を改善
ドキュメント ルール、積極性の設定、制限、プラットフォームでの投機ルールのサポートなど、Speculation Rules API の最新アップデートの詳細を示します。
- Chrome
拡張機能にアクセスできるようにする
多くのユーザーにとって、ユーザー補助は文字どおりユーザー インターフェースであり、その機能は他の多くのユーザーにとって有用です。
- Chrome 拡張機能
新機能の概要
Chrome DevTools の最新機能のご紹介
- Chrome DevTools
Chrome 拡張機能: Service Worker の停止をテストする方法
この投稿では、Eyeo のチームが、拡張機能 Service Worker のテストに関する問題への道のりを紹介します。特に、Service Worker が停止したときに Chrome 拡張機能が正しく動作するかどうかを確認する方法について説明します。
- Chrome 拡張機能
- Chrome
DevTools の新機能(Chrome 123)
イースター エッグ、[要素] > [スタイル] のフォーカスされたページ エミュレーション、新しい Lighthouse 監査など。
- Chrome
- Chrome DevTools
サードパーティ ライブラリを管理するための Next.js パッケージ
@next/third-parties ライブラリを使用して一般的なサードパーティ リソースの読み込みを最適化する方法を確認する
- Chrome
Chrome 123 ベータ版
CSS の light-dark() カラー関数、ブロックの align-content、フィールド サイズ設定のプロパティ、pagereveal イベント。
- Chrome
ブロック レイアウトとテーブル レイアウトでの align-content のサポート
Chrome 123 以降では、フレックス コンテナやグリッド コンテナを作成せずに、Align-content を使用してアイテムを配置できます。
- Chrome
Chrome 122 の新機能
Chrome 122 がリリースされました。新しい Storage Buckets API では、DevTools の [パフォーマンス] パネルが更新され、Async Clipboard API で HTML を読み取るためのサニタイズされていないオプションなど、さまざまな機能が追加されました。Adriana Jara が、Chrome 122 のデベロッパー向けの新機能について詳しく説明しています。
- Chrome
キーボードショートカット
Chrome DevTools のキーボード ショートカットに関する正規のドキュメントです。
- Chrome DevTools
Device Mode でモバイル デバイスをシミュレートする
Chrome のデバイスモードで仮想デバイスを使用して、モバイルファースト ウェブサイトを構築します。
- Chrome DevTools
CSS ::backdrop の継承に関する変更
Chrome 122 以降、「::backdrop」要素は元の要素からプロパティを継承します。
- Chrome
拡張機能アイコンを設定する
ツールバーで拡張機能を表すには、アイコンが 1 つ以上必要です。
- Chrome 拡張機能
パフォーマンスに関するパネル表示でパフォーマンス パネルを 400% 高速化
DevTools の [パフォーマンス] パネルは、ウェブアプリのパフォーマンスの問題を診断、デバッグ、修正するための強力なツールです。今回は、DevTools の [パフォーマンス] パネルを使用してパフォーマンス パネル自体のパフォーマンスをどのように改善したか、またどのように大幅な改善を達成したかをご紹介します。
- Chrome
Chrome Extensions
TBD
- Chrome 拡張機能
WebHID を使用する
ヒューマン インターフェース デバイス(HID)対応デバイスをウェブに公開する WebHID API を拡張機能でご利用いただけます。
- Chrome 拡張機能
WebUSB の使用
標準以外の USB(Universal Serial Bus)対応デバイスをウェブに公開するための WebUSB API を拡張機能で利用できます。
- Chrome 拡張機能
Manifest V3 に移行する
Manifest V2 拡張機能を Manifest V3 拡張機能に変換するためのガイド。
- Chrome 拡張機能
マニフェスト - コンテンツ セキュリティ ポリシー
manifest.json のコンテンツ セキュリティ ポリシー プロパティのリファレンス ドキュメント。
- Chrome 拡張機能
WebGPU の新機能(Chrome 122)
開発中の互換モード、maxVertexAttributes の上限の引き上げ、Dawn の更新。
- Chrome
- WebGpu
ヒープ スナップショットを記録する
ヒープ プロファイラを使用してヒープ スナップショットを記録し、メモリリークを見つける方法について説明します。
- Chrome DevTools
CSS のフィールド サイズ設定
1 行のコード。編集可能なコンテンツを含む要素の自動サイズ調整。
chrome.runtime
chrome.runtime API を使用して、サービス ワーカーを取得し、マニフェストの詳細を返します。また、拡張機能のライフサイクルでイベントをリッスンして応答します。この API を使用して、URL の相対パスを完全修飾 URL に変換することもできます。 この API のほとんどのメンバーには権限は必要 ありません 。この権限は、 connectNative() 、 sendNativeMessage() 、 onNativeConnect に必要です。 次の例は、マニフェストで
- Chrome 拡張機能
権限に関する警告のガイドライン
Chrome 拡張機能の権限の警告の仕組み
- Chrome 拡張機能
権限を宣言する
manifest.json 内の権限プロパティの有効な値の概要。
- Chrome 拡張機能
ウェブプッシュを使用する
Chrome 拡張機能でウェブプッシュを使用する手順ガイド
- Chrome 拡張機能
EditContext API を使用してカスタムのウェブ編集エクスペリエンスを構築する新しい方法のご紹介
EditContext は Chrome と Edge でリリースされる新しい API で、デベロッパーはこれを使用してブラウザで高度なテキスト編集機能を構築できます。詳しくは、こちらの投稿をご覧ください。
- Chrome
DevTools の新機能(Chrome 122)
[Network] パネルと [Application] パネルにサードパーティ Cookie の段階的廃止に関する警告を表示、[Network] パネルの拡張デバッグ、[Performance] パネルのパンくずリストなど。
- Chrome
- Chrome DevTools
DevTools のヒント: 投機的ナビゲーションをデバッグしてページの読み込みを高速化する
投機的読み込みでウェブ ブラウジングを高速化し、デバッグ方法を学びましょう。
- Chrome DevTools
- Chrome
パソコン版 Chrome の SharedArrayBuffer のサポート終了トライアルを Chrome 124 まで延長
Chrome デスクトップでのクロスオリジン分離を行わない SharedArrayBuffer の非推奨トライアルを Chrome 124 まで延長します。
- Chrome
コマンドに応答する
拡張機能のカスタムキーの組み合わせに応答します。
- Chrome 拡張機能
Chrome 122 ベータ版
Chrome 122 ベータ版では、イテレータ ヘルパー、メソッドの設定、Storage Buckets API、Async Clipboard API でのサニタイズされていない HTML の読み取りなどを利用できます。
- Chrome
拡張機能でレコーダーをカスタマイズする
拡張機能をインストールしてレコーダーをカスタマイズ、統合します。
- Chrome DevTools
Chrome 拡張機能の変更内容
Chrome 拡張機能の最近の変更の概要と、今後リリースが予定されている拡張機能に関するデベロッパー向けのご案内です。
- Chrome
- Chrome 拡張機能
Chrome 121 の新機能
Chrome 121 がリリースされました。CSS の更新、Speculation Rules API の改善、Element Capture API のオリジン トライアルなど、多くの改善が行われました。Adriana Jara が、Chrome 121 におけるデベロッパー向けの新機能について詳しく説明しています。
- Chrome
アドレスバーから操作をトリガーする
アドレスバーから操作をトリガーする。
- Chrome 拡張機能
WebGPU の新機能(Chrome 121)
Android での WebGPU のサポート、シェーダー コンパイルでの DXC の使用、コンピューティングパスとレンダリングパスでのタイムスタンプ クエリ、シェーダー モジュールへのデフォルトのエントリ ポイント、GPUExternalTexture 色空間としての display-p3、メモリヒープ情報など。
- Chrome
- WebGpu
スクロールバーのスタイル設定
スクロールバーのスタイルを設定するには、`scrollbar-width` プロパティと `scrollbar-color` プロパティを使用します。
Angular SSR を使用して DOM に安全にアクセスする
Angular で SSR とともに DOM を安全に使用する方法を学習します
- Chrome
Puppeteer でウェブ Bluetooth をテストする
Chrome でウェブ Bluetooth API を使用する機能をテストするには、Puppeteer を使用します。
- Chrome
ウェブ AI モデルのテストを強化: WebGPU、WebGL、ヘッドレス Chrome
ブラウザのテストを一貫して自動化し、アプリケーションのパフォーマンスを向上させるための Google のソリューションをご覧ください。
- Chrome
- WebGpu
Google Colab でのウェブ AI モデルのテスト
スケーラブルかつ自動化可能で、標準化されたハードウェア構成内で、クライアントサイドのブラウザベースの AI モデルをテストする方法を説明します。
- WebGpu
chrome.gcm で Firebase Cloud Messaging(FCM)を使用する
chrome.gcm で Firebase Messaging を使用する手順ガイド
- Chrome 拡張機能
フォーム コントロール要素の CSS 縦書きモード
Chrome に新しい国際 CSS 機能が加わりました。
- Chrome
アクションを実装する
ツールバーをクリックするユーザーに応答する。
- Chrome 拡張機能
File System Access API の永続的な権限
この投稿では、File System Access API の永続的な権限を管理する方法について説明します。また、問題の現在の状態と解決中の課題の簡単な要約も提供します。
- Chrome
カラー選択ツールで HD 色と非 HD 色を検査してデバッグする
[要素] > [スタイル] のカラー選択ツールを使用して、HD 色と HD 以外の色を調査、デバッグする方法について説明します。
- Chrome DevTools
DevTools のヒント: 色の作成
数回クリックするだけで色を作成する方法を学習します。
- Chrome DevTools
- Chrome
DevTools のヒント: 取得の優先度のデバッグ
取得優先度をデバッグする方法の詳細。
- Chrome
- Chrome DevTools
ウェブアプリ スコープ拡張機能
Chrome 122 以降では、scope_extensions アプリ マニフェスト メンバーのオリジン トライアルに登録できます。これにより、複数のサブドメインとトップレベル ドメインを管理するサイトを 1 つのウェブアプリとして表示できます。
CSS text-wrap: balance
バランスの取れたテキスト ブロックの改行を手動で作成する、古典的なタイポグラフィ手法が CSS に導入されました。
WebDriver BiDi を活用: Puppeteer による Chrome と Firefox の自動化
Puppeteer が Firefox と通信するようになりました。🎉? まだですね。🤔? Puppeteer の新しいプロトコルである WebDriver BiDi で、このエキサイティングな開発が Firefox の自動化ワークフローに何を意味するのかを見てみましょう。
- Chrome
コンテキスト メニューを作成する
ユーザーが拡張機能を呼び出すためのウィンドウであるポップアップを実装します。
- Chrome 拡張機能
リモートホスト型コード違反に対処する
Service Worker を使用すると、必要なときにだけ拡張機能を実行できるため、リソースを節約できます。
- Chrome 拡張機能
Chrome での Android インテント
Android インテントを使用して、ウェブページから直接アプリを起動できます。
ポップアップを追加する
ユーザーが拡張機能を呼び出すためのウィンドウであるポップアップを実装します。
- Chrome 拡張機能
Android 版 Google Chrome
Android 版 Chrome のデベロッパー向け機能の一覧については、 chromestatus.com をご覧ください。 Google Play ストアで Chrome をダウンロードしてください。 あるデバイスで Chrome にログインすると、別のデバイスで Chrome にログインすると、そのセッションのタブと閲覧履歴が表示されます。URL だけでなく Chrome インスタンス間でページ
新しい INP 指標に対する最新のフレームワークのパフォーマンス
この投稿では、新しい INP 指標とフレームワークベースのウェブサイトとの関連性について説明します。Aurora は、この指標を最適化するためにフレームワークをサポートしています。
限定アコーディオン
同じ `name` を持つ複数の `` 要素で排他的なアコーディオンを作成します。
Chrome のプレミアム タブレットではデスクトップ モードがデフォルトで有効になります
Chrome は Android タブレットのエコシステムに適応するため、プレミアム タブレットでデスクトップ モードをデフォルトで有効にしています。
- Chrome
WebGPU の新機能(Chrome 120)
WGSL での 16 ビット浮動小数点値のサポート、上限の引き上げ、深度ステンシルの状態変更、アダプター情報の更新など。
- Chrome
- WebGpu
WebGPU の新機能
WebGPU の最新の変更点をご確認ください。
- WebGpu
Region Capture を使用したタブ共有の改善
ウェブ プラットフォームに搭載された Region Capture を使用すると、高パフォーマンスかつ安定した動画トラックの切り抜きが可能です。
DevTools の新機能(Chrome 121)
要素での @font-palette-values のサポート、ソースマップのサポートの改善、[パフォーマンス] > [インタラクション] トラックの強化など。
- Chrome
- Chrome DevTools
CSS ラップ: 2023 年
2023 年は CSS にとって大きな年でした。Chrome およびウェブ プラットフォームについて今年リリースされた内容をご確認ください。
- Chrome
フレームの詳細を表示する
フレームの詳細を表示します。
- Chrome DevTools
Chrome のインストール基準の見直し
Chrome では今後数か月以内に、デベロッパーとユーザーのエクスペリエンスを向上させるために、アプリのインストール条件を簡素化することを目的としたテストを実施する予定です。この投稿では、想定される変化と、このテストを実施する理由について説明します。
- Chrome
DevTools のヒント: DOM とはHTML と DOM の比較
DevTools を使用して DOM をデバッグする方法を学びます。
- Chrome DevTools
- Chrome
DevTools のヒント: bfcache のデバッグ
bfcache をデバッグしてページをすばやく読み込む方法について説明します。
- Chrome
- Chrome DevTools
Chrome 120 の新機能
Chrome 120 がリリースされました。今回、CloseWatcher API により、クローズ リクエストを処理する際に一貫したエクスペリエンスを実現する、details 要素を使用したアコーディオン パターンの簡単な実装、権限ポリシー違反レポートなど、多くの機能が利用可能になっています。
- Chrome
Chrome DevTools での自己 XSS 攻撃の防御
Chrome DevTools の経験が浅いユーザーによるコードの貼り付けをブロックすることで、自己 XSS 攻撃を軽減する仕組みをご確認ください。
- Chrome
- Chrome DevTools
Cookie を表示、追加、編集、削除する
Chrome DevTools を使用してページの HTTP Cookie を表示、追加、編集、削除する方法を説明します。
- Chrome DevTools
プライベート ネットワーク アクセス権限プロンプトのオリジン トライアル: HTTPS を使用してウェブサイトを移行するパス
Google Chrome では、プライベート ネットワーク アクセス(PNA)の仕様の一環として、安全性の低い公開ウェブサイトからプライベート ネットワーク エンドポイントにアクセスすることを非推奨としています。
- Chrome
ポート転送でローカル サーバーと Chrome インスタンスにアクセスする
開発マシンのウェブサーバーでサイトをホストし、Android デバイスからコンテンツにアクセスする。
- Chrome DevTools
CSS に 4 つの新しい国際化機能を導入
Chrome に、国際化した 4 つの新しい CSS 機能が追加されます。
- Chrome
ページ ライフサイクル API
Page Lifecycle API は、モバイル オペレーティング システムで一般的なアプリ ライフサイクルの機能をウェブにもたらします。ブラウザは、リソースを節約するためにバックグラウンドのページを安全に凍結または破棄できるようになり、デベロッパーはユーザー エクスペリエンスに影響を与えることなく、このような介入を安全に処理できるようになりました。
無視リスト
[リスト] タブの参照を無視します。
- Chrome DevTools
Async Clipboard API でのサニタイズされていない HTML
Chrome 120 以降では、Async Clipboard API で新しいサニタイズされていないオプションを使用できます。このガイドでは、その使用方法について説明します。
ビデオ会議ウェブアプリのピクチャー イン ピクチャーの自動化
Chrome では、ビデオ会議ウェブアプリからピクチャー イン ピクチャーを自動的に開始できます。
- Chrome
Manifest V3 への移行を再開する
昨年 12 月、デベロッパーからのフィードバックに対応し、 移行に関する問題 のより良い解決策を提供するために、Manifest V2 のサポート終了を延期しました。こうしたフィードバックに基づき、Google は Manifest V3 にいくつかの変更を加えて、 こうしたギャップを解消 しました。変更内容は次のとおりです。 差異を解消するだけでなく、今年初めにリリースされた サイドパネル API や、現在ベータ版の Reading List API
- Chrome
- Chrome 拡張機能
Angular NgOptimizedImage ディレクティブの新機能
Angular アプリの画像のパフォーマンスをさらに向上させる、Angular NgOptimizedImage ディレクティブに含まれる新機能について学びます。
- Chrome
Manifest V3 でのコンテンツ フィルタリングの改善
過去 1 年間、Google は MV3 拡張機能プラットフォームの改善方法について、複数のコンテンツ ブロック拡張機能のベンダーと積極的に話し合いを行ってきました。これらの議論(その多くは、他のブラウザと協力して WebExtensions コミュニティ グループ( WECG )で行われました)に基づいて、Google は大幅な改善をリリースすることができました。
- Chrome
- Chrome 拡張機能
Service Worker Static Routing API のオリジン トライアル
Service Worker の静的ルーティング(現在オリジン トライアル中)の第 1 フェーズについて学びます。これは、Service Worker によるルートの処理方法を宣言的に指定する新しい API です。
- Chrome
DevTools の新機能(Chrome 120)
サードパーティ Cookie の段階的廃止に関する問題が [問題] パネルで報告されました。Cookie に関するプライバシー サンドボックス分析ツール、[アプリケーション] パネルの効果的なコンテンツ セキュリティ ポリシー、[アニメーションのデバッグの改善]、[無視リストの強化] などが報告されています。
- Chrome DevTools
- Chrome
WebGPU エコシステムのキャプチャ
WebGPU エコシステムが JavaScript、C+、Rust レルムを超えて拡張される仕組みについて学びます。
- Chrome
- WebGpu
CSS ネストの緩和された構文の更新
Chrome 120 で先読みネストが有効になりました。
- Chrome
IndexedDB のデフォルトの耐久性モードの変更
IndexedDB の耐久性モードが、Chrome 121 で厳格から緩和に変更されます。
- Chrome
拡張機能に関する Chrome 120 の新機能
Chrome 拡張機能のデベロッパー向けの Chrome 120 の重要な変更の概要。
- Chrome 拡張機能
- Chrome
Chrome OS でのファイル処理
Chrome 拡張機能の Service Worker、ポップアップ、サイドパネル、コンテンツ スクリプトでファイルを開く方法。
- Chrome 拡張機能
Chrome 120 ベータ版
CSS マスキング、CSS ネストのルールの緩和、要素を使用したアコーディオン パターンの作成、Media Session API の enterpictureinpicture アクション
- Chrome
file_handlers
manifest.json の file_handlers プロパティのリファレンス ドキュメント。
- Chrome 拡張機能
WebAssembly ガベージ コレクション(WasmGC)を Chrome でデフォルトで有効化
プログラミング言語には、ガベージ コレクションを使用するプログラミング言語と、手動のメモリ管理が必要なプログラミング言語の 2 種類があります。WebAssembly ガベージ コレクションを使用すると、ガベージ コレクション言語を WebAssembly に移植できます。
- Chrome
Chrome 119 の新機能
Chrome 119 がリリースされました。すでに保存されている Cookie の有効期限の上限が更新されます。CSS には、新しい疑似クラス、相対色構文、広告サイズマクロのようなフェンス付きフレームの改善など、多くの機能があります。
- Chrome
CSS の優先透明度(Reduced-transparency)
不透明な UI を好むユーザーに合わせて最適化と調整を行います。
- Chrome
WebGPU の新機能(Chrome 119)
フィルタリング可能な 32 ビット浮動小数点数テクスチャ、unorm10-10-10-2 頂点形式、RGB10a2uint テクスチャ形式など。
- Chrome
- WebGpu
CSS テキストの折り返し: きれい
テキストの折り返しを最適化して、スピードより美しさを優先。
- Chrome
要素の選択: 水平方向のルールを適用
拡張選択要素の機能を使用して、グループ化を容易にする水平方向の区切りをわかりやすく表示します。
- Chrome
Chrome 拡張機能の変更内容
Chrome 拡張機能の最近の変更の概要と、今後リリースが予定されている拡張機能に関するデベロッパー向けのご案内です。
- Chrome 拡張機能
- Chrome
Chromium Issue Tracker の移行
2024 年 1 月より、Chromium の問題追跡は Google Issue Tracker によるツールに移行されます。
- Chrome
Sanitizer API のサポート終了
今後の仕様の更新に追いつくために、現在の Sanitizer API の実装は Chrome 119 で非推奨となっています。
- Chrome
ウェブでの Bluetooth 経由でのシリアル
Web Serial API で Bluetooth RFCOMM サービスのサポートが追加されました。
- Chrome
Chrome 拡張機能の単体テスト
拡張機能の単体テストを作成する方法
- Chrome 拡張機能
Chrome 拡張機能のエンドツーエンド テスト
拡張機能のエンドツーエンド テストを作成する方法。
- Chrome 拡張機能
Puppeteer で Chrome 拡張機能をテストする
Puppeteer を使用して Chrome 拡張機能の自動テストを作成する方法。
- Chrome 拡張機能
拡張機能のバグを報告する
拡張機能のバグやドキュメントに関する問題を報告する方法。
- Chrome 拡張機能
CSS 相対色構文
別の色のチャネルと値に基づいて新しい色を作成します。
- Chrome
バグを見つけてフォローする
バグや機能リクエストがすでに報告されていないかを確認する。
- Chrome 拡張機能
DevTools の新機能(Chrome 119)
スタイルの @property セクションの改善、デバイスリストの更新、ソースのプリティプリントの強化、コンソールのオートコンプリート。
- Chrome
- Chrome DevTools
Chrome 118 の新機能
Chrome 118 がリリースされました。@scope css ルールを使用して、コンポーネント内の特定のスタイルを宣言します。新しいメディア機能「preferreds-reduced-transparency」を使用します。DevTools では、[ソース] パネルなど多くの機能が改善されています。
- Chrome
全画面表示のポップアップ ウィンドウの新しいオリジン トライアル
ポップアップ ウィンドウを全画面モードで開ける新しいオリジン トライアルを、1 ステップでご利用いただけるようになりました。
- Chrome
ブラウザでのファイル操作に関する API の改善
FileSystemSyncAccessHandle の複数の読み取り / 書き込みと、FileSystemWritableFileStream の排他的書き込みのサポート。 オリジンのプライベート ファイル システム (バケット ファイル システムとも呼ばれる)を使用すると、デベロッパーは読み取りと書き込みのパフォーマンスを最大限に高めるように最適化されたファイルにアクセスできます。これは FileSystemSyncAccessHandle オブジェクトを介して行われます。現在、同じファイル
- Chrome
Chrome 119 ベータ版
Chrome 119 ベータ版では、CSS 相対色構文や新しい疑似クラスなどを利用できるようになります。
- Chrome
CSS @scope at-rule でセレクタのリーチを制限する
@scope を使用して、DOM の限定されたサブツリー内の要素のみを選択する方法について学習します。
DevTools のヒント: Chrome 拡張機能のデバッグ
DevTools を使用して Chrome 拡張機能をデバッグする方法について説明します。
- Chrome 拡張機能
- Chrome
- Chrome DevTools
WebGPU の新機能(Chrome 118)
copyExternalImageToTexture のソース サポートの拡張、読み取り / 書き込みおよび読み取り専用ストレージ テクスチャの試験運用版サポートなど。
- Chrome
- WebGpu
macOS の iCloud キーチェーンで Chrome のパスキーがサポートされるようになりました
macOS 版 Chrome で iCloud キーチェーンのパスキーのサポートを開始しました。これにより、ユーザーは iCloud キーチェーンでパスキーを作成し、Apple デバイス間で同期できます。
- Chrome
ビューの遷移によるシームレスなナビゲーション
CyberAgent、RedBus、Nykaa、PolicyBazaar がビュー遷移を実装した方法と理由について詳しく説明します。
- Chrome
私たちは Chrome for Developers です
Chrome の 15 周年を記念して、デベロッパーの皆様にとって信頼できる便利なパートナーとなっています。
- Chrome
WebGL から WebGPU へ
WebGPU に移行する WebGL デベロッパー向けのヒントをご紹介します。
- Chrome
DevTools の新機能(Chrome 118)
[要素] > [スタイル] のカスタム プロパティに関する新しいセクション、ローカル オーバーライドの改善、検索機能の強化、[ソース] のワークスペースの効率化など。
- Chrome
- Chrome DevTools
Chrome 118 ベータ版
CSS のスコープ スタイル、追加のメディア機能、キーボードでフォーカス可能なスクロール コンテナなど。
- Chrome
Chrome 117 の新機能
Chrome 117 がリリースされました。スムーズな開始 / 終了アニメーションの追加を容易にする 3 つの新しい CSS 機能、高階データセットを計算するための配列グループ化、DevTools によってローカル オーバーライドが簡単になるなど、さらに多くの機能が備わっています。
- Chrome
Chrome アプリからの移行
Chrome のパッケージ化アプリまたはホスト型アプリを移行する方法。
WebGPU の新機能(Chrome 117)
頂点バッファの設定を解除してグループをバインドする、紛失したデバイスが機能しているように見えるようにするなど
- Chrome
- WebGpu
拡張機能を公開する
新しい Manifest V3 拡張機能を公開するためのガイダンス
- Chrome 拡張機能
Google Summer of Code と Chrome 拡張機能
Google Summer of Code への参加に関する経験とアドバイス。
- Chrome 拡張機能
- Chrome
DevTools のヒント: スニペットとライブ式
スニペットを使用して頻繁に使用するコードを実行し、ライブ式を使用して値をリアルタイムで監視します。
- Chrome DevTools
- Chrome
天体ビューの切り替え
Chrome による API の形成時に、Astro コミュニティがビュー遷移をどのように取り入れ、Astro の永続的な島でトップクラスのサポートに到達するまでの道のりを強調します。
- Chrome
Chrome リリースの迅速化(第 2 回)
Chrome 119 以降では、ブランチのリリースから安定版へのリリースまでの期間を短縮します。
- Chrome
scheduler.yield オリジン トライアルのご紹介
「scheduler.yield」は、現在オリジン トライアルでスケジューラ API に新たに追加として提案されているもので、よりレスポンシブなユーザー エクスペリエンスのためにタスクを分割する新しいアプローチです。このたびの Scheduling API 追加提案によるメリットをご理解いただき、オリジン トライアルに登録してインサイトとフィードバックをお寄せください。
- Chrome
新しいコマンド エディタで Chrome Devtools Protocol(CDP)コマンドを効率的に作成
Chrome Devtools Protocol(CDP)のコマンドを簡単に入力できるように、DevTools には新しいユーザー フレンドリーなエディタが導入されているため、JSON を使用する必要はありません。
- Chrome
Lighthouse 11 の新機能
新しいユーザー補助機能の変更と監査の更新を含む Lighthouse 11 のリリース
- Chrome
DevTools の新機能(Chrome 117)
XHR/フェッチ リクエストをオーバーライドし、[ネットワーク] パネルで拡張機能リクエストを非表示にする、[パフォーマンス] パネルで取得優先度の変更を確認する、複数の UI を改善する、新しい色や試験運用版機能を確認するなど、さまざまなことができます。
- Chrome DevTools
- Chrome
Chrome 117 ベータ版
CSS グリッド サブグリッド、CSS の開始と終了のアニメーションのサポート、配列のグループ化、イテレータ ヘルパーなど。
- Chrome
スムーズな開始と終了のアニメーションを実現する 4 つの新しい CSS 機能
個別のアニメーションのスムーズな移行やトップレイヤ間の移行を可能にする新機能について学習します
- Chrome
「chrome://extensions」ページに安全確認を導入
Chrome 117 以降では、ユーザーがインストールした拡張機能が Chrome ウェブストアにない場合、自動的にハイライト表示されます。
- Chrome 拡張機能
- Chrome
Chrome 116 の新機能
Chrome 116 がリリースされました。Picture in image API を使ったドキュメントによるユーザーの生産性の向上や、不足しているスタイルシートのデバッグが DevTools で簡単になりました。
- Chrome
マニフェスト - コンテンツ スクリプト
manifest.json の "content_scripts" プロパティのリファレンス ドキュメント。
- Chrome 拡張機能
restricted-properties を使用してポップアップ操作を保護する
ポップアップの操作中にクロスオリジン分離とクロスサイト リーク保護を行います。
- Chrome
WebGPU の新機能(Chrome 116)
WebCodecs の統合、動画再生の改善など。
- Chrome
- WebGpu
Chrome での 1 回だけのアクセス許可
「今回は許可」は、Chrome で権限を付与する 1 回限りのオプションです。当面の間、位置情報、カメラ、マイクについてはパソコンでのみご利用いただけます。
- Chrome
DevTools のヒント: ブレークポイントとログポイント
ブレークポイントとログポイントを使用して簡単にデバッグできます。
- Chrome DevTools
- Chrome
TWA 用の PostMessage
Chrome 115 以降、Trusted Web Activity(TWA)で postMessage を使用してメッセージを送信できるようになりました。このドキュメントでは、アプリとウェブ間の通信に必要な設定について説明します。
Chrome 116 の拡張機能の新機能
Chrome 拡張機能のデベロッパー向けの Chrome 116 における重要な変更の概要。
- Chrome
- Chrome 拡張機能
Chrome 116 ベータ版
CSS モーションパス、バックフォワード キャッシュ NotRestoredReason API、ドキュメントのピクチャー イン ピクチャーなど。
- Chrome
iOS 16.4 以降の Chrome でのウェブサイトのデバッグ
iOS 版 Chrome で Safari ウェブ インスペクタのデバッグを使用する方法について説明します。
- Chrome
Chrome 拡張機能の変更内容
今年の Chrome 拡張機能の変更点の概要と、今後リリースが予定されている拡張機能に関するデベロッパー向けのご案内です。
- Chrome
- Chrome 拡張機能
Chrome 115 の新機能
ScrollTimeline と ViewTimeline を使用して、ユーザー エクスペリエンスを高めるスクロールドリブン アニメーションを作成します。フェンス付きフレームは他のプライバシー サンドボックス API と連携して、関連コンテンツを埋め込み、不要なコンテキスト共有を防止します。Topics API を使用すると、ブラウザはプライバシーを保護しながら、ユーザーの興味 / 関心に関する情報をサードパーティと共有できます。
- Chrome
スクロールドリブン アニメーションのパフォーマンスに関する事例紹介
新しい API は、スクロールドリブン アニメーションを実装する従来の方法よりもはるかにスムーズです。
- Chrome
DevTools のヒント: レコーダーを使用してユーザーフローを記録、再生する
DevTools の [レコーダー] パネルでユーザーフローを記録、再生、デバッグする方法について説明します。
- Chrome DevTools
- Chrome
Service Worker で WebSocket を使用する
Chrome 拡張機能で WebSocket に接続する詳しい手順。
- Chrome 拡張機能
WebRTC: 従来の getStats() 移行ガイド
iOS 版 Chrome で Safari ウェブ インスペクタのデバッグを使用する方法について説明します。
- Chrome
DevTools のヒント: ローカル ストレージとセッション ストレージ
Key-Value ペアをデバッグするには、[Application] > [Local Storage] と [Session Storage] を使用します。
- Chrome DevTools
- Chrome
DevTools の新機能(Chrome 116)
スタイルシートが見つからないという問題をすばやく特定してデバッグできるように、DevTools が大幅に改善されました。 [ ネットワーク ] パネルの [ イニシエーター ] 列には、読み込みに失敗したスタイルシートを参照する正確な行へのリンクが常に表示されます。 [ 問題 ] パネルには、URL の不整合、リクエストの失敗、 @import ステートメントの配置ミスなど、スタイルシートの読み込みに関するすべての問題が一覧表示されます。 Chromium の問題: 1440626 、
- Chrome
- Chrome DevTools
WebGPU の新機能(Chrome 115)
サポートされている WGSL 言語拡張機能、Direct3D 11 の試験運用版サポートなど。
- Chrome
- WebGpu
位置情報を使用する
Chrome 拡張機能の Service Worker、ポップアップ、サイドパネル、コンテンツ スクリプトで位置情報を使用する方法。
- Chrome 拡張機能
Chrome for Testing: ブラウザの自動化のための信頼性の高いダウンロード
Chrome for Testing は、ウェブアプリのテストと自動化のユースケースに特化した新しい Chrome フレーバーです。
- Chrome
- Chrome for Testing
C/C++ WebAssembly をデバッグする
Chrome DevTools を使用して C/C++ WebAssembly のバグを見つけて修正する方法を学びます。
- Chrome DevTools
メモリに収まるサイズの大きいファイルを Photoshop でどのように解決したか
Adobe が、象徴的な Photoshop アプリのウェブ バージョンで、最大のファイルでも編集できるようにした方法を学びます。 (この記事は動画でもご覧いただけます)。 2021 年、Adobe は Chrome エンジニアリングと共同で、 Photoshop のバージョンをウェブに導入 しました。このソフトウェアは、 SIMD 、 オリジンの非公開ファイル システム 内の高パフォーマンス ストレージ、キャンバスの P3 カラー空間 、 Lit を使用したウェブ
- Chrome
ベクター画像編集アプリ Boxy SVG が、Local Font Access API を使用してユーザーがお気に入りのローカル フォントを選択できるようにする方法
Local Font Access API は、ユーザーがローカルにインストールしたフォントデータにアクセスするためのメカニズムを提供します。名前、スタイル、ファミリーなどの上位レベルの詳細情報や、基盤となるフォント ファイルの未加工バイトなどです。SVG 編集アプリ Boxy SVG がこの API を使用する方法を学びます。 (この記事は動画でもご覧いただけます)。 Boxy SVG はベクター グラフィック エディタです。主な用途は、SVG
- Chrome
Chrome 115 ベータ版
CSS ディスプレイ プロパティの複数のキーワード、WebGPU の WGSLLanguageFeatures、HTTPS アップグレードなど。
- Chrome
Chrome からミューテーション イベントが削除されます
ミューテーション イベントのサポート終了と計画的な削除について発表し、2024 年 7 月の削除までにコードを移行する方法を共有します。
- Chrome
SVG 要素内のデータ URL から移行する
データのサポート: SVG 要素の URL は削除されます。代替サービスに移行することをおすすめします。
- Chrome
WebGPU の新機能(Chrome 114)
JavaScript の最適化など。
- Chrome
- WebGpu
Chrome 114 の新機能
Chrome 114 がリリースされました。Chrome 114 がリリースされました。text-wrap: Balance によってテキスト レイアウトを改善する機能、Cookies Have Independent Partitioned State が導入されました。新しい Popover API では、ポップオーバーがこれまで以上に簡単になりました。
- Chrome
新しい Side Panel API で優れたユーザー エクスペリエンスを設計
Chrome 拡張機能用の新しい Side Panel API が導入されました。
- Chrome
DevTools の新機能(Chrome 115)
[ 要素 ] パネルに、 サブグリッド の新しい subgrid バッジが追加されました。この機能は現在、Chrome Canary で試験運用版です。 サブグリッドであるネストされたグリッドを検査してデバッグするには、バッジをクリックします。サブグリッドは、親からトラックの数とサイズを継承します。ビューポート内の要素の上に列、行、その数を表示するオーバーレイを切り替えます。 [ 要素 ] パネルのすべてのバッジの一覧については、 バッジのリファレンス をご覧ください。 Chromium
- Chrome
- Chrome DevTools
ゲームエディタ Construct 3 が File System Access API を使用してゲームを保存できるようにする仕組み
File System Access API を使用すると、読み取り、書き込み、ファイル管理機能を利用できます。Construct 3 でこの API を使用する方法を学びます。 (この記事は動画でもご覧いただけます)。 Construct 3 は、 Thomas と Ashley Gullen 兄弟によって開発されたゲーム エディタです。ゲーム エディタの現在の第 3 版では、以前に Windows と NW.js 向けにビルドした後、2 つを完全に 「ブラウザが新しいオペレーティング
- Chrome
Chrome で document.domain の変更が無効化される
ウェブサイトが document.domain の設定に依存している場合は、対応が必要です。
- Chrome
2 回目の Compute Pressure オリジン トライアルのお知らせ
ウェブ デベロッパーがコンピューティング負荷をモニタリングできる Chrome の新しいオリジン トライアル。
- Chrome
DevTools のヒント: Workspace
Workspace を使用して、DevTools で行った変更をローカルのソースファイルに保存します。
- Chrome
- Chrome DevTools
CSS で linear() イージング関数を使用して複雑なアニメーション曲線を作成する
そこで linear() を導入しました。これは CSS のイージング関数で、ポイント間で線形に補間し、弾力効果やばね効果を再現できます。
マニフェスト - バックグラウンド
manifest.json の background プロパティのリファレンス ドキュメント。
- Chrome 拡張機能
ポップオーバー API のご紹介
新しいポップオーバー API を使用してツールチップやメニューなどを作成する方法を学びます。
- Chrome
LEGO® Education における Web Bluetooth と Web Serial API の活用
レゴ エデュケーションはウェブの機能を活用し、できるだけ簡単に LEGO モデルとパソコンを接続します。
- Chrome
Aurora の新機能
Chrome Aurora チームの最近の取り組みと 2023 年のロードマップをご覧ください。
- Chrome
3D モデルエディタ Blockbench は、EyeDropper API を使用して、ユーザーがどこからでも色を選択できるようにしています。
EyeDropper API は、ユーザーがブラウザ ウィンドウの外部を含む画面から色をサンプリングできるスポイトツールを作成するメカニズムを提供します。3D モデル エディタ Blockbench がコードベースでこの API を使用する方法を学びます。 (この記事は動画でもご覧いただけます)。 Blockbench は、ピクセルアート テクスチャを使用したローポリモデル用の無料の最新モデル エディタです。 Minecraft をプレイしたことがあれば、Blockbench
- Chrome
Storage バケットのオリジン トライアルを利用可能
Storage Standard では、永続ストレージと割り当ての見積もりのための API、およびプラットフォームのストレージ アーキテクチャが定義されています。Google では、高いメモリ負荷での永続ストレージ エビクションの予測可能性を高める API をテストしています。Chrome 115 から Chrome 118 まで実施されるオリジン トライアルで Storage Buckets API をお試しください。
- Chrome
画像編集アプリ Photopea が、File Handling API を使用して、ユーザーがファイル エクスプローラーからファイルを開く仕組み
File Handling API を使用すると、ウェブアプリは、アプリケーションがサポートできるファイル形式のファイル ハンドラとして自身を登録できます。画像編集アプリケーション Photopea がこの API を使用する方法を学びます。 (この記事は動画でもご覧いただけます)。 Photopea は、 Ivan Kutskir が開発した無料のオンライン画像エディタです。Ivan は 2012 年にアプリの開発を開始し、Photopea に追加した主な機能を共有する ブログ
- Chrome
Web SQL のサポート終了スケジュールが更新されました
Web SQL は Chromium 119 で完全に削除されました。
- Chrome
CSS と UI の新機能: I/O 2023 Edition
Google I/O 2023 で取り上げられた、見逃せないトップ 20 の CSS と UI 機能。
- Chrome
Chrome DevTools を使用してフォームの問題を見つける
Chrome DevTools チームは、フォームの問題の検出や自動入力のデバッグに役立つ新機能を追加しています。これらの機能は設計と実装の初期段階にあるため、テストとフィードバックが必要です。
- Chrome
Google I/O で発表された 10 の最新情報
Google I/O 2023 で発表した重要なアップデートと新しいリリースを通じて、デベロッパーが優れたユーザー エクスペリエンスを簡単に提供できるようにする取り組みについてご確認ください。
- Chrome
ウェブ向けの Android の新機能(2023 年)
ウェブを Android に取り込むツールのアップデート。WebView の大画面でのプライバシー保護の強化とサポートの改善、カスタムタブの部分的なカスタムタブ、PWA のインストールの簡易化、統合機能、TWA の Play ストアの請求管理など。
- Chrome
iframe をまたいだ自動入力の共有: 最初の提案
一部のフォームには iframe にフィールドがあるため、ブラウザの自動入力で問題が発生します。共有自動入力を使用すると、クロスオリジンの iframe の信頼性を親フレームで指定して、自動入力のユーザー エクスペリエンスを向上させることができます。
- Chrome
WebGPU: ブラウザで最新の GPU へのアクセスが可能に
WebGPU が GPU の能力を引き出し、機械学習のパフォーマンスとグラフィック レンダリングを改善する方法を学習します。
- Chrome
WebDriver BiDi: 2023 年のステータス更新
この記事では、2023 年の WebDriver BiDi の新機能の概要を説明します。
- Chrome
Google I/O に備えよう
独自のアジェンダを作成して Google I/O に備えましょう。
- Chrome
DevTools の新機能(Chrome 114)
DevTools では、デフォルトで [ 設定 ] > [ 試験運用版 ] > [ WebAssembly デバッグ: DWARF サポートを有効にする ] が有効になっています。詳細については、 最新のツールで WebAssembly をデバッグする をご覧ください。 この試験運用版では、実行を一時停止して Wasm アプリの C コードと C++ コードをデバッグできます。デバッグ情報はすべて利用できます。 Wasm デバッグをテストするには、 C/C++ DevTools
- Chrome
- Chrome DevTools
スクロールドリブン アニメーションでスクロール時に要素をアニメーション化する
スクロール タイムラインとビュー タイムラインを使用して、宣言型の方法でスクロールドリブン アニメーションを作成する方法を学習します。
Chrome 114 ベータ版
CSS の見出しのバランス、CHIPS、スクロールエンド イベント、ポップオーバー。
- Chrome
Chrome 113 の新機能
Chrome 113 がリリースされました。WebGPU が登場し、ウェブ上での高性能 3D グラフィックスとデータ並列計算が可能になります。また、devtools はネットワーク レスポンス ヘッダー、プライバシー サンドボックスの一部であるファーストパーティ セットをオーバーライドできるようになりました。これにより、関連サイトの展開が始まっていることを組織が宣言できます。
- Chrome
拡張機能 Service Worker について
拡張機能 Service Worker は、拡張機能の中心的なイベント ハンドラです。この点で、ウェブ サービス ワーカーとは異なります。
- Chrome 拡張機能
拡張機能 Service Worker の基本
拡張機能 Service Worker のインストールと更新は、ウェブサービス Worker とは異なります。
- Chrome 拡張機能
カメラの背景をぼかす
ウェブ デベロッパーがカメラの背景のぼかしを制御できる Chrome の新しいオリジン トライアル。
- Chrome
拡張機能 Service Worker のライフサイクル
拡張機能 Service Worker は、標準の Service Worker のイベントと拡張機能の名前空間内のイベントの両方に応答します。拡張機能の使用中に 1 つのタイプが別のタイプに続くことが多いため、まとめて示されています。
- Chrome 拡張機能
AV1 エンコードの高速化によりビデオ通話を改善
Chrome 113 では、Chrome Open Media チームによって AV1 ソフトウェア エンコーダが改善されています。
- Chrome
Service Worker のイベント
拡張機能 Service Worker は、標準の Service Worker イベントと、拡張機能 API の多くのイベントの両方に応答します。
- Chrome 拡張機能
CSS によるメディアクエリの更新
UI を画面のリフレッシュ レート機能に適合させます。
デベロッパー リソース: ソースマップの表示と手動読み込み
[デベロッパー向けリソース] パネルを使用して、ソースマップが正常に読み込まれるかどうかを確認し、手動で読み込みます。
- Chrome DevTools
WebGPU の新機能(Chrome 113)
WebGPU は、オリジン トライアルで WebCodecs を統合した Chrome に搭載されています。
- Chrome
- WebGpu
DevTools のヒント: DevTools でのソースマップ
デプロイしたコードではなく、DevTools のソースマップを使用して元のコードをデバッグします。
- Chrome
- Chrome DevTools
ユーザー エンゲージメントを測定する
カスタムタブでユーザー エンゲージメントを測定する方法
スタート ガイド
Android アプリからカスタムタブを起動する方法
部分的なカスタムタブによるマルチタスク
部分的なカスタムタブを使用して、ユーザーがウェブ コンテンツを閲覧中にアプリを操作できるようにする方法を学習します。
ウォームアップとプリフェッチ: カスタムタブ サービスの使用
カスタムタブ サービスを利用してユーザー エクスペリエンスを向上させる方法について説明します。
UI のカスタマイズ
カスタムタブをアプリのデザインに合わせる方法。
カスタム インタラクティビティの追加
カスタムタブにカスタム アクションを追加する方法
デスクトップでよりリッチな UI インストールが可能に
モバイル デバイスとアプリストアは、ユーザーがソフトウェアを発見、評価、インストールする方法を変えました。ウェブアプリで、デベロッパーがインストール時にアプリをハイライト表示できるようになりました。
- Chrome
過去を振り返って: テスト自動化の進化
ウェブにおけるテスト自動化の進化の旅
- Chrome
音声の録音とスクリーン キャプチャ
タブ、ウィンドウ、画面から音声や動画を録画する方法。
- Chrome 拡張機能
Chromium Chronicle #33: アニメーションのビュー
ビューでレイヤベースのアニメーションを使用すると、パフォーマンスが向上し、 設定がむずかしいこともあります。「 AnimationBuilder レイヤの読みやすさを大幅に向上させ、 作成できます。 次の 2 つの間で連続的なクロスフェードをアニメーション化する必要があるとします。 ビューを示しています。 レイヤ アニメーション API を直接使用してこの処理を行う例を次に示します。 以下は、 AnimationBuilder
- Chrome
CSS レイアウトとソース順序の切り離しを解決する
ドキュメントのソースから切断された順序でアイテムを配置するレイアウト メソッドの問題に対して、提案するソリューションについてフィードバックを求めました。
- Chrome
新しい [Breakpoints] サイドバーによるデバッグの高速化
ブレークポイントの削除や無効化などの一般的な操作をより簡単に実行できるように、ブレークポイント サイドバーのデザインを変更し、ワンクリックで実行できるようにしました。
- Chrome DevTools
- Chrome
DevTools の新機能(Chrome 113)
ネットワーク パネルでレスポンス ヘッダーをオーバーライドできるようになりました。これまでは、HTTP レスポンス ヘッダーをテストするにはウェブサーバーにアクセスする必要がありました。 レスポンス ヘッダーのオーバーライドを使用すると、次のようなさまざまなヘッダーの修正をローカルでプロトタイプ化できます(ただしこれらに限定されません)。 ヘッダーをオーバーライドするには、[ ネットワーク ] > [ ヘッダー ] > [ レスポンス ヘッダー ]
- Chrome
- Chrome DevTools
Chrome に搭載された WebGPU
Chrome チームは、ウェブ上で高性能 3D グラフィックスとデータ並列計算を行える WebGPU を出荷しています。
- Chrome
- WebGpu
Chrome 113 ベータ版
新しい CSS メディア機能、linear() イージング関数、WebGPU が追加されました。
- Chrome
Chrome の迅速なリリース
Chrome 114 以降、リリースのブランチから Stable へのリリースまでの時間が短縮されます。
- Chrome
Chrome 112 の新機能
Chrome 112 がリリースされました。CSS がネストルールをサポートするようになりました。ダイアログ要素に最初のフォーカスを設定するアルゴリズムが更新され、今後は Service Worker の no-op フェッチ ハンドラがスキップされ、ナビゲーションを高速化できるようになり、その他にも多くの実装が行われます。
- Chrome
Service Worker でイベントを処理する
拡張機能サービス ワーカーの作成とデバッグ方法を学習する。
- Chrome 拡張機能
DevTools のヒント: ソースマップとは
デプロイしたコードではなく元のコードをデバッグする際にソースマップがどのように役立つかを説明します。
- Chrome DevTools
- Chrome
ignoreList ソースマップ拡張機能
ignoreList ソースマップ拡張機能を使用して、Chrome DevTools でのデバッグ エクスペリエンスを改善します。
- Chrome
Web SQL から SQLite Wasm へ: データベース移行ガイド
SQLite Wasm はオリジンのプライベート ファイル システムを基盤としており、非推奨の Web SQL データベース テクノロジーに代わる汎用的な方法です。この記事では、Web SQL から SQLite Wasm にデータを移行する方法について説明します。 Web SQL のサポート終了と削除 の投稿で、Web SQL データベース
- Chrome
Fastly との提携 - FLEDGE の k-匿名性サーバー向け Oblivious HTTP リレー
Google は Fastly と提携して FLEDGE に k-匿名性サーバーを実装することで、Chrome のプライバシー保護対策を改善しています。この実装ではデータが OHTTP リレーを介してリレーされるため、Google のサーバーはエンドユーザーの IP アドレスを受信しません。k-匿名性サーバーは、FLEDGE の完全な実装に向けた段階的な一歩です。
- Chrome
WebView から X-Requested-With ヘッダーを送信するオプトインを要求することで、ユーザーのプライバシーを強化
Google では、X-Requested-With ヘッダーが送信されるタイミングを制限することで、ユーザーのプライバシーを保護したいと考えています。
- Chrome
ブロックしているウェブ リクエスト リスナーを置き換える
3 つのセクションのうちの 2 番目のセクションでは、拡張機能 Service Worker の一部ではないコードに必要な変更について説明します。
- Chrome 拡張機能
SPA のビュー遷移を Chrome 111 でリリース
View Transition API を使用すると、シングルページ アプリ内でページ遷移を行うことができます。今後マルチページ アプリが追加される予定です。
- Chrome
Chrome 112 ベータ版
CSS のネスト、アニメーション合成、FormData コンストラクタのサブミッター パラメータ。
- Chrome
DevTools の新機能(Chrome 112)
レコーダー で、拡張機能を使用して DevTools に埋め込むことができるカスタム リプレイ オプションのサポートが導入されました。 サンプルの拡張機能 を試す。新しいカスタム リプレイ オプションを選択して、カスタム リプレイ UI を開きます。 レコーダー をニーズに合わせてカスタマイズし、ツールと統合するには、独自の拡張機能の開発を検討してください。 chrome.devtools.recorder API を参照し、 拡張機能の例 をご確認ください。 Chromium の問題:
- Chrome DevTools
- Chrome
マニフェストを更新する
manifest.json ファイルの形式は、Manifest V3 と Manifest V2 で若干異なります。
- Chrome 拡張機能
Service Worker に移行する
Service Worker を使用すると、必要なときにだけ拡張機能を実行できるため、リソースを節約できます。
- Chrome 拡張機能
コードを更新する
3 つのセクションのうち、拡張機能 Service Worker の一部ではないコードに必要な変更について説明します。
- Chrome 拡張機能
CSS ネスト
CSS プリプロセッサのお気に入りの機能の 1 つであるネスト スタイル ルールが、言語に組み込まれています。
拡張機能のセキュリティを強化
3 つのセクションの後半では、拡張機能 Service Worker の一部ではないコードに必要な変更について説明します。
- Chrome 拡張機能
Chrome 111 の新機能
Chrome 111 がリリースされました。View Transitions API を使用してシングルページ アプリで洗練された遷移を作成し、CSS カラーレベル 4 のサポートによって色を一段と進化させます。新しいカラー機能を最大限に活用するため、スタイルパネルで新しいツールをご確認ください。
- Chrome
Project Fugu API ショーケースの新しいホーム
Project Fugu API Showcase は、Project Fugu の一部である API を使用するアプリのコレクションです。 Google の社内横断プロジェクトである Capabilities Project(コード名 Project Fugu )は、ウェブアプリがプラットフォーム固有のアプリができることすべてを可能にすることを目的としています。Google のほか、Microsoft、Intel、Samsung などのプロジェクト
- Chrome
プライバシーの確保画面をスマートに共有できるようになりました
ナッジ理論を使って、ビデオ会議中にユーザーが自発的に自発的に発言するのをやめるようにしました。
- Chrome
CSS アンカー ポジショニングで要素を互いに固定する
ウェブ プラットフォームに新しい API が導入されます。これにより、トリックなしで要素を適応的に配置できるようになります。
- Chrome
業界との連携による CHIPS の進化
Chrome チームが CHIPS の実装において直面した 2 つの課題と、提案の設計を進化させるうえでコミュニティからのフィードバックが果たす重要な役割について説明しています。
- Chrome
ネイティブ メッセージング
Chrome 拡張機能のネイティブ アプリケーションとメッセージを交換できます。
- Chrome 拡張機能
標準に関する議論における行動基準の改善
Chrome チームによる、プロフェッショナルで、敬意を持って、インクルーシブなディスカッションを促進する方法。
- Chrome
フォント フォールバックのフレームワーク ツール
Next.js、Nuxt.js、その他のライブラリを使用して、CLS を使用せずに代替フォント CSS を生成する方法をご確認ください。
- Chrome
スタイルクエリ スタートガイド
スタイルクエリでは、@container ルールを使って親要素のスタイル値をクエリできます。Chrome 111 では、CSS カスタム プロパティのスタイルクエリが安定版になりました。ご利用方法をご確認ください。
DevTools のヒント: CSS の問題を見つける
[Styles] ペインと [Computed] ペインを使用して、DevTools での CSS の問題を見つけます。
- Chrome DevTools
- Chrome
Chrome 拡張機能に関するヘルプ
ドキュメントに記載されていない質問の参照先
- Chrome 拡張機能
DevTools の新機能(Chrome 111)
HD 色のデバッグ、ブレークポイント UX の強化など
- Chrome DevTools
- Chrome
ショートカット
[ショートカット] タブのリファレンス。
- Chrome DevTools
デバイス
[デバイス] タブのリファレンス。
- Chrome DevTools
ワークスペース
[ワークスペース] タブリファレンス。
- Chrome DevTools
ロケーション
[地域] タブのリファレンス。
- Chrome DevTools
テスト
[テスト] タブのリファレンス。
- Chrome DevTools
設定の概要
設定の概要。
- Chrome DevTools
フォントの代替機能の改善
新しい `size-adjust` とフォント指標のオーバーライドにより、デベロッパーはウェブフォントにほぼ一致するフォントの代替を作成できます。これにより、レイアウト シフトが軽減されます。
- Chrome
Lighthouse 10 の新機能
Lighthouse 10 では、新しいスコアリングと監査を実施できます。
- Chrome
Chrome 111 ベータ版
CSS の新しい色タイプと色空間、CSS の三角関数、View Transitions API を追加しました。
- Chrome
Chrome フラグとは
追加のデバッグツールを有効にするか、Chrome の新機能や試験運用版の機能をお試しください。
WebHID で Stadia コントローラに話しかける
フラッシュされた Stadia コントローラは標準のゲームパッドのように動作します。つまり、Gamepad API を使用してアクセスできるボタンはすべてではありません。WebHID を使用すると、見つからなかったボタンにアクセスできるようになります。 Stadia の終了後、コントローラがゴミ埋め立て地に捨てられるのではないかと多くの人が心配していました。幸い、Stadia チームは、 Stadia Bluetooth モード のページにアクセスしてコントローラに書き込むことができるカスタム
- Chrome
Chrome 110 の新機能
Chrome 110 がリリースされました。新しい :Picture-in-picture 疑似クラスでカスタム スタイルをピクチャー イン ピクチャーの要素に追加したり、launch_handler でウェブアプリの起動動作を設定したり、iframe の認証情報のない属性を使用して、クロスオリジンの埋め込みポリシーを設定していないサードパーティのコンテンツを埋め込んだりできます。
- Chrome
CrUX History API の使用方法
CrUX History API の詳細と、この API を使用してユーザー エクスペリエンスの傾向を追跡する方法を学びます。
- Chrome UX レポート
DevTools の新機能(Chrome 110)
再読み込み時にパフォーマンス パネルをクリアする、レコーダーでコードを表示してハイライト表示するなど
- Chrome
- Chrome DevTools
サードパーティの iframe での Web Share API に関する新しい要件
プライバシーとセキュリティを強化するため、サードパーティの iframe での Web Share API 呼び出しを明示的に許可する必要があります。 この記事では、Web Share API の互換性を破る可能性がある変更について説明します。この変更はすでに Firefox で導入されており、 Chrome バージョン 110 以降 でリリースされる予定です。 Safari にも近日中に 導入される予定です。 Web Share API
- Chrome
Chromium Chronicle #32: パッチ ギャップに注意する
Chromium のデベロッパーが n-day の悪用のリスクを低減する方法をご確認ください。
- Chrome
CSS の新しい色空間のご紹介
CSS Color 4 は、より多くの色、操作機能、優れたグラデーションなど、広色域のツールと機能をウェブで実現します。
- Chrome
HD CSS カラーに移行
CSS Color 4 は、広色域のツールと機能をウェブに提供します。
高精細 CSS カラーガイド
CSS Color 4 は、広色域のツールと機能をウェブに提供します。
さらに多くの色と新しい空間を利用
CSS Color 4 は、広色域のツールと機能をウェブに提供します。
ピクチャー イン ピクチャーの未来
常時表示のウィンドウで任意の HTML コンテンツを有効にする Chrome のオリジン トライアルに関するニュース。
- Chrome
プライベート ネットワーク アクセスの更新: サポート終了の試用期間延長の発表
Chrome では、プライベート ネットワーク アクセスの仕様の一環として、保護されていない公開ウェブサイトからプライベート ネットワーク エンドポイントにアクセスすることが非推奨となります。非推奨のトライアルは Chrome 113 までご利用いただけます。
- Chrome
DevTools のヒント: PWA のデバッグ
DevTools を使用してプログレッシブ ウェブアプリをデバッグする
- Chrome
- Chrome DevTools
CSS color-mix()
CSS から直接、サポートされている色空間の色を組み合わせます。
- Chrome
拡張機能 Service Worker のライフタイムの延長
拡張機能 Service Worker は、イベントを受信している限り存続できるようになりました。これにより、拡張機能 Service Worker の信頼性は向上しますが、回避すべき落とし穴があります。
- Chrome 拡張機能
- Chrome
DevTools の新機能
DevTools の最新の変更内容をご確認ください。
- Chrome DevTools
Manifest V3 のオフスクリーン ドキュメント
Chrome 拡張機能の開発用の Offscreen Documents API が導入されました。
- Chrome 拡張機能
- Chrome
Chrome Android でのウェブアプリの基本的なオフライン ページ
Chrome 109 以降では、Android にインストールされているウェブアプリにオフライン機能がない場合に、アプリが現在オフラインであることを示すデフォルト ページが自動的に生成されます。
- Chrome
Scrollend(新しい JavaScript イベント)
タイムアウト関数を削除し、そのバグを取り除きます。これは本当に必要なイベントである Scrollend です。
- Chrome
CSS のイニシャル文字を使用してドロップ キャップを管理する
ドロップキャップをスタイリングするための面白い回避策に「さよなら」と言ってください。
- Chrome
使用できるウェブの検出
ご使用のブラウザが対応している高度なウェブ機能は何ですか?また、どのようなウェブアプリでこうした機能が活用されているのでしょうか。こうした疑問に答えるには、ブラウザのテストサイトとブラウザ拡張機能をご覧ください。 Project Fugu は、ウェブ機能のギャップを埋めて新しいクラスのアプリケーションをウェブで実行できるようにする全社的な取り組みです。具体的には、アプリ デベロッパーがこれまで不可能だったユースケースを可能にする新しい API
- Chrome
Cookie の有効期限と最長期間の属性に上限が追加されました
Chrome リリース M104(2022 年 8 月)以降、Cookie に 400 日を超える有効期限を設定できなくなりました。
- Chrome
Chrome 110 ベータ版
CSS の頭文字、ウェブアプリ起動ハンドラ、FedCM API のクロスオリジン iframe サポートなど。
- Chrome
ページがバックフォワード キャッシュから復元できることを確認する
Lighthouse を使用して、ページをバックフォワード キャッシュから復元できるかどうかをテストする方法
iframe 認証情報なし: COEP 環境に iframe を簡単に埋め込む
Chrome 110 では、iFrame 認証情報なし機能が実装されています。デベロッパーは、新しい一時的なコンテキストを使用して、サードパーティの iframe でドキュメントを読み込むことができます。その代わり、これらは COEP 埋め込みルールの対象ではなくなります。COEP を使用するデベロッパーは、COEP 自体を使用しないサードパーティの iframe を埋め込むことができるようになりました。
- Chrome
ウェブ オーディオで出力先デバイスを変更する
ウェブ オーディオの音声出力先をプログラムで変更する方法について説明します。
- Chrome
ファビコンを取得しています
ウェブサイトのファビコンを取得する方法
- Chrome 拡張機能
Origin Private File System を基盤とするブラウザ内の SQLite Wasm
SQLite を使用して、ウェブですべてのストレージニーズを高パフォーマンスで処理します。 SQLite は、人気のある オープンソース の軽量な埋め込みリレーショナル データベース管理システムです。多くのデベロッパーは、構造化された使いやすい方法でデータを保存するためにこれを使用しています。SQLite はサイズが小さくメモリ要件が低いため、モバイル デバイス、デスクトップ アプリケーション、ウェブブラウザでデータベース エンジンとして使用されることがよくあります。 SQLite の主な機能の
- Chrome
Chrome 109 の新機能
Chrome 109 がリリースされました。Origin Private File System API が Android で使用可能になり、CSS に新しいプロパティ セットが追加され、MathML コアのサポートにより HTML に数学表記を簡単に追加できるようになりました。その他多くの機能があります。
- Chrome
DevTools の新機能(Chrome 109)
レコーダーでステップをスクリプトとしてコピーしたり、パフォーマンスの録音で実際の関数名をコピーしたりできます。
- Chrome
- Chrome DevTools
RenderingNG の詳細: LayoutNG ブロックの断片化
LayoutNG でのブロックの断片化が完了しました。この記事では、この機能の仕組みと重要性について説明します。
- Chromium
DevTools のヒント: Project Fugu API のデバッグ
DevTools を使用して Project Fugu API をデバッグします。
- Chrome
- Chrome DevTools
リリース スケジュールの変更(Chrome 110 から)
Chrome 110 以降、ごく一部のユーザーを対象に早期安定版がリリースされます。
- Chrome
Chrome のバリエーションの概要
Chrome のブラウザの新機能をテストするメカニズム
Chrome のリリース チャンネルとは
Chrome で Canary、Dev、Beta、Stable の各リリース チャンネルを使用して新機能のテストやアップデートのロールアウトを行う方法をご確認ください。
CSS ネストの構文の選択に関するヘルプ
CSS ワーキング グループは、CSS でネストを定義する最適な方法について議論を続けています。CSS の開発に携わっている方は、ぜひご協力をお願いします。
- Chrome
Chrome Dev Insider: 今年は
Chrome のウェブ プラットフォーム チームから、さまざまな視点や会話、最新情報をデベロッパーに紹介する最新情報をお届けします。
- Chrome
Chrome ウェブストア ポリシーの更新
Chrome では、Chrome ウェブストアのデベロッパー プログラム ポリシーを更新し、Google の指針を明示し、施行についてより多くの背景情報を提供するとともに、ポリシーをよりわかりやすくします。
- Chrome 拡張機能
- Chrome
広告の関連性を最大限に高める
サードパーティ Cookie を使用しない広告の関連性に関するプライバシー サンドボックスに関する新しいドキュメント。
- Chrome
Chrome のメモリモードと省エネモードについてデベロッパーが知っておくべきこと
Chrome の新しいメモリセーバー モードと省エネ モードをページで適切に処理する方法について説明します。
- Chrome
DevTools のヒント: Device Mode
DevTools の Device Mode で Mobule デバイスをシミュレートします。
- Chrome
- Chrome DevTools
Chrome 109 ベータ版
MathML、getDisplayMedia() の条件付きフォーカス、Android のオリジン プライベート ファイル システムなど。
- Chrome
Chrome Android での安全なお支払いの確認
Secure Payment Confirmation は、パスキーの力を利用したフィッシング耐性のある支払い確認をウェブで提供します。Chrome 109 から Android 版 Chrome で利用可能になります。
- Chrome
WebAuthn パスキーの自動入力を使用したフォームへのパスワードレス ログイン
WebAuthn 条件付き UI は、ブラウザのフォーム自動入力機能を活用して、ユーザーが従来のパスワード ベースのフローでパスキーを使用してシームレスにログインできるようにします。
Chrome 拡張機能: API を拡張してインスタント ナビゲーションをサポート
バックフォワード キャッシュ、プリロード ナビゲーションをサポートするように拡張機能 API が更新されました。
- Chrome
Chrome 108 の新機能
Chrome 108 がリリースされました。新しい Intl API が追加され、数値の書式設定をより細かく制御できるようになりました。新しい Pop Up API のオリジン トライアルも用意されており、ユーザーに重要なコンテンツを簡単に提示できます。CSS にはいくつかの改良点が加えられています。他にもたくさんあります。
- Chrome
画面共有の改善(Chrome 109)
ウェブでの画面共有の 2 つの改善点(画面共有時のタブのフォーカスを制御するメカニズムと、ローカルでの音声の再生を制御するメカニズム)に関する詳細。
- Chrome
条件付きフォーカスによる画面共有の改善
ウェブ上で画面を共有する際に、タブやウィンドウに条件付きでフォーカスする。
DevTools のヒント: CSS の改善点を特定する
[CSS の概要] パネルを使用して、CSS の改善点を特定できます。
- Chrome DevTools
- Chrome
無効、オーバーライドされた、無効な CSS、その他の CSS を検索する
CSS プロパティに関する問題を一目で把握できます。
- Chrome DevTools
マニフェスト - oauth2
manifest.json の oauth2 プロパティに関するリファレンス ドキュメント。
- Chrome 拡張機能
CrUX ダッシュボード
CrUX ダッシュボードを使用した BigQuery CrUX データの可視化
- Chrome UX レポート
DevTools のヒント: DevTools の迅速なナビゲーション
ショートカットと設定を使用して DevTools の迅速な操作を行い、ワークフローを高速化する方法について説明します。
- Chrome DevTools
- Chrome
ストレージの性質はさまざま: ストレージ バケットの導入
ストレージ バケットは、メモリ負荷が高い場合に永続ストレージ エビクションを予測しやすくするための API です。
- Chrome
Chrome ウェブストア ポリシーの更新
Chrome では、Chrome ウェブストアのデベロッパー プログラム ポリシーを更新し、Google の指針を明示し、施行についてより多くの背景情報を提供するとともに、ポリシーをよりわかりやすくします。
- Chrome
- Chrome 拡張機能
Android 版 Chrome でのビューポートのサイズ変更動作の変更に備える
Chrome 108 でのビューポートのサイズ変更動作の変更点、Chrome でこの変更が行われる理由、準備について。
- Chrome
マニフェスト - input_components
manifest.json の input_components プロパティのリファレンス ドキュメント。
- Chrome 拡張機能
Chrome 108 ベータ版
新しい CSS ビューポート ユニット、Federated Credential Management API、可変 COLRv1 フォントなど。
- Chrome
Payment Handler API の CanMakePayment イベントの動作を更新
販売者は、Payment Handler API の「canmakepayment」Service Worker イベントを使用して、インストール済みの支払いアプリにカードが登録されているかどうかを販売者に伝えます。Chrome では、このイベントに関連付けられたプロパティが削除されます。
- Chrome
DevTools のヒント: DevTools を開くさまざまな方法
Chrome DevTools を開く方法を学びましょう。
- Chrome
- Chrome DevTools
DevTools の新機能(Chrome 108)
非アクティブな CSS プロパティ、レコーダーの新しい XPath セレクタとテキスト セレクタなどに関するヒント
- Chrome DevTools
- Chrome
Chrome 107 の新機能
Chrome 107 がリリースされました。Screen Capture API に、画面共有のエクスペリエンスを向上させる新しいプロパティが追加されました。ページ上のリソースがレンダリング ブロックかどうかを正確に特定できるようになりました。オリジン トライアルで宣言型の PendingBeacon API を使用して、バックエンド サーバーにデータを送信する新しい方法があります。他にもたくさんあります。
- Chrome
互換性を破る変更: AccessHandles の同期メソッド
Emscripten などのコンテキストでの AccessHandles の操作を簡素化するために、FileSystemSyncAccessHandle インターフェースのメソッドを同期化しています。
- Chrome
DevTools のヒント: 低コントラスト テキストを見つけて修正する
Chrome DevTools を使用して、低コントラストのテキストを見つけて修正する方法を学びます。
- Chrome
- Chrome DevTools
ウェブサイトを読みやすくする
DevTools を使用して、低コントラストのテキストを見つけて修正します。
- Chrome DevTools
「トラスト トークン」を「プライベート ステート トークン」に名称変更
Trust Token API の名称を Private State Token API に変更し、プライバシーと実用性のメリットをより明確に表現する運びとなりました。
- Chrome
Chrome DevTools のレコーダー以外でユーザーフローをカスタマイズ、自動化する
Chrome DevTools のレコーダー以外でユーザーフローをカスタマイズおよび自動化する方法を学びます。
- Chrome
Advanced Web Apps Fund - 2022 年 10 月更新
Advanced Web Apps Fund を通じて 11 のプロジェクトを後援し、Open Collective を通じて 10 万ドル以上の寄付を行いました。その重要性を認識し、より多くの人がこれらのプロジェクトに時間を費やせるようにしました。
- Chrome
コンテナ内のクエリ ポリフィル
コンテナクエリのポリフィルにより、古いブラウザでコンテナクエリがサポートされる仕組みについて説明します。
- Chrome
CSS ネストアンケート結果の構文の選択に関するヘルプ
7,590 件のデベロッパーの意見の結果をご覧ください。
- Chrome
Chrome 拡張機能の開発を始める新しい方法
Chrome デベロッパーの学習を始めるためのより良い方法。
- Chrome 拡張機能
- Chrome
CSS 内の置換された要素のオーバーフローに関する変更
意図しないオーバーフローの原因となる CSS の動作変更に関する高度な警告です。
- Chrome
Chrome Dev Insider: フレームワーク エコシステムに応じたパフォーマンスのスケーリング
Chrome のウェブ プラットフォーム チームから、さまざまな視点や会話、最新情報をデベロッパーに紹介する最新情報をお届けします。
- Chrome
Project Fugu は「完了」しているか
この記事では、新機能の実装から既存の機能の改良・改善へと、Project Fugu チームの焦点が移った様子を説明します。
- Chrome
タブを管理する
タブグループを使用してタブをプログラムで整理する方法について学習します。
- Chrome 拡張機能
Hello World 拡張機能
最初の Hello World Chrome 拡張機能を作成します。
- Chrome 拡張機能
すべてのページでスクリプトを実行する
既存のウェブページに新しい要素を自動的に追加する方法について学びます。
- Chrome 拡張機能
アクティブなタブにスクリプトを挿入する
現在のページのスタイルを簡素化する方法を学びます。
- Chrome 拡張機能
マニフェスト - 作成者
manifest.json の作成者名プロパティのリファレンス ドキュメント。
- Chrome 拡張機能
画面共有時に過度な共有を避ける
ウェブ プラットフォームには、プライバシーを保護しながら画面共有するための追加の管理機能が付属しています。
- Chrome
Payment Handler API には CSP の connect-src が必要
CSP を使用している場合、Payment Handler API のユーザーは「connect-src」ディレクティブに支払いエンドポイントを追加する必要があります。
- Chrome
Chrome 107 ベータ版
Screen Capture API、CSS グリッド テンプレート プロパティの補間機能などが追加されました。
- Chrome
プライバシーに配慮した画面共有の管理
ウェブ上でプライバシーを保護しながら画面共有を管理することで、ユーザーが必要以上の共有がないようにします。
DevTools のヒント: ユーザーフローの記録の編集、デバッグ、エクスポート
[レコーダー] パネルとその拡張機能を使用すると、ユーザーフローの記録を編集、デバッグ、エクスポートできます。
- Chrome DevTools
- Chrome
Manifest V3 への移行の詳細
Manifest V3 への拡張機能の移行計画に関する新しい詳細
- Chrome 拡張機能
- Chrome
Chrome 106 の新機能
Chrome 106 がリリースされました。新しい Intl API が追加され、数値の書式設定をより細かく制御できるようになりました。新しい Pop Up API のオリジン トライアルも用意されており、ユーザーに重要なコンテンツを簡単に提示できます。CSS にはいくつかの改良点が加えられています。他にもたくさんあります。
- Chrome
何十億人ものユーザー向けに Chrome のアップデートを準備する方法
"Chrome リリースチームのテクニカル プログラム マネージャーと対話し、各リリースをスムーズに進める方法を確認します。"
- Chrome
DevTools の新機能(Chrome 107)
キーボード ショートカットをカスタマイズしたり、Memory Inspector で C/C オブジェクトをハイライト表示したりできます。
- Chrome
- Chrome DevTools
DevTools の新機能(Chrome 106)
最新のウェブ デバッグ、パフォーマンス分析情報の LCP 時間の内訳などのサポートが強化されました。
- Chrome DevTools
- Chrome
ポリフィルの大規模な更新に伴い、コンテナクエリは安定版のブラウザに取り込まれ始める
"コンテナクエリを使用すると、コンポーネントが収まるスペースに基づいて、コンポーネントがレスポンシブなスタイル設定情報を所有できるようになります。この機能は最新のブラウザに展開され始めており、ポリフィルのサポートに大きなアップデートが加えられています。
- Chrome
ポップアップ: 復活!
プラットフォームに新しく組み込まれた API により、問題のあるパターンがはるかに容易になりました。
- Chrome
Memory Inspector を C/C++ デバッグ用に拡張する
Memory Inspector を使用して C/C+WebAssembly アプリのデバッグを改善した方法をご覧ください
- Chrome
Chrome 106 でのサポートの終了と削除
計画に役立つ Chrome 106 のサポート終了と削除のまとめ。
- Chrome
匿名 iframe オリジン トライアル: COEP 環境に iframe を簡単に埋め込む
COEP を使用するデベロッパーは、COEP 自体を使用しないサードパーティの iframe を埋め込むことができるようになりました。匿名の iframe オリジン トライアルは、Chrome のバージョン 106 ~ 108 でテストできます。
- Chrome
DevTools のヒント: CSS Flexbox の検査とデバッグを行う方法
Chrome DevTools を使用して、CSS Flexbox レイアウトを検査、変更、デバッグする方法について説明します。
- Chrome DevTools
- Chrome
Chrome DevTools での最新のウェブ デバッグ
ここでは、バンドラ、フレームワーク、サードパーティのコードを操作する際のデバッグとプロファイリング エクスペリエンスを改善する Chrome DevTools の最近の変更を紹介します。
- Chrome
事例紹介: DevTools による改善された Angular デバッグ
Chrome DevTools チームと Angular チームが協力して Angular をテスト試験運用し、デバッグ エクスペリエンスを向上させました。他のフレームワークでも同様の変更が可能です。
- Chrome
Web SQL の非推奨化と削除
Web SQL は、2009 年 4 月に提案され、2010 年 11 月に廃止されました。このキーは段階的に Chrome から削除されました。最初は安全でないコンテキストで削除され、その後 Chrome 119 で完全に削除されます。
- Chrome
Chrome 105 の新機能
Chrome 105 がリリースされました。コンテナクエリと :has() は、レスポンシブに最適です。新しい Sanitizer API は、任意の文字列に対応する堅牢なプロセッサを提供し、クロスサイト スクリプティングの脆弱性を減らすことができます。Google では、WebSQL のサポート終了に向けて新たな一歩を踏み出しています。ほかにも多数あります。
- Chrome
Compression Streams API を使用したブラウザでの圧縮と解凍
独自の圧縮ライブラリや解凍ライブラリを用意する必要がない小規模なウェブアプリを作成する Compression Streams API は、gzip 形式または deflate(または deflate-raw)形式を使用してデータ ストリームを圧縮および解凍するために使用します。 組み込みの圧縮 JavaScript アプリケーションは、圧縮ライブラリを含める必要がないため、アプリケーションのダウンロード サイズを小さくできます。安定版の Chrome と Safari Technology
- Chrome
Angular Image ディレクティブを使用して画像を最適化する
新しい Angular 画像ディレクティブ(NgOptimizedImage)が導入され、Angular アプリの画像に組み込みのパフォーマンス最適化手法が導入されました。
- Chrome
DevTools のヒント: コンソールのショートカットでワークフローを高速化する方法
Console Utilities API のショートカットを使用すると、最近の要素の参照、オブジェクトのクエリ、イベントや関数呼び出しの監視などを簡単に行うことができます。
- Chrome
- Chrome DevTools
最上位レイヤ: Z-index:10000
新しい組み込みコンポーネントと API がプラットフォームに導入される中で、これらで使用できる「トップレイヤ」とは何でしょうか。
- Chrome
Chrome から HTTP/2 サーバー プッシュを削除
HTTP/2 サーバー プッシュをデフォルトで無効化(Chrome 106)
- Chrome
DevTools のヒント: CSS グリッドを確認する方法
Chrome DevTools を使用して、CSS のグリッド レイアウトを表示、変更する方法を学習します。
- Chrome DevTools
- Chrome
ブラウザでサードパーティ リソースの読み込みを最適化できるか。
ウェブ上でのサードパーティ リソースの読み込みを改善するための変更の推進
- Chrome
DevTools の新機能(Chrome 105)
レコーダーでの詳細な再生とマウスオーバー イベント、[パフォーマンス分析情報] パネルの LCP などがサポートされます。
- Chrome DevTools
- Chrome
DevTools のヒント: CSS アニメーションを検査して変更する方法
[アニメーション] タブを使用すると、CSS アニメーションや遷移などを検証、変更できます。
- Chrome DevTools
- Chrome
Chrome 105 でのサポートの終了と削除
計画に役立つ Chrome 105 のサポート終了と削除のまとめ。
- Chrome
DevTools のヒント: ウェブサイトのパフォーマンスに関する実用的な分析情報を取得する
新しい [パフォーマンス分析情報] パネルでウェブサイトのパフォーマンスに関する行動につながるインサイトを確認する
- Chrome
- Chrome DevTools
@container と :has(): 2 つの強力な新しいレスポンシブ API を Chromium 105 でリリース
"コンテナクエリと :has() は、レスポンシブに最適です。幸いなことに、この 2 つの機能は Chromium 105 で一緒にリリースされます。今回のリリースは、レスポンシブ インターフェースに関して特にご要望の多かった機能を 2 つ含む大規模なリリースです。
- Chrome
:has(): ファミリー セレクタ
Chromium 105 で :has() が導入されました。CSS にもたらされる素晴らしい機会をいくつか見てみましょう。
- Chrome
NavigateEvent の変更(Chrome 105)
Navigation API が、NavigateEvent で 2 つの新しいメソッドを取得しました。Transitionwhile() は inspect() で、rereScroll() は Scroll() です。
- Chrome
Chrome 104 の新機能
Chrome 104 がリリースされました。リージョン キャプチャでは、getDisplayMedia() を使用して現在のタブをキャプチャする場合に、切り抜き領域を指定します。メディアクエリの構文は、数学的比較演算子を使用して記述できます。共有要素遷移がオリジン トライアルを開始します。ほかにも多数あります。
- Chrome
Async Clipboard API のウェブ カスタム フォーマット
ウェブ カスタム フォーマットを使用すると、ウェブサイトは標準形式を使用して任意のサニタイズされていないペイロードを読み書きできます。アプリケーションは、そのようなペイロードをサポートするようにオプトインできます。
- Chrome
DevTools のヒント: コンソールでメッセージをログに記録する方法
コンソールを使用すると、変数、オブジェクト、メッセージの記録、メッセージのフィルタリングとグループ化などを行うことができます。
- Chrome
- Chrome DevTools
Chrome ウェブストア デベロッパー ダッシュボードの刷新された分析機能
Google では、Chrome ウェブストア デベロッパー ダッシュボードのアイテム分析機能を改良しています。新しいダッシュボードはひと目で理解しやすくなり、特に役立つ情報が事前に集約されています。
- Chrome
- Chrome 拡張機能
CSS ネストの構文の選択に関するヘルプ
2 つの競合する構文が、仕様候補に採用されるべき構文を判断する際にあなたの助けを必要としています。
- Chrome
Chrome DevTools での最上位レイヤのサポート
Chrome DevTools での最上位レイヤのサポートについて説明します。
- Chrome
2022 年における Chrome のウェブ フレームワーク ファンドに関する最新情報
Chrome のウェブ フレームワークの資金提供対象についてお知らせします
- Chrome
DevTools のヒント: DevTools を使用して CSS ユーザー設定のメディア機能をエミュレートする方法
[レンダリング] タブを使用して、ユーザー設定をエミュレートし、ウェブサイトのユーザー適応動作をテストします。
- Chrome
- Chrome DevTools
DevTools の新機能(Chrome 104)
デバッグ中のフレーム再開、[Recorder] パネルの低速リプレイ オプションなど。
- Chrome
- Chrome DevTools
Chrome Dev Insider: CSS と UI エディション
Chrome のウェブ プラットフォーム チームから、さまざまな視点や会話、最新情報をデベロッパーに紹介する最新情報をお届けします。
- Chrome
PC サイト向けの Signed Exchange のリリース
パソコン版 Chromium ブラウザに対する Signed Exchange のサポートと、その他の最近の機能リリースを発表しました。
- Chrome
DevTools のヒント: CSS コンテナクエリを調べる方法
DevTools を使用して、CSS コンテナクエリを調査してデバッグします。
- Chrome
- Chrome DevTools
CSS コンテナクエリの検査とデバッグを行う
Chrome DevTools を使用して CSS コンテナクエリを検査、変更、デバッグする方法を学びます。
- Chrome DevTools
Chrome 104 でのサポートの終了と削除
計画に役立つ Chrome 104 のサポート終了と削除の概要。
- Chrome
Chrome 103 の新機能
Chrome 103 がリリースされました。新たに HTTP ステータス コードが導入され、ページが表示される前にプリロードするコンテンツをブラウザが判断できるようになりました。Local Font Access API を使用すると、ウェブ アプリケーションはユーザーのパソコンにインストールされているフォントを列挙して使用できます。非同期 API でタイムアウトを実装する簡単な方法があります。ほかにも多数あります。
- Chrome
DevTools の新機能(Chrome 103)
ダブルクリックと右クリック イベントの記録、Lighthouse でユーザーフローを測定するための新しいオプションなど。
- Chrome DevTools
- Chrome
ユーザー補助機能のリファレンス
Chrome DevTools のユーザー補助機能の包括的なリファレンスです。
- Chrome DevTools
Chrome 102 の新機能
Chrome 102 がリリースされました。インストールされている PWA をファイル ハンドラとして登録できるため、ユーザーはディスクから直接ファイルを簡単に開くことができます。inert 属性を使用すると、DOM の一部を不活性としてマークできます。Navigation API を使用すると、シングルページ アプリで URL のナビゲーションと更新を簡単に処理できます。ほかにも多数あります。
- Chrome
パフォーマンス分析情報を作成した方法とその理由
パフォーマンス分析情報パネルを構築した方法と理由
- Chrome
安全なお支払いの確認による認証
SPC の認証プロトコルを実装して、顧客のトランザクションを検証します。
安全なお支払いの確認
決済サービス プロバイダとの認証を安全に行えるようにするために提案されているウェブ標準の概要。
WebAssembly 移行ガイド
WebAssembly はブラウザ横断型に対応しつつあるため、 サポートを終了する予定です。 2019 年第 4 四半期に PNaCl を追加(Chrome アプリは除く)。 WebAssembly 関連の活発なエコシステムは、新しいものも既存のものも含め、高性能ウェブアプリに適したものになります。また、PNaCl の利用率が低いことも、サポート終了の十分な理由となっています。 Chrome 76 以降、オープンウェブの PNaCl は オリジン トライアル の対象になりました。これは、ウェブ
安全なお支払いの確認を登録する
SPC の登録プロトコルとフローを実装し、販売者から直接カード発行会社または銀行に対して厳密な認証を行えるようにする。
Chrome 103 でのサポートの終了と削除
計画に役立つ Chrome 103 のサポート終了と削除の概要。
- Chrome
Interaction to Next Paint(INP)ツールのサポート
Chrome パフォーマンス ツールで Interaction to Next Paint をサポートしました。
- Chrome
ストリームによるマルチページ アプリケーションの高速化
ワークボックス ストリームを使用して、Service Worker キャッシュの部分的なマークアップとネットワークの部分的なコンテンツを使用するマルチページ アプリケーションを作成し、ほぼ瞬時にレンダリングされる高速なエクスペリエンスを作成する方法を学習します。
クロスサイト プリフェッチで LCP を高速化
すぐに利用できるテクノロジーの概要です。
- Chrome
ネットワーク管理者による Chrome の非公開プリフェッチ プロキシ
プリフェッチされたナビゲーションでコンテンツをフィルタする方法の概要。
Chrome のプライベート プリフェッチ プロキシ
クロスサイト プリフェッチで Largest Contentful Paint(LCP)を高速化
- Chrome
DevTools の新機能(Chrome 102)
新しい [パフォーマンス分析情報] パネル、ライトモードとダークモードをエミュレートするためのショートカットなど。
- Chrome DevTools
- Chrome
WebAssembly のデバッグの高速化
大規模なアプリケーションで WebAssembly のデバッグを高速化する方法。
- Chrome
キャプチャ ハンドルによるタブ共有の改善
ウェブ プラットフォームには、キャプチャ ハンドルが付属するようになりました。キャプチャ ウェブアプリは、キャプチャされたウェブアプリがオプトインされている場合、キャプチャ ウェブアプリが人間工学的かつ確実に識別できるメカニズムを備えています。
Advanced Web Apps Fund
Advanced Web Apps Fund に関するお知らせ
- Chrome
DOM オブジェクトのプロパティを表示する
DOM オブジェクトのプロパティを表示、フィルタできます。
- Chrome DevTools
バックフォワード キャッシュをテストする
ページがバックフォワード キャッシュ向けに最適化されていることを確認します。
- Chrome DevTools
Chrome 101 の新機能
Chrome 101 では、Hwb 表記を使用して色を指定する新しい方法が導入されました。また、フェッチ優先度によって、リソースをダウンロードする最適な順序をブラウザにヒントにできます。ほかにも多数あります。
- Chrome
折りたたまれたコンテンツを hidden=until-found でアクセスできるようにする
この新しい属性値を使用して、アコーディオン セクション内のコンテンツを見つけてリンクできるようにする方法。
Signed Exchange を使用した LCP の最適化
Signed Exchange は、ウェブ デベロッパーが Google 検索などの SXG リファラーからのページ読み込み速度を大幅に改善するための手段です。チェックボックスをオンにするだけで有効に機能するメリットもありますが、最大限に活用するには、追加の手順が必要になります。
- Chrome
権限ポリシーでブラウザの機能を管理する
ページと埋め込みのサードパーティの iframe がブラウザ機能にアクセスする方法を管理します。
RenderingNG の詳細: BlinkNG
BlinkNG と、Blink コードの組織と構造における長年の課題に対処してきたさまざまなサブプロジェクトについてご覧ください。
- Chromium
Chrome Dev Insider のご紹介
Chrome のウェブ プラットフォーム チームによる新しいシリーズです。さまざまな視点、会話、最新情報をデベロッパーの皆様にお伝えします。
- Chrome
レンダリング パフォーマンスに関する問題を検出する
再ペイント、レイアウト シフト、レイヤとタイル、スクロールに関する問題、レンダリング統計情報、ウェブに関する主な指標の確認
- Chrome DevTools
サイトにコンテンツを安全に埋め込む
コンテンツの埋め込みに使用される複数の HTML 要素と、セキュリティを最適化する方法について説明します。
- Chrome
CSS メディア機能をエミュレートする
Preferreds-color-scheme、media type、forced-colors、preferreds-contrast、preferreds-reduced-motion、color-gamut をエミュレートします。
- Chrome DevTools
[レンダリング] タブの概要
ウェブ コンテンツのレンダリングに影響する一連のオプションを紹介します。
- Chrome DevTools
DevTools の新機能(Chrome 101)
ユーザーフローを JSON としてインポート / エクスポートできるほか、hwb() カラーや、[Styles] ペインでカスケード レイヤを表示することも可能です。
- Chrome
- Chrome DevTools
Chrome 101 でのサポートの終了と削除
計画に役立つ Chrome 101 のサポート終了と削除のまとめ。
- Chrome
Chrome 102 でのサポートの終了と削除
計画に役立つ Chrome 102 のサポート終了と削除のまとめ。
- Chrome
Chrome 100 の新機能
Chrome 100 は現在、3 桁のバージョン番号でリリースされます。Chrome の初回リリース以来、#100CoolWebMoments を記念して、記念の時期をお祝いしましょう。ユーザー エージェント文字列に重要な変更がいくつかあります。Multi-Screen Window Placement API を使用すると、ユーザーのマシンに接続されているディスプレイを列挙し、特定の画面にウィンドウを配置できます。ほかにも多数あります。
- Chrome
パフォーマンス分析情報: ウェブサイトのパフォーマンスに関する実用的な分析情報を取得できます
[パフォーマンス分析情報] パネルで、ウェブサイトのパフォーマンスに関する行動につながるインサイトを入手しましょう。
- Chrome DevTools
#100CoolWebMoments で Chrome 100 をお祝いしましょう
Chrome バージョン 100 のリリースを記念して、思い出を振り返りましょう。
- Chrome
DevTools の新機能(Chrome 100)
@supports ルールの表示と編集、録音のセレクタの名前変更とカスタマイズなどを行えます。
- Chrome DevTools
- Chrome
Chrome 100 でのサポートの終了と削除
計画に役立つ Chrome 100 のサポート終了と削除のまとめ。
- Chrome
Canvas2D では常にあなた。
API Next が刷新されます。
- Chrome
Chrome 99 の新機能
Chrome 99 がリリースされました。CSS カスケード レイヤを使用すると、CSS をより詳細に制御でき、スタイル固有の競合を防ぐことができます。showPicker() メソッドを使用すると、日付、色、データリストなどの入力要素を選択するブラウザ選択ツールをプログラムで表示できます。Chrome と Firefox のバージョン 100 まであと数週間です。ほかにも多数あります。
- Chrome
Next.js でのサードパーティ スクリプトの読み込みを最適化する
この記事では、Next.js Script コンポーネントについて説明し、このコンポーネントを使用してサードパーティ スクリプトの順序を改善する方法を説明します。
- Chrome
DevTools の新機能(Chrome 99)
WebSocket リクエストのスロットリング、新しい Reporting API ペイン、コンソールのスタイル設定など。
- Chrome
CSS Flexbox レイアウトを検査してデバッグする
Chrome DevTools を使用して、CSS Flexbox レイアウトを検査、変更、デバッグする方法について説明します。
- Chrome DevTools
Chrome 99 でのサポートの終了と削除
計画に役立つ Chrome 99 のサポート終了と削除のまとめ。
- Chrome
プラグインの使用
Workbox には既製のユーティリティが数多く用意されていますが、アプリケーションの要件を満たすために拡張が必要になる場合があります。そこで役立つのが Workbox のプラグインアーキテクチャです。
カスケード レイヤがブラウザに登場
"カスケード レイヤは、コードのカスケード優先順位を管理できる新しい CSS API で、まもなくすべての最新ブラウザに導入されます。"
- Chrome
権限リクエスト チップ
Chrome 98 では、権限用の専用スペースがロケーション バーに追加され、プロンプトの要求を少なくして、決定への執拗さを感じさせないようにすることを目的としています。
- Chrome
Chrome 98 の新機能
Chrome 98 がリリースされました。自動ダークテーマのオリジン トライアルに登録済みのお客様には、要素単位でオプトアウトする新しい方法があります。COLRv0 フォント形式の進化である COLRv1 がサポートされるようになりました。他にもたくさんあります。
- Chrome
Chromium Chronicle #28: iOS で Chrome を使ってみる
Chrome の iOS アプリのコードを扱う方法を学びます。
- Chrome
日付、時刻、色、ファイルのブラウザ選択ツールを表示する
ウェブ プラットフォームには、ブラウザの選択ツールを表示する正規の方法が付属しています。
- Chrome
DevTools の新機能(Chrome 98)
全画面表示のユーザー補助ツリー、[変更] タブでの詳細な変更など。
- Chrome
同一オリジン ポリシーを緩和するために document.domain を変更できなくなります
ウェブサイトが「document.domain」の設定に依存している場合は、対応が必要です。
- Chrome
非推奨になった機能と削除(Chrome 98)
計画に役立つ Chrome 98 のサポート終了と削除のまとめ。
- Chrome
プライベート ネットワーク アクセス: プリフライトの導入
Chrome では、プライベート ネットワーク アクセスの仕様の一環として、保護されていない公開ウェブサイトからプライベート ネットワーク エンドポイントにアクセスすることが非推奨となります。おすすめの対応方法について以下でご説明します。
- Chrome
COLRv1 カラー グラデーション ベクター フォント(Chrome 98)
Chrome 98 では、Chrome チームと Fonts チームが COLRv1 のサポートを追加しました。COLRv1 は、グラデーションの追加、合成、ブレンドなどによりカラーフォントを幅広く普及させることを目的とした COLRv0 フォント形式の進化であり、圧縮に適した鮮明でコンパクトなフォント ファイルにおける内部の形状の再利用を改善します。
- Chrome
Chrome 97 の新機能
Chrome 97 がリリースされました。ウェブ トランスポートを使用してクライアントとサーバー間でリアルタイム メッセージを送信するための新しいオプションが追加されました。機能検出を使用すると、ブラウザでサポートされているスクリプトの種類を確認できます。JavaScript はさらに便利になり、さらに多くの機能が加わります。
- Chrome
起動ハンドラ API
起動ハンドラを使用すると、アプリの起動方法(既存のウィンドウと新しいウィンドウのどちらを使用するか、選択したウィンドウを起動 URL に移動するかどうかなど)を制御できます。
Chrome DevTools のフル ユーザー補助ツリー
DevTools の新しいフルページ ユーザー補助ツリーと、このツリーの設計と実装を確認します。
- Chrome
オンラインに戻ったときにリクエストを再試行する
ユーザーがオフラインになることがあります。状況に適応し、最終的にオンラインに戻ったときにリクエストを再開できるようサポートする方法を学びます。
Service Worker の更新を即時に処理する
Service Worker を更新するときは、ユーザーに知らせた方がよいことがあります。ここでは、その方法について説明します。
フォールバック レスポンスの管理
ときどき、お客様がネットワーク障害に遭遇したり、オフラインになったりすることがあります。このような状況に対応し、フォールバック レスポンスを提供する方法について学習します。
ワークボックス ウィンドウの使用
ユーザーがオフラインになることがあります。状況に適応し、最終的にオンラインに戻ったときにリクエストを再開できるようサポートする方法を学びます。
キャッシュに保存された音声と動画の配信
Service Worker で音声や動画のリソース リクエストを処理するのは困難です。workbox-range-request を使用して、予測可能な方法でこのようなリクエストを処理する方法を学習します。
実行時にリソースをキャッシュする
クロスオリジン リソースなど、実行時にキャッシュ リソースを処理する方法について説明します。
ウィンドウからキャッシュにアクセスする
キャッシュインスタンスへのアクセスは、Service Worker のスコープに限定されるものではありません。ウィンドウのコンテキストからもアクセス可能です。この記事ではその方法をご紹介します。
ネットワーク タイムアウトの強制
ネットワーク接続が遅い場合に強制的にネットワーク タイムアウトを設定する方法と、適切なタイミングを設定する方法について説明します。
DevTools の新機能(Chrome 97)
新しい [レコーダー] パネル、[デバイスモードでのデバイスリストの更新] など
- Chrome
デベロッパーによるインストール可能な強力なウェブアプリの作成を支援
Chrome に追加された PWA 機能の影響
- Chrome
サポートの終了と削除(Chrome 97)
Chrome 97 でのサポート終了と削除のまとめ。計画の参考にしてください。
- Chrome
Chrome 96 の新機能
Chrome 96 がリリースされました。ウェブアプリ マニフェストには、2 つの新しいプロパティがあります。id プロパティを使用すると、PWA の一意の ID を指定できます。また、protocol_handlers プロパティを使用すると、インストール時に PWA をプロトコル ハンドラとして自動的に登録できます。新しいオリジン トライアルでは、リソースをダウンロードする際のフェッチ優先度を指定できます。ほかにも多数あります。
- Chrome
Lighthouse 9.0 の新機能
Lighthouse 9.0 では、レポートが更新され、ユーザーフローのサポートがプレビュー版としてご利用いただけます。
- Chrome
トラブルシューティングとロギング
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 DevTools
ユーザー エージェント文字列で Chrome のメジャー バージョンを 100 に強制する
Chrome のバージョン番号がまもなく 2 桁から 3 桁に変わり、ユーザー エージェント(UA)文字列を解析するすべてのコードに影響する可能性があります。Chrome 96 ~ 99 の機能フラグを使用すると、UA 文字列のメジャー バージョン番号を 100 にすることで、早期テストを行うことができます。
- Chrome
Chrome DevTools での CSP と Trusted Types のデバッグの実装
Chrome DevTools での、コンテンツ セキュリティ ポリシーと Trusted Types の問題のデバッグの実装方法。
- Chrome
EyeDropper API を使用して画面上のピクセルの色を選択する
クリエイティブ アプリケーションのデベロッパーは、EyeDropper API を使用して、ユーザーがブラウザ外のピクセルを含め、画面上のピクセルから色を選択できる選択ツールを実装できます。
効果的な画像コンポーネントの作成
画像は、ウェブ アプリケーションのパフォーマンス ボトルネックの一般的な原因であり、最適化の重要な重点分野です。このドキュメントでは、Google の Aurora チームが、デベロッパー指向のインターフェースを使用して、Next.js の強力な画像コンポーネントをどのように設計したかについて説明します。このコンポーネントは、デベロッパーにとって使いやすいインターフェースを使用して、多くの最適化が組み込まれています。この投稿では、このコンポーネントがどのように設計され、その過程で学んだ教訓についてお話しします。
DevTools の新機能(Chrome 96)
新しい [CSS の概要] パネルで、CSS 優先のコントラスト メディアや Chrome の自動ダークモードをエミュレートします。
- Chrome
CSS の概要: CSS で改善できる点を特定する
[CSS の概要] パネルで、CSS の改善点を特定できます。
- Chrome DevTools
サポートの終了と削除(Chrome 96)
計画に役立つ Chrome 96 のサポート終了と削除のまとめ。
- Chrome
自動ダークモード
ライトテーマのサイトのダークモードを自動生成する。
- Chrome
アーキテクチャごとに異なる Service Worker 戦略
2 種類のウェブサイト アーキテクチャの紹介。
Service Worker の開発エクスペリエンスの向上
Service Worker の使用時に発生する可能性のあるローカル開発の問題を解決する方法。
バグのある Service Worker の削除
問題の原因となっている Service Worker を修正する方法。
Service Worker のデプロイに関する期待事項
Service Worker がデプロイ後にウェブサイトに及ぼす影響を把握する。
Reporting API v1 に移行する
新しいバージョンの Reporting API をご利用いただけます。新しい API はよりスリムで、あらゆるブラウザでサポートされるようになります。
- Chrome
Reporting API を使用してウェブ アプリケーションをモニタリングする
Reporting API を使用して、セキュリティ違反や非推奨の API 呼び出しなどをモニタリングすることができます。
Chrome 95 の新機能
Chrome 95 がリリースされました。ブラウザに組み込まれた URLPattern によってルーティングが簡単になります。また、Eye Dropper API には色を選択するための組み込みツールが用意されており、減少した UA 文字列を今すぐ受け取る新しいオリジン トライアルを利用できます。
- Chrome
RenderingNG の詳細: LayoutNG
LayoutNG のアーキテクチャの大規模な変更によって、さまざまな種類のバグやパフォーマンスの問題がどのように軽減され、軽減されるかを説明します。
- Chromium
Chromium Chronicle #25: スレッドセーフなアノテーション
Clang の静的解析フレームワークがスレッドセーフなプルーフのトイルをどのように引き継ぐかについて学びます。
- Chrome
Chrome ユーザー デバイス特性レポート
開発者は常に、どのようなユーザー層を対象にアプリを開発しているのでしょうか。RAM の容量はどれくらいですか?お使いの Wi-Fi の種類は?新しいレポートでは、さまざまな国とプラットフォームに関する回答を確認できます。
- Chrome
2021 年第 3 四半期における Chrome ウェブストア ポリシーの更新
拡張機能の品質とデベロッパーのエクスペリエンスの一貫性を維持するため、セキュリティ要件を更新し、いくつかのポリシーをさらに明確にしました。
- Chrome 拡張機能
- Chrome
Workbox とは
一般的な Service Worker のルーティングとキャッシュ保存を簡素化する一連のモジュール、Workbox を紹介します。
Service Worker の概要
Service Worker の概要。
Service Worker のキャッシュ戦略
Service Worker でのキャッシュ保存の概要。
Service Worker の人生
オフライン アプリケーションを可能にするために Service Worker がどのように動作するかを理解する。
Manifest V3 への Chrome 拡張機能の移行
Manifest V3 への拡張機能の移行計画の詳細を共有
- Chrome
- Chrome 拡張機能
サポートの終了と削除(Chrome 95)
計画に役立つ Chrome 95 のサポート終了と削除のまとめ。
- Chrome
Chrome 94 の新機能
Chrome 94 がリリースされました。`` 要素のデフォルトの色空間が正式に SRGB として定義され、Display P3 に変更できます。ストリーミング ゲームや動画エディタなどにとって重要な、組み込みのオーディオ コーデックや動画コーデックにアクセスするための新しい低レベルの方法があります。WebGPU がオリジン トライアルを開始します。ほかにも多数あります。
- Chrome
DevTools の新機能(Chrome 95)
新しい CSS の長さ作成ツール、[問題] タブでの問題の非表示、プロパティの表示の改善など。
- Chrome
詳細: VideoNG
最新の再生システムと、Chromium が毎日の何億時間もの総再生時間を支えている仕組みをご確認ください。
- Chromium
DevTools での CSS インフラストラクチャのモダナイゼーション
DevTools での CSS インフラストラクチャの調査と更新を行う方法
- Chrome
Lighthouse 8.4 の新機能
Lighthouse 8.4 では、LCP 画像の遅延読み込みや、モバイル ビューポートのない FID の失敗に対する保護機能が追加されました。
- Chrome
VirtualKeyboard API によるフル コントロール
タッチデバイスの仮想キーボードが表示されたときに、ブラウザがコンテンツ オクルージョンに対応するよう管理します。
Chrome 93 の新機能
Chrome 93 がリリースされました。JavaScript モジュールと同様に、import ステートメントを使用して CSS スタイルシートを読み込めるようになりました。インストールされている PWA を URL ハンドラとして登録できるため、ユーザーは PWA に直接移動できます。皆様からのフィードバックに基づいて Multi-Screen Window Placement API が更新され、2 回目のオリジン トライアルが開始されます。安定版のリリース サイクルを 4 週間に短縮します。ほかにも多数あります。
- Chrome
サポートの終了と削除(Chrome 93)
計画に役立つ Chrome 93 でのサポート終了と削除のまとめ。
- Chrome
非推奨になった機能と削除(Chrome 94)
Chrome 94 でのサポート終了と削除のまとめ。計画の参考にしてください。
- Chrome
Chromium Chronicle #24: StrongAlias、IdType、TokenType
同じ型が互換性のないドメインの値を表すことがあり、バグが発生する可能性があります。幸いなことに、Chromium の //base では明示的な明確なタイプを簡単に導入できます。
- Chrome
プライベート ネットワーク アクセスの更新: 非推奨トライアルのご紹介
プライベート ネットワーク アクセスの仕様の一環として、Chrome 94 より、保護されていない公開ウェブサイトからプライベート ネットワーク エンドポイントにアクセスすることができなくなります。おすすめの対応方法について以下でご説明します。
- Chrome
最新のクライアントサイド ルーティング: Navigation API
シングルページ アプリケーションを構築するための改善された機能を追加する新しい API である Navigation API について説明します。
RenderingNG の主なデータ構造
RenderingNG アーキテクチャのコンポーネントと、レンダリング パイプラインがコンポーネントを通過する仕組みについて理解します。
- Chromium
DevTools の新機能(Chrome 94)
お好みの言語で DevTools を利用したり、新しい Google Nest Hub デバイスを利用したり、新しい CSS コンテナクエリのバッジなどを利用したりできます。
- Chrome
DevTools の CSS グリッドツール
DevTools での CSS グリッドツールのサポートを設計、実装した方法。
DevTools の CSS グリッドツール
DevTools での CSS グリッドツールのサポートを設計、実装した方法。
- Chrome DevTools
- Chrome
非推奨になった機能と削除(Chrome 92)
計画に役立つ Chrome 92 のサポート終了と削除のまとめ。
- Chrome
Chrome オリジン トライアルのトラブルシューティング
メタタグ、ヘッダー、スクリプト内のトライアル トークンに関する一般的な問題に対処します。また、Chrome DevTools でのデバッグのサポートについても学習します。
クロスオリジン オープナー ポリシー
manifest.json の cross_origin_opener_policy プロパティのリファレンス ドキュメント。
- Chrome 拡張機能
クロスオリジン分離
拡張機能のクロスオリジン分離の概要
- Chrome 拡張機能
クロスオリジン埋め込みポリシー
manifest.json の cross_origin_embedder_policy プロパティのリファレンス ドキュメント。
- Chrome 拡張機能
クロスオリジン埋め込みポリシー
manifest.json の cross_origin_embedder_policy プロパティのリファレンス ドキュメント。
- Chrome 拡張機能
サポートの終了と削除(Chrome 91)
計画に役立つ Chrome 91 のサポート終了と削除のまとめ。
- Chrome
クロスオリジン オープナー ポリシー
manifest.json の cross_origin_opener_policy プロパティのリファレンス ドキュメント。
- Chrome 拡張機能
OS Login で PWA を自動的に起動する
多くのオペレーティング システムには、ユーザーがログインしたときにアプリケーションを自動的に起動する機能があります。この機能は、インストール済みのウェブ アプリケーションでも利用できるようになりました。
- Chrome
COEP を使用して CORP ヘッダーなしでクロスオリジン リソースを読み込む: 認証情報なし
Chrome 93 以降、「Cross-Origin-Embedder-Policy: credentialless」はオリジン トライアルの対象になります。この新しい値により、ウェブページはクロスオリジン分離を有効にできるようになります。認証情報のないリクエストを送信することで、クロスオリジン リソースが「CORP: Cross-origin」ヘッダーで応答する必要はありません。
- Chrome
WebDriver BiDi - クロスブラウザ自動化の未来
WebDriver BiDi の概要と、クロスブラウザ自動化の未来について知る
- Chrome
Wasm モジュールの共有を同一オリジンに制限する
同一サイト環境間での WebAssembly モジュールの共有は、同一オリジンのみに制限されます。
- Chrome
DevTools の新機能(Chrome 93)
編集可能な CSS コンテナクエリ、ウェブバンドルのプレビュー、コンソールでの文字列処理の改善など。
- Chrome
WebOTP API を使用してパソコンで電話番号を確認する
Chrome 93 以降、パソコン版 Chrome でウェブサイトに対して電話番号の確認を行えるようになりました。
Chromium Chronicle #23: Chrome インフラにおける検証済みビルド
Chrome とインフラストラクチャにポリシー適用チェックを実装したことで、セキュリティに関する最低限の基準を満たしていることを確認できます。
- Chrome
RenderingNG アーキテクチャ
RenderingNG アーキテクチャのコンポーネントと、レンダリング パイプラインがコンポーネントを通過する仕組みについて学びます。
- Chromium
Android のコンセプト(ウェブ デベロッパー向け)
Android や Google Play を初めて使用するウェブ デベロッパー向けの、Android の関連で重要なコンセプト。
URLPattern は、ウェブ プラットフォームにルーティングをもたらします
一般的なパターン マッチングのユースケースを標準化するためのアプローチ
Chrome 拡張機能: 拡張機能に関するポリシーを明確化し、ウェブストアの安全性と一貫性を高めました
拡張機能の品質とデベロッパーのエクスペリエンスの一貫性を維持するため、セキュリティ要件を更新し、いくつかのポリシーをさらに明確にしました。
- Chrome
- Chrome 拡張機能
Chromium Chronicle #22: Know Thy(Depot)ツール
Depot Tools は、Git 上に構築されたツールのコレクションであり、Chromium コードベースと関連プロジェクトに寄与するデベロッパーのワークフローを簡素化します。
- Chrome
JavaScript フレームワークでのリソースのインライン化
プロジェクト Aurora の協力を得て、JavaScript フレームワークに実装された最新の最適化について説明します。
Manifest V3 での拡張機能の操作
Chrome 拡張機能には以前から Browser API と Page Actions API がありましたが、Manifest V3 はどちらも汎用の Actions API に置き換えられました。この投稿では、これらの API の歴史と Manifest V3 の変更点について説明します。
- Chrome
RenderingNG
2021 年に Google は、Chromium の次世代レンダリング アーキテクチャである RenderingNG の設計、構築、リリースのプロセスの大部分を完了しました。
- Chromium
アプリ向けの高パフォーマンス ストレージ: Storage Foundation API
Storage Foundation API は、基本的なファイル システムに似ており、バッファとオフセットを介して保存済みデータに直接アクセスできるストレージ API を提案しました。
CSP の XSS 攻撃に対する効果を確認する
厳格なコンテンツ セキュリティ ポリシー(CSP)によるクロスサイト スクリプティング(XSS)攻撃の防止について学習します。
TablesNG が 72 件の Chromium バグを解決して相互運用性を改善
-- テーブル用の新しいレンダリング エンジンにより、ウェブ全体で表形式データを作成する際の一貫性が向上しました。
- Chrome
Aurora の概要
この記事では、オープンソース フレームワークとの緊密なコラボレーションを目的とした Chrome イニシアチブである Aurora をご紹介します。
フレームワークへの準拠
この記事では、適合性(Google 内のフレームワークで使用されている手法)と、それを JavaScript フレームワーク エコシステムにオープンソース化する計画について説明します。
- Chrome
Memory Inspector のご紹介
この記事では、Chrome 91 で導入された Memory Inspector について説明します。ArrayBuffer、TypedArray、DataView、Wasm メモリを検査できます。
- Chrome
chrome.scripting のご紹介
Scripting API は、スクリプトに特化した新しい Manifest V3 API です。この変更の動機と、これまでとの違いを詳しく見てみましょう。
- Chrome
CSS グリッド レイアウトを検査する
Chrome DevTools を使用して CSS グリッドを表示、変更する方法を学習します。
- Chrome DevTools
Compute Pressure API
Compute Pressure は、システムへのプレッシャーを表すハイレベルの状態を提供します。実装では、基盤となる適切なハードウェア指標を使用して、システムに管理不能な負荷がかかっている場合を除き、ユーザーが利用可能なすべての処理能力を活用できるようにします。
URL ハンドラとしての PWA
PWA を URL ハンドラとして登録した後、登録済みの URL パターンのいずれかに一致するハイパーリンクをユーザーがクリックすると、登録済みの PWA が開きます。
DevTools の新機能(Chrome 92)
CSS グリッド エディタ、コンソールでの定数再宣言のサポート、ソース順序ビューアなど。
- Chrome
Chromium Chronicle #21: ChromeOS のエンドツーエンドの UI 自動化
Tast は、Chrome の a11y(ユーザー補助)ツリーを使用して ChromeOS UI を制御する新しい UI ライブラリです。このライブラリを使用すると、デベロッパーは表示されている UI サーフェスに対するエンドツーエンド テストを簡単に作成できます。
- Chrome
Chrome 91 の新機能
Chrome 91 がリリースされます。ファイルを操作するウェブアプリで、File System Access API の使用時にファイル名とディレクトリが提案されるようになりました。クリップボードからファイルを読み取ることもできます。サイトに複数のドメインがあり、それらが同じアカウント管理バックエンドを共有している場合は、それらのドメインを Chrome に統一して、パスワード マネージャーが適切な認証情報を提案できるようにします。I/O の動画もすべてご覧いただけます。他にもたくさんの動画が公開されています。
- Chrome
宣言型リンク キャプチャを使用して、スコープ内のリンクから PWA を開く方法を選択できます
宣言型リンク キャプチャは、「capture_links」と呼ばれるウェブアプリ マニフェスト プロパティの提案です。これにより、デベロッパーは、ナビゲーション スコープ外のコンテキストから、アプリケーションのナビゲーション スコープ内にある URL にブラウザが移動するように求められたときに、どうなるかを宣言的に決定できます。
Chromium でブラウザのフラグを設定する方法
Chromium で導入される新しい API の一部では、テスト用のブラウザ フラグを設定する必要があります。Google Chrome、Microsoft Edge など、さまざまな Chromium 派生プロダクトでこの操作を行う方法を学びます。
- Chrome
オフラインファーストの信頼できるウェブアクティビティ
ユーザーが初めてアプリを開いたときに接続が確立されていない場合に、代替のオフライン画面を表示する方法
PWA の URL プロトコル ハンドラ登録
PWA をプロトコル ハンドラとして登録した後、ブラウザまたはプラットフォーム固有のアプリから、mailto、Bitcoin、Web Music などの特定のスキームのハイパーリンクをクリックすると、登録済みの PWA が開いて URL が受信されます。
Chrome DevTools のスタック トレースを 10 倍高速化した方法
Chrome DevTools のスタック トレースを 10 倍高速化した方法
- Chrome
MediaStreamTrack の挿入可能なストリーム
MediaStreamTrack の挿入可能なストリームとは、MediaStreamTrack のコンテンツを新しいコンテンツの生成に操作または使用できるストリームとして公開することです。
Chromium Chronicle #20: ベンチマーク テストハーネス
ベンチマークの追加は、パフォーマンスの低下を防ぎ、パフォーマンスを向上させるための簡単な方法です。
- Chrome
拡張機能マニフェスト コンバータ
拡張機能を Manifest V3 に変換するためのオープンソース ツール。Service Worker やスクリプト インジェクションを使用するように適応するなど、機械的ではない変更を伴う場合は、コードを手動で更新する必要があります。
- Chrome
PWA インストール UI の拡充
機能豊富なインストール UI の概要と実装方法についてのガイダンス。
- Chrome
DevTools の新機能(Chrome 91)
ウェブに関する指標のポップアップ表示、CSS のスクロール スナップの表示、新しい Memory Inspector の表示など。
- Chrome
クロスオリジン分離制限に合わせてタイマーを設定する
Chrome 91 以降、クロスオリジン分離を行わないプラットフォームでは、明示的なタイマーの解像度が 100 マイクロ秒に制限されます。
- Chrome
Manifest V3 でアクセス可能なウェブ リソース
Manifest V3 を使用したウェブアクセス可能なリソースをリリース「manifest.json」で権限の定義がサポートされるようになりました。デベロッパーは、リクエスト元のサイトのオリジンまたは拡張機能の ID に基づいてリソースを制限できます。
- Chrome
Chrome 90 の新機能
Chrome 90 がリリースされました。CSS の overflow プロパティに新しい値が追加されました。Feature Policy API の名称が権限ポリシーに変更されました。また、Shadow DOM を HTML で直接実装して使用する新しい方法があります。その他にも多くの機能があります。
- Chrome
DevTools のアーキテクチャ更新: DevTools から TypeScript への移行
Chrome DevTools を Closure Compiler タイプ チェッカーから TypeScript に移行する方法
- Chrome
Chromium Chronicle #19: CLion による開発の高速化
CLion IDE を使用すると、シンボル間の移動やコードベースの検索などが可能になります。
- Chrome
Chrome 90 でのサポートの終了と削除
計画に役立つ Chrome 90 のサポート終了と削除のまとめ。
- Chrome
BigQuery の CrUX レポートにランク マグニチュードを追加
BigQuery の CrUX レポートにランク マグニチュードを追加
- Chrome
VersionHistory API リファレンス
VersionHistory ウェブサービス API に関する技術情報です。
VersionHistory API の例
VersionHistory ウェブサービス API の使用例。
VersionHistory API ガイド
VersionHistory ウェブサービス API を使用して Google Chrome のバージョン履歴情報にプログラムでアクセスするための入門ガイドです。
Google Chrome のリリース サイクルを短縮
今年後半には、リリース サイクルを短縮し、現在の 6 週間から 4 週間ごとに Google Chrome の新しいバージョンを Stable チャンネルにリリースする予定です。
- Chrome
Chrome 89 の新機能
Chrome 89 がリリースされました。WebHID、WebNFC、Web Serial のオリジン トライアルを終了し、安定版で利用できるようになりました。数人のデベロッパーの方が PWA のインストール可否チェックで利用していた抜け道をなくします。Web Share と Web Share Target がデスクトップに届きます。ほかにも多数あります。
- Chrome
DevTools の新機能(Chrome 90)
CSS Flexbox、ページ上のパフォーマンス ヘッドアップ表示、問題タブの更新などのデバッグ サポート。
- Chrome
DevTools での CSS-in-JS サポート
DevTools での CSS-in-JS のサポートと、通常の CSS との違い
DevTools での CSS-in-JS サポート
DevTools での CSS-in-JS のサポートと、通常の CSS との違い
- Chrome DevTools
- Chrome
明日の表示モードに備える
display_override プロパティを使用すると、デベロッパーは、PWA を表示するモードのフォールバック チェーンをカスタマイズして定義できます。
Chromium Chronicle #18: Chromium のコード カバレッジ
テスト カバレッジは、特定のテストスイートの実行時に実行されるソースコードの量を測定します。
- Chrome
ハードウェア アクセラレーション アニメーション機能の更新
Chromium のハードウェア アクセラレーション機能は、SVG アニメーション、パーセンテージ ベースの変換、クリップパス、背景画像などに更新されます。
- Chrome
コンソールでメッセージの書式設定とスタイルを設定する
コンソールでメッセージの書式設定とスタイル設定を行う方法を学習します。
- Chrome DevTools
2021 年国際母語デー
国際母語デーは、2 月 21 日に世界中で行われる文化の多様性を祝う日です。世界中で話されている言語の保存と保護を促進し、多言語性を称えます。
- Chrome
プログレッシブ ウェブアプリのオフライン サポートの検出機能を改善
オフライン サポートの検証は、当初から PWA のインストール基準に組み込まれていました。
- Chrome
DevTools の起動時間の短縮
フロントエンドでのメッセージ ディスパッチによる DevTools のパフォーマンス オーバーヘッドを削減します。
- Chrome
サポートの終了と削除(Chrome 89)
計画に役立つ Chrome 89 のサポート終了と削除のまとめ。
- Chrome
Chromium Chronicle #17: ブラウザテストのミックスイン
ブラウザのテストを作成する際に、ユーザーが手動で行えるセットアップ アクションをプログラマティックに実行したいと思うことはよくあります。そのために、Mixin は簡単なブラウザのテスト設定を再利用可能な方法で実行するためのツールスイートです。
- Chrome
Client Hints を使用したリソース選択の自動化
画像の最適化は困難で、自動化が成功の鍵となる。
- Chrome
Digital Goods API と Payment Request API を使用して Google Play 請求サービス経由で支払いを受け取る
Digital Goods API、Payment Request API、Trusted Web Activity を使用して、PWA で Google Play 請求サービス経由で支払いを受け取ります。
Puppeteer から TypeScript への移行
Puppeteer から TypeScript への移行方法
- Chrome
DevTools の新機能(Chrome 89)
Trusted Types 違反のデバッグのサポート、ビューポート以外のノードのスクリーンショットのキャプチャ、ネットワーク リクエスト用の新しい [トラスト トークン] タブなど。
- Chrome
Chrome 88 の新機能
Chrome 88 がリリースされました。Manifest V3 を使用した拡張機能を Chrome ウェブストアにアップロードできるようになりました。アスペクト比の CSS プロパティを使用すると、どの要素にも簡単にアスペクト比を設定できます。信頼できるウェブ アクティビティで Play 請求サービスを使用するなど、さまざまな機能をご利用いただけます。それでは、Chrome 88 のデベロッパー向けの新機能を詳しく見ていきましょう。
- Chrome
チェーン化された JS タイマーの大規模なスロットリング(Chrome 88 以降)
ページが 5 分以上非表示になっている、ページが 30 秒以上無音になっている、WebRTC が使用されていない、タイマーのチェーンが 5 以上の場合に、集中的なスロットリングが有効になります。
- Chrome
Android Chrome 88 とパソコン版 Chrome 92 での SharedArrayBuffer の更新
SharedArrayBuffer は Android Chrome 88 で利用できるようになります。クロスオリジン分離されたページでのみ利用できます。パソコン版 Chrome 92 以降では、クロスオリジン分離ページでのみ使用できるようになります。オリジン トライアルに登録すると、パソコン版 Chrome 113 まで現在の動作を維持できます。
- Chrome
Chromium Chronicle #16: デスクトップでの Google アプリの更新
パソコンで Chrome が自動的に最新の状態に保たれていると思ったことはありませんか?または、Chromebook、Chromecast、Android にアップデートを提供する方法も教えてください。
- Chrome
最新のツールを使用した WebAssembly のデバッグ
Chrome DevTools での WebAssembly の新しいデバッグ機能の段階的な概要。
- Chrome
DevTools アーキテクチャの更新: ウェブ コンポーネントへの移行
Chrome DevTools から Web Components に移行する理由と方法
- Chrome
サポートの終了と削除(Chrome 88)
計画に役立つ Chrome 88 のサポート終了と削除のまとめ。
- Chrome
新しい developer.chrome.com へようこそ。
サイトのリニューアルと 2021 年の計画の概要についてお知らせします。
- Chrome
Web In Play の最新情報
Trusted Web Activity を使用するウェブ アプリケーションの新機能をご紹介します。
Google Play 請求サービスを使用
Google Play 請求サービスには、カタログ、料金、定期購入、レポートの管理、Google Play ストアを利用した購入手続きフローのためのツールが用意されています。
アプリを Google Play ストアに追加する
TWA を Google Play ストアに追加する
ファサードを使用したサードパーティ リソースの遅延読み込み
ファサードでサードパーティ リソースを遅延読み込みする方法について学びます。
Chromium Chronicle #15: ターゲットの公開設定の制限
Chromium では、1 つのコンポーネント用に記述されたコードの中で、他の場所では役立つものの、隠れた制限がある可能性があるコードを見つけるのが一般的です。安全のため、ターゲットの公開設定を制限することで、危険な機能への外部アクセスを制限します。
- Chrome
信頼できるウェブ アクティビティで Play 請求サービスを使用する
Google Play 請求サービスを信頼できるウェブ アクティビティ プロジェクトに統合する方法について説明します。
isInputPending() を使用した JS スケジューリングの改善
読み込みパフォーマンスと入力応答性の間のトレードオフの回避に役立つ、新しい JavaScript API です。
Blink レンダラで色覚異常をシミュレートする
DevTools と Blink Renderer で色覚異常シミュレーションを実装する理由と方法
- Chromium
Chrome 87 の新機能
Chrome 87 がリリースされました。パン、チルト、ズームをサポートするウェブカメラでパン、ティルト、ズームを制御できるようになりました。また、範囲リクエストや Service Worker で必要な回避策が少なく、フォント アクセス API のオリジン トライアルなど多くの機能が用意されています。では、Chrome 87 のデベロッパー向けの新機能を詳しく見ていきましょう。
- Chrome
ワークボックスのレシピ
一般的なワークボックス パターンは、個々のパッケージから自身でセットアップしなくても簡単に使用できます。
DevTools の新機能(Chrome 88)
新しい CSS アングル可視化ツール、サポートされていない画像タイプと保存容量のエミュレート、新しいウェブに関する指標レーンなど。
- Chrome
信頼できるウェブ アクティビティでウェブ共有ターゲットを有効にする
Trusted Web Activity を使用してプロジェクトで Web Share Target を有効にする方法について説明します。
Puppetaria: ユーザー補助重視の Puppeteer のスクリプト
Puppetaria - ユーザー補助を重視した Puppeteer スクリプトです。CSS セレクタに依存せずに、ユーザー補助ツリーのクエリに基づいた代替クエリハンドラを使用できます。
- Chrome
Manifest V2 について
Chrome 拡張機能のデベロッパー向けドキュメント。
- Chrome 拡張機能
フィードバックのお願い: プライベート ネットワーク用の CORS(RFC1918)
クライアントの内部ネットワーク上のデバイスやサーバーが意図せずウェブ全体に公開されると、悪意のある攻撃に対して脆弱になります。CORS-RFC1918 は、パブリック ネットワークからのリクエストをブラウザ上でデフォルトでブロックし、内部デバイスがそうしたリクエストをオプトインできるようにする提案です。
- Chrome
Chromium Chronicle #14: ウォーターフォールへのテストの追加
Chrome の新機能の回帰を検出したい場合は、ウォーターフォールである Chrome の継続的なビルドとテストのインフラストラクチャにテストを追加します。
- Chrome
Chrome DevTools の [WebAuthn] タブの作成方法
デベロッパーが認証システムのエミュレート、機能のカスタマイズ、ステータスの検査を行うための Chrome DevTools の [WebAuthn] タブの作成方法。
インストール済みのウェブ アプリケーションをファイル ハンドラとして指定する
アプリをオペレーティング システムにファイル ハンドラとして登録します。 ウェブアプリが ファイルの読み取りと書き込みが可能 になったので、次は、デベロッパーがアプリが作成して処理できるファイルのファイル ハンドラとして、これらのウェブアプリを宣言できるようにすることが理にかなっています。File Handling API を使用すると、まさにこのことができます。テキスト エディタ アプリをファイル ハンドラとして登録してインストールしたら、macOS で.txt
非推奨になった機能と削除(Chrome 87)
計画に役立つ Chrome 87 のサポート終了と削除のまとめ。
- Chrome
WebCodecs による動画処理
エンコードされた動画または音声のフレームや、混合されていないチャンクなど、動画ストリームのコンポーネントを操作します。
Chrome 86 の新機能
Chrome 86 がリリースされました。ファイル システム アクセス API が安定版で利用可能になりました。ウェブ HID と Multi-Screen Window Placement API の新しいオリジン トライアルがあります。CSS には新しいものもありますでは、Chrome 86 のデベロッパー向けの新機能を詳しく見ていきましょう。
- Chrome
キャッシュをパーティショニングすることでセキュリティとプライバシーを確保
Chrome の HTTP キャッシュ パーティショニングにより、セキュリティとプライバシーが強化されます。
- Chrome
サードパーティのオリジン トライアル
埋め込みコンテンツのプロバイダが、ウェブ プラットフォームの新機能や試験運用版の機能を複数サイトでテストする方法について説明します。
DevTools の新機能(Chrome 87)
新しい CSS グリッド デバッグツール、[Web Authn] タブ、移動可能なツール、[Computed] サイドバー ペインが追加されました。
- Chrome
Chrome DevTools の [Issues] タブの作成方法
問題の検出と解決に関するデベロッパー エクスペリエンスを向上させるために、Chrome DevTools の [Issues] タブを作成する方法。
- Chrome
センサー: デバイス センサーをエミュレートする
[センサー] パネルを使用して、位置情報をオーバーライドしたり、デバイスの向きをシミュレートしたり、強制タップしたり、アイドル状態をエミュレートしたりできます。
- Chrome DevTools
Workbox v5 から v6 に移行する
Workbox v5 から v6 への移行に関するガイドです。
一般的ではない HID デバイスへの接続
WebHID API を使用すると、ウェブサイトは代替の補助キーボードや珍しいゲームパッドにアクセスできます。
Window Management API を使用して複数のディスプレイを管理する
Window Management API を使用すると、マシンに接続されているディスプレイを列挙したり、特定の画面にウィンドウを配置したりできます。
DevTools アーキテクチャの更新: JavaScript モジュールへの移行
Chrome DevTools から JavaScript モジュールへの移行方法
- Chrome
サポートの終了と削除(Chrome 86)
計画に役立つ Chrome 86 のサポート終了と削除のまとめ。
- Chrome
Chrome 85 の新機能
Chrome 85 がリリースされました。content-visibility: auto を使用すると、レンダリング パフォーマンスを改善できます。CSS で CSS プロパティを設定できるようになりました。getInstalledRelatedApps() API を使用して、Windows アプリまたは PWA がインストールされているかどうかを確認できるようになりました。アプリアイコンのショートカットは Windows でも機能します(今回は)。フェッチ アップロード ストリーミングのオリジン トライアルがあります。その他多数。では、Chrome 85 のデベロッパー向けの新機能を詳しく見ていきましょう。
- Chrome
ローカル フォントを使用して高度なタイポグラフィを使用する
Local Font Access API は、ユーザーのインストール済みのローカル フォントを列挙し、さまざまな TrueType/OpenType テーブルへの低レベルのアクセスを提供します。
DevTools の新機能(Chrome 86)
新しいメディアパネル、キャプチャ ノードのスクリーンショット、[Issues] タブの更新、欠落しているローカル フォントのエミュレート、非アクティブなユーザー、preferreds-reduced-data
- Chrome
シリアルポートに対して読み取り / 書き込みを行う
Web Serial API は、ウェブサイトがシリアル デバイスと通信できるようにすることで、ウェブと現実世界の橋渡しをします。
HTTP リクエスト ヘッダーを追加する
カスタムタブ インテントに HTTP CORS ヘッダーを追加するためのガイド
Chrome の新しいデフォルトの Referrer-Policy - strict-origin-when-cross-origin
Chrome の新しいデフォルトの Referrer-Policy - strict-origin-when-cross-origin
- Chrome
Keyboard Lock API でキーをキャプチャする
Keyboard Lock API を使用すると、通常は基盤となるオペレーティング システムによって予約されているキーをウェブサイトでキャプチャできます。全画面表示で没入できるエクスペリエンスを提供するウェブ アプリケーション(ゲームやリモート アクセス アプリなど)を対象としています。
browser-fs-access ライブラリを使用したファイルとディレクトリの読み取りと書き込み
最新のブラウザはすべて、ローカルのファイルとディレクトリを読み取ることができます。ただし、真の書き込みアクセス権、つまりファイルのダウンロード以外のアクセス権は、File System Access API を実装しているブラウザに限定されます。この投稿では、ブラウザ fs-access というサポート ライブラリを紹介します。これは、File System Access API 上で抽象化レイヤとして機能し、ファイル処理については従来のアプローチに透過的にフォールバックします。
サポートの終了と削除(Chrome 85)
計画に役立つ Chrome 85 のサポート終了と削除のまとめ。
- Chrome
フェッチ API を使用したストリーミング リクエスト
Chromium のバージョン 105 から、アップロード ストリーミングがサポートされるようになりました。つまり、全身を準備してからリクエストを開始できるようになりました。
Houdini - CSS に関する誤解の解消
Houdini は、CSS エンジンの内部をデベロッパーに公開するための API のコレクションです
Chrome 84 の新機能
Chrome 84 がリリースされました。ユーザーは、アプリアイコンのショートカットを使用して、アプリ内の一般的なタスクを開始できます。Web Animations API により、これまでサポートされていなかった多くの機能のサポートが追加されました。Wake Lock と Content Indexing API はオリジン トライアルを終了。アイドル検出と SIMD に新しいオリジン トライアルが追加されました。他にもさまざまな機能があります。では、Chrome 84 のデベロッパー向けの新機能を詳しく見ていきましょう。
- Chrome
Android 11 でのカスタムタブの使用
Android 11 でカスタムタブを使用する方法
- Chrome
使用していない JavaScript を削除する
Lighthouse の「未使用の JavaScript を削除する」の監査に合格する方法を確認する。
DevTools の新機能(Chrome 85)
CSS-in-JS フレームワークのスタイル編集、Lighthouse 6.0、JavaScript の新機能など。
- Chrome
CrUX API の使用方法
Chrome UX Report API を使用して、数百万ものウェブサイトにおける実際のユーザー エクスペリエンス データに RESTful アクセスする方法を紹介します。
- Chrome UX レポート
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 ダッシュボードを作成してオリジンのユーザー エクスペリエンスを追跡する方法について説明します。
- Chrome UX レポート
CrUX BigQuery データセットの使用方法
このガイドでは、BigQuery を使用して CrUX データセットに対するクエリを作成し、ウェブ上のユーザー エクスペリエンスの状態に関する有益な結果を抽出する方法を学習します。
- Chrome UX レポート
WebTransport の使用
WebTransport は、低レイテンシの双方向のクライアント サーバー メッセージングを提供する API です。ユースケースや、今後の実装についてフィードバックをお寄せください。
サポートの終了と削除(Chrome 84)
計画に役立つ Chrome 84 のサポート終了と削除の概要。
- Chrome
Lighthouse 6.0 の新機能
新しい指標、パフォーマンス スコアの更新、新しい監査など。 本日、Lighthouse 6.0 をリリースします。 Lighthouse は、サイトのユーザー エクスペリエンスを改善するための改善点と診断情報をデベロッパーに提供する、自動ウェブサイト監査ツールです。Chrome DevTools、npm(Node モジュールと CLI として)、ブラウザ拡張機能( Chrome と Firefox で利用可能)で使用できます。 PageSpeed Insights など、多くの Google
- Chrome
Chrome 83 の新機能
Chrome 83 がリリースされました。クロスサイト スクリプティングの脆弱性を防ぐのに役立つ信頼できるタイプのサポートが追加されています。フォームの要素が大きく変わります。メモリリークを検出する新しい方法があります。ネイティブ ファイル システム API が、追加された機能を含む新しいオリジン トライアルを開始します。では、Chrome 83 のデベロッパー向けの新機能を詳しく見ていきましょう。
- Chrome
Idle Detection API で非アクティブ ユーザーを検出する
Idle Detection API は、ユーザーがアイドル状態であるときにデベロッパーに通知します。これは、キーボード、マウス、画面の操作がない、スクリーンセーバーがアクティブになっている、画面がロックされている、別の画面に移動しているなどを示します。デベロッパーが定義したしきい値で通知がトリガーされます。
問題: 問題を見つけて修正する
[問題] パネルを使用して、ウェブサイトの問題を見つけて修正します。
- Chrome DevTools
時間のかかる広告介入への対応
時間のかかる広告介入への対応
- Chrome
DevTools の新機能(Chrome 84)
新しい [問題] タブ、[検査モード] ツールチップのユーザー補助情報など。
- Chrome
文字セットの宣言がないか、HTML で宣言のタイミングが遅い
文字エンコード宣言を HTML に追加する方法を学びます。
サポートの終了と削除(Chrome 83)
計画に役立つ Chrome 83 のサポート終了と削除の概要。
- Chrome
Chrome 81 の新機能
Chrome 81 がリリースされました。アプリアイコンのバッジがオリジン トライアルを卒業する。ブラウザで拡張現実のヒットテストを利用できるようになりました。ウェブ NFC のオリジン トライアルを開始します。新しい Chrome のリリーススケジュールについて 最新情報をお伝えしましたでは、Chrome 81 のデベロッパー向けの新機能を詳しく見ていきましょう。
- Chrome
WebSocketStream: ストリームと WebSocket API の統合
WebSocketStream は、ストリームを WebSocket API と統合します。これにより、アプリは受信したメッセージにバックプレッシャーを適用できます。
Chromium Chronicle #13: RR によるタイムトラベル デバッグ
デバッガで同じテストを何度も実行して、コードがどうして不適切な状態になったのか調べたいと思ったことはありませんか?便利なツールをご用意しました。RR は実行トレースを記録し、後退したり、逆戻りしたり、変数の値が変化した場所や、オブジェクトで関数が最後に呼び出された日時を確認したりするのが容易になります。
- Chrome
DevTools の新機能(Chrome 83)
色覚異常のエミュレーション、ロケールのエミュレーション、COOP および COEP デバッグなど、多数の機能が用意されています。
- Chrome
非推奨になった機能と削除(Chrome 81)
計画に役立つ Chrome 81 のサポート終了と削除のまとめ。
- Chrome
Chrome for Android で NFC デバイスを操作する
Chrome for Android で、NFC タグの読み取りと書き込みを行えるようになりました。
Chrome ユーザー エクスペリエンス レポートへの通知権限データの追加
サイト所有者が通知権限の指標を理解できるように、Google は 202001 年のデータセットの Chrome ユーザー エクスペリエンス レポート(CrUX)にこのデータを追加します。これにより、サイト所有者は自分のサイトおよび同じカテゴリ内の比較サイトについて、一般的なユーザー通知権限の応答について理解を深めることができます。
- Chrome
Chromium Chronicle #10: Pixel テストで UI の回帰を把握する
Chrome のテスト戦略は、自動化された機能の正確性テストと手動テストに大きく依存していますが、どちらも軽微な UI の回帰を確実に検出することはできません。ピクセルテストを使用すると、パソコンのブラウザの UI テストを自動化できます。
- Chrome
WebView 内のリンクのカスタムタブを開く
WebView とカスタムタブを組み合わせて、ユーザー エクスペリエンスを向上させます。
地平
Trusted Web Activity を作成するためのライブラリとツールの概要。
統合ガイド
Android アプリで Trusted Web Activity を使用する方法について説明します。
概要
Trusted Web Activity を使用して、プログレッシブ ウェブアプリを Android アプリにシームレスに統合する方法をご紹介します。
Chrome 80 の新機能
Chrome 80 のリリースに伴い、デベロッパー向けの新機能が数多く追加されています。ワーカーのモジュール、JavaScript のオプション チェーン、新しいオリジン トライアル、オリジン トライアルから得られた機能など、さまざまなサポートがあります。では、Chrome 80 のデベロッパー向けの新機能を詳しく見ていきましょう。
- Chrome
Android カスタムタブの概要
Android アプリで URL を開く際に Android カスタムタブを使用するのに最適なタイミングについて説明します。
Custom Tab 低レベル API を使用する
androidx ブラウザ サポート ライブラリなしでカスタムタブを使用する方法について説明します。
Android デバイスにカスタムタブをサポートするブラウザが搭載されているかどうかを確認する
カスタムタブをサポートするブラウザが Android デバイスにあるかどうかを確認する方法について説明します。
DevTools の新機能(Chrome 81)
デバイスモードの Moto G4、Cookie 関連の新機能など。
- Chrome
クエリ パラメータを使用して信頼できるウェブ アクティビティに情報を渡す
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 のサポート終了と削除のまとめ。
- Chrome
Workbox v4 から v5 に移行する
Workbox v4 から v5 への移行に関するガイドです。
Chromium Chronicle #9: ClusterFuzz
ClusterFuzz によって検出された優先度の高いセキュリティ バグを修正するよう求められる場合があります。概要: バグを真剣に受け止めるべきか?サポートするには
- Chrome
Content Indexing API を使ったオフライン対応ページのインデックス登録
PWA で記事やメディア ファイルがキャッシュされる場合があるかもしれませんが、そのページがオフラインでも動作することをユーザーが知るにはどうすればよいでしょうか。Content Indexing API を使えば、自分の PWA や他のインストール済みの PWA のコンテンツがインデックスに追加されると、サポートされているブラウザの専用領域に表示されます。
Chrome 79 の新機能
Chrome 79 がリリースされました。Android にインストール済みのプログレッシブ ウェブアプリで、マスク可能なアイコンがサポートされます。WebXR Device API を使用して、没入感のあるエクスペリエンスを作成できるようになりました。Wake Lock API と rendersubtree 属性のオリジン トライアルが開始されます。Chrome Dev Summit 2019 の動画はすべてオンラインでご覧いただけます。では、Chrome 79 のデベロッパー向けの新機能を詳しく見ていきましょう。
- Chrome
Chrome DevTools での WebAssembly デバッグの改善
DevTools 内から、コードのステップオーバー、ブレークポイントの設定、スタック トレースの解決をソース言語で行うことができます。
- Chrome
DevTools の新機能(Chrome 80)
コンソールでの Let 宣言とクラス再宣言のサポート、WebAssembly デバッグの改善など。
- Chrome
Chromium Chronicle #8: GWP-ASan: 野生のバグを検出する
GWP-ASan は、実際の環境で使用するように設計されたヒープのみのメモリエラー検出器です。use-after-frees、バッファのオーバーフロー/アンダーフロー、二重解放を検出します。ASan とは異なり、スタックやグローバルのエラーは検出されません。
- Chrome
ウェブバンドルのスタートガイド
ウェブバンドルを使用すると、ウェブサイトを 1 つのファイルとして Bluetooth 経由で共有し、元のコンテキストでオフラインで実行できます。
Periodic Background Sync API によるオフライン エクスペリエンスの拡充
定期的なバックグラウンド同期を使用すると、ウェブ アプリケーションで定期的にデータをバックグラウンドで同期できるため、ウェブアプリを iOS/Android/デスクトップ アプリの動作に近づけることができます。
Web Share Target API を使用して共有データを受信する
モバイル デバイスでもデスクトップ デバイスでも、共有ボタンをタップしてアプリを選択し、共有相手を選ぶだけで簡単に共有できるようにする必要があります。Web Share Target API を使用すると、インストール済みのウェブアプリを基盤となるオペレーティング システムに登録して、共有コンテンツを受信できます。
サポートの終了と削除(Chrome 79)
計画に役立つ Chrome 79 のサポート終了と削除のまとめ。
- Chrome
通知トリガー API
Notification Triggers API を使用すると、デベロッパーはネットワーク接続を必要としないローカル通知をスケジュール設定できるため、カレンダー アプリなどのユースケースに最適です。
Chromium Chronicle #7: 前処理のソース
Chromium のソースファイルを 1 つ手動でコンパイルすると、コンパイラの最適化オプションを試したり、マクロの詳細を把握したり、コンパイラのバグを最小限に抑えることができます。今月は、ソースの前処理方法について説明します。
- Chrome
Chrome 78 の新機能
Chrome 78 がリリースされました。CSS 変数に「型」を指定できるようになりました。importScripts() によってインポートされたスクリプトにバイト単位のチェックが実行されるようになったため、Service Worker がより新鮮です。さらに、ネイティブ ファイル システムや SMS Receiver など、便利な新機能を提供する 2 つの新しいオリジン トライアルの詳細もわかりました。さらに、Chrome DevSummit は 2019 年 11 月 11 ~ 12 日に開催されます。では、Chrome 78 のデベロッパー向けの新機能を詳しく見ていきましょう。
- Chrome
DevTools の新機能(Chrome 79)
Cookie がブロックされた理由をデバッグし、preferreds-color-scheme(ダーク)、コード カバレッジの更新などをシミュレートします。
- Chrome
Total Blocking Time
Lighthouse の Total Blocking Time の指標と、この指標の測定と最適化の方法をご確認ください。
WebOTP API を使用してウェブ上で電話番号を確認する
SMS で送信された OTP を検索、記憶、入力するのは面倒。WebOTP API は、ユーザーの OTP ワークフローを簡素化します。
Chromium Chronicle #6: モノレールのグリッドビュー
Chrome の Issue Tracker の Monorail では、グリッドビューで問題をかんばんスタイルのボードで可視化できます。このエピソードでは、グリッドモードの使用方法について説明します。
- Chrome
サポートの終了と削除(Chrome 78)
計画に役立つ Chrome 78 のサポート終了と削除のまとめ。
- Chrome
Lighthouse のアクセシビリティ スコア
Lighthouse でページのユーザー補助スコアを生成する仕組みをご確認ください。
Lighthouse のパフォーマンス スコアリング
Lighthouse でページの全体的なパフォーマンス スコアが生成される仕組みについて説明します。
デフォルトでより鮮度の高い Service Worker
Service Worker スクリプトの更新を確認する HTTP リクエストはデフォルトで HTTP キャッシュで処理されなくなり、インポートしたスクリプトが Service Worker の更新フローをトリガーできるようになります。
- Chrome
Chrome 77 の新機能
Chrome 77 がリリースされました。Largest Contentful Paint は、サイトのパフォーマンスをより効果的にトラッキングできる優れた方法です。フォームに新機能が追加されました。ネイティブ遅延読み込みを利用できます。Chrome DevSummit は、2019 年 11 月 11 ~ 12 日に開催されます。その他にもたくさん。では、Chrome 77 のデベロッパー向けの新機能を詳しく見ていきましょう。
- Chrome
バックグラウンド サービスをデバッグする
レポートを確認し、バックグラウンド サービス(バックグラウンドの取得、バックグラウンド同期、通知、プッシュ メッセージなど)をデバッグします。
- Chrome DevTools
DevTools の新機能(Chrome 78)
[Audits] パネルに Lighthouse 5.2 が表示され、[Performance] パネルに Largest Contentful Paint が表示されます。
- Chrome
クイック スタートガイド
基本の信頼できるウェブ アクティビティを構築するためのガイドです。
ウェブで GPU コンピューティングを使ってみる
この投稿では、試験運用版の WebGPU API について例を挙げて説明し、GPU を使ってデータ並列計算を開始する方法を紹介します。
Chromium Chronicle #5: サンドボックス外のコーディング
すべてのコードにバグがあります。Chrome ブラウザのプロセスにはサンドボックスがないため、そうしたバグによって悪意のあるコードがデバイス全体にフルアクセスする可能性があります。このエピソードでは、サンドボックスを使わずにコーディングする際の推奨事項と禁止事項について説明します。
- Chrome
ReportingObserver API でコードの状態を把握する
ReportingObserver は、サポートが終了した API をサイトで使用した場合や、ブラウザの介入が発生したときに通知を受け取ることができます。基本機能はもともと Chrome 69 で導入されました。Chrome 84 以降では、ワーカーで使用できます。とても簡単です。
サポートの終了と削除(Chrome 77)
計画に役立つ Chrome 77 のサポート終了と削除のまとめ。
- Chrome
ウェブ用の連絡先選択ツール
ユーザーの連絡先へのアクセスは、(ほぼ)頃から iOS/Android アプリの機能でした。Contact Picker API は、ユーザーが連絡先リストから 1 つまたは複数のエントリを選択し、選択した連絡先の限られた詳細情報をウェブサイトと共有できるオンデマンド API です。共有したいものだけを好きなときに共有でき、友だちや家族と連絡を取りやすくなる。
Chrome 76 の新機能
Chrome 76 がリリースされました。また、preads-color-scheme メディアクエリのサポートが追加され、ウェブサイトでダークモードを利用できるようになりました。アドレスバーにインストール ボタンが追加され、プログレッシブ ウェブアプリをパソコンに簡単にインストールできます。モバイルにミニ情報バーが表示されないようにする方法。WebAPK の更新頻度を増やします。その他にもたくさん。では、Chrome 76 のデベロッパー向けの新機能を詳しく見ていきましょう。
- Chrome
Chromium Chronicle #4: WPT を使用してウェブ プラットフォームの機能をテストする
ウェブに公開される機能をテストするには、ウェブ プラットフォーム テスト(WPT)を使用することをおすすめします。これは、GitHub を介して他のブラウザと共有されるためです。今月は、WPT のベスト プラクティスをご紹介します。
- Chrome
メディアの更新(Chrome 75)
暗号化されたメディアと video 要素の「playsInline」属性のヒントのサポートで、再生がスムーズで電力効率がよいかどうかを予測。
- Chrome
DevTools の新機能(Chrome 77)
要素のスタイルのコピー、レイアウト シフトの可視化など。
- Chrome
ウェブ コンポーネントの更新 - v1 API へのアップグレードに要する時間の延長
Web Components v0 ユーザーは、v1 にアップグレードする時間が長くなりますが、しっかりとテストしてください。
- Chrome
Chromium Chronicle #3: Gerrit でのコード カバレッジ
テストは、バグや回帰を発見し、より優れた設計を適用し、コードの保守を容易にするため、非常に重要です。今月は、Gerrit で徹底的なテストを実施する方法について説明します。
- Chrome
サポートの終了と削除(Chrome 76)
計画に役立つ Chrome 76 のサポート終了と削除のまとめ。
- Chrome
WebAPK の更新頻度を高める
Chrome 76 以降、WebAPK の更新頻度が高くなります。
- Chrome
LayoutNG
Chromium の新しいレイアウト エンジン
- Chrome
Chrome 75 の新機能
Chrome 75 がリリースされました。キャンバス要素のレイテンシを短縮する新しい方法があります。ウェブアプリで、システムレベルの共有シートを使用して、インストール済みの他のアプリとファイルを共有できるようになりました。Google I/O での講演はすべて Google の YouTube チャンネルで公開されています。その他にもたくさん。では、Chrome 75 のデベロッパー向けの新機能を詳しく見ていきましょう。
- Chrome
DevTools の新機能(Chrome 76)
CSS 値を使用したオートコンプリート、ネットワーク設定の新しい UI など。
- Chrome
Chromium Chronicle #2: テストの不安定さへの対処
不安定なテストは、Chrome でよく見られる問題です。他のデベロッパーの生産性に影響を及ぼし、時間の経過とともに無効になります。今月は、テストの不安定さに対処する方法について説明します。
- Chrome
Chrome 76 では、「ホーム画面に追加」画面のミニ情報バーを非表示にできます。
PWA 用のミニ情報バーの管理機能を強化(Chrome 76)。
- Chrome
モデルビューアによる拡張現実(AR)
2 月には、ウェブページに 3D モデルを宣言的に追加できる model-viewer ウェブ コンポーネントを導入しました。今回、ar 属性が追加され、Android で AR がサポートされるようになったことをお知らせします。
- Chrome
Paint Holding - 同一オリジン ナビゲーションでの白いフラッシュの低減
ペイントのホールドの概要を簡単に説明します。同一オリジン ナビゲーション時に白色の点滅を減らす Chrome の機能
- Chrome
複数のページ リダイレクトを避ける
ページ リダイレクトでウェブページの読み込みが遅くなる原因と、リダイレクトを回避する方法を確認しましょう。
ユーザーは入力フィールドに貼り付けることができません
ユーザーが入力フィールドへの貼り付けを許可して、サイトのログイン画面のユーザー エクスペリエンスを向上させる方法について説明します。
ドキュメントに有効な rel=canonical がありません
Lighthouse の監査については、「ドキュメントに有効な rel=canonical がない」をご覧ください。
サポートの終了と削除(Chrome 75)
計画に役立つ Chrome 75 のサポート終了と削除の概要。
- Chrome
ページの読み込み時に位置情報の利用許可をリクエストします
優れたユーザー エクスペリエンスを提供できるよう、責任を持って位置情報の利用許可をリクエストする方法をご確認ください。
非同期ヒントを使用した低レイテンシのレンダリング
ウェブ用に作成されたタッチペン ベースの描画アプリケーションでは、ウェブページでグラフィックの更新を DOM と同期させる必要があるため、遅延の問題が発生します。非同期に行われるコンテキストのヒントは、DOM をバイパスして遅延をなくします。
- Chrome
最新の形式で画像を配信する
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 のデベロッパー向けの新機能を詳しく見ていきましょう。
- Chrome
コンソールでメッセージをログに記録する
ログメッセージをコンソールに記録する方法を学習します。
- Chrome DevTools
Live Expressions を使用して JavaScript 値をリアルタイムで確認する
コンソールに同じ JavaScript 式を繰り返し入力する場合は、代わりに Live Expressions をお試しください。
- Chrome DevTools
コンソール機能リファレンス
Chrome DevTools のコンソール UI に関連するすべての機能と動作に関する包括的なリファレンスです。
- Chrome DevTools
DevTools の新機能(Chrome 75)
オートコンプリートの有意義なプリセット値、コマンド メニューからのサイトデータの消去など。
- Chrome
Chromium Chronicle #1: タスク スケジューリングのベスト プラクティス
Chrome チームが Chromium Chronicle を発表いたします。これは、ブラウザを構築するデベロッパーである Chromium デベロッパー専用の月刊シリーズです。今月は、タスクのスケジュール設定のベスト プラクティスを見ていきます。
- Chrome
Web SQL データを表示する
Chrome DevTools の [Application] パネルで Web SQL データを表示する方法について説明します。
- Chrome DevTools
キャッシュ データを表示する
Chrome DevTools の [Application] パネルでキャッシュ データを表示する方法について説明します。
- Chrome DevTools
非推奨: Chrome DevTools を使用してアプリケーション キャッシュ データを表示する
Chrome DevTools の [Application] パネルでアプリケーション キャッシュ データを表示する方法について説明します。
- Chrome DevTools
現在選択されている DOM ノード
現在選択されている DOM ノードを取得する、クイック コンソールのショートカットについて学びます。
- Chrome
サポートの終了と削除(Chrome 74)
計画に役立つ Chrome 74 のサポート終了と削除の概要。
- Chrome
IndexedDB データの表示と変更
[Application] パネルとスニペットを使用して IndexedDB データを表示および変更する方法
- Chrome DevTools
ローカル ストレージの表示と編集
[ローカル ストレージ] ペインとコンソールで localStorage を表示および編集する方法
- Chrome DevTools
セッション ストレージを表示、編集する
[Session Storage] ペインとコンソールで「sessionStorage」を表示および編集する方法。
- Chrome DevTools
Chrome 73 の新機能
Chrome 73 では、Signed HTTP Exchange を使用してポータブル コンテンツを簡単に作成できるようになりました。作成可能なスタイルシートを使用すると、スタイルを動的に変更する操作がはるかに簡単になります。また、Mac のプログレッシブ ウェブアプリのサポートを追加し、すべてのデスクトップおよびモバイル プラットフォームで PWA をサポートするようになりました。これにより、ウェブ経由で配信されるインストール可能なアプリを簡単に作成できます。では、Chrome 73 のデベロッパー向けの新機能を詳しく見ていきましょう。
- Chrome
KV ストレージ - ウェブ初の組み込みモジュール
新しい KV Storage API、組み込みモジュール、マップのインポートの概要。
- Chrome
DevTools の新機能(Chrome 74)
CSS プロパティ、Lighthouse v4、WebSocket バイナリ メッセージ ビューアなどの影響を受けるノードをハイライト表示します。
- Chrome
DOM の表示と変更のスタートガイド
ノードの表示、ノードの検索、ノードの編集、コンソールでの参照ノード、ノード変更時のブレークなどを行う方法。
- Chrome DevTools
ウェブ開発エコシステム チーム - 2 月のまとめ
2 月のまとめで、ウェブ デベロッパー エコシステム チームの活動を振り返ります。
- Chrome
Workbox v3 から v4 に移行する
Workbox v3 から v4 への移行に関するガイドです。
ワークボックス ウィンドウ
Service Worker の登録、更新の管理、ライフサイクル イベントへの対応に役立つモジュール。
アプリの JavaScript のホットパスを WebAssembly に置き換える
WebAssembly が提供する主なメリットの 1 つは、ブラウザ間でのパフォーマンスが予測可能であることです。しかし、JavaScript で記述されたホットパスを WebAssembly に変換するにはどうすればよいでしょうか。
- Chrome
String.prototype.matchAll() で結果の一致率を向上
Chrome 73 では、String.prototype.matchAll() メソッドが導入されました。match() と同じように動作しますが、特にグループをキャプチャするためにアクセスする必要がある場合、一致を簡単に反復処理できます。
- Chrome
デフォルトでホイールのスクロールを高速にする
スクロールの応答性は、モバイルでのウェブサイトに対するユーザー エンゲージメントにとって重要ですが、ホイール イベント リスナーはスクロールのパフォーマンスに深刻な問題を引き起こすことがよくあります。ユーザーとデベロッパーがデフォルトで高速に動作できるよう Google がどのように支援しているかをご覧ください。
- Chrome
サポートの終了と削除(Chrome 73)
計画に役立つ Chrome 73 のサポート終了と削除のまとめ。
- Chrome
メディアの更新(Chrome 73)
ハードウェア メディアキーのサポート、HDCP ポリシー チェック、ピクチャー イン ピクチャーのオリジン トライアルなど
- Chrome
高速のテンプレートとウェブ コンポーネント - lit-html と LitElement
lit-html と LitElement は、高速で軽量なテンプレートと相互運用可能なコンポーネントを最新のウェブに提供します。
- Chrome
JavaScript を無効にする
コマンド メニューを開き、[JavaScript を無効にする] コマンドを実行します。
- Chrome DevTools
RTCQuicTransport のオリジン トライアルがまもなく開催(Chrome 73)
RTCQuicTransport は、QUIC プロトコルを使用して任意のデータをリモートピアと交換できる新しいウェブ プラットフォーム API です。
- Chrome
Chrome 72 の新機能
Chrome 72 では、JavaScript でのパブリック クラス フィールドの作成がはるかに見やすくなり、新しい User Activation API でページが有効になっているかどうかを確認でき、リストのローカライズがはるかに簡単になりました。では、Chrome 72 のデベロッパー向けの新機能を詳しく見ていきましょう。
- Chrome
Lighthouse によるスタックパックのプロトタイピング
スタックパックは、一般的なアドバイスのみを表示するだけでなく、Lighthouse を拡張して特定のツールに関する追加のメッセージを含めることもできます。
- Chrome
DevTools の新機能(Chrome 73)
ログポイント、検査モードの詳細なツールチップなど。
- Chrome
API 間で一貫したユーザー アクティベーションを実現
Chrome バージョン 72 では、User Activation v2 がリリースされます。これにより、有効化制限のあるすべての API でユーザー有効化が利用可能になり、ユーザー有効化の不整合が解消されます。
- Chrome
Shape Detection API: 1 つの画像には 1,000 の単語、顔、バーコードの価値がある
Shape Detection API は、画像内の顔、バーコード、テキストを検出します。
WebUSB 用デバイスの作成
WebUSB API を最大限に活用するデバイスを構築する。 この記事では、 WebUSB API を最大限に活用できるデバイスを作成する方法について説明します。API 自体の概要については、 ウェブで USB デバイスにアクセスする をご覧ください。 ユニバーサル シリアル バス(USB)は、周辺機器をデスクトップ コンピューティング デバイスやモバイル コンピューティング デバイスに接続するための最も一般的な物理インターフェースになっています。USB
サポートの終了と削除(Chrome 72)
計画に役立つ Chrome 72 のサポート終了と削除のまとめ。
- Chrome
Screen Wake Lock API で画面をロックしない
バッテリーの消耗を防ぐため、ほとんどのデバイスはアイドル状態のままですぐにスリープ状態になります。ほとんどの場合は、これで問題ありませんが、アプリによっては、処理を完了するために画面をスリープ状態から復帰させておく必要があります。Screen Wake Lock API を使用すると、アプリケーションの実行を継続する必要がある場合に、デバイスの画面が暗くなったり、ロックされたりするのを防ぐことができます。
Chrome DevTools を開く
Chrome DevTools を開くすべての方法を紹介します。
- Chrome DevTools
トラック要素のフォーカス
コンソールを開き、Live Expression を作成して、式を document.activeElement に設定します。
- Chrome DevTools
アプリアイコンのバッジ
App Badging API を使用すると、インストール済みのウェブアプリで、アプリケーション全体のバッジを設定できます。このバッジは、シェルフやホーム画面など、アプリケーションに関連するオペレーティング システム固有の場所に表示されます。バッジを使用すると、注意が必要な新しいアクティビティがあることをユーザーに簡単に通知したり、未読件数など少量の情報を示すために使用したりできます。
Chrome 71 の新機能
Chrome 71 では、新しい Intl.RelativeTimeFormat() API を使用して相対的な時間値を簡単に表示できるようになりました。縦方向に流れるテキストについて、テキストのどの側に下線を引くかを指定できます。また、音声合成 API を使用する場合、コンピュータが音声を認識する前にユーザー アクティベーションが必要となるようになりました。では、Chrome 71 のデベロッパー向けの新機能を詳しく見ていきましょう。
- Chrome
バックグラウンド取得の概要
バックグラウンド取得を使用すると、ブラウザを閉じても大容量のダウンロードを処理できます。
- Chrome
DevTools の新機能(Chrome 72)
パフォーマンス指標の視覚化、テキストノードのハイライト表示、JS パスの DOM ノードへのコピー、[Audits] パネルの更新が可能です。
- Chrome
ウェブ オーディオ、自動再生ポリシー、ゲーム
2017 年 9 月に、Chrome の自動再生動作ポリシーで音声の処理方法が変更されることをお知らせしました。このポリシーの変更は、2018 年 5 月の Chrome 66 Stable でリリースされました。 Web Audio 開発コミュニティからのフィードバックを受け、デベロッパーがウェブサイトを更新するための猶予期間を長くするため、自動再生ポリシーの Web Audio に関する部分のリリースを延期しました。また、Web Audio
- Chrome
新機能のステータス
ウェブアプリは、プラットフォーム固有のアプリができることなら何でもできる必要があります。ウェブアプリの新しい機能のステータスを確認する。
Signed HTTP Exchange
Signed Exchange を使用すると、ウェブサイトはウェブ コンテンツへの署名が可能となり、コンテンツの配信元に対してコンテンツを安全に再配信し、確認することができます。
- Chrome
サポートの終了と削除(Chrome 71)
計画の参考に、Chrome 71 でのサポートの終了と廃止のまとめ。
- Chrome
音声と動画の更新(Chrome 70)
Chrome 70 における音声と動画の更新の概要 - クロス コーデックとクロスバイト ストリームのバッファリングと再生、MSE 対応の MP4 の Opus、Android でデフォルトで許可される保護されたコンテンツの再生。
- Chrome
ピクチャー イン ピクチャーで動画を視聴する
ウェブサイトの動画要素のピクチャー イン ピクチャーを管理します。
- Chrome
Chrome 70 の新機能
Chrome 70 では、Windows と Linux でのデスクトップ プログレッシブ ウェブアプリのサポート、Credential Management API の公開鍵認証情報のサポート、専任ワーカーへの名前指定など、多くの機能が追加されました。では、Chrome 70 のデベロッパー向けの新機能を詳しく見ていきましょう。
- Chrome
cache.addAll() と importScripts() を微調整(Chrome 71)
cache.addAll()、importScripts、および Chrome 71 には、いくつかの小さな変更が導入されます。
- Chrome
Chrome 69 でペイントのタイミングに関する問題
Chrome 69 では、ペイントタイミング指標に誤った変更が行われました。これはレンダリング パイプラインをより多く取得することを意図したものでしたが、タイムスタンプが不正確になっていました。
- Chrome
DevTools の新機能(Chrome 71)
Live Expression で DOM ノードをハイライト表示したり、ノードをグローバル変数として保存したりできます。
- Chrome
Houdini のアニメーション ワークレット
アニメーション ワークレットを使用すると、デバイスのネイティブ フレームレートで実行される命令型アニメーションを記述して、ジャンクのないスムーズさを向上させ、メインスレッドのジャンクに対するアニメーションの耐性を高め、時間ではなくスクロール可能なリンクにすることができます。
- Chrome
ホスト権限のユーザー コントロール: 移行ガイド
Chrome 70 以降、ランタイム ホストの権限の変更に対応して拡張機能を更新するためのガイドラインです。
- Chrome 拡張機能
最新のウェブブラウザの詳細(パート 4)
コンポジタ スレッドによる入力イベントの処理
- Chrome
最新のウェブブラウザの詳細(パート 3)
ブラウザ レンダリング エンジンの内部動作
- Chrome
メディアの更新(Chrome 70)
クロス コーデックとクロスバイト ストリームのバッファリングと再生、MSE 対応の MP4 の Opus、Android ではデフォルトで保護されたコンテンツの再生。
- Chrome
非推奨になった機能と削除(Chrome 70)
計画に役立つ Chrome 68 のサポート終了と削除の概要。
- Chrome
最新のウェブブラウザの詳細(パート 2)
ブラウザがナビゲーション リクエストを処理する仕組みをご確認ください。
- Chrome
HTTP Cookie への非同期アクセス
Cookie Store API は HTTP Cookie への非同期アクセスを提供し、Cookie の jar を Service Worker に開きます。
- Chrome
最新のウェブブラウザの詳細(パート 1)
アーキテクチャの概要からレンダリング パイプラインの詳細まで、ブラウザでコードを機能的なウェブサイトに変える方法を学習します。
- Chrome
Chrome 69 の新機能
Chrome が最初にリリースされてから 10 年が経ちます。それ以降、状況は大きく変化しましたが、最新のウェブ アプリケーションの強固な基盤を構築するという Google の目標は今も変わりません。Chrome 69 では、CSS Scroll Snapping のサポート、ノッチとウェブロックのサポート、CSS4 の新機能がいくつか追加されました。では、Chrome 69 のデベロッパー向けの新機能を詳しく見ていきましょう。
- Chrome
DevTools の新機能(Chrome 70)
コンソールでのライブ式、積極的評価での DOM ノードのハイライト表示など。
- Chrome
メディアの更新(Chrome 69)
Chrome 69 でのメディア アップデートのまとめ: AV1 と HDCP のポリシー チェック。
- Chrome
ReportingObserver: コードの健全性を把握する
ReportingObserver は、デベロッパーがコードの動作に関する分析情報を提供します。ReportingObserver は、非推奨や介入、これまで DevTools コンソールでしか確認できなかったメッセージなどの問題に関する情報を表示します。
- Chrome
速度が Google 検索と Google 広告のランディング ページ要素になりました
速度は、Google 検索と Google 広告のランディング ページ要素になりました。
- Chrome
Chrome 68 の新機能
Chrome 68 では、Android でのホーム画面への追加の動作が変更され、より細かな設定が可能になりました。Page Lifecycle API は、タブが一時停止または復元されたタイミングを示します。また、Payment Handler API により、ウェブベースの支払いアプリで Payment Request エクスペリエンスをサポートできるようにします。では、Chrome 68 のデベロッパー向けの新機能を詳しく見ていきましょう。
- Chrome
NoState Prefetch のご紹介
Chrome 63 では NoState Prefetch が導入されました。NoState Prefetch は、非推奨の事前レンダリング プロセスよりもメモリ使用量が少ない、リソースを事前に取得するためのメカニズムです。
- Chrome
PWACompat - すべてのブラウザのウェブアプリ マニフェスト
PWACompat ライブラリを使用して、ウェブアプリ マニフェストをすべてのブラウザに導入します。
- Chrome
workbox-navigation-preload
ナビゲーション リクエストに対するネットワーク レスポンスを高速化するには、ナビゲーションのプリロードを有効にします。
ウェブ デベロッパー向けのサイト分離
パソコン版 Chrome 67 では、サイト分離と呼ばれる新機能がデフォルトで有効になっています。この記事では、サイト分離の概要、必要な理由、ウェブ デベロッパーがサイト分離を認識すべき理由について説明します。
- Chrome
Chrome ユーザー エクスペリエンス レポートでの初回入力遅延に関するテスト
Chrome ユーザー エクスペリエンス レポートに First Input Delay(FID)の試験運用版指標が追加されました。
- Chrome
機能ポリシーの概要
機能ポリシーを使用すると、デベロッパーはブラウザ内の特定の API や機能の動作を選択的に有効化、無効化、変更できます。CSP に似ていますが、機能に特化しています。Chrome 60 で提供されます。
- Chrome
保存容量について
保存容量の問題を回避するために Workbox を構成するためのガイドです。
ネイティブ エコー キャンセラの追加
エコー キャンセラのネイティブ サポートを拡大
- Chrome
オーディオ ワークレットの設計パターン
オーディオ ワークレットの設計パターン
- Chrome
ウェブ向けの拡張現実(AR)
拡張現実(AR)では、仮想オブジェクトを現実世界のビュー内に配置し、トラッキングできます。
- Chrome
Chacmool: Chrome Canary の拡張現実
教育用ウェブデモの Chacmool では、ウェブベースの AR で魅力的な体験を簡単に構築できることを示しています。
- Chrome
インライン インストールのサポート終了と移行に関するよくある質問
Chrome 拡張機能のインライン インストールのサポート終了に関するよくある質問。
- Chrome 拡張機能
サポートの終了と削除(Chrome 68)
計画に役立つ Chrome 68 のサポート終了と削除の概要。
- Chrome
ホーム画面の動作に追加する変更
Android 版 Chrome 68 以降では、「ホーム画面に追加」の動作が変更され、ユーザーにプロンプトを表示するタイミングや方法を、より細かく制御できるようになります。サイトがホーム画面に追加するための条件を満たしている場合、Chrome では、ホーム画面に追加するためのバナーが自動的に表示されなくなります。代わりに、保存された beforeinstallprompt イベントで prompt() を呼び出して、[ホーム画面に追加] ダイアログのプロンプトをユーザーに表示する必要があります。
- Chrome
Chrome 67 の新機能
Chrome 67 では、プログレッシブ ウェブアプリがデスクトップで登場します。汎用センサー API のサポートを追加しました。これにより、加速度計やジャイロスコープなどのデバイス センサーに簡単にアクセスできるようになります。また、BigInts のサポートが追加され、大きな整数の処理がはるかに簡単になりました。では、Chrome 67 のデベロッパー向けの新機能を詳しく見ていきましょう。
- Chrome
DevTools の新機能(Chrome 68)
積極的評価、引数のヒント、関数のオートコンプリート、Lighthouse 3.0 などがあります。
- Chrome
WebAuthn による強力な認証の有効化
Chrome 67 ベータ版では、Web Authentication(WebAuthn)API が導入され、ブラウザが公開鍵ベースの認証情報を操作、管理できるようになりました。これにより、取り外し可能なセキュリティ キーと、指紋スキャナなどの組み込みのプラットフォーム認証システムを使用して、強力な認証を行うことができます。
Lighthouse を使用したページ読み込みのパフォーマンス向上
プリロード、事前接続、GIF などの新しいパフォーマンス監査。
- Chrome
Lighthouse v3 移行ガイド
Lighthouse v2 から v3 に移行する方法。
Lighthouse 3.0 のリリース
監査の迅速化、ばらつきの軽減、新しいレポート UI、新しい監査などの機能が追加されました。
- Chrome
サポートの終了と削除(Chrome 67)
計画に役立つ Chrome 67 のサポート終了と削除のまとめ。このバージョンでは、公開鍵のピニングのサポート終了、安全でないコンテキストでの AppCache の削除、接頭辞の削除が加えられています。
- Chrome
イベント ドリブン バックグラウンド スクリプトに移行する
Chrome 拡張機能のパフォーマンスを改善するために、永続的なバックグラウンド スクリプトをイベントベースの非永続的なモデルに移行する方法を紹介します。
- Chrome 拡張機能
コンソールで JavaScript を実行する
コンソールで JavaScript を実行する方法を学習します。
- Chrome DevTools
Chrome 66 の新機能
Chrome 66 では、新しい CSS Typed Model Object で CSS の操作が簡単になり、クリップボードへのアクセスが非同期になりました。また、canvas 要素の新しいレンダリング コンテキストが追加され、JavaScript を使ってより効率的に音声を処理できるようになりました。では、Chrome 66 のデベロッパー向けの新機能を詳しく見ていきましょう。
- Chrome
最高のパフォーマンスを達成する
高パフォーマンスの Chrome 拡張機能の構築方法に関するガイドラインです。
- Chrome 拡張機能
DevTools の新機能(Chrome 67)
ネットワーク ヘッダーの検索、フェッチとしてのリクエストのコピー、パソコンの条件を使用したページの監査など、多くの機能があります。
- Chrome
ワークスペースでファイルを編集、保存する
DevTools で行った変更をソースファイルに保存する方法について説明します。
- Chrome DevTools
セカンダリ接続ディスプレイにウェブページを表示する
Chrome 66 では、ウェブページで Presentation API を介してセカンダリ接続ディスプレイを使用し、Presentation Receiver API を介してそのコンテンツを制御できます。
- Chrome
Chrome 66 でのサポートの終了と削除
計画に役立つ Chrome 66 のサポート終了と削除の概要。このバージョンでは、Service Worker のセキュリティの向上、CSS の位置値の変更などが行われています。
- Chrome
macOS ネイティブのエコー キャンセラ
Chrome で macOS ネイティブのエコー キャンセラを使用する
- Chrome
SmooshGate に関するよくある質問
SmooshGate が標準開発とウェブ プラットフォームについて学べることこの文章は概要です。
- Chrome
ユーザーのプライバシーを保護する
Chrome 拡張機能でユーザーのプライバシーを確実に保護するためのガイドラインです。
- Chrome 拡張機能
ユーザーのプライバシーを保護する
Chrome 拡張機能でユーザーのプライバシーを確実に保護するためのガイドラインです。
- Chrome 拡張機能
ユーザー インターフェースをデザインする
Chrome 拡張機能の UI とデザインのガイドラインです。
- Chrome 拡張機能
Workbox v2 から v3 に移行する
Workbox v2 から v3 への移行に関するガイドです。
セキュリティの確保
Chrome 拡張機能を安全に保護する方法
- Chrome 拡張機能
セキュリティの確保
Chrome 拡張機能を安全に保護する方法
- Chrome 拡張機能
Chrome 65 の新機能
Chrome 65 では、新しい CSS Paint API のサポートが追加され、プログラムで画像を生成できるようになりました。Server Timing API を使用すると、HTTP ヘッダーを介してサーバーのパフォーマンスのタイミング情報を提供できます。また、新しい CSS display: content プロパティを使用すると、ボックスを非表示にできます。では、Chrome 65 のデベロッパー向けの新機能を詳しく見ていきましょう。
- Chrome
DevTools の新機能(Chrome 66)
[ネットワーク] パネルでスクリプトを無視する、デバイスモードでズームを自動調整する、など
- Chrome
Lighthouse 2.8 の更新情報
新しいパフォーマンス監査と SEO 監査、レポートの最初のセクションとしての perf など。
- Chrome
サポートの終了と削除(Chrome 65)
計画に役立つ Chrome 65 のサポート終了と削除のまとめ。このバージョンでは、Symantec の証明書とクロスオリジン ダウンロードのブロックに関するリマインダーが表示され、document.all は読み取り専用になりました。
- Chrome
Meltdown/Spectre
ウェブ デベロッパーに対する影響と Chrome でのリスク軽減策
- Chrome
ワークボックスのビルド
Service Worker の生成、既存のコードへのプリキャッシュ マニフェストの挿入、プリキャッシュ マニフェストの作成が可能なモジュール。
sw-precache または sw-toolbox から移行する
sw-precache または sw-toolbox から Workbox に移行するためのガイドです。
Chrome ユーザー エクスペリエンス レポート - 新しい国のディメンション
Chrome ユーザー エクスペリエンス レポートに新しい国のディメンションがリリースされたことをお知らせします。
- Chrome
Chrome 64 の新機能
Chrome 64 では、要素のコンテンツ長方形のサイズが変更されたときに通知を受け取る ResizeObservers のサポートが追加されています。モジュールが import.metadata を使用して、ホスト固有のメタデータにアクセスできるようになりました。ポップアップ ブロッカーが強力になり、機能が大幅に向上しました。では、Chrome 64 のデベロッパー向けの新機能を詳しく見ていきましょう。
- Chrome
CSS Paint API
Houdini の CSS Paint API を使用すると、プログラムで CSS 画像を描画できます。
- Chrome
DevTools の新機能(Chrome 65)
ローカルのオーバーライド、ユーザー補助ツール、パフォーマンスと SEO の監査など。
- Chrome
Headless Chrome: サーバーサイド レンダリングを行う JavaScript サイトのご紹介
ヘッドレス Chrome は、動的な JavaScript サイトを静的 HTML ページに変換するドロップイン ソリューションです。
DevTools の新機能(Chrome 64)
パフォーマンス モニター、コンソール サイドバー、コンソールのグループ化があります。
- Chrome
ハードウェア ノイズ キャンセレーションを無効にする
ハードウェア ノイズ キャンセレーションを無効にする(Chrome 64)
- Chrome
広告の改善に関する最新情報
広告のパフォーマンス向上に関する最新情報。
- Chrome
workbox-webpack-plugin
webpack ビルドツールを使用して、Service Worker を生成するか、プリキャッシュ マニフェストを挿入します。
Chrome ユーザー エクスペリエンス レポート - 上位 100 万以上のオリジンに拡大
本日、Google は新しい Chrome ユーザー エクスペリエンス レポートを発表いたします。このレポートでは、ウェブ上の 100 万を超える上位のオリジンの対象範囲が拡大されます。
- Chrome
Linux 用のセルフホスト
Linux ユーザー用に、個人用サーバーから crx ファイルをパッケージ化、ホスト、更新する方法。
- Chrome 拡張機能
Chrome 64 で chrome.loadTimes() API のサポートを終了
標準以外の chrome.loadTimes() API は、すべての便利な機能について標準ベースの同等の API が存在するため、Chrome 64 でサポートが終了します。
- Chrome
Linux への拡張機能のインストール
個人用サーバーの crx ファイルをパッケージ化、ホスト、更新する方法。
- Chrome 拡張機能
サポートの終了と削除(Chrome 64)
計画に役立つ Chrome 64 のサポート終了と削除の概要。このバージョンでは、パフォーマンス API の変更、複数のシャドウルートのサポート終了、WebKit API の削除が行われています。
- Chrome
オーディオ ワークレットがデフォルトで使用できるようになりました
待望の Web Audio API の新機能(オーディオ ワークレット)が Chrome 64 でリリース
- Chrome
Lighthouse 2.6 の更新情報
新しいパフォーマンス監査、ユーザー補助スコアの見直し、ユーザー エクスペリエンスの改善に関するレポート、バグの修正などを実施しています。
- Chrome
Chrome 63/64 のメディアの更新
Chrome 64 では、予測可能なメディア再生、Windows 10 での HDR、永続ライセンスによるオフライン再生などの機能をご利用いただけます。
- Chrome
Device Memory API
Device Memory API を使用すると、デベロッパーはデバイスのメモリ能力に応じてユーザーにさまざまなリソースを提供できます。
- Chrome
Chrome 63 の新機能
Chrome 63 では、JavaScript モジュールを動的にインポートできます。私が好きな面接のコーディングに関する質問は、非同期イテレータとジェネレータを使えば簡単に実現できます。また、CSS の overscroll-behavior プロパティで、ブラウザのデフォルトのオーバーフロー スクロール動作をオーバーライドできます。
- Chrome
#workboxbroadcast-update
新しいレスポンスでキャッシュが更新されたら、ページにメッセージを送信します。
DevTools の新機能(Chrome 63)
マルチクライアント リモート デバッグ、カスタムデータを使用したプッシュ通知、ワークスペース 2.0。
- Chrome
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 のオーバースクロール動作プロパティの概要。
- Chrome
::Shadow と /deep/ の削除(Chrome 63)
シャドウ ピアスの CSS セレクタはもう不要です。
- Chrome
Chrome 63 でのサポートの終了と削除
計画に役立つ Chrome 63 のサポート終了と削除の概要。このバージョンでは、インターフェース プロパティの新しい動作、Webkit 関数の削除、RTCRtcpMuxPolicy の変更が行われています。
- Chrome
バッファリングの割り当てを超過する
QuotaExceededError に対処する方法はいくつかあります。
- Chrome
Chrome 62 の新機能
Chrome 62 では、ネットワーク品質インジケーターによってネットワーク情報 API が改善され、OpenType 可変フォントのサポートが開始され、Media Capture from DOM element API を使用して HTMLMediaElements からメディア ストリームをキャプチャして処理できるようになりました。
- Chrome
Lighthouse 2.5 の更新情報
5 つの新しい監査、Chrome Launcher スタンドアロン ノード モジュール、新しいスロットリング ガイドが追加されています。
- Chrome
ぼかしをアニメーション化する
ぼかしを効率的にアニメーション化するには、いくつかの工夫が必要です。
- Chrome
WebVR の変更(Chrome 62)
WebVR API の変更点をご確認ください。
- Chrome
中止可能な取得
新しいウェブ プリミティブ(中止コントローラ)を使用してフェッチを中止する
- Chrome
CSS position:sticky イベント
position - sticky と IntersectionObserver を併用して、要素が固定表示されるタイミングを判断します。スクロール イベントなしでスクロール効果を適用できます。
ウェブ向けセンサー
センサーは多くのアプリで使用され、実行するデバイスの向きや加速度を考慮するゲームなどの高度な機能を可能にします。Generic Sensor API は、ウェブ上でこのようなセンサーデータにアクセスするための汎用インターフェースを提供します。
サポートの終了と削除(Chrome 62)
計画に役立つ Chrome 62 のサポート終了と削除の概要。このバージョンでは、セキュリティの改善、Webkit のサポート終了などについて説明しています。
- Chrome
Chrome のバックフォワード キャッシュを確認する
bfcache は以前アクセスしたページにすぐに移動できるようにキャッシュを作成します。
- Chrome
Chrome の自動再生ポリシー
Chrome の新しい自動再生ポリシーで、優れたユーザー エクスペリエンスを実現するためのおすすめの方法をご確認ください。
- Chrome
メディアの更新(Chrome 62)
永続ライセンスと Widevine L1 を使用した Android のオフライン再生、動画トラックの最適化、デバイスを回転させたときの動画フルスクリーンの自動表示、MS のライブ ストリームでのシーク可能な範囲のカスタマイズ、MSE 対応の MP4 形式の FLAC を利用できます。
- Chrome
ピクチャー イン ピクチャー(PIP)
デスクトップ上にフローティング動画ウィンドウをウェブサイトが作成できるようにする Web API について説明しましょう。
- Chrome
Chrome 61 の新機能
Chrome 61 では JavaScript モジュールがネイティブでサポートされ、モジュラー JavaScript の記述方法が統一されました。navigator ドット共有を使用して、Android のネイティブ共有ダイアログをトリガーできるようになりました。また、WebUSB API もリリースされ、ユーザーが許可された USB デバイスにウェブアプリからアクセスできるようになりました。ほかにも多数あります。
- Chrome
visualViewport の導入
Vision ビューポート API を使用すると、ユーザーによるページのズームやスクロールの詳細を確認できます。
- Chrome
DevTools の新機能(Chrome 62)
コンソールのトップレベルの Await 演算子、新しいスクリーンショット ワークフロー、CSS グリッドのハイライト表示など。
- Chrome
サポートの終了と削除(Chrome 61)
計画に役立つ Chrome 61 のサポート終了と削除の概要。このバージョンでは、セキュリティの改善、Webkit のサポート終了などについて説明しています。
- Chrome
使用可能な保存容量の見積もり
navigator.storage.estimate() は、ウェブアプリのストレージ制約に関する分析情報を提供します。
- Chrome
音声と動画の更新(Chrome 61)
Chrome 61 での音声と動画の更新のまとめ。
- Chrome
メディアの更新(Chrome 61)
背景動画トラックの最適化と、デバイスの回転時に動画が自動的に全画面表示されるようになりました。
- Chrome
Chrome 60 の新機能
Chrome 60 では、Paint Timings API を使用して、First Paint の時間と First Contentful Paint の時間を測定できるようになりました。フォントのレンダリング方法は font-display CSS プロパティで制御できます。WebAssembly がリリースされ、さらに多くの機能が実装されました。
- Chrome
今後予定されている正規表現機能
JavaScript 正規表現に追加される新機能の概要(名前付きキャプチャ、dotAll フラグ、Unicode プロパティのエスケープ、後方アサーションなど)
- Chrome
DevTools の新機能(Chrome 61)
Chrome 61 でリリースされる DevTools の新機能と変更点。
- Chrome
配置された入力イベント
スムーズなユーザー エクスペリエンスを提供することは、ウェブにとって重要です。Google では、Chrome の過去数回のリリースにおいて、こうしたデバイス全体で入力レイテンシを短縮してきました。
- Chrome
ライブ配信ブログの強化 - コード分割
WebPack と同様に、コード分割とルートベースのチャンクを実装しました。
- Chrome
DOMException - play() リクエストが中断される
「DOMException - play() リクエストが中断されました」で実際にどうなっているのですか?
- Chrome
ヘッドレス Chrome による自動テスト
ヘッドレス Chrome による自動テスト
- Chrome
認証情報管理 API の最新情報
認証情報管理 API の最新情報
- Chrome
Chrome 60 でのサポートの終了と削除
計画に役立つ Chrome 60 のサポート終了と削除の概要。このバージョンでは、セキュリティの改善、Webkit のサポート終了などについて説明しています。
- Chrome
Budget API の概要
Budget API を使用すると、デベロッパーはユーザーに通知せずにバックグラウンド アクションを実行できるため、サイレント プッシュなどのユースケースを実現できます。
- Chrome
Chrome 59 の新機能
Chrome 59 では、ユーザー インターフェースや周辺機器を使わずに、自動化された環境で Chrome を実行できます。macOS の通知はネイティブ macOS の通知システムから直接表示されます。また、画像キャプチャ API を使用して最大解像度の写真をキャプチャするなど、さまざまな機能が追加されました。
- Chrome
DevTools の新機能(Chrome 60)
Chrome 60 でリリースされる DevTools の新機能と変更点。
- Chrome
サポートの終了と削除(Chrome 59)
計画に役立つ Chrome 59 のサポート終了と削除のまとめ。
- Chrome
ヘッドレス Chrome スタートガイド
ヘッドレス Chrome スタートガイド
- Chrome
macOS のネイティブ通知システムへの移行
macOS で Chrome 59 からネイティブ通知が表示されるようになります。
- Chrome
Chrome 58 の新機能
Chrome 58 では、プログレッシブ ウェブアプリでの全画面表示による没入感が増しています。IndexedDB 2.0 がサポートされるようになりました。また、サンドボックス化された iFrame のオプションが増えました。ピート レページが、Chrome 58 の新しいデベロッパー機能の使い方や使い方を詳しく説明します。
- Chrome
DevTools の新機能(Chrome 59)
Chrome 59 でリリースされる DevTools の新機能と変更点。
- Chrome
JavaScript ダイアログに関する Chromium ポリシー
同期型のアプリモーダルの JavaScript ダイアログは、残念ながらユーザーに害を及ぼすためによく使用されています。そのため、Chromium チームでは JavaScript ダイアログを使用しないことを強くおすすめします。
- Chrome
パフォーマンスに優れた展開と折りたたみのアニメーションを作成する
展開と折りたたみのエフェクトを作成するときは、スケール変換を使用して UI のパフォーマンスを維持できます。
- Chrome
CSS Deep-Dive - フレーム完璧なカスタム スクロールバーのための matrix3d()
カスタム変換行列を使用すると、フレームごとに最適なカスタム スクロールバーを作成できます。
メディアの更新(Chrome 58)
メディア コントロールのカスタマイズ、ホーム画面に追加されたプログレッシブ ウェブアプリの自動再生、非表示になっているときはミュートされた動画の自動再生の一時停止、色域のメディアクエリなどを利用できます。
- Chrome
(メディアの)ストリームを横断します
現在、Chrome で Media Source Extensions(MSE)を使用する場合、暗号化されたストリームとクリアされたストリームを切り替えることはできません。Chrome 58 以降では、この点がすべて変更されています。
- Chrome
サポートの終了と削除(Chrome 58)
計画に役立つ Chrome 58 のサポート終了と削除のまとめ。
- Chrome
音声と動画の更新(Chrome 58)
Chrome 58 での音声と動画の更新のまとめ。
- Chrome
Chrome 57 のバックグラウンド タブ
Chrome 57 のバックグラウンド タブ
- Chrome
Chrome 57 の新機能
Chrome 57 では、display: grid を使用したグリッドベースのレイアウト、メディア セッション API を使用してロック画面と再生中のメディアに関する情報を含む通知などをカスタマイズできるようになりました。ピート レページが、Chrome 57 の新しいデベロッパー機能の使い方や使い方を詳しく説明します。
- Chrome
DevTools の新機能(Chrome 58)
Chrome 58 でリリースされる DevTools の新機能と変更点。
- Chrome
Lighthouse による 2017 年 1 月の更新内容
Lighthouse 1.5 の新機能
- Chrome
メディア通知のカスタマイズ、プレイリストの処理
新しい Media Session API を使用して、ウェブ メディア通知をカスタマイズし、メディア関連のイベントに応答します。
- Chrome
マニフェスト - アクション ハンドラ
manifest.json の action_handlers プロパティのリファレンス ドキュメント。
API のサポート終了と削除(Chrome 57)
計画に役立つ Chrome 57 のサポート終了と削除の概要。
- Chrome
Payment Request API の変更点
Chrome 56 と 57 では、仕様の変更に伴い、Payment Request API にいくつかの変更が加えられています。概要をご確認のうえ、ご自身で実装に変更を加えてください。
- Chrome
CSS グリッド – テーブル レイアウトが復活しました。存在感をアピールし、正方形に。
CSS グリッドは、ウェブ用の新しいレイアウト システムです。
Chrome 56 の新機能
Chrome 56 では、ウェブアプリは Web Bluetooth API を使用して付近の Bluetooth Low Energy デバイスと通信できるようになりました。CSS の位置は固定され、元の位置に戻ります。これにより、ビューポートの上部に固定されるまで通常どおりスクロールする要素を簡単に作成できます。また、HTML5 by Default がすべてのユーザーに有効になっています。
- Chrome
デフォルトでタップ スクロールを高速にする
スクロールの応答性は、モバイルのウェブサイトに対するユーザー エンゲージメントにとって重要ですが、タッチイベント リスナーはスクロールのパフォーマンスに深刻な問題を引き起こすことがよくあります。ユーザーとデベロッパーがデフォルトで高速に動作できるよう Google がどのように支援しているかをご覧ください。
- Chrome
JavaScript デバッグ リファレンス
Chrome DevTools のデバッグ機能に関する包括的なリファレンスで、新しいデバッグ ワークフローをご確認ください。
- Chrome DevTools
Lighthouse を使った優れたウェブの構築
Lighthouse の新機能再設計、新しいベスト プラクティスの監査、オンライン レポートの閲覧者。
- Chrome
URL バーのサイズ変更
URL バーを非表示にしても、モバイルページのサイズ変更は行われなくなりました。
- Chrome
Chrome DevTools - JavaScript CPU プロファイリング(Chrome 58)
Chrome 58 では "JavaScript CPU プロファイルを記録" が変更されました。
- Chrome
Chrome DevTools: JavaScript CPU プロファイリング(Chrome 58)
Chrome 58 では JavaScript CPU プロファイルの記録が変更されました。
- Chrome
API のサポート終了と削除(Chrome 56)
計画に役立つ Chrome 56 のサポート終了と削除のまとめ。
- Chrome
position:sticky を Chrome に戻します
position:sticky再登場!
- Chrome
写真の撮影とカメラ設定の制御
画像キャプチャは、カメラの設定を制御して写真を撮影するための API です。
- Chrome
パフォーマンスに優れたパララックス
少し数学的なくねりを加えるだけで、ブラウザのアーキテクチャとうまく連携する視差効果が得られます。
- Chrome
Chrome 55 の新機能
Chrome 55 では、async と await を使用して、Promise ベースのコードを同期のように記述できます。PointerEvents は、すべての入力イベントを処理する統一された方法を提供します。永続ストレージはオリジン トライアルを卒業する。
- Chrome
Chrome Dev Summit 2016 に備えよう
Chrome Dev Summit 2016 を、11 月 10 日、11 日(木)に開催します。
- Chrome
Chrome で安全でないという警告を回避する
Chrome ではまもなく、パスワードやクレジット カードの入力欄を含む安全でないページについて、URL バーに「保護されていません」というマークが表示されます。
- Chrome
CSS でハイフンを管理する
Chrome 55 では、ハイフン プロパティが実装され、ソフト ハイフンが表示されるタイミングとその動作を制御できます。
DevTools Digest、2016 年 10 月
コンソールの新機能、コンテキスト セレクタのバグの更新、新しい UC Browser ユーザー エージェント。
- Chrome
タップ操作のオプション
タップ操作では、要素に対するユーザーの操作方法を定義できます。Chrome 55 では、タップ操作のオプションが幅広くサポートされるようになりました。
- Chrome
イベント リスナーが発生すると
addEventListener が once オプションをサポートするようになり、後でクリーンアップするイベントを簡単に定義できるようになりました。
- Chrome
今後の方向性を示す
ポインタ イベントにより、ブラウザのポインタ入力モデルが統合され、タップ、ペン、マウスが単一のイベントセットにまとめられます。
- Chrome
キャンバス、動画、またはオーディオ要素から MediaStream をキャプチャする
captureStream() メソッドを使用すると、Android およびデスクトップのキャンバス、音声、または動画要素から MediaStream をキャプチャできます。
- Chrome
API のサポート終了と削除(Chrome 55)
計画に役立つ Chrome 56 のサポート終了と削除のまとめ。
- Chrome
auxclick が Chrome 55 に登場
メイン以外のマウスボタンのクリックに対して、新しい auxclick イベントが発生します。
- Chrome
Chrome 54 の新機能
Chrome 54 では、カスタム要素 v1 を使用して独自のカスタム HTML タグを作成し、再利用可能なウェブ コンポーネントを作成できるようになりました。BroadcastChannel API を使用すれば、同じオリジンの開いているウィンドウやタブ間でメッセージを簡単に送信できるようになります。Android ではメディア エクスペリエンスが向上し、外部取得もオリジン トライアルとしてご利用いただけるようになりました。
- Chrome
developers.google.com/web の更新
新しいウェブの基礎 - 操作性の向上、新しいコンテンツなど
- Chrome
Lighthouse の概要
Lighthouse を設定してウェブアプリを監査する方法について学びます。
縮尺が変更されたときに合成レイヤを再ラスターする
will-change - Transform は高速でアニメーション化することを意味します。
- Chrome
クロスオリジン Service Worker - 外部フェッチの実験
サードパーティ サービスでは、独自のネットワーク リクエスト ハンドラのデプロイを開始できます。
- Chrome
CacheQueryOptions が Chrome 54 で到着
CacheQueryOptions の全セットがサポートされているため、必要なキャッシュに保存されているレスポンスを簡単に見つけることができます。
- Chrome
PushSubscription のオプション
push するユーザーを登録する際に使用するオプションにアクセスできるようになりました。
- Chrome
DevTools ダイジェスト、2016 年 9 月 - パフォーマンス総まとめ
最近の Chrome リリースにおける DevTools のパフォーマンス ツールの改善。
- Chrome
BroadcastChannel API - ウェブ用のメッセージバス
BroadcastChannel API は、ウィンドウ、タブ、iframe、ワーカーの間の単純な Pub/Sub に使用できます。
- Chrome
document.write() に対する介入
document.write() を使用して追加されたスクリプトの一部が Chrome でブロックされています
- Chrome
Web Animations API がクロスブラウザのマイルストーンを達成
Chrome に Firefox 48 が加わり、Web Animations API のネイティブ実装がリリースされます。
- Chrome
API のサポート終了と削除(Chrome 53)
Chrome のサポート終了と削除の概要を予定に役立てましょう。
- Chrome
DevTools Digest、2016 年 8 月
[リソース] パネル、新機能、コミュニティ アクティビティの最新情報
- Chrome
ウェブプッシュの相互運用性の成功事例
Chrome の最新版では、ウェブプッシュにいくつかの更新が行われています。GCM でウェブ プッシュ プロトコルがサポートされるようになりました。VAPID を使用している場合は、Google デベロッパー プロジェクトに登録する必要はなく、FCM エンドポイントが提供されます。
- Chrome
モバイルでのミュート状態での自動再生 - キャンバスのハッキングやアニメーション GIF は不要です。
Chrome 53 以降、Android で動画のミュートされた自動再生がサポートされるようになりました。これまで、動画要素で再生を開始するにはユーザーの操作が必要でした。
- Chrome
プログレッシブ ウェブアプリをデバッグする
[Application] パネルを使用して、ウェブアプリ マニフェスト、Service Worker、Service Worker のキャッシュを検査、変更、デバッグします。
- Chrome DevTools
オフラインの Google アナリティクスが簡単に
sw-offline-google-analytics ライブラリには必要なものがすべて揃っています。
- Chrome
無限スクローラーの複雑さ
無限スクローラーは、一般的な UI パターンです。ここでは、60 fps で実行されるメモリ控えめな方法でこのパターンを実装する方法について説明します。
- Chrome
短いセッション終了 - Service Worker を使用してウェブ上の Cookie 管理を改善する提案
Service Worker を使用してセッションを保持するための概念実証設計を導入する。
- Chrome
Flexbox が絶対位置の子に対する新しい動作を取得する
Flexbox が絶対位置の子に対する新しい動作を取得する
- Chrome
WebRTC 向け ECDSA - セキュリティ、プライバシー、パフォーマンスの向上
Chrome バージョン 52 以降では、デフォルトで ECDSA が使用されます。ECDSA は WebRTC 証明書の鍵生成の効率的で安全なアルゴリズムです。また、RTCCertificates を IndexedDB で保存できるようになりました。
- Chrome
Chrome for Android での Service Worker のキャッシュ保存、PlaybackRate、音声と動画の blob URL
バージョン 52 以降の Android Chrome では、基盤となるプラットフォームの実装に依存するのではなく、デスクトップ Chrome と同じメディア スタックを使用します。これにより、Service Worker のメディア キャッシュ保存、可変再生レート、Android での blob URL、API 間の MediaStream 受け渡し、容易なクロス プラットフォーム デバッグが可能になります。
- Chrome
API のサポート終了と削除(Chrome 52)
Chrome のサポート終了と廃止のまとめ。計画の参考にしてください。
- Chrome
CSS コンテインメント(Chrome 52)
新しい「CSS Containment」プロパティを使用すると、デベロッパーはブラウザのスタイル、レイアウト、ペイント作業の範囲を制限できます。
- Chrome
パフォーマンス オブザーバー - パフォーマンス データに効率的にアクセス
Chrome 52 の新機能である Performance Observer のインターフェースでは、パフォーマンスのタイムライン データに、より効率的にイベント単位でアクセスできます。
- Chrome
DevTools ダイジェスト、2016 年 9 月 - 2016 年以降の DevTools
2016 年以降の DevTools の大きなテーマとトレンド
- Chrome
パッシブ イベント リスナーによるスクロール パフォーマンスの改善
Chrome 51 の新機能であるパッシブ イベント リスナーを使用すると、スクロールのパフォーマンスが大幅に向上する可能性があります。
- Chrome
ストリーミング配信ですぐに返信
ReadableStreams を使用すると、できるだけ早く Service Worker のレスポンスの処理を開始できます。
- Chrome
DevTools ダイジェスト - 新しいコマンド メニューで機能を強化
超高速なワークフローを実現する DevTools の新しいコマンド メニューと 60 以上のアクションについて説明します。
- Chrome
保護されていないオリジンから Geolocation API を削除(Chrome 50)
Chrome バージョン 50 以降、保護されていない接続を介した HTML5 Geolocation API のサポートを終了しました。
- Chrome
API のサポート終了と削除(Chrome 51)
Chrome のサポート終了と廃止のまとめ。計画の参考にしてください。
- Chrome
認証情報管理 API を使用したログインフローの効率化
高度なユーザー エクスペリエンスを提供するには、ユーザーがウェブサイトで認証できるようにすることが重要です。しかし、エンドユーザーにとって、パスワードの作成、記憶、入力は面倒な作業になりがちです(特にモバイル デバイスの場合)。
- Chrome
KeyboardEvents の新機能を教えてください。キーとコードです。
2 つの新しい属性により、ウェブでのキーボード イベント処理に一貫性を持たせることができます。
- Chrome
テスト期間 - スクロール アンカー
スクロール アンカーは、コンテンツを読み始めるとウェブページが動かないようにする機能です。
- Chrome
ウェブ上の USB デバイスへのアクセス
WebUSB API は、USB をウェブに持ち込むことで、より安全で使いやすくなります。
概要
Google Chrome に組み込まれているウェブ デベロッパー ツールの利用を開始します。
- Chrome DevTools
Console API リファレンス
Console API を使用してコンソールにメッセージを書き込む
- Chrome DevTools
モバイル第 1 世代向けの新しいデバイスモード
Chrome 49 で導入された新しい Device Mode の Chrome DevTools について、詳細をご確認ください。
- Chrome
Intel Edison を使用したウェブ対応 IoT デバイスの作成
最近ではモノのインターネットが身近な存在ですが、ウェブブラウザからアクセスする IoT デバイスを作成できるとしたらどうでしょうか。この記事では、Intel® Edison Arduino ブレイクアウト ボード上で動作する、フィジカル ウェブ、ウェブ Bluetooth、Node.js を使用してこれを行う方法について説明します。
- Chrome
API のサポート終了と削除(Chrome 50)
Chrome でのサポート終了と API の削除のまとめ。計画の参考にしてください。
- Chrome
検査と変更のための FormData メソッド
Chrome 50 では、送信前に FormData インスタンスを操作できるようになりました。
- Chrome
Chrome 50 でデバイスの向きが変更されます
DeviceOrientationEvent では相対角度が使用され、新しい DeviceOrientationAbsoluteEvent が追加されました。
- Chrome
Chrome 50 で Canvas toBlob() のサポートを追加
Chrome 50 で canvas.toBlob に対応しました。
- Chrome
createImageBitmap() をサポート(Chrome 50)
Chrome 50 でリリース予定のワーカーでの画像デコードをサポート。
- Chrome
フォーカス管理の悩みを解消
「シーケンシャル フォーカス ナビゲーション開始ポイント」機能は、フォーカスされたエリアがないときにシーケンシャル フォーカス ナビゲーション([Tab] または [Shift-Tab])でフォーカス可能な要素の検索を開始する場所を定義します。特に、リンクのスキップやドキュメント内のフォーカスの管理などのユーザー補助機能に役立ちます。
- Chrome
DOMTokenList の検証を追加(Chrome 50)
さまざまな機能のサポートをコードで直接確認できます(Chrome 50 で導入予定)。
- Chrome
Media Source API - メディア セグメントが付加順に自動でシームレスに再生される
Media Source API を使用すると、JavaScript で再生用のメディア ストリームを作成できます。Chrome 50 以降では、SourceBuffer シーケンス モードを使用して、メディア セグメントを追加の順序で、ギャップなしにタイムラインで自動的に再配置できるようになりました。
- Chrome
ウェブ アニメーションの改善(Chrome 50)
Chrome 50 では、仕様遵守の改善と新機能の追加が予定されています。
- Chrome
ウェブの push ペイロード暗号化
ウェブプッシュでペイロードがサポートされるようになりました。この便利な新機能の活用方法をご覧ください。
- Chrome
link rel='preload' を使ってリソースの優先順位を付ける
Chrome 50 では rel='preload' のサポートを追加し、rel='subresource' のサポートを終了しました。
- Chrome
ウェブ通知の改善(Chrome 50) - アイコン、終了イベント、再通知の設定、タイムスタンプ
Chrome 50 に通知の新機能が数多く搭載されています。
- Chrome
HTMLMediaElement.play() が Promise を返す
自動再生の不確実性が解消されました。play() が Promise を返すようになりました。
- Chrome
リモート デバッグ、授業、深夜の独自ショーなど、
刷新された [デバイスの検査] UI のすべてを学び、修正されたスタイルパネルでクラスを簡単に切り替えたり、DevTools Tonight のパイロット プログラムの様子をご覧ください。
- Chrome
[ソース] で変数を監視
Chrome DevTools を使用すると、アプリケーション全体の複数の変数を簡単に確認できます。
- Chrome DevTools
DevTools がダークに、@keyframe の編集、よりスマートなオートコンプリートが使用可能に
DevTools でよりスマートなコンソール オートコンプリートを使用して入力を減らす方法、[Styles] ペインで直接 @keyframe ルールを編集する方法、CSS カスタム変数の活用方法、ダークサイドに参加する方法について学びます。
- Chrome
ウェブ音声の更新(Chrome 49)
Chrome の Web Audio API に関する最新エディションのまとめ。
- Chrome
ES2015 プロキシの概要
ES2015 プロキシ(Chrome 49 以降)は、介入 API を備えた JavaScript を提供します。これにより、ターゲット オブジェクトに対するすべてのオペレーションをトラップまたはインターセプトし、このターゲットの動作を変更できます。
- Chrome
滑らかなスクロール(Chrome 49)
スクロールの揺れにうんざりしていませんか?Chrome 49 では購入後すぐにスムーズにスクロールできます。
- Chrome
font-display によるフォント パフォーマンスの制御
@font-face 用の新しいフォント表示記述子により、デベロッパーはウェブフォントをどのようにレンダリング(またはフォールバック)するかを、読み込みにかかる時間に応じて決定できます。
- Chrome
CSS 変数 - メリット
Chrome 49 で CSS 変数(より正確には「CSS カスタム プロパティ」)が導入されます。これは、CSS の繰り返しを減らすためだけでなく、テーマの切り替えや、将来的な CSS 機能の拡張/ポリフィルといったランタイムで効果を発揮する場合にも役立ちます。
MediaRecorder で音声と動画を記録する
MediaRecorder API を使用すると、ウェブアプリから音声と動画を記録できます。この機能は現在 Firefox、Chrome for Android、およびデスクトップでご利用いただけます。
- Chrome
VP9 が WebRTC で利用可能に
パソコン版 Chrome 48 および Android 版 Chrome 48 以降では、WebRTC を使用したビデオ通話用のビデオ コーデックとして VP9 がオプションになります。
- Chrome
通知アクション(Chrome 48)
ユーザーは [通知の操作] ボタンを使用することで、ページを開かなくてもサイトを操作できます
- Chrome
イベントの高解像度タイムスタンプ
DOMHighResTimeStamp を使用すると、イベントが発生したタイミングをマイクロ秒単位の精度で検出できます。
- Chrome
URLSearchParams による簡単な URL 操作
URL のクエリ文字列への簡単なアクセスと操作 TURLSearchParams
- Chrome
Android 版 Chrome 用 Google Cast
Android 版 Chrome で、Presentation API と Cast Web SDK を使用してモバイルサイトを Google Cast デバイスに表示できるようになりました。
- Chrome
プログレッシブ ウェブアプリのスタートガイド
プログレッシブ ウェブアプリの構築を開始する方法
- Chrome
Chrome DevTools にセキュリティ パネルを追加
Chrome DevTools の新しい [セキュリティ] パネルの詳細をご確認ください。
- Chrome
バックグラウンド同期の導入
バックグラウンド同期は、ユーザーの接続が安定するまでアクションを延期できる新しいウェブ API です。これは、ユーザーが送信したいものがすべて実際に送信されるようにする場合に便利です。
- Chrome
DevTools Digest(CDS Edition): 将来像と RAIL プロファイリング
効率化された新しい Device Mode の常時稼働により、DevTools のモバイル ファースト化について説明します。カラーボタンを使ってセレクタに色を簡単に追加したり、DevTools に近日追加される機能を確認したりできます。
- Chrome
Application Shell アーキテクチャによるウェブアプリの即時読み込み
Application Shell アーキテクチャは、さまざまなテクノロジーを活用してプログレッシブ ウェブアプリを構築するための手法です。
- Chrome
DevTools ダイジェスト - 効率的な要素編集、Service Worker のデバッグ、マテリアル デザイン シェード
DOM パネルの新しいコンテキスト メニューを使用して、ノードを効率的に編集できます。[リソース] パネルから直接 Service Worker をデバッグできます。カラー選択ツールですべてのマテリアル デザイン シェードから選択できます。JS ライブラリのブラックボックス化が簡単に。
- Chrome
ウェブ アニメーションのリソース
Web Animations API のリソースなど
「タップして検索」のトリガーを管理する
「タップして検索」がトリガーされるタイミングと仕組みを理解する
- Chrome
通知 needInteraction - デスクトップでのスムーズな通知 UX
デスクトップ通知はしばらくすると自動的に閉じます。
- Chrome
DevTools ダイジェスト - タブの並べ替え、Console on 2、フレームワーク イベント リスナー
DevTools のタブを好みに合わせて並べ替え、フレームワーク イベントがバインドされた正確な場所を確認します。
- Chrome
入力デバイス機能
PointerEvents がない場合にマウスとタップのロジックを合理化する簡単な方法
- Chrome
ウェブアプリからカメラ、マイク、スピーカーを選択する
MediaDevices インターフェースは、カメラ、マイク、スピーカーなど、ブラウザで利用可能な入出力デバイスにアクセスできます。
- Chrome
JavaScript のスニペットを実行する
スニペットは、Chrome DevTools の [ソース] パネルで作成および実行できる小さなスクリプトです。どのページからでもアクセスして実行できます。スニペットを実行すると、現在開いているページのコンテキストから実行されます。
- Chrome DevTools
EME ロガー拡張機能
EME Logger は、Encrypted Media Extensions(EME)のイベントと呼び出しを DevTools コンソールに記録する Chrome 拡張機能です。
- Chrome
Service Worker Cache API の更新
Chrome 46 では、Chrome 47(おそらく 48 程度)と同様に、キャッシュに新しいメソッドが導入されました。終わりはありません。
- Chrome
History API - スクロールの復元
History API が更新され、見づらいスクロール ジャンプを防止できるようになりました。
- Chrome
Chrome でタブが破棄される - メモリ節約のテスト
Chrome のメモリ使用量の削減は、今年のチームの最優先事項の一つです。
- Chrome
HPKP レポートを使用した公開鍵ピニングのロールアウト
Chrome 46 には、より厳密な形式の SSL をサイトに展開するのに役立つ HPKP レポートと呼ばれる機能が付属しています。
- Chrome
ウェブアプリ マニフェストを使用してサイト全体のテーマカラーを指定する
マニフェストでテーマカラーを設定し、ホーム画面から起動したときにサイトのすべてのページで使用できるようにします。
- Chrome
より大規模なネットワーク パネル フィルタ、その他
[ネットワーク] パネルのフィルタでは、便利なカスタム検索ラベルがいくつかサポートされています。
- Chrome
スタイル ペインで使用する簡単なキーボードのコツ
便利なキーボードの使い方を使って、スタイル ペインを効果的に操作する方法を学びます。
- Chrome
DevTools ダイジェスト - タイムラインの詳細、カラーパレットなどを集約
タイムラインの集計詳細でパフォーマンスの問題を引き起こすサードパーティ スクリプト、新しいカラーパレットで一貫した色を選択する方法などをご確認ください。
- Chrome
マテリアル デザイン Lite の新しいリリース - 1.0.4
マテリアル デザイン Lite が新しくリリースされ、多くのバグの修正とビルドプロセスの改善が導入されました。
- Chrome
requestIdleCallback を使用する
requestIdleCallback は、ブラウザがアイドル状態のときに処理をスケジュールするための新しいパフォーマンス API です。
- Chrome
プラグイン コンテンツでのポスター画像の使用
Chrome でオブジェクト要素にカスタムのポスター画像を追加できるようになりました。これにより、Flash などのプラグインの読み込みのパフォーマンスが向上します。
- Chrome
DOM ノードを簡単に複製
HTML を巨大な文字列として編集することなく、DOM を簡単に変更できます。
- Chrome
コンソール パネルで HTML を編集する
[要素] パネルに表示されている DOM ノードのコンテキスト メニューも、コンソール パネルに表示されています。
- Chrome
コンソール パネルで使用する 5 つのコツ
コンソール パネルで使用する 5 つのコツ
- Chrome
DevTools の新しいホーム
developers.google.com/web/tools/chrome-devtools という新しいホーム画面で、新しいチュートリアルやヒントをご覧いただけます。
- Chrome
ソース内の CSS のライブ編集
[ソース] で CSS をライブ編集し、ページをリアルタイムで更新できることをご存じですか?
- Chrome
DOM パンくずリストの改善
[要素] パネルにパンくずリストがあることをご存じですか?
- Chrome
DevTools ダイジェスト - フィルム ストリップとスロットリングの新しい機能
DevTools ダイジェスト版の第 1 弾として、新しいフィルム ストリップ機能などの詳細をご紹介します。
- Chrome
MediaStream のサポート終了
MediaStream API は、同期された音声または動画のストリームを表します。MediaStream.ended、MediaStream.label、MediaStream.stop() が非推奨になりました。代わりに MediaStream.active、MediaStreamTrack.label、MediaStreamTrack.stop() を使用してください。
- Chrome
新しいカスタム デバイスをプリセットとして追加
特定の次元のデバイスを頻繁にエミュレートするか。DevTools の Device Mode で、新しいデバイス プリセットを追加できます。
- Chrome DevTools
- Chrome
JavaScript 経由で Bluetooth デバイスと通信する
Web Bluetooth API を使用すると、ウェブサイトと Bluetooth デバイス間の通信が可能になります。
Service Worker でのパフォーマンスを測定する
Service Worker でリクエストのパフォーマンスを測定できない場合、パフォーマンスの向上をどう表現できるでしょうか。そこで、Chrome の最近の変更内容をご紹介します。
- Chrome
rotationAngle と touchRadius を使用する
Chrome 45 では、優れたタッチベースのアプリを簡単に開発していただけるように、いくつかの変更が加えられています。
- Chrome
Android 版 Chrome でのメディア再生通知
ウェブページで音声または動画を再生しているときに、通知トレイとロック画面にページタイトルを示す通知と再生/一時停止ボタンが表示されます。この通知を使用して、再生を一時停止/再開したり、メディアを再生しているページに戻ることができます。
- Chrome
次回実行を選択するためのショートカット
[Sources] パネル エディタで、Cmd + D を使用して次のオカレンスを選択できます。
- Chrome
CSS メディアクエリを調査して表示する
Device Mode には、レスポンシブ デザインを容易にするメディアクエリ インスペクタが組み込まれています。
- Chrome
[Sources] パネルでコードブロックを選択して実行する
ショートカット Ctrl + Shift + E を使用して、[Sources] パネルでハイライト表示されたコードブロックを実行します。
- Chrome
特定の条件に基づいてブレークポイントを設定する
ブレークポイントを設定すると、式の結果に基づいて条件を設定できます。
- Chrome
DevTools パネルをすばやく切り替える
Cmd+](または Cmd[)を使用すると、DevTools でパネル間を移動できます。
- Chrome
コンソールから簡単なスタック トレースを出力する
console.trace() を使用すると、迅速かつ簡単なスタック トレースを取得でき、コード実行フローについての理解を深めることができます。
- Chrome
検査員の検査は誰が行いますか?
DevTools で DevTools を確認できることをご存じですか?
- Chrome
要素で疑似クラスをトリガーする
CSS のホバー効果をデバッグしようとして、要素にマウスが移動しなかったことはありますか?方法は次のとおりです
- Chrome
オプションのファイル スコープを使用したプロジェクト全体の検索
DevTools でプロフェッショナルな検索を行うためのシークレット コマンドについて学びます。
- Chrome
ネットワークの色グループ
リソースを識別しやすくするために、どの色がどのリソースタイプと一致するかを確認します。
- Chrome
デバッグ中に JavaScript 値をインラインでプレビューする
デバッグ中に DevTools で JavaScript 変数の値をプレビューする方法について説明します。
- Chrome
[要素] パネルでリソースをすばやく編集/表示
[要素] パネルでリソースをすばやく編集/表示
- Chrome
event_rules
manifest.json の event_rules プロパティのリファレンス ドキュメント。
- Chrome 拡張機能
event_rules
manifest.json の event_rules プロパティのリファレンス ドキュメント。
- Chrome 拡張機能
オーディオ用 Media Source Extensions
Media Source Extensions(MSE)は、HTML5 の音声要素と動画要素向けの拡張バッファリングと再生コントロールを提供します。もともと Dynamic Adaptive Streaming over HTTP(DASH)ベースの動画プレーヤーをサポートするために開発されましたが、MSE はオーディオ、特にギャップレス再生に使用できます。
- Chrome
通知の変更を通知する
Chrome 44 では 2 つの新しい API が追加され、プッシュ通知での操作とカスタマイズが簡単になりました。
- Chrome
キーボードでコールスタック間を移動
キーボード ショートカットでブレークポイントを設定し、コールスタック内を移動する方法
- Chrome
現在選択されている DOM ノード
現在選択されている DOM ノードを取得する、クイック コンソールのショートカットについて学びます。
- Chrome
未完了のネットワーク リクエスト
Is:running の詳細ネットワーク フィルタを使用すると、未完了のネットワーク リクエスト(実行中のリクエストなど)を確認できます。
- Chrome
要素のクイック編集タグ
[要素] パネルでノードの開始タグ名をダブルクリックすると編集できます。
- Chrome
一致するセレクタを表示
スタイル ペインでセレクタを表示しているとき、カンマ区切りのセレクタ部分は、選択した DOM ノードと一致するかどうかによって色分けされます。
- Chrome
コンソール パネルからイベントを迅速にモニタリング
コマンドライン API のメソッド monitorEvents(object [, events]) を使用して、オブジェクトにディスパッチされたすべてのイベントをログに記録できます。
- Chrome
データ URI として画像をコピー
[リソース] パネルで画像プレビューを右クリックし、データ URI(Base 64 エンコード)としてコピーします。
- Chrome
Alt キーを押しながらクリックすると、すべての子ノードを展開します
Alt + クリックするとすべての子ノードを展開します
- Chrome
- Chrome DevTools
要素パネルに表示
コンソールの要素パネルに DOM ノードを表示する。
- Chrome
ソースパネルに複数のカーソルを追加するためのコマンドクリック
DevTools のソースパネルでマルチカーソルを編集する方法を学習します。
- Chrome
イージング エディタ
イージングの CSS プロパティを選択すると、動作をアニメーションでプレビューできます。
- Chrome
カラー選択ツールの UI と機能の一部の強化
DevTools のカラー選択ツールがアップグレードされます。 現在の Chrome Canary
- Chrome
イベント リスナーを取得してデバッグする
次のコンソール コマンドを使用して、DevTools でイベント リスナーを取得してデバッグします。
- Chrome
例外が発生すると自動的に一時停止
DevTools では、例外が発生すると自動的に一時停止できます(特にキャッチされなかった例外で便利です)。
- Chrome
- Chrome DevTools
CSS 値をすばやく変更する
キーボードまたはマウスホイールを使用して CSS 値をすばやく変更する
- Chrome
cURL でネットワーク リクエストを再生する
コマンドラインからネットワーク リクエストをデバッグする方法を学習します。
- Chrome
角かっこ表記のオートコンプリート
[Sources] パネルで角かっこ表記をオートコンプリートできます。
- Chrome
- Chrome DevTools
DOM ブレークポイントを表示、変更する
DevTools の [Breakpoints] ペインで DOM ブレークポイントを表示、変更する方法
- Chrome
要素をビューポートにスクロールする
検査している要素がビューの外にある場合、次の手順でビューポートに取ります。
- Chrome
疑似クラスのトリガー
CSS を適切にデバッグするために、:active などの疑似クラスをトリガーする方法について説明します。
- Chrome
[ネットワーク] パネルのフィルム ストリップ
ネットワーク パネルを視覚的に操作し、ページの読み込み中にキャプチャしたスクリーンショットを表示する
- Chrome
CSS の短縮形プロパティを開く
[スタイル] ペインでは、CSS の短縮プロパティ(Flex や padding など)を展開して、定義されているすべてのプロパティを確認できます。
- Chrome
ポート転送
DevTools のポート転送を使用すると、localhost URL でもモバイルで機能できます。
- Chrome
CSS セレクタで DOM ツリーを検索
[要素] パネルで DOM を参照する際は、CSS セレクタで CMD/Ctrl+F を使用してノードを検索してみてください。
- Chrome
入力時に JS エラーが通知されます
コンソール パネルにエラーが表示された場合は、それをクリックして [Sources] パネルの行で、エラーの表示を確認します。
- Chrome
簡単なタイムライン録画
DevTools のドッキングを解除して別のウィンドウに移動し、ページの中でアクションを実行する必要がある部分の近くに記録ボタンが配置されるようにします。
- Chrome
特定の列の行番号に移動する
[ソース] パネルで特定の行番号に移動する方法について説明します。
- Chrome
マニフェスト - USB プリンタ
manifest.json の usb_printers プロパティのリファレンス ドキュメント。
ハードウェア デコードを備えた高性能な動画
ハードウェア動画のサポートにより、HTML5 動画だけでなくプラグインでも効率的なデコードが可能になります。Flash ユーザーは、古いスタイルの Video から StageVideo オブジェクトに切り替える必要があります。
- Chrome
イベント リスナーに簡単にジャンプ
任意のノード上の登録済みイベント リスナーの関数定義を表示する方法を学習します。
- Chrome
文言の要点
実行されたステートメントが詳細にハイライト表示されます。
- Chrome
ハードリロード
DevTools を開いた状態で、再読み込みボタンを長押しすると、その他のオプションを表示します。
- Chrome
ローカルの変更
ローカルの変更では、特定のソースファイルに対して(DevTools を介して)行われた変更を確認できます。
- Chrome
ビジネス情報を順番に編集
カーソル位置の履歴はソースパネルに保持されるため、Alt キー(戻る)または Alt キー(進む)を使用して前の編集位置を巡回できます。
- Chrome
ネットワーク リソースのレスポンスをクリップボードにコピーします
ネットワーク リソースのリクエスト/レスポンス ヘッダーをコピーするだけでなく、レスポンス自体をコピーすることもできます。
- Chrome
ドラッグして列を選択する
Alt キーを押しながらマウスをドラッグすると、ソースパネル エディタで列を選択できます。
- Chrome
事前定義スニペット
ウェブページで事前定義されたコード スニペットを実行する方法
- Chrome
要素のタグのクイック編集
[要素] パネルでノードの開始タグ名をダブルクリックすると編集できます。
- Chrome
データ URI として画像をコピー
[リソース] パネルで画像プレビューを右クリックし、データ URI(Base 64 エンコード)としてコピーします。
- Chrome
[要素] パネルに表示
コンソールの [要素] パネルで DOM ノードを表示する。
- Chrome
一致するセレクタを表示
スタイル ペインでセレクタを表示しているとき、カンマ区切りのセレクタ部分は、選択した DOM ノードと一致するかどうかによって色分けされます。
- Chrome
コンソール パネルからイベントを迅速にモニタリング
コマンドライン API のメソッド monitorEvents(object [, events]) を使用して、オブジェクトにディスパッチされたすべてのイベントをログに記録できます。
- Chrome
ソースパネルに複数のカーソルを追加するためのコマンドクリック
DevTools のソースパネルでマルチカーソルを編集する方法を学習します。
- Chrome
Alt キーを押しながらクリックすると、すべての子ノードを展開します
Alt + クリックするとすべての子ノードを展開します
- Chrome DevTools
- Chrome
キーボード ショートカットで DevTools のドック状態を切り替える
Cmd + Shift + D キーを使用して、DevTools のドック状態を最近使用した 2 つの状態に切り替えます。
- Chrome
キーボード ショートカットで DevTools のドック状態を切り替える
Cmd + Shift + D キーを使用して、DevTools のドック状態を最近使用した 2 つの状態に切り替えます。
- Chrome
未完了のネットワーク リクエスト
Is:running の詳細ネットワーク フィルタを使用すると、未完了のネットワーク リクエスト(実行中のリクエストなど)を確認できます。
- Chrome
イージング エディタ
イージングの CSS プロパティを選択すると、動作をアニメーションでプレビューできます。
- Chrome
モバイル用の自動大文字表記
テキスト入力に対するもう一つの不満は解消されます。
- Chrome
切り取りとコピーのコマンド
切り取りコマンドとコピーコマンドがサポートされているため、選択したテキストを切り取り、ユーザーのクリップボードにコピーできます。
- Chrome
WebView のリモート デバッグ
Chrome デベロッパー ツールを使用して、ネイティブ Android アプリの WebView をデバッグします。
- Chrome DevTools
ソースマップを使用してデプロイするのではなく、オリジナル コードをデバッグする
クライアントサイドのコードを結合、圧縮、コンパイルした後でも、可読性およびデバッグ可能な状態を維持する。
- Chrome DevTools
Console Utilities API リファレンス
Chrome DevTools Console で使用できる便利な関数のリファレンスです。
- Chrome DevTools
Android デバイスのリモート デバッグ
Windows、Mac、Linux パソコンから Android デバイスでライブ コンテンツのリモート デバッグを行います。
- Chrome DevTools
プロトタイプ チェーンに DOM 属性を追加
Chrome は仕様に準拠しています。属性の反映に WebKit ロジックを使用しているかどうか、サイトを確認してください
- Chrome
他のブラウザのエミュレートとテスト
仕事は Chrome と Android でサイトが適切に動作するかどうかを確認することで終わります。Device Mode は iPhone などの他のさまざまなデバイスをシミュレートできますが、エミュレーションについては、他のブラウザ ソリューションを確認することをおすすめします。
- Chrome DevTools
ページのリソースを表示
フレーム、ドメイン、タイプなどの条件でリソースを整理できます。
- Chrome DevTools
ウェブ用 Permissions API
Permissions API では、API の権限のステータスを一元的にチェックできます。
- Chrome
ウェブ アニメーションの命名における概念の簡素化
デベロッパーの皆様からのフィードバックに基づき、ウェブ アニメーションで今後提供予定の機能の名称を変更しました。
- Chrome
DevTools の新しいホーム
developer.google.com/web に移転しました。新しいチュートリアルやヒントが満載です。
- Chrome
DevTools のタイムライン - 詳細を説明します
Chrome DevTools の [タイムライン] パネルがアップグレードされ、サイトのランタイム パフォーマンスをより詳しく把握できるようになりました。
- Chrome
OpenWeb でのプッシュ通知
Chrome 42 でプッシュ メッセージと通知機能をリリースします。
- Chrome
HTML5 オフライン ストレージの管理
Chrome アプリをクライアントサイドで保存し、オフラインで使用できるようにする方法。
Web Components と JSON-LD を使用したセマンティック サイトの作成
schema.org のマークアップをコンポーネントに追加して、検索エンジンと相性の良いものにしましょう。
- Chrome
Chrome Dev Summit 2014 - Polymer を使ってアプリを作成しましょう
Polymer を使ったアプリの構築。
- Chrome
ES6 テンプレート文字列によるリテラルの取得
式が埋め込まれたテンプレート文字列リテラル。私たちは長い間、これを待ち望んできました。文字どおり
- Chrome
仮想ビューポートとは
仮想ビューポートにより、ビューポートのレイアウトと表示が分離されます。
- Chrome
image-rendering:pixelated
国全体のモザイク。Chrome 41 に対応
- Chrome
moveBefore() を使用して DOM ミューテーション中に状態を保持する
重要な状態を失うことなく DOM 内でノードを移動する
- Chrome
共有モジュール
Chrome 拡張機能間でコードを共有する方法
- Chrome 拡張機能
Chrome Dev Summit 2014 - Polymer - 労働組合の状況
ポリマーユニオンの状態。
- Chrome
共有モジュール
Chrome 拡張機能間でコードを共有する方法
- Chrome 拡張機能
ネイティブ アプリのインストール プロンプト
ネイティブ アプリ インストール バナーを使用すると、ユーザーがブラウザを離れることなく、アプリストアからデバイスにネイティブ アプリを迅速かつシームレスにインストールできます。
- Chrome
ネイティブ メッセージング
Chrome アプリからネイティブ アプリとメッセージを交換する方法
ウェブ アニメーションの再生コントロール(Chrome 39)
ウェブ アニメーションの再生の詳細
- Chrome
モバイルウェブ開発の基礎
デベロッパーがウェブ開発に着手し、サイトでイテレーションができるように、Chrome チームが行っている取り組みの一部をご紹介します。
- Chrome
デベロッパーからのフィードバックが必要 - Frame Timing API
現在、実際の 1 秒あたりのフレーム数を測定するための新しい API の開発が進行中ですが、皆様のフィードバックが必要です。
- Chrome
Android 版 Chrome 39 でテーマカラーをサポート
Chrome for Android でツールバーの色を設定するには、 theme-color を使用します。
- Chrome
ステップ 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
ビーコンデータを送信する(Chrome 39)
Chrome 39 では Beacon API が実装されており、ページのアンロード イベント中に小規模な非同期 HTTP リクエストを送信できます。
- Chrome
精密なタッチ操作で正確な操作が可能
画面密度の変化に対応するために、Chrome で TouchEvents が整数ではなく浮動小数点値を返すように変更されました。これにより、遅いジェスチャーでも詳細なフィードバックが得られます。
- Chrome
ES6 による収集と反復処理
Maps、Set、for...反復処理は、データ コレクションの処理方法を変更できる ES6 機能です。
- Chrome
Encoding API を使用した ArrayBuffer から文字列への変換を容易に
ネイティブの Encoding API を使用すると、未加工のバイナリデータと JavaScript 文字列を簡単に変換できます。
- Chrome
M36 でのウェブ オーディオの変更
Chrome 36 でのウェブ オーディオ標準のクリーンアップ処理について
- Chrome
Chrome 37 ベータ版でリリースされたダイアログ要素
Chrome ベータ版で要素のネイティブ サポートを開始
- Chrome
DevTools ダイジェスト - Chrome 35
Chrome 35 のデベロッパー ツールの更新
- Chrome
Notifications API を使用する
Chrome 拡張機能のユーザーに通知を表示します。
- Chrome 拡張機能
リッチ通知 API
Chrome 拡張機能のユーザーに通知を表示する方法。
- Chrome 拡張機能
Chrome Dev で IndexedDB の Blob サポートを開始
Chrome で待望の機能である IndexedDB に対する Blob のサポートが Chrome Dev でリリースされました。
- Chrome
ウェブ パフォーマンス測定の自動化
PSI を使用して、ウェブ パフォーマンス指標をビルドプロセスに組み込みます。
- Chrome
ゲームエンジン
Chrome アプリで推奨されるゲームエンジン
ウェブ アニメーション - element.animate() を Chrome 36 で利用可能に
Web Animations は、ウェブ プラットフォームでのアニメーションと同期をサポートするためのモデルを定義します。element.animate() は、これらのピースのうち Chrome に最初に導入されるものです。
- Chrome
互換性が向上し、スムーズなタッチ操作を実現
タッチに反応してスムーズにスクロールするモバイル ウェブアプリが必要です。開発は簡単であるべきですが、残念ながら、スクロール中にモバイル ウェブブラウザがタッチイベントにどのように反応するかについては、[TouchEvent](https://www.w3.org/TR/touch-events/) の仕様の実装の詳細として残されています。
- Chrome
Apache Cordova を使用してモバイルで Chrome アプリを実行する
Apache Cordova を使用して Android デバイスや iOS デバイスで動作する Chrome アプリを設定する方法についてのガイドです。
Chrome DevTools を使用して非同期 JavaScript をデバッグする
JavaScript を独自たらしめている強力な機能の 1 つが、コールバック関数を介して非同期で動作する機能です。非同期コールバックを割り当てると、イベントドリブン コードを記述できますが、JavaScript がリニアに実行されないため、バグの追跡が困難になります。 幸い、Chrome DevTools では、非同期 JavaScript コールバックの 完全な コールスタックを確認できます。 DevTools
- Chrome
CSS グリッドを利用する
CSS グリッド レイアウトは、ウェブ アプリケーションに最適な新しいレイアウト プリミティブを提供する新しい CSS3 モジュールです。
- Chrome
マニフェスト - Bluetooth
manifest.json の bluetooth プロパティのリファレンス ドキュメント。
Bluetooth
Chrome アプリから Bluetooth デバイスと通信する方法。
Chrome 33 でのホスティングの変更
Chrome バージョン 33 から開始された Chrome 拡張機能のホスティングの変更に関する詳細。
- Chrome 拡張機能
チュートリアル: Manifest V2 に移行する
マニフェスト v1 からマニフェスト v2 への移行方法に関するガイドラインです。
- Chrome 拡張機能
はじめに
Chrome 拡張機能を作成する詳しい手順。
- Chrome 拡張機能
WebView ワークフロー
Yeoman、Gradle、Grunt を使用してウェブ アプリケーションを作成する方法を説明するチュートリアル。
ヒントとコツ
WebView アプリケーションを改善するためのヒントとコツ。
ウェブ デベロッパー向けの WebView アプリケーション
Yeoman、Gradle、Grunt を使用してウェブ アプリケーションを作成する方法を説明するチュートリアル。
よくある質問
Chrome 拡張機能に関するよくある質問。
- Chrome 拡張機能
ピクセル パーフェクトの WebView
完璧な WebView UI を作成する方法。
DevTools ダイジェスト
Chrome 33 のデベロッパー ツールの更新
- Chrome
chrome.location
chrome.location API のリファレンス ドキュメント。
- Chrome 拡張機能
Yeoman マンスリー ダイジェスト
ヤーマン語の質の高い記事、ジェネレータ、プロジェクト ニュースを毎月お届けするダイジェストです。
- Chrome
Chrome 設定のオーバーライド
Chrome 拡張機能から Chrome の設定をオーバーライドする方法。
- Chrome 拡張機能
Chrome 設定のオーバーライド
Chrome 拡張機能から Chrome の設定をオーバーライドする方法。
- Chrome 拡張機能
Yo Polymer – ウェブ コンポーネント ツールの Whirlwind ツアー
Web Components や Polymer、それら用のフロントエンド ツールについて簡単にご紹介します。
- Chrome
会話するウェブアプリ - Speech Synthesis API の概要
Web Speech API の合成機能の概要です。
- Chrome
Chrome Dev Summit - プラットフォームの概要
プラットフォーム
- Chrome
Chrome Dev Summit - オープン ウェブ プラットフォームの概要
Open Web Platform の機能は、かつてないスピードで進化しています。Chrome Dev Summit では、プラットフォーム向けに Blink、セキュリティ、メディアを改善する取り組みについてお話ししました。
- Chrome
Chrome Dev Summit - パフォーマンスの概要
パフォーマンスが重要
- Chrome
ソケット
manifest.json の sockets プロパティに関するリファレンス ドキュメント。
Chrome Dev Summit - Polymer の宣言型、カプセル化、再利用可能なコンポーネント
Polymer は、ウェブ コンポーネントの未来の未来を築く入り口としての役割を果たします。Chrome Dev Summit でウェブ コンポーネントと Polymer について詳しく知る
- Chrome
Chrome Dev Summit - モバイルの概要
これは Chrome Dev Summit のレポートのパート 1 です。これまでモバイルとクロスデバイス開発に重点が置かれていたため、本編からスタートします。
- Chrome
Yeoman マンスリー ダイジェスト
Yeoman コミュニティによる記事、動画、講演の定期的なまとめ。
- Chrome
blink の新しいウェブ アニメーション エンジンで CSS アニメーションと遷移を制御
CSS のアニメーションと遷移を強化する Web Animations 1.0 の実装が Blink に導入されました。
- Chrome
DevTools ダイジェスト 2013 年 12 月
Chrome DevTools の変更点の最新アップデートです。
- Chrome
タップ遅延 300 ミリ秒(廃止)
モバイル ブラウザでのクリック操作はすべて 300 ミリ秒の遅延で妨げられますが、これはモバイル デバイス向けサイトの Chrome 32 で解消されました。
- Chrome
DevTools ターミナル
DevTools からターミナルを使用する
- Chrome
マネージド ストレージのマニフェスト
manifest.json のストレージ プロパティに関するリファレンス ドキュメント。
- Chrome 拡張機能
ストレージ領域のマニフェスト
manifest.json のストレージ プロパティに関するリファレンス ドキュメント。
- Chrome 拡張機能
モバイル向け Chrome DevTools
スクリーンキャストとエミュレーション
- Chrome
Chrome DevTools 11 月のダイジェスト
Chrome DevTools は迅速に動作するので、いくつかのコンポーネントに導入されたいくつかの新機能と改善点に注目してください。具体的には UI の変更、JavaScript の高精度プロファイリング、 Workspaces の新機能について説明します。 CPU プロファイリング は、JavaScript の効率を確認するのに非常に便利な機能です。従来のプロファイル ビューに加えて、今年の夏に フレームチャート が導入されました。これは、ページの JavaScript
- Chrome
Yeoman マンスリー ダイジェスト
Yeoman コミュニティによる記事、動画、講演の定期的なまとめ。
- Chrome
フロントエンド開発の自動化の現状(スライド)
ワークフローを自動化するツールでフロントエンドの生産性を向上させる方法を学びます。
- Chrome
シリアル デバイス
Chrome アプリからシリアル デバイスと通信する方法。
ウェブオーディオのライブ音声入力 - Android で利用可能に
Chrome for Android(v31.0.1650)で、Web Audio API を介した音声入力のサポートを開始しました。
- Chrome
Flexbox のレイアウトは遅くない
朗報!新しい Flexbox は古い Flexbox より 2.3 倍高速
- Chrome
DevTools での回答 - フォントは何でしょうか?
テキストのレンダリングにどのフォントが実際に使用されているのか疑問に思ったことはありませんか?Chrome DevTools ですべてがわかるので、もう心配する必要はありません。
- Chrome
ダイアログ要素 - モーダルを簡単に
独自のモーダル ダイアログ ボックスを作成したことはありますか?まもなく、ダイアログ ボックスはウェブ プラットフォームの一部になりつつあります。
- Chrome
url_handlers
manifest.json の url_handlers プロパティのリファレンス ドキュメント。
externally_connectable
manifest.json の external_connectable プロパティのリファレンス ドキュメント。
- Chrome 拡張機能
externally_connectable
manifest.json の external_connectable プロパティのリファレンス ドキュメント。
- Chrome 拡張機能
Analytics
Google アナリティクスを Chrome アプリに統合する方法
Chrome 動画のアルファ透明度
WebM ではアルファ透明度が追加され、Chrome 31 でサポートされています。
- Chrome
Chrome DevTools の革命(2013 年)
ウェブ アプリケーションの複雑さと機能が増加するにつれ、Chrome DevTools も進化してきました。Paul Irish による Google I/O 2013 の講演「 Chrome DevTools Revolutions 2013 」のまとめでは、ウェブ アプリケーションの構築とテスト方法に革命をもたらす最新機能をご紹介します。 ポールの講演をご覧いただけなかった場合は、上記の動画をご覧ください(どうぞ、お待ちしております)。または、新機能のまとめに直接進んでください。
- Chrome
sourceMappingURL と sourceURL の構文を変更しました
sourceMappingURL と sourceURL の構文を変更しました
- Chrome
マニフェスト - ウェブでアクセス可能なリソース
manifest.json の web_accessible_resources プロパティのリファレンス ドキュメント。
- Chrome 拡張機能
マニフェスト - 要件
manifest.json の requirements プロパティのリファレンス ドキュメント。
- Chrome 拡張機能
マニフェスト - 名前
manifest.json の name プロパティのリファレンス ドキュメント。
- Chrome 拡張機能
マニフェスト - シークレット モード
manifest.json の Incognito プロパティのリファレンス ドキュメント。
- Chrome 拡張機能
マニフェスト - アイコン
manifest.json の icon プロパティのリファレンス ドキュメント。
- Chrome 拡張機能
マニフェスト - 名前と略称
manifest.json の name プロパティと short_name プロパティのリファレンス ドキュメント。
- Chrome 拡張機能
マニフェスト - 説明
manifest.json の description プロパティのリファレンス ドキュメント。
- Chrome 拡張機能
マニフェスト - short_name
manifest.json の short_name プロパティのリファレンス ドキュメント。
- Chrome 拡張機能
マニフェスト - シークレット モード
manifest.json の Incognito プロパティのリファレンス ドキュメント。
- Chrome 拡張機能
マニフェスト - バージョン
manifest.json のバージョン プロパティに関するリファレンス ドキュメント。
- Chrome 拡張機能
マニフェスト - サンドボックス
manifest.json の sandbox プロパティのリファレンス ドキュメント。
- Chrome 拡張機能
マニフェストのバージョン
manifest.json の manifest_version プロパティのリファレンス ドキュメント。
- Chrome 拡張機能
Manifest V2 - バージョン [非推奨]
manifest.json のバージョン プロパティに関するリファレンス ドキュメント。
- Chrome 拡張機能
マニフェスト - Nacl モジュール
manifest.json の nacl_modules プロパティのリファレンス ドキュメント。
- Chrome 拡張機能
マニフェスト - 説明
manifest.json の description プロパティのリファレンス ドキュメント。
- Chrome 拡張機能
マニフェスト - デフォルト ロケール
manifest.json の default_locale プロパティのリファレンス ドキュメント。
- Chrome 拡張機能
マニフェスト - 要件
manifest.json の requirements プロパティのリファレンス ドキュメント。
- Chrome 拡張機能
マニフェスト - ホームページの URL
manifest.json の home_url プロパティのリファレンス ドキュメント。
- Chrome 拡張機能
マニフェスト - キー
manifest.json の主要なプロパティのリファレンス ドキュメント。
- Chrome 拡張機能
マニフェスト - サンドボックス
manifest.json の sandbox プロパティのリファレンス ドキュメント。
- Chrome 拡張機能
マニフェスト - デフォルト ロケール
manifest.json の default_locale プロパティのリファレンス ドキュメント。
- Chrome 拡張機能
マニフェスト - ウェブでアクセス可能なリソース
manifest.json の web_accessible_resources プロパティのリファレンス ドキュメント。
- Chrome 拡張機能
マニフェスト - Chrome の最小バージョン
manifest.json の minimum_chrome_version プロパティに関するリファレンス ドキュメント。
- Chrome 拡張機能
マニフェスト - キー
manifest.json の主要なプロパティのリファレンス ドキュメント。
- Chrome 拡張機能
マニフェスト - アイコン
manifest.json の icon プロパティのリファレンス ドキュメント。
- Chrome 拡張機能
マニフェスト - ホームページの URL
manifest.json の home_url プロパティのリファレンス ドキュメント。
- Chrome 拡張機能
マニフェスト - オフライン有効
manifest.json の offline_enabled プロパティのリファレンス ドキュメント。
- Chrome 拡張機能
マニフェスト - アプリ
manifest.json のアプリ プロパティのリファレンス ドキュメント。
マニフェスト - ファイル ハンドラ
manifest.json の file_handlers プロパティのリファレンス ドキュメント。
キオスクアプリ
manifest.json の kiosk_enabled プロパティに関するリファレンス ドキュメント。
カスタム フィルタ(CSS シェーダー)の概要
カスタム フィルタ(CSS シェーダー)の概要
Shadow DOM のコンセプトの可視化
Shadow DOM のコンセプトの可視化
- Chrome
拡張機能とは
Chrome 拡張機能の目的と開発方法の概要。
- Chrome 拡張機能
DevTools の連続描画モードを使用した長い描画時間のプロファイリング
DevTools の連続描画モードを使用した長い描画時間のプロファイリング
- Chrome
WebRTC - RTCDataChannel デモ、API の変更、Chrome と Firefox の通信
WebRTC - RTCDataChannel デモ、API の変更、Chrome と Firefox の通信
- Chrome
モバイル WebKit ブラウザに CSS 背景の短縮形を追加
モバイル WebKit ブラウザに CSS 背景の短縮形を追加
- Chrome
音声駆動型ウェブアプリ - Web Speech API の概要
音声駆動型ウェブアプリ - Web Speech API の概要
- Chrome
WebRTC による画面共有
WebRTC による画面共有
- Chrome
キャンバス ドリブンの背景画像
canvas または webgl を使用して CSS 背景を強化する
- Chrome
WebRTC が Firefox、Android、iOS に対応
WebRTC が Firefox、Android、iOS に対応
- Chrome
AngularJS を使用したアプリの作成
AngularJS を使用して Chrome アプリを作成するためのガイドです。
Object.observe で変更に対応する
Object.observe で変更に対応する
- Chrome
コンテンツ セキュリティ ポリシー 1.0 が公式に
コンテンツ セキュリティ ポリシー 1.0 が公式に
- Chrome
Sencha Ext JS でアプリを作成する
Sencha Ext JS フレームワークを使用して Chrome アプリを構築する方法。
権限を宣言する
manifest.json 内の権限プロパティの有効な値の概要。
- Chrome 拡張機能
CSS シェーダーと Google マップを備えたインタラクティブな地球
CSS シェーダーと Google マップを使用したインタラクティブな地球
- Chrome
ActiveTab 権限
Chrome 拡張機能で activeTab 権限を使用する方法について説明します。
- Chrome 拡張機能
ユーザーに選択肢を提供する
ユーザーが拡張機能をカスタマイズできるようにする方法。
- Chrome 拡張機能
一致パターン
Chrome 拡張機能の URL 一致パターンについて
- Chrome 拡張機能
マニフェスト ファイル形式
Chrome 拡張機能で使用できる manifest.json プロパティの概要です。
- Chrome 拡張機能
サンドボックス化された iframe で eval() を使用する
Chrome 拡張機能で eval() を使用する方法
- Chrome 拡張機能
アーキテクチャの概要
Chrome 拡張機能のソフトウェア アーキテクチャの概要。
- Chrome 拡張機能
クロスオリジンの XMLHttpRequest
Chrome 拡張機能にクロスオリジン XHR を実装する方法。
- Chrome 拡張機能
チュートリアル: Google アナリティクス
Google アナリティクスで拡張機能の使用状況をトラッキングする詳しい手順。
- Chrome 拡張機能
Chrome ページをオーバーライドする
Chrome 拡張機能の Chrome ブックマーク マネージャー、履歴、新しいタブのページをオーバーライドする方法について説明します。
- Chrome 拡張機能
ユーザーに選択肢を提供する
ユーザーが拡張機能をカスタマイズできるようにする方法。
- Chrome 拡張機能
ローカライズ メッセージの形式
Chrome 拡張機能の messages.json ファイルの形式に関するリファレンス ドキュメント。
- Chrome 拡張機能
拡張機能をデバッグする
Chrome 拡張機能のデバッグ手順。
- Chrome 拡張機能
Google アナリティクス 4 を使用
Google アナリティクス 4 で拡張機能の使用状況をトラッキングする詳しい手順。
- Chrome 拡張機能
ライブウェブ音声入力が有効
ライブウェブ音声入力が有効
- Chrome
一致パターン
ホスト権限とコンテンツ スクリプトのパターン マッチングの仕組みと例。
- Chrome 拡張機能
テーマとは
テーマの作成方法に関するガイドライン。
- Chrome 拡張機能
権限を宣言してユーザーに警告する
ユーザーと拡張機能を保護するための権限を実装する方法。
- Chrome 拡張機能
テーマとは
テーマの作成方法に関するガイドライン。
- Chrome 拡張機能
OAuth2: Google でユーザーを認証する
Google People API、Chrome Identity API、OAuth2 を介してユーザーの Google コンタクトにアクセスする拡張機能を作成する詳細な手順。
- Chrome 拡張機能
クロスオリジン ネットワーク リクエスト
Chrome 拡張機能でクロスオリジン ネットワーク リクエストを実装できます。
- Chrome 拡張機能
Chrome ページのオーバーライド
Chrome 拡張機能の Chrome ブックマーク マネージャー、履歴、新しいタブのページをオーバーライドする方法について説明します。
- Chrome 拡張機能
Chrome Web Store
Chrome ウェブストアで拡張機能をホストし、Chrome ウェブストアでホストされている拡張機能を更新する方法。
- Chrome 拡張機能
マニフェストのバージョン
manifest.json の manifest_version プロパティは、Chrome 拡張機能が対象とするマニフェスト仕様のバージョンを示します。
- Chrome 拡張機能
Chrome 拡張機能で eval を使用する
Chrome 拡張機能で eval() を使用する方法
- Chrome 拡張機能
OAuth 2.0: Google Cloud でユーザーを認証
Google People API、Chrome Identity API、OAuth2 を介してユーザーの Google コンタクトにアクセスする拡張機能を作成する詳細な手順。
- Chrome 拡張機能
マニフェスト ファイル形式
Chrome 拡張機能の manifest.json プロパティの概要。
- Chrome 拡張機能
拡張機能のデバッグ
Chrome 拡張機能をデバッグする詳しい手順。
- Chrome 拡張機能
メッセージ受け渡し
拡張機能とコンテンツ スクリプトの間でメッセージを渡す方法
- Chrome 拡張機能
メッセージ受け渡し
拡張機能とコンテンツ スクリプトの間でメッセージを渡す方法
- Chrome 拡張機能
webKit によるリッチ通知
Chrome 拡張機能で通知を実装する方法。
- Chrome 拡張機能
拡張機能の開発の概要
Chrome 拡張機能の機能とコンポーネントの概要。
- Chrome 拡張機能
マニフェストのバージョン
manifest.json の manifest_version プロパティのリファレンス ドキュメント。
Chrome アプリのライフサイクル
Chrome アプリのライフサイクルの概要。
オフライン最優先
オフラインで動作する Chrome アプリを作成する方法。
その他の拡張機能の配信方法
Chrome ウェブストア以外で Chrome 拡張機能を配布する方法
- Chrome 拡張機能
初めてのアプリを作成する
基本的な Chrome アプリの作成方法を説明するチュートリアル
ウェブ API
Chrome アプリでは、ウェブサイトで利用可能な API をすべて使用できます。
自動更新
Chrome アプリの自動更新を有効にする方法。
外部コンテンツ
Chrome アプリで外部コンテンツを表示する方法。
ユーザー認証
Chrome アプリでユーザーを認証する方法。
コンテンツ スクリプト
コンテンツ スクリプトについての説明と、Chrome 拡張機能でそれらを使用する方法について説明します。
- Chrome 拡張機能
DevTools の拡張
Chrome DevTools に機能を追加する Chrome 拡張機能を作成する方法。
- Chrome 拡張機能
バックグラウンド スクリプトでイベントを管理する
Chrome 拡張機能のバックグラウンド スクリプトからブラウザのトリガー(イベント)に応答する方法。
- Chrome 拡張機能
MVC アーキテクチャ
モデルビュー コントローラのソフトウェア アーキテクチャ モデルの概要。
DevTools の拡張
Chrome DevTools に機能を追加する Chrome 拡張機能を作成する方法。
- Chrome 拡張機能
ユーザー補助(a11y)
Manifest V2 Chrome 拡張機能にアクセスできるようにする方法。
- Chrome 拡張機能
Chrome アプリのアーキテクチャ
Chrome アプリのソフトウェア アーキテクチャの概要。
コンテンツ セキュリティ ポリシー
Chrome アプリの CSP の概要と準拠方法。
別のインストール方法を使用する
環境設定 JSON または Windows レジストリを使用して Chrome 拡張機能をインストールする方法
- Chrome 拡張機能
コンテンツ スクリプト
コンテンツ スクリプトについての説明と、Chrome 拡張機能でそれらを使用する方法について説明します。
- Chrome 拡張機能
USB デバイス
Chrome アプリから USB デバイスと通信する方法。
ストレージ API
Chrome アプリでストレージを管理する方法
ネットワーク通信
Chrome アプリで TCP と UDP を使用する方法
ユーザー補助をサポートする
Chrome 拡張機能にアクセスできるようにする方法
- Chrome 拡張機能
position:fixed 要素のスタック変更
position:fixed 要素へのスタック変更
- Chrome
頑張って! ポジション - WebKit で固定的ポジション
頑張って! ポジション - WebKit で固定的ポジション
- Chrome
input[type=file] と Filesystem API の統合
input[type=file] と Filesystem API の統合
- Chrome
ミリ秒単位では不十分な場合 - performance.now
ミリ秒単位では不十分な場合 - performance.now
- Chrome
範囲/色入力のデータリストには、いくつかのデフォルトの選択肢があります。
範囲/色入力のデータリストには、いくつかのデフォルトの選択肢があります。
- Chrome
Google Chrome での input[type=date] に関するよくある質問
Google Chrome での input[type=date] に関するよくある質問
- Chrome
ブラウザのグラフィック パフォーマンスを測定する方法
ブラウザのグラフィック パフォーマンスを測定する方法
- Chrome
Chrome にフォルダをドラッグ&ドロップできるようになりました
Chrome にフォルダをドラッグ&ドロップできるようになりました
- Chrome
到着しました!xhr.send(ArrayBufferViews)
到着しました!xhr.send(ArrayBufferViews)
- Chrome
2D キャンバスで GPU アクセラレーションを利用する
2D キャンバスで GPU アクセラレーションを利用する
- Chrome
CSS Regions と 3D 変換を使用してフリップ可能な書籍を作成する
CSS Regions と 3D 変換を使用してフリップ可能な書籍を作成する
- Chrome
コンテンツ セキュリティ ポリシー
コンテンツ セキュリティ ポリシーによって、最新のブラウザでのクロスサイト スクリプティング攻撃のリスクと影響を大幅に低減できます。
ArrayBuffer と String の間で変換する方法
ArrayBuffer と String の間で変換する方法
- Chrome
blob は構築せず、構築する
File API に関する最近の仕様変更には Blob 用の新しいコンストラクタが含まれており、本質的に BlobBuilder は無関係です。
- Chrome
Chrome DevTools での WebSocket Frame Inspection の提供
WebSocket でデータを送受信するデータに検査機能を追加
- Chrome
Chrome Canary 版データリストの提供
「datalist」を使用すると、ユーザーが選択する必要がある検索結果候補のリストをアプリで定義できます。リストからオプションを選択するか、自由形式のテキストを入力します。
- Chrome
WebRTC プロトソン
3 月 24 日、Google は世界初の WebRTC デベロッパー イベントである WebRTC Protothon を開催しました。
- Chrome
PHP での XHR2 ファイルのアップロードを処理する
ファイルのアップロードを処理する方法を示すサーバーコードの例
- Chrome
requestAnimationFrame API - ミリ秒未満の精度を実現
equestAnimationFrame API の一部に変更を加えようとしています
- Chrome
DOM パフォーマンスが大幅に向上 - WebKit の innerHTML は 240% 高速になりました
Chrome エンジニアの原健太氏は、WebKit 内で 7 つのコードを最適化し、Safari(JavaScriptCore)と Chrome(V8)のパフォーマンスを向上させました。
- Chrome
ウェブブラウザの内部リソースの概要
ウェブブラウザの仕組みについて説明しているリソースのほとんどは、
- Chrome
HTML5 FileSystem API を使用してページ全体をオフラインにする
FileSystem API を使用すると、プログラムによってローカル(サンドボックス化された)ファイル システムにファイルとフォルダ階層を保存し、必要に応じて個々のリソースを追加、更新、削除できます
- Chrome
JavaScript ソースマップの概要
クライアント側のコードを結合して圧縮した後も、パフォーマンスに影響を与えることなく、読みやすく、さらにはデバッグ可能な状態にしておきたいと思ったことはありませんか? ソースマップ を使えば、その問題を解決できます。 ソースマップは、結合または圧縮されたファイルをビルド前状態にマッピングする方法です。本番環境用にビルドするときに、複数の JavaScript ファイルを最小化して組み合わせると同時に、元のファイルの情報を保持するソースマップを生成します。生成された JavaScript
- Chrome
JavaScript の最適化
JavaScript は比較的高速ですが、いつでも速く行えます。JavaScript を最適化してパフォーマンスを高める方法の詳細
- Chrome
新しい試験運用版機能 - スコープ設定されたスタイルシート
Chromium に最近、HTML5 の新機能「スコープ スタイルシート(別名: スコープ スタイルシート)」が実装されました。
- Chrome
WebGL と Web Audio API のデモのまとめ
ここでは、ここ数週間で目にした WebGL と Web Audio API の優れたデモをご覧ください。
- Chrome
SwiftShader が Chrome にソフトウェア 3D レンダリングを導入
SwiftShader は、Chrome 18 で使用されるソフトウェア 3D レンダラです。これにより、拒否リストに入っている GPU でも CSS 3D と WebGL を使用できます。
- Chrome
ミューテーション オブザーバーを使用して DOM の変更を検出する
Mutation Observer の概要。
- Chrome
Gmail ですべての mailto を処理する - registerProtocolHandler を使用するリンク
navigator.registerProtocolHandler() を使用すると、すべての mailto リンクに対して Gmail をデフォルトのメール クライアントとして設定できます。
- Chrome
Chrome for Android - モバイルウェブの高速化
Chrome for Android(ベータ版)は、Chromium オープンソース プロジェクトのベースであり、Chrome デベロッパーが慣れ親しんでいる最新の HTML5 機能の多くが組み込まれています。
- Chrome
Pointer Lock API によりブラウザで FPS ゲームが可能に
Pointer Lock API を使用すると、ウェブ用の適切なファーストパーソン シューティング ゲームを記述できます。
- Chrome
HTML5 オーディオと Web Audio API は BFF
createMediaElementSource() を使用すると、HTML5 と Web Audio API の可視化、フィルタ、処理能力を組み合わせることができます。
- Chrome
同期 XHR の廃止
ご案内: XMLHttpRequest2 の仕様は最近、XMLHttpRequest.responseType が設定されているときに同期リクエストの送信を禁止するように変更されました。
- Chrome
ウェブ オーディオに関するよくある質問
このクイック アップデートは、Web Audio API をより快適にご利用いただくために、いくつかのよくある質問にお答えすることを目的としています。
- Chrome
動画プレーヤーのサンプルのご紹介
Video Player Sample は、60 Minutes アプリや RedBull.tv アプリと同じアーキテクチャを使用して構築されたオープンソースの動画プレーヤー ウェブアプリです。
- Chrome
WebKit への CSS フィルタ エフェクトの適用
Adobe は、この素晴らしいテクノロジーを CSS にもたらすべく懸命に取り組んできました。具体的には、WebKit が実装を開始した CSS Filter Effects 1.0 です。
- Chrome
転送可能なオブジェクト - 超高速
転送可能なオブジェクトを使用すると、データはあるコンテキストから別のコンテキストに転送されます。ゼロコピーであるため、Worker にデータを送信するパフォーマンスが大幅に向上します。
- Chrome
可能であれば、WebGL で中程度の精度を使用する
実際の OpenGL ES 2.0 ハードウェアで WebGL をテストしている Opera の同僚によるお知らせです。
- Chrome
スピードアップのための Chrome デベロッパー ツール
Chrome でデベロッパー ツールを使用してアプリの速度を向上させる
- Chrome
MediaSource API を使用して動画をストリーミングする
MediaSource API は `HTMLMediaElement` を拡張し、JavaScript が再生用のメディア ストリームを生成できるようにします。
- Chrome
WebGL デモのまとめ
ここでは、ウェブから公開されている新しい WebGL デモを使って、ブラウザで実際に何ができるかを紹介します。
- Chrome
アプリ キャッシュ ツールと自動生成ツール
アプリケーション キャッシュを使用すると、ウェブアプリをオフラインで実行できるため、起動時間が大幅に短縮され、帯域幅の使用量が削減されます。
- Chrome
IndexedDB トランザクションのスコープの定義
IndexedDB は、ブラウザに大量の構造化データを保存するための、進化を続けるウェブ標準です。
- Chrome
コンテンツでの説明 - Fullscreen API
Fullscreen API を使用すると、ウェブアプリはページ上のコンテンツを JavaScript からプログラマティックに指示し、ブラウザの全画面表示モードに移行させることができます。
- Chrome
Chrome Canary で WebSocket が最新バージョンに更新された
Chrome Canary で WebSocket API が最新バージョン(13)に改訂されました
- Chrome
HTML5 とブラウザ サポートの最新情報
こうした機能を使いこなすのは大変なことですが、どこを見ればいいかわかりません。
- Chrome
Three.js の使用
すでに OpenGL のエキスパートであれ、新規の冒険者であれ、新しい 3D デモを作成する開発者は増え続けています。
- Chrome
HTML5 ゲーム デベロッパー向け New Game Conference のクーポン
New Game で HTML5 と WebGL のゲームの書き方を学んで、TPS レポートの完成を控えてほしい。
- Chrome
7 分間の動画 - JavaScript コンソールのヒントと新しい DOM API
Chrome DevTools で JavaScript コンソールをレベルアップします。
- Chrome
ワーカー ❤ ArrayBuffer
Chrome 13 と FF5 では、Web Worker との間の「ArrayBuffer」(または型付き配列)の送信がサポートされています。
- Chrome
新しい WebSocket プロトコルの相違点
WebSocket プロトコルの仕様は、以前のセキュリティ上の懸念を解決するために最近更新され、おおむね安定しています。
- Chrome
insertAdjacentHTML をすべての場所に
HTML ドキュメントにコンテンツを挿入する
- Chrome
Filesystem API のデバッグ
HTML5 ファイル システムは強力な API です。パワーアップには複雑さがつきものです。複雑さが増すと、デバッグの煩わしさが増します。
- Chrome
File System API でローカル ファイルをシークする
File オブジェクトがある場合は、ファイル全体をメモリに読み込まなくても、そのオブジェクト内をシークしてチャンクを読み取ることができます。
- Chrome
HTML5 ライブラリ/ポリフィル - 7 月中旬
あちこちに素晴らしい図書館が次々と登場
- Chrome
HTML5 ゲーム デベロッパー向けカンファレンス、New Game のお知らせ
2011 年 11 月 1 日~ 2 日にカリフォルニア州サンフランシスコで開催される New Game へのご参加をお待ちしております。
- Chrome
フレームを見逃さない - Page Visibility API と HTML5 動画を使用
Page Visibility API を使用すると、現在のタブが表示されているかどうかを確認できます。
- Chrome
WebGL でのクロスドメイン画像の使用
WebGL の仕様により、クロスドメインでの画像のリクエスト方法に関する重要な更新が行われます。
- Chrome
HTML5 ライブラリ - 6 月下旬
最近、面白いライブラリがいくつか切り替わりました。
- Chrome
Page Visibility API - ご確認いただけましたでしょうか?
幸い、新しい Page Visibility API を使用すると、アプリが公開されているかどうかを判断できます。
- Chrome
HTML5 + Web Audio API での反対
GWT、HTML5、Web Audio API の力のおかげで、誰もがお気に入りのチートコードの先駆者である Contra を構築できました。
- Chrome
Chrome Dev チャンネルの navigator.onLine
HTML5 のオフライン API を使えば、完璧なオフライン体験をユーザーに提供できなくてはなりません。
- Chrome
updates.html5rocks.com へようこそ
デベロッパーの皆様に情報を速やかにお届けするため、この「HTML5 更新ストリーム」は、共有する価値のある魅力的なコンテンツを紹介することを目的としています。
- Chrome
ウェブアプリの速度を監査する
高速なウェブアプリは成功するウェブアプリです。デベロッパーとしての作業は、アプリの実際のパフォーマンスとユーザーが感じるパフォーマンスの両方を最適化するまで完了しません。これは、ユーザーに優れたエクスペリエンスを提供するために必要なことであるだけでなく、最適化には実用的で重要なビジネス上の理由もあります。Amazon では、サイトのレイテンシが 100 ミリ秒長くなるごとに売り上げが 1% 減少し、Google では 0.5 秒の遅延ごとにトラフィックが 20% 減少することが測定されています(
- Chrome DevTools
- Chrome
Chrome デベロッパー ツールの概要(パート 1)
Google Chrome は機能豊富でパワフルなウェブブラウザであり、ウェブ上のアプリケーションでできることの可能性を開拓しています。Google は、非常に高速で安定した、豊富な機能を備えたブラウジング エクスペリエンスをエンドユーザーに提供できるよう尽力してきました。また Google は、デベロッパーの皆様が Chrome を快適にご利用いただけるようにしています。デベロッパー ツールは Chrome と Safari にバンドルされており、ウェブ
- Chrome
Use the Chrome Web Store Publish API
How to programmatically create, update, and publish items in the Chrome Web Store.
- Workbox
- Chrome 拡張機能
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
- Workbox
- Chrome 拡張機能
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
- Workbox
- Chrome 拡張機能
Policies
Extension policies
- Workbox
- Chrome 拡張機能
How Google Search uses speculation rules
Learn about how Google Search used the Speculation Rules API to anonymously prefetch search results to improve user experience
- Chrome
Feedback and support
Receive support for the Chrome User Experience Report (CrUX).
- Chrome UX レポート
- Workbox
LCP image subparts and RTT now available in CrUX
Learn about the change to the Chrome User Experience Report (CrUX changes) in the February 2025 release including LCP image subparts, LCP resource types, and RTT.
- Chrome
Dimensions
Technical documentation on CrUX dimensions.
- Workbox
- Chrome UX レポート
Capabilities
Find out how to use Chrome's capabilities to build rich and engaging web experiences.
- Workbox
What is ChromeDriver?
ChromeDriver is a standalone server that implements the W3C WebDriver standard.
- Workbox
Design Docs and discussions
WebDriver BiDi Backend Design [Microsoft] Async Command Processing for WebDriver in Chromium Browser Tools- and Testing WG, Day 2, TPAC 2019, Fukuoka Browser Tools- and Testing WG, Day 1, TPAC 2019, Fukuoka
- Workbox
Chrome Web Store
Chrome Web Store An online marketplace where users can browse for extensions and themes. Publish your extension there and make it accessible to the world. dashboard Developer Dashboard Publish your extension and manage your store items. local_mall
- Chrome 拡張機能
- Workbox
Accessibility
Digital accessibility, commonly abbreviated a11y, is about designing and building websites and web apps that disabled people can interact with in a meaningful and equivalent way. This course is created for beginner and advanced web developers. You
Chrome's 2024 recap for devs: Re-imagining the web with AI in DevTools, built-in Gemini, and new UI capabilities
Check out Chrome for Developers' 2024 year-end roundup of the latest web features, capabilities, and tools.
- Chrome
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
- Workbox
- Chrome 拡張機能
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 拡張機能
- Workbox
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 拡張機能
- Workbox
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 拡張機能
- Workbox
chrome.input.ime
Use the chrome.input.ime API to implement a custom IME for Chrome OS. This allows your extension to handle keystrokes, set the composition, and manage the candidate window. You must declare the "input" permission in the extension manifest to use the
- Chrome 拡張機能
- Workbox
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
- Chrome 拡張機能
- Workbox
Sign up for the Language Detection API origin trial
The Language Detection API is now available in a Chrome origin trial.
- Workbox
Chrome 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
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
- Chrome 拡張機能
- Workbox
What's missing from HTML and CSS?
Do you agree with the CSS Day attendees about what should be added to the web?
- Chrome
More efficient IndexedDB storage in Chrome
A new optimization in Chrome improves how IndexedDB data is stored on disk. This document summarizes the key points of this update.
- Chromium
- Workbox
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
- Chrome 拡張機能
- Workbox
Creating a great listing page
Best practices on how to make a high-quality, engaging listing page for your item in the Chrome Web Store.
- Workbox
- Chrome 拡張機能
Help with ChromeDriver
If you have a general question or need help using ChromeDriver, you can email the chromedriver-users group. Before filing a bug, look at the existing issues for the same topic. ChromeDriver is an open source project, worked on by various
- Workbox
Clicking issues
ChromeDriver clicking works by simulating a mouse click in the middle of the element's first client rect (or bounding client rect if it doesn't have a first client rect). The easiest way to find out where ChromeDriver is attempting to click is to
- Workbox
Contribute to ChromeDriver
ChromeDriver is a Chromium project and the code lives in the Chromium repository. Chromium is the open source project on which Google Chrome is based. Follow the instructions to check out the entire Chromium source tree. After you have your source
- Workbox
Deceptive Installation Tactics FAQ
Frequently asked questions about Chrome Web Store's policies on deceptive installation tactics.
- Workbox
- Chrome 拡張機能
Listing Requirements
If your product has a blank description field or is missing an icon or screenshots, it will be rejected. Ensure your product's listing information is up to date, accurate, and comprehensive. We don't allow extensions with misleading, inaccurate,
- Chrome 拡張機能
- Workbox
Deceptive Installation Tactics
Extensions must be marketed responsibly. The set of functionalities promised by the extension must be stated clearly and in a transparent manner. The outcome of any user interaction should match the reasonable expectations that were set with the
- Workbox
- Chrome 拡張機能
Best Practices and Guidelines
Research and understand the Chrome Web Store policies. Before developing a Chrome extension, it is important to review the Chrome Web Store Developer Program Policies and ensure your extension complies with all guidelines and requirements. Extensions
- Workbox
- Chrome 拡張機能
Extensions quality guidelines FAQ
Frequently asked questions about the single purpose policy.
- Workbox
- Chrome 拡張機能
Quality guidelines
An extension must have a single purpose that is narrow and easy to understand. Don't create an extension that requires users to accept bundles of unrelated functionality. If two pieces of functionality are clearly separate, they should be put into
- Chrome 拡張機能
- Workbox
Aurora
A collaboration between Chrome and open-source web frameworks to improve user experience on the web.
- Workbox
CrUX methodology
Technical documentation on CrUX eligibility, metrics, dimensions and accessing the data.
- Chrome UX レポート
- Workbox
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
- Workbox
- Chrome 拡張機能
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 拡張機能
- Workbox
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
- Workbox
- Chrome 拡張機能
Chrome release notes and updates
Chrome's latest releases
- Workbox
Workbox
Build progressive web apps (PWAs) with Workbox - the Service Worker library from the Chrome team
- Workbox
Extensions / Develop
Learn how to develop extensions
- Chrome 拡張機能
- Workbox
Content filtering
An explanation of content filtering and how to approach it in your Chrome Extension.
- Chrome 拡張機能
- Workbox
Reference
Reference for APIs available to Chrome Apps
- Workbox
chrome.tabCapture
Use the chrome.tabCapture API to interact with tab media streams. The chrome.tabCapture API lets you access a MediaStream containing video and audio of the current tab. It can only be called after the user invokes an extension, such as by clicking
- Workbox
- Chrome 拡張機能
chrome.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 拡張機能
- Workbox
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 拡張機能
- Workbox
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
- Workbox
- Chrome 拡張機能
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
- Workbox
- Chrome 拡張機能
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
- Workbox
- Chrome 拡張機能
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",
- Workbox
- Chrome 拡張機能
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 拡張機能
- Workbox
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 拡張機能
- Workbox
chrome.accessibilityFeatures
Use the chrome.accessibilityFeatures API to manage Chrome's accessibility features. This API relies on the ChromeSetting prototype of the type API for getting and setting individual accessibility features. In order to get feature states the extension
- Chrome 拡張機能
- Workbox
chrome.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.
- Workbox
- Chrome 拡張機能
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 拡張機能
- Workbox
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.
- Workbox
- Chrome 拡張機能
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 拡張機能
- Workbox
chrome.tabGroups
Use the chrome.tabGroups API to interact with the browser's tab grouping system. You can use this API to modify and rearrange tab groups in the browser. To group and ungroup tabs, or to query what tabs are in groups, use the chrome.tabs API. The
- Chrome 拡張機能
- Workbox
chrome.sessions
Use the chrome.sessions API to query and restore tabs and windows from a browsing session. string The name of the foreign device. Session [] A list of open window sessions for the foreign device, sorted from most recently to least recently modified
- Chrome 拡張機能
- Workbox
chrome.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 拡張機能
- Workbox
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
- Workbox
- Chrome 拡張機能
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 拡張機能
- Workbox
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
- Workbox
- Chrome 拡張機能
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 拡張機能
- Workbox
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 拡張機能
- Workbox
chrome.accessibilityFeatures
Use the chrome.accessibilityFeatures API to manage Chrome's accessibility features. This API relies on the ChromeSetting prototype of the type API for getting and setting individual accessibility features. In order to get feature states the extension
- Chrome 拡張機能
- Workbox
chrome.extensionTypes
The chrome.extensionTypes API contains type declarations for Chrome extensions. The origin of injected CSS. "author" "user" Details of the CSS to remove. Either the code or the file property must be set, but both may not be set at the same time.
- Chrome 拡張機能
- Workbox
chrome.extensionTypes
The chrome.extensionTypes API contains type declarations for Chrome extensions. The origin of injected CSS. "author" "user" Details of the CSS to remove. Either the code or the file property must be set, but both may not be set at the same time.
- Workbox
- Chrome 拡張機能
Skip review for eligible changes
An overview of expedited review for Declarative Net Request changes.
- Workbox
- Chrome 拡張機能
Version selection
Version selection is the process of matching a Chrome binary of a given version to a compatible ChromeDriver binary. Starting with M115 the ChromeDriver release process is integrated with that of Chrome. The latest Chrome + ChromeDriver releases per
- Workbox
Rollback a published Chrome Web Store item
How to rollback an extension that you previously published on the
- Chrome 拡張機能
- Workbox
Additional Requirements for Manifest V3
Extensions using Manifest V3 must meet additional requirements related to the extension's code. Specifically, the full functionality of an extension must be easily discernible from its submitted code, unless otherwise exempt as noted in Section 2.
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"
- Chrome 拡張機能
- Workbox
Extensions / How to
Solve common development tasks around Chrome extensions
- Chrome 拡張機能
- Workbox
Changes to BFCache behavior with extension message ports
We are making changes to Chrome BFCache which potentially impact extensions using message ports.
- Chrome
Mature & Sexually Explicit Material
We don't allow content that contains nudity, graphic sex acts, sexually explicit material, or content that drives traffic to commercial pornography sites. We also don't allow content that promotes incest, bestiality, necrophilia, or non-consensual
- Chrome 拡張機能
- Workbox
Announcing Chrome for Developers in China
We are publishing our sites on a .cn domain to make them easier to access in China.
- Chrome
chrome.location
The chrome.location API is no longer supported. We recommend using open web alternatives such as the Geolocation API instead.
- Chrome 拡張機能
- Workbox
Register your developer account
How to register as a Chrome Web Store developer.
- Workbox
- Chrome 拡張機能
Create a side panel
TBD
- Workbox
- Chrome 拡張機能
Trader/Non-Trader developer identification and verification
Developer's requirement to disclose and verify their trader/non-trader status.
- Chrome 拡張機能
- Workbox
Extensions / Samples
Samples Explore samples from the Chrome Extension samples repository. Use these to learn how extensions work or as starting points for building your own extensions. action.disable action.enable action.getBadgeBackgroundColor action.getBadgeText
- Workbox
- Chrome 拡張機能
Overview of CrUX
Introduction to the CrUX dataset.
- Workbox
- Chrome UX レポート
Permissions
A list of permissions and user warnings available on the extensions platform.
- Chrome 拡張機能
- Workbox
Chromium Issue Tracker migration is complete
Chromium issue tracking is now migrated.
- Chrome
Chromium Issue Tracker migration beginning Feb 2, 2024 at 5pm PST
The Chromium Issue Tracker migration begins today.
- Chrome
Program Policies
The Web Store program policies.
- Chrome 拡張機能
- Workbox
Project Fugu API Showcase
Project Fugu API Showcase The Project Fugu API Showcase is a collection of apps that make use of APIs that were conceived in the context of Project Fugu. You can learn more about Project Fugu on the Capabilities landing page. Absolute Orientation
- Workbox
Join Privacy Sandbox Office Hours #12: Learn about Chrome-facilitated testing
Join the 12th edition of Privacy Sandbox office hours dedicated to Chrome-facilitated testing, where the Privacy Sandbox team will provide some Privacy Sandbox tester updates and answer your questions with product and technical leads.
- Chrome
Real-time Updates in Extensions
Managing real-time updates in Extensions
- Chrome 拡張機能
- Workbox
Distribute your extension
How to host your Chrome extension.
- Workbox
- Chrome 拡張機能
Extensions / Reference
Reference for the extensions manifest, related permissions and APIs
- Chrome 拡張機能
- Workbox
Chrome Archive
Chrome Archive Chrome Apps Chrome-specific APIs to create experiences with more access to the underlying operating system. These were deprecated in 2020, supported only for ChromeOS until Jan 2025. Native Client A sandbox to run compiled C and C++
- Workbox
Chromium Chronicle
Chromium Chronicle
- Chromium
- Workbox
Chromium
Find resources on the Chromium project.
- Chromium
- Workbox
Chrome 121 beta
CSS Scrollbars, the Storage Buckets API, the Speculation Rules API, and more.
- Chrome
Get Inspired
Read these case studies to find inspiration for your next project with Chrome.
- Chrome
Feeds
You can add the following RSS feeds to your feed reader to get automatic updates for areas of the site you are particularly interested in.
- Chrome
Extensions / Manifest V3
Manifest V3 Manifest V3 is the latest version of the extensions platform. We have made a number of changes to the available APIs and added a number of new features. Manifest V3 aims to be the first step in our platform vision to improve the privacy,
- Workbox
- Chrome 拡張機能
chrome.webstore
As of 06/12/2018, inline installation is deprecated. For more information, read our Chromium Blog post and Migration FAQ.
- Workbox
- Chrome 拡張機能
User interface components
A catalog of user interface elements available in extensions.
- Chrome 拡張機能
- Workbox
Modules
Dig deeper into specific Workbox modules.
- Workbox
Set up your developer account
How to set up your Chrome Web Store developer account.
- Chrome 拡張機能
- Workbox
Prepare your extension
Prepare your extension files.
- Workbox
- Chrome 拡張機能
Submit a feature request
Submit a request for a feature that you believe could improve the extension platform.
- Workbox
- Chrome 拡張機能
Support and feedback
Give us feedback to help us improve the platform and fix its bugs.
- Workbox
- Chrome 拡張機能
Storage and cookies
Overview of how web storage APIs and cookies work in extensions.
- Workbox
- Chrome 拡張機能
Chrome for Developers
User-agent: * Disallow: Sitemap: https://developer.chrome.com/sitemap.xml
Use your Google Analytics account with the Chrome Web Store
See analytics for your Chrome Web Store listing in addition to the metrics offered in the Developer Dashboard.
- Chrome 拡張機能
- Workbox
Better full screen mode with the Keyboard Lock API
Use the Keyboard Lock API to capture the Escape key in full screen mode. If you've ever played a full screen web game that popped up an in-game dialog that you instinctively canceled with the Escape key, you probably found yourself kicked out of full
- Chrome
Help test bounce tracking mitigations
We plan to launch mitigations to limit tracking from a particular technique called "bounce tracking" later this year. We would like to invite developers to test this new feature with feature flags and provide feedback.
- Chrome
Specify how multiple animation effects should composite with animation-composition
When multiple animations affect the same property simultaneously, should they replace each other, add, or accumulate?
- Workbox
Manifest V3 migration checklist
A quick reference for upgrading your extensions from Manifest V2 to Manifest V3.
- Workbox
- Chrome 拡張機能
More control over :nth-child() selections with the of S syntax
Pre-filter a set of child elements before applying An+B logic on it.
- Workbox
Test service worker termination with Puppeteer
A guide explaining how to test service worker termination using Puppeteer.
- Chrome 拡張機能
- Workbox
Affiliate Ads
Any affiliate program must be described prominently in the product's Chrome Web Store page, user interface, and before installation. Related user action is required before the inclusion of each affiliate code, link, or cookie. Some example violations
- Chrome 拡張機能
- Workbox
Affiliate Ads FAQ
Frequently asked questions about Chrome Web Store's policies on affiliate ads.
- Chrome 拡張機能
- Workbox
Minimum Functionality
Do not post an extension with a single purpose of installing or launching another app, theme, webpage, or extension. Extensions with broken functionality—such as dead sites or non-functioning features—are not allowed. Extensions must provide a basic
- Workbox
- Chrome 拡張機能
Use of Permissions
Request access to the narrowest permissions necessary to implement your Product's features or services. If more than one permission could be used to implement a feature, you must request those with the least access to data or functionality. Don't
- Chrome 拡張機能
- Workbox
Chrome Apps
To ensure a great user experience, Chrome Apps distributed through the Chrome Web Store must follow the additional quality guidelines listed below. The guidelines in this section apply only to Chrome Apps. Packaged apps should: Take advantage of the
- Workbox
- Chrome 拡張機能
Disclosure Requirements
You must be transparent in how you handle user data (e.g., information provided by a user or collected about a user or a user's use of the Product or Chrome Browser), including by disclosing the collection, use, and sharing of the data. If your
- Workbox
- Chrome 拡張機能
Featured Products
The Chrome Web Store features products that align with our standards, values, and that we believe will produce valuable user experiences. Certain products that don't meet these standards, but which do not explicitly violate Chrome Web Store
- Chrome 拡張機能
- Workbox
Spam and Abuse
We don't allow any developer, related developer accounts, or their affiliates to submit multiple extensions that provide duplicate experiences or functionality on the Chrome Web Store. Extensions should provide value to users through the creation of
- Chrome 拡張機能
- Workbox
Repeat Abuse
Serious or repeated violations of the Chrome Web Store Distribution Agreement or these Program Policies will result in the suspension of your developer account, and possibly related developer accounts. Additionally, you may be banned from using the
- Workbox
- Chrome 拡張機能
Code Readability Requirements
Developers must not obfuscate code or conceal functionality of their extension. This also applies to any external code or resource fetched by the extension package. Minification is allowed, including the following forms: Removal of whitespace,
- Workbox
- Chrome 拡張機能
Ads
Ads are considered part of your Product for purposes of content review and compliance with developer terms, and therefore must comply with the above content policies. Ads which are inconsistent with the content rating of your products or extension
- Workbox
- Chrome 拡張機能
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
- Workbox
- Chrome 拡張機能
Accepting Payment From Users
If you collect sensitive personal information through your Product for sales, you must follow these requirements: You must securely collect, store, and transmit all credit card and other sensitive personal information in accordance with privacy and
- Workbox
- Chrome 拡張機能
Limited Use
This policy establishes the Chrome Web Store's minimum user data privacy requirements; you or your Product must comply with applicable laws. You must limit your use of the data to the practices you disclosed. Collection and use of web browsing
- Chrome 拡張機能
- Workbox
Impersonation & Intellectual Property
Don't pretend to be someone else, and don't represent that your product is authorized by, endorsed by, or produced by another company or organization, if that is not the case. Your Product and its user experience also must not mimic functionality or
- Chrome 拡張機能
- Workbox
Notification and appeals
In the event that your Product is removed from the Chrome Web Store, you will receive an email notification to that effect, with further instructions if applicable. Verify that the associated publisher account with your Product can receive emails
- Workbox
- Chrome 拡張機能
Regulated goods and services
Don't engage in or promote unlawful activities in your product, such as rape, illegal sex work, or the sale of prescription drugs without a prescription. We will remove content which promotes, glorifies, or encourages dangerous or illegal activity
- Workbox
- Chrome 拡張機能
2-Step Verification
To ensure the security of Chrome Web Store accounts, 2-Step Verification is required for all developer accounts prior to publishing an extension or updating an existing extension. Developers can activate 2-Step Verification for their Google accounts
- Workbox
- Chrome 拡張機能
Enforcement Circumvention
Any attempt to circumvent intended limitations or enforcement actions will result in the immediate termination of your developer account, and possibly related developer accounts.
- Workbox
- Chrome 拡張機能
Handling Requirements
If your product is associated with a security vulnerability that could be exploited to compromise another application, service, browser, or system, we may remove your product from the Chrome Web Store and take other measures to protect users. In such
- Chrome 拡張機能
- Workbox
Privacy Policies
If your Product handles any user data, then you must post an accurate and up to date privacy policy. The privacy policy must, together with any in-Product disclosures, comprehensively disclose: How your Product collects, uses and shares user data All
- Workbox
- Chrome 拡張機能
Misleading or Unexpected Behavior
We do not allow products that deceive or mislead users, including in the content, title, description, or screenshots. If any of your product's content, title, icon, description, or screenshots contains false or misleading information, we may remove
- Chrome 拡張機能
- Workbox
Malicious and Prohibited Products
Don't transmit viruses, worms, defects, Trojan horses, malware, or any other products of a destructive nature. We don't allow content that harms or interferes with the operation of the networks, servers, or other infrastructure of Google or any
- Workbox
- Chrome 拡張機能
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
- Chrome 拡張機能
- Workbox
Meeting you where you are
Find out how you can meet the Chrome team.
- Chrome
Known issues when migrating to Manifest V3
Recently, we announced changes to the Manifest V2 deprecation timeline, and while we remain firmly committed to Manifest V3 we acknowledge there is more work to do on our part. We are committed to closing the following gaps before announcing a new
- Chrome 拡張機能
- Workbox
Discovery on the Chrome Web Store
An overview of how users find items on the Chrome Web Store, and how our editors select items to feature.
- Workbox
- Chrome 拡張機能
Chrome Web Store review process
An overview of the review process and how enforcement actions result from detected policy violations.
- Workbox
- Chrome 拡張機能
Manifest V2 support timeline
Details of the Manifest V2 phase-out and end of life.
- Workbox
- Chrome 拡張機能
Manage user feedback
Follow-up on reviews and provide user support in the Chrome Web Store.
- Chrome 拡張機能
- Workbox
Check on your review status
How to check the review status of your Chrome Web Store item.
- Chrome 拡張機能
- Workbox
Analyze your store listing metrics
Understanding metrics and performance of your Chrome Web Store store listing.
- Workbox
- Chrome 拡張機能
Cross-origin isolation
Overview of cross-origin isolation for extensions
- Workbox
- Chrome 拡張機能
Enterprise publishing options
How to distribute extensions to enterprise users
- Workbox
- Chrome 拡張機能
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.
- Chrome 拡張機能
- Workbox
Complete your listing information
How to add listing information for your Chrome Web Store item.
- Workbox
- Chrome 拡張機能
Update your Chrome Web Store item
How to update an extension or theme ("item") that you previously published on the Chrome Web Store.
- Chrome 拡張機能
- Workbox
Troubleshooting Chrome Web Store violations
Guidelines for understanding why an item was rejected or removed from the Chrome Web Store and how to fix the problem.
- Workbox
- Chrome 拡張機能
Chrome Web Store payments deprecation
Why the payments is deprecated, details about the deprecation timeline, and more.
- Chrome 拡張機能
- Workbox
Human interface devices on the web: a few quick examples
There is a long tale of human interface devices (HID) that are too new, too old, or too uncommon to be accessible by systems' device drivers. The WebHID API solves this by providing a way to implement device-specific logic in JavaScript.
- Workbox
Deleting Chrome Web Store developer accounts
How to delete a developer or group publisher account on the Chrome Web Store.
- Workbox
- Chrome 拡張機能
Set up a group publisher
How to share ownership of your Chrome Web Store items with other developers.
- Workbox
- Chrome 拡張機能
Fill out the privacy fields
Use the privacy practices tab to help the Chrome Web Store team review your extension as quickly as possible.
- Chrome 拡張機能
- Workbox
Spam policy FAQ
Frequently asked questions about Chrome Web Store's spam policy.
- Workbox
- Chrome 拡張機能
Navigate Chrome DevTools with assistive technology
A guide on navigating Chrome DevTools using assistive technology like screen readers.
- Workbox
- Chrome DevTools
Unlocking new capabilities for the web
Web apps should be able to do anything native apps can. Through Project Fugu, we want to make it possible to build and deliver any kind of app on the open web.
- Chrome
Supplying Images
Guidelines about the kinds of images you need to supply to the Chrome Web Store.
- Workbox
- Chrome 拡張機能
Branding Guidelines
Guidelines for use of Google trademarks.
Beyond SPAs - alternative architectures for your PWA
Building a Progressive Web App doesn't mean building a single page app! Read about alternative architectures for content-focused PWAs, to help you make the right decision for your use case.
- Chrome
Working with the new CSS Typed Object Model
CSS Typed Object Model (Typed OM) brings types, methods, and a flexible object model to working with CSS values. Shipped in Chrome 66.
- Workbox
Best Practices
How to create a high-quality extension and Chrome Web store listing.
- Workbox
- Chrome 拡張機能
API Deprecations and Removals in Chrome 54
An round up of the deprecations and removals in Chrome to help you plan.
- Chrome
Trader FAQ: Chrome Web Store
Frequently asked questions about Chrome Web Store's user data policy.
- Workbox
- Chrome 拡張機能
Updated Privacy Policy & Secure Handling Requirements
Frequently asked questions about Chrome Web Store's user data policy.
- Workbox
- Chrome 拡張機能
API Deprecations and Removals in Chrome 49
An round up of the deprecations and API removals in Chrome to help you plan.
- Chrome
Chrome 47 WebRTC: Media Recording, Secure Origins and Proxy Handling
Chrome 47 has several significant WebRTC enhancements and updates including audio and video recording, proxy handling and mandatory secure origins for getUserMedia().
- Chrome
Better incognito DevTools
Some appearance preferences are now persisted through to incognito windows.
- Chrome
Better incognito DevTools
Some appearance preferences are now persisted through to incognito windows.
- Chrome
Timeline event reference
The timeline events mode displays all events triggered while making a recording. Use the timeline event reference to learn more about each timeline event type.
- Workbox
- Chrome DevTools
What is the Chrome Web Store?
An explanation of the Chrome Web Store and why you might want to use it.
- Workbox
- Chrome 拡張機能
Chrome Dev Summit 2014 - The applied science of runtime performance
The story of building the Chrome Dev Summit site.
- Chrome
Publish in the Chrome Web Store
How to publish a new extension or theme to the Chrome Web Store.
- Chrome 拡張機能
- Workbox
Google Chrome Web Store Developer Agreement
The legal agreement governing the relationship between Chrome Web Store developers and the Chrome Web Store.
- Chrome 拡張機能
- Workbox
Content Ratings Guidelines
Guidelines about how the Chrome Web Store rates the maturity of content.
- Workbox
- Chrome 拡張機能
The "activeTab" permission
How to use the activeTab permission in your Chrome Extension.
- Workbox
- Chrome 拡張機能
Localization message formats
Reference documentation about the format of the messages.json file for Chrome Extensions.
- Chrome 拡張機能
- Workbox
Publish Your App
How to publish your Chrome App.
- Workbox
What Are Chrome Apps?
An overview of Chrome Apps and why you might want to build them.
- Workbox
CSS layout gets smarter with calc()
You can use calc() anywhere a length or number is used, so you can use it for positioning things, or in rgb() color values as well, so it has lots of great uses in a style sheet.
- Workbox
Summarizer
Get a short summary of every webpage.
Chrome Built-in AI Demo
Try the built-in AI preview in Chrome.
Google Gemini Demo
Try the Gemini Models.
Open extension API reference
Custom Cursor Extension
Adds a custom cursor on developer.chrome.com.
Simple Theme
Multiple side panels
This recipe shows how to use sidePanel.getOptions() to retrieve the current side panel and switch between side panels.
Global side panel
Shows how to display the same side panel on every site using the Side Panel API.
Dictionary side panel
Provides definitions in the side panel.
Privacy API sample
Uses the chrome.privacy.services property to get and set privacy settings.
Hello World
Basic Hello World Extension
WebGPU Extension
Generate a red triangle with WebGPU in an extension service worker.
Keep Awake
Override system power-saving settings.
Conifer Music - Official app in the Microsoft Store
Conifer is FAST Conifer integrates perfectly with your PC Conifer offers beautiful music visualizations Conifer is completely cross-platform Conifer is a fast, cross-platform music player that lets your play all of YOUR music, you know, the music you actually own. Have some CDs? Rip them to your computer and add them to Conifer! Have some MP3s? Add them to Conifer!
Mammoth - Official app in the Microsoft Store
Discover a simpler way to socialize online with Mammoth, the Mastodon app that prioritizes ease-of-use and clean design. Experience the open-source, decentralized social network without the clutter. Join communities, share your thoughts, and connect with like-minded individuals all with just a few taps. Say goodbye to overwhelming feeds and complicated features, Mammoth simplifies the social media experience. AI Enhanced: - Struggling to find that perfect image to go along with your post? Have a funny idea for an image on a post? Generate it right in Mammoth with the magic of AI - Not understanding something in a post, or just want to learn more about a specific topic in a post? Click the search button on a post to have AI help you understand the post! - AI driven autocomplete and status generation: Have something to say but not sure how to say it best? Ask Mammoth to write it for you! Customizable: - Dark and light mode support - Theming User Friendly: - Cross Platform - Fast
Transitions DJ
Transitions DJ is a web-based, ad-free DJ mixing app. Mix music online from SoundCloud or your own music collection.
Project Fugu API Showcase
Stadia Bluetooth mode
Switch your Stadia Controller to Bluetooth mode to keep gaming wirelessly on your favorite devices and services after Stadia shuts down
Wavacity
Wavacity is a port of the Audacity audio editor to the web browser. Free and open-source. No install required.
Native Messaging Example
Send a message to a native application.
Reading List API Demo
Uses the chrome.readingList API to display, update and remove reading list entries.
User Scripts API Demo
Uses the chrome.userScripts API to inject JavaScript into web pages.
Winamp for Creators - Start your Creator's journey
Winamp for Creators puts the power back in your hands by giving you access to all the artist services you need to take control of your musical journey.
Get started
Explore the fundamentals of music via Ableton's interactive website. Experiment with beats, melody, harmony, basslines, and song structure in your web browser.
heritagein.info
Netflix Spain - Watch TV Shows Online, Watch Movies Online
Watch Netflix movies & TV shows online or stream right to your smart TV, game console, PC, Mac, mobile, tablet and more.
Farmbound - a diurnal game of farming
Active Recall
Home · Semaphore
An alternative web client for Mastodon, focused on speed and simplicity.
Spatial Fusion is Mixed Reality for the Web
A Mixed Reality WebXR technology showcase designed in collaboration between Meta, and PHORIA and LUSION.
S.E.P.I.A.
S.E.P.I.A. is an app and framework for your own server-based, extendable, private, intelligent assistant.
Terra - Notícias, esportes, coberturas ao vivo, diversão e estilo de vida
Veja no Terra as últimas notícias e as melhores coberturas ao vivo do Brasil e do Mundo, Esportes, Diversão, Vida e Estilo e assista os melhores vídeos no TerraTV.
Groceries
Tylify: Create seamless patterns in seconds
Web-based pattern-making application. All image formats supported (SVG, PNG, JPG, etc). Export seamless patterns as SVG or PNG.
The best free, adless Chess server
Free online chess server. Play chess in a clean interface. No registration, no ads, no plugin required. Play chess with the computer, friends or random opponents.
Sign in - Google Accounts
DEV Community
A constructive and inclusive social network for software developers. With you every step of your journey.
file-tree Web Component
A file tree web component giving access to a device's file system using the File System Access API
Download our software
Download Tidepool Uploader for Mac and Windows, and Tidepool Mobile on iOS and Android.
VSLite
TikTok - Make Your Day
TikTok - trends start here. On a device or on the web, viewers can watch and discover millions of personalized short videos. Download the app to get started.
Descript
Descript is an all-in-one audio/video editor and screen recorder that works like a doc.
The PWinter
The Playroom
Babylon.js Playroom - a demo of Babylon.js using the Havok physics engine for the web introduced in Babylon 6.0
Experience GeForce NOW Gaming Anywhere & Anytime
Instantly play the most demanding PC games and seamlessly play across your devices.
A privacy-first, open-source knowledge base
A privacy-first, open-source platform for knowledge management and collaboration.
WealthPosition: Personal Finance & Budgeting App
WealthPosition, the best personal finance app to budget and track your finances for financial independence
StackBlitz
Snae player
Lightweight on device music player right in your browser.
Snapdrop
Instantly share images, videos, PDFs, and links with people nearby. Peer2Peer and Open Source. No Setup, No Signup.
Xchart.com
Automatic anesthesia charting. Focus on your patient — not your paperwork.
ZQuest Classic
Play one of hundreds of quests in ZQuest Classic, or create your own! ZQuest Classic is a game engine where you can make your classic adventure game
PaintZ
MS Paint for Chromebooks. Create and edit drawings and other images. Simple, fast, works offline, touch- and mouse-friendly, and no plug-ins required!
LiveHeats
Helping organisers run sophisticated competitions with minimal effort. All-in-one platform for live scoring, heat draws, scheduling, rankings and registration.
Pointland
Web Metaverse with Point Cloud
app.ampedstudio.com
Ok! So...
The drawing app to express, grasp, and organize your thoughts and ideas
Elk
A nimble Mastodon web client
ESC Configurator - for Bluejay, BLHeli_S and AM32
Flash and manage your ESCs online without needing to download anything. Supports BLHeli_S, Bluejay and AM32 firmware.
Intervalometer
CodeSpace - Firia Labs
Application to help utilities management.
Budgeting app
Diffr
Sqlime - Online SQLite playground
Sqlime is an online SQLite playground for debugging and sharing SQL snippets.
Flipper Lab
Web platform for your Flipper
Discover the best Creators in the Fanzone
Embrace your inner fan, subscribe to your favorite creators to get Winamp-exclusive content.
bundlejs
Visit bundlejs.com - bundlejs is a quick and easy way to bundle, minify, and compress your ts, js, and npm packages all online.
Ensō
Writing is Thinking
Home Planner - Target
Plan your home, room by room. Design & style it virtually—then shop, share or save for later.
drum utility - teenage engineering
a utility for creating sample packs for the OP-1 field, OP-1, and OP-Z
NFC Tools Online
Online tools to read and write the data on your NFC tags.
[md.edit]
A markdown editor web app based on the File System Access API
Memos AI
Memos AI allows you to record notes with ACCURATE transcriptions, powered by AI, on any device. Need to record a lecture to help with notes? Memos AI can do that AND give you an accurate transcript of what was said.
Hindi Bollywood » Live Online Fm Radio From India Stations
Click here Download Apk
Figma: The Collaborative Interface Design Tool
Figma is the leading collaborative design tool for building meaningful products. Seamlessly design, prototype, develop, and collect feedback in a single platform.
Beautiful Free Images & Pictures
Beautiful, free images and photos that you can download and use for any project. Better than any royalty free or stock photos.
AirConsole - Multiplayer games for friends
AirConsole is an online video game console. Play over 190 multiplayer games. Your smartphones are the controllers.
Web Serial Controller
Connect to any USB or Bluetooth Serial Device from your browser using the Web Serial API Controller
docs.qq.com
Descript
There are simple podcast & video editors and there are powerful ones. Only Descript is both & it features magical AI, so you can skip the hard part of editing. Get started for free.
Globs Designer
Design with globs, a stretchy new design primitive. Tired of the pen tool? Need smarter curves? Want to design from code? Get started with globs.
Edit Photo
No ads, no popups, no cookies, no account. The fastest way to edit photos online
Last Finger Standing
Need to pick someone to go first? To pay the bill? To buy milk? Just have everyone put a finger on the screen and wait. Last Finger Standing will make your choice automatically! A quick and easy app to randomly select someone from a group of people.
The Session
An online community dedicated to traditional Irish music.
Readonly
Readonly links, for your read only.
Graphtoy
Graphing functions easily on the web
Blockbench
Barcode/QR code Scanner
A Progressive Web Application (PWA) that scans barcodes of various formats, using the Barcode Detection API.
Raverie Engine
readyplayer.me
Scrapbook PWA
GIFWorks
GIFWorks makes movies from shared screens and webcams. Once recorded, videos can be optimized and saved as GIF or downloaded as WebM.
Kiwix JS PWA
Offline Wikipedia reader
Oxygen Saturation Monitor
Monitor your oxygen saturation and heart rate with a bluetooth pulse oximeter
Squoosh
Squoosh is the ultimate image optimizer that allows you to compress and compare images with different codecs in your browser.
Amazingly Simple Graphic Design Software – Canva
Amazingly Simple Graphic Design Software – Canva
Soundslice
Learn music better with our living sheet music.
GrapheneOS web installer
Web-based installer for GrapheneOS, a security and privacy focused mobile OS with Android app compatibility.
Leonidas Esteban, Google Developer Expert en Web Technologies
Te enseño el cómo y el porqué de cada línea de código, aprendamos a programar juntos.
pixiv Sketch - お絵かきコミュニケーションアプリ
日々のお絵かきを手軽に楽しめるお絵かきコミュニケーションアプリ。落書きや描きかけの絵も気軽にシェア、いつでもどこでもお絵かきを楽しめます。
Toot Café
A Mastodon instance mostly populated by folks interested in web design and development.
Telegram
Telegram is a cloud-based mobile and desktop messaging app with a focus on security and speed.
Trovo
Trovo is an interactive live streaming platform, you can check out the hottest games live, share your own gaming experiences, and join an amazing community created especially for gamers, creators and do-ers.
Mandadin 4
X. It’s what’s happening
From breaking news and entertainment to sports and politics, get the full story with all the live commentary.
Duino App
LittleBits Fuse
Play board games online from your browser
The world's #1 platform for playing board games online. Play hundreds of board games from your browser for free.
Amazon Luna – Amazon Cloud Gaming
Amazon Luna is a cloud gaming platform developed and operated by Amazon. Play great games on devices you already own.
Popular MIDIs — BitMidi
Listen to free MIDI songs, download the best MIDI files, and share the best MIDIs on the web.
Element
WebAssembly demo with File System Access
A demo showing WebAssembly + WASI apps running on the Web with access to a real filesystem.
Vectorpea
Vectorpea Online Vector Editor lets you edit vector graphics, AI, SVG and PDF files!
Web Xmodem
Learning Synths
Learn about synthesizers via Ableton’s interactive website. Play with a synth in your browser and learn to use the various parts of a synth to make your own sounds.
Getting Started
UsTaxes is an open source webapp for filing US federal income tax. All tax calculations are performed in the browser, so no personal information is stored on external servers!
Creating Kaleidoscopes from Photos with Online Tool
Discover the mesmerizing world of kaleidoscopes and unlock your artistic potential with our user-friendly online tool. Whether you're drawn to the symmetrical beauty of mandalas or nostalgic for the classic kaleidoscopes of your childhood, our tool offers endless possibilities
natto.dev - write JavaScript on a 2D canvas
studio.samlabs.com
codev5.vex.com
Vernier Graphical Analysis®
Pokémon of the Week
A game of collecting and collaborating
Excalidraw — Collaborative whiteboarding made easy
Excalidraw is a virtual collaborative whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them.
1tuner
Listen to radio, podcasts and create playlists.
Snapchat. Now on the web.
Try the new Snapchat for Web on your computer to chat, call friends, use Lenses, and more
VIA
Your keyboard's best friend
Free and open source 2D and 3D game engine
Use the Godot Engine editor directly in your web browser, without having to install anything.
Trimble Identity
LogIn
MConverter: Easy to Use Online File Converter
Convert securely video, audio, image, e-book, office & archive files. Bulk convert large files up to 2 GB. Free and easy to use converter.
Find all Unicode characters from Hieroglyphs to Dingbats – Codepoints
Codepoints is a site dedicated to Unicode and all things related to codepoints, characters, glyphs and internationalization.
Android Flash Tool
Look Scanned
Look Scanned is a pure frontend site that makes your PDFs look scanned! No need for printers and scanners anymore - everything you need to do is just a few clicks.
Microsoft MakeCode Computer Science Education
MakeCode brings computer science to life for all students with fun projects, immediate results, and both block and text editors for learners at different levels.
Expressive Animator
Construct 3 r368.2 ★★★★★
Launch Construct 3 r368.2. Make games with the world's easiest browser-based game creator. Try for free now and begin your game development journey.
Adobe Photoshop
Best-in-class editing and design tools to create, modify, refine, and remix images into content you'll love. Straight from your browser.
Perfetto UI
Floor796
Make music in an online DAW
Produce music online. Make beats, record audio, and collaborate.
Learn a language for free
Learn languages by playing a game. It's 100% free, fun, and scientifically proven to work.
Remap
Remap allows you to find, build, set up and customize your keyboard quickly and easily in Web Browser.
SVGcode
SVGcode is a Progressive Web App that lets you convert raster images like JPG, PNG, GIF, WebP, AVIF, etc. to vector graphics in SVG format.
Hostme
Hostme is everything you need to successfully run your restaurant business!
Runway
Everything you need to make anything you want.
Free Online Games on CrazyGames
Play free online games at CrazyGames, the best place to play high-quality browser games. We add new games every day. Have fun!
Linear – A better way to build products
Linear streamlines issues, sprints, and product roadmaps. It’s the new standard for modern software development.
Notepad - Offline capable
An offline capable notepad powered by ServiceWorker. It's quick, distraction-free, dark mode enabled, mobile compatible(Android, iOS) and minimalist in nature.
Voyager for Lemmy
Voyager is a beautiful mobile web client for Lemmy. Enjoy a seamless experience browsing the fediverse.
Craft — A fresh take on documents
Get started today, it's free.
IRCCloud
IRCCloud is a modern IRC client that keeps you connected, with none of the baggage. Stay synced and notified wherever you are with our web and mobile apps.
Install Tasmota
﹒ Blob City ﹒
Espruino Web IDE
Cue for Education
STORZ & BICKEL
STORZ & BICKEL Web App for Bluetooth Devices.
Cleanfeed
www.capcut.com
NiftyPass
Improv Wi-Fi: Open standard for setting up Wi-Fi via Bluetooth LE and Serial
Free and open standard with ready-made SDKs that offer a great user experience to configure Wi-Fi on devices.
USpeaking
Free Online AI Photo Editor, Image Generator & Design tool
Get creative with Pixlr’s online photo editing & design tools. Including AI image generator, batch editor, animation design, enhancer & more. Try now for FREE!
Wormhole - Simple, private file sharing
Wormhole lets you share files with end-to-end encryption and a link that automatically expires.
Vodon Player
Hoppscotch • Open source API development ecosystem
Helps you create requests faster, saving precious time on development.
Vysor
Chip Player JS
glTF Report
Viewer, analysis tool, script editor, and validator for 3D models in glTF 2.0 format.
bridge. v2
bridge. is a light-weight IDE for Minecraft Add-Ons
BandLab - Make Music Online
The cloud platform where musicians and fans create music, collaborate, and engage with each other across the globe
LEGO Education SPIKE
Visual Studio Code for the Web
Build with Visual Studio Code, anywhere, anytime, entirely in your browser.
TgStorage
Advanced Saved Messages of the Telegram. Organize your notes, links, checklists, photos and any documents in the free unlimited Telegram Cloud.
Adobe Podcast
Next generation audio from Adobe is here. Record, transcribe, edit, share. Crisp and clear, every time.
Logbook
regex101: build, test, and debug regex
Regular expression tester with syntax highlighting, explanation, cheat sheet for PHP/PCRE, Python, GO, JavaScript, Java, C#/.NET, Rust.
GoldWave Infinity Audio Editor
GoldWave Infinity audio editing, recording, conversion, and visual analysis app.
daedalOS
Desktop environment in the browser
Slack is your productivity platform
Slack is a new way to communicate with your team. It’s faster, better organized, and more secure than email.
Link Cleaner
Remove tracking code and other variables from web links with the press of a button!
github.dev
Real Time Lightning Map
See lightning strikes in real time across the planet. Free access to maps of former thunderstorms. By Blitzortung.org and contributors.
Wootility Web
Instantly edit your Wooting keyboard profiles and colors from the browser.
Codeit
Run projects, code your ideas, and share it all on Codeit.
STEM.TECH
Hear in a new way with STEM
Speakflow — Online Teleprompter - AI Powered
Speakflow is an online teleprompter! Write and save scripts; collaborate with your team; Includes voice-activated scrolling. Works on Windows, Mac, iOS, Android, and more!
NumWorks
tldraw
A free and instant collaborative diagramming tool.
PocketLab Notebook
Create your free account or sign in here.
Build expressive charts or dashboards with code
Turn your most complex data into actionable insights faster with Observable. The future of data visualization, dashboards, and data apps starts here.
YT Playlist Notifier
Get notified when YouTube playlists are updated.
www.contactsdirect.com
Create an account or log in to Instagram - A simple, fun & creative way to capture, edit & share photos, videos & messages with friends & family.
Shared Game Timer
A board game timer that synchronizes across multiple devices.
bluetooth.rocks
CrosKeys by CrosExperts
Unlock your Chromebook's potential with a powerful keyboard launcher!
ManifoldCAD
Fast, reliable, parametric solid modeling web app. Programmatic 3D design with JavaScript, inspired by and improving upon OpenSCAD & JSCAD. Demonstrates a new GPU-parallel, open-source geometry kernel: Manifold.
Typst: Compose papers faster
Focus on your text and let Typst take care of layout and formatting. Sign up now and speed up your writing process.
CityHop
Take leisurely walks and drives around the world while chilling to lofi music 🎶
BPM Techno - Free Online Real-Time BPM Counter for DJ
Produce some beats using any player, launchpad, keyboard, and mix them live with another track easily and precisely using this free online real-time BPM counter
Soundtrap - Make music online
Make music together online. Free instruments, loops, drum kits, and vocal tuner in one studio. Record, edit, mix, and master your audio, no downloads - sign up for free.
Install WLED
TopDecked Unified
The essential Magic App for brewers, collectors, traders, competitors, and fans.
Beatport DJ
Beatport DJ is the world's first web based DJ software built for music discovery and playlist management. Subscribe to Beatport Streaming and start mixing with millions of tracks.
Fotor - Free Online Photo Editing Tools
Upload image in Fotor online photo editor to crop image, add text to photo, enhance image, remove background, create graphics & more for free.
みんなのネバーランド - 約束のネバーランド公式コミュニティ -
みんネバは約束のネバーランド好きが集まる公式コミュニティです。考察やファンアート、約ネバの話題で盛り上がろう!
Color Picker - ThreeJS
A ThreeJS color picker
Boxy SVG
Create and edit Scalable Vector Graphics (SVG) files online
What PWA Can Do Today
A showcase of what is possible with Progressive Web Apps today.
Hypertext
HTML Document Editor
Create Amazing Mockups
Create Amazing Mockups
Vim Online Editor - Vim Editor In Browser
Maskable.app
Preview maskable icons in the browser!
Radio House
AudioMass
AudioMass is a free full-featured web-based audio & waveform editing tool
iRobot Coding
kota-yata editor
WYSIWYG Markdown editor with pdf viewer
Home · Pinafore
An alternative web client for Mastodon, focused on speed and simplicity.
Spotify - Web Player: Music for everyone
Spotify is a digital music service that gives you access to millions of songs.
noctura.tech
Graphite
Play Fortnite
Play Fortnite with Xbox Cloud Gaming (Beta). The future of Fortnite is here. Be the last player standing in Battle Royale and Zero Build, explore and survive in LEGO Fortnite, blast to the finish with Rocket Racing or headline a concert with Fortnite Festival. Play thousands of free creator made islands with friends including deathruns, tycoons, racing, zombie survival and more! Join the creator community and build your own island with Unreal Editor for Fortnite (UEFN) or Fortnite Creative tools. Each Fortnite island has an individual age rating so you can find the one that's right for you and your friends. Find it all in Fortnite!
PPG.report
Weather report tailored for paramotor pilots, worldwide. Combines winds aloft, nearby Terminal Aerodrome Forecasts, hourly forecasts, NWS active alerts and TFRs.
Logi Web Connect
Logi Web Connect gives you pairing flexibility to connect your Logi mice & keyboards through your Bolt Receiver. And is the perfect solution to pair your devices to computers without installing any software.
birdfood.gq
Tibbo Web Apps
Polypad – Virtual Manipulatives – Mathigon
Virtual manipulatives, dynamic geometry, graph plotting, data science and more: explore the ultimate mathematical playground!
D&D Tokenizer
Generate image tokens with fancy borders for D&D and other table games characters. Perfect for adding visuality to your gaming experience.
Average Colour
Average Colour is a tool to find the average colour in an image.
PWA Haven
Collection of small, fast, simple PWA's to replace native OS apps.
Oryx: The ZSA Keyboard Configurator
A powerful, visual tool to configure your keyboard. Based on the open-source QMK firmware.
Emberly - Your knowledge. Organized.
Emberly’s visual organization of bookmarks, notes, and files let you master information overload and learn better.
Mishipay
JSON utility tool
Web site created using create-react-app
OpenAI CLIP Image Search in JavaScript (Using ONNX Web Runtime)
wami
Ruby
Ruby (V3) is customizable, free, and fast.
Smart Text Editor
The text editor that requires only a browser and a keyboard!
StackEdit – In-browser Markdown editor
Full-featured, open-source Markdown editor based on PageDown, the Markdown library used by Stack Overflow and the other Stack Exchange sites.
Postr.me
Capture social network post to nice image and video
Your connected workspace for wiki, docs & projects
A new tool that blends your everyday work apps into one. It's the all-in-one workspace for you and your team.
Toaster
Toaster is a 3D editor that models in pure CSS + HTML. No WebGL, no canvas. Impractical? Yes. Useless? Also yes.
BrewFlasher Web Edition
WTFOS Configurator
Root and configure your DJI HD FPV goggles and air-units via web interface.
Lynx Toolbox
Lynx Toolbox is an online tool to help you manage your Lynx headset. You can use it to install apps, update your device, or perform various other actions.
Edit Photos and modify with Effects PhotoPWA.com
This online tool helps you easily cut and edit your photos. You can trim them just right, change the size, add cool filters, and make your images better with no hassle. The website as PWA is easy to use, so you can make your photos perfect and use fun filters.
Microsoft Loop - Think, plan and create together
ESP Web Tools
Easily allow users to flash new firmware for their ESP-devices on the web.
VRoid Hub
VRoid Hubは、3Dキャラクターのための投稿・共有プラットフォームです。モデルデータをアップロードするだけでキャラクターが活き活きとアニメーションするプロフィールページを作成でき、利用条件と共にモデルデータを配布することもできます。登録した3Dモデルは、VRoid Hubと連携した各種VR/ARプラットフォームや3Dコンテンツ上で利用可能です
GDevelop game making app
Build your own game super fast and without programming. Publish on mobile, desktop and on the web.
SpaceLancer
Online Virtual Piano Keyboard with MIDI Functionality
This virtual piano gives you a simple way to practice your piano/keyboard skills online. Just connect a MIDI controller and start playing right away.
Ilaria Food & Home – Ricette e stile di vita sostenibile
Ricette e stile di vita sostenibile
Open Video
Open local video files using the browser.
EdgeTX Buddy
Radio Garden
Explore live radio by rotating the globe.
Top War
In Top War, modern tanks are merged out of basic gunman, everything can be merged here.No more upgrade waiting times, merge two together and the upgrade will finish instantly.
Expressive Canvas
YouTube Audio Player
An awesome audio player for YouTube videos
Flowchart Maker & Online Diagram Software
JSMusicDB
Edit • Video
No ads, no popups, no cookies, no account. The fastest way to edit video online
Vimeo Interactive Video Experience Platform
Roland50.studio
Emulate the sound of Roland's most famous and influential musical instruments from Yuri Suzuki and Roland.
Markwhen
It's about time. Markwhen is a simple language for creating beautiful calendars, timelines, and more.
Narrow One
Capture the flag medieval style!
Capture QR Code
Instantly snap QR codes on mobile and desktop without installing an app.
web.autocad.com
Access AutoCAD® in the web browser on any computer. With the AutoCAD web app, you can edit, create, and view CAD drawings and DWG files anytime, anywhere.
Art Class
MOMO Pro
Impeccable timing and knowledge separate the stock trading elite. MOMO Stock Discovery App gives real-time stock market insight and alerts to time trades from desktop browser, iPhone, or Android.
velocity.radon.games
Music Instrument tuner app
Tune guiter, bass, ukulele. Also allows you to tune with chromatic tuner. This also has a useful metronome that you can use while you jam.
Ace Seventh Heaven
Visual Day scheduler.
Live Online Music Collaboration
Sessionwire Studio is a powerhouse creative communication suite for your production team featuring live video and studio quality HQ Audio.
WebGamer 🎮 Play Free Online Games
Play free online games instantly in your browser. WebGamer is a portal of next-gen web games you can play now without installing anything!
gphoto2 on the Web
Songwhip - Free music links to all platforms
In one click, Songwhip finds your music everywhere & makes a page you can share with everyone
Error
Daily Writing Builder
Photopea
Photopea Online Photo Editor lets you edit photos, apply effects, filters, add text, crop or resize pictures. Do Online Photo Editing in your browser for free!
SQLite Viewer Web App
A free online SQLite Explorer, inspired by DB Browser for SQLite and Airtable. Use this web-based SQLite Tool to quickly and easily inspect sqlite files on the web.
Senomix Timesheets - Sign-In
Senomix Time and Expense Tracking Software for Mac and Windows
Discover recipes, home ideas, style inspiration and other ideas to try.
WebScan
An experimental project to bring document/image scanning to the web (USB scanners).
Tinder
With 55 billion matches to date, Tinder® is the world’s most popular dating app, making it the place to meet new people.
pwamp
Bangle.io
HexEd.it - Browser-based Online and Offline Hex Editing
HexEd.it is a free hex editor for Windows, MacOS, Linux and all other modern operating systems, which uses HTML5 and JavaScript (JS) technology to enable hexediting online, directly in your browser.
Bluesky Social
See what's next.
SnapperGPS - Home
Home page of SnapperGPS - A small, low-cost, low-power wildlife tracking system.
mgerhardy.github.io
GoodNotes
GoodNotes app
dot big bang
dot big bang is a way to create and share games with your friends. Create on your own or with your friends, share with anyone by just sending a link!
PhotoStack
PhotoStack has moved to https://photostack.app
Journalistic
A micro journaling app with minimalistic design, pristine writing experience, and powerful insights.
Accessible UK Train Timetables
A blazingly small and fast UK train times journey planner and live departure boards, with bookmarkable URLs as a web app, and offline saving of viewed journeys.
Pixel-Art Editor & NFTs Laboratory
Make pixel art from real life images and draw on the image you can edit for free, filters, layers, library, are within the editor.
Pokedex.org
A mini-encyclopedia of Pokémon species, types, evolutions, and moves.
Service worker with push notification
il8n API Example
Demonstrates the chrome.i18n API by localizing text in the extension popup.
Test Screenshot Extension
Uses the chrome.tabs API to take a screenshot of the active tab.
Bookmark Viewer
Uses the chrome.bookmarks API to search through, add, and delete bookmarks from the user's bookmark tree.
Keyboard Pin
Uses the chrome.tabs API to toggle the pinned state of the current tab.
topSites API sample
Uses the chrome.topSites API to suggest which sites a user should visit.
Catifier
Replace every image by a cat's image in a website you visit
Omnibox Simple Example
Demonstrates the "omnibox" manifest key and most members of the omnibox API.
Cookie Clearer
Uses the chrome.cookies API by letting a user delete their cookies via a popup.
Geolocation - popup
Shows how to get geolocation access within a popup.
Devtools - Chrome Query
Uses the devtools API to add a sidebar that displays the jQuery data associated with the selected DOM element.
Typed URL History
Uses the chrome.history API to display in a popup the user's most visited pages.
MV3 Migration - content script example
Google Analytics Demo
How to use Google Analytics 4 in your extension.
Chromium Milestones
Shows the Chromium release milestone a given code review was merged into.
Stylizr
Demonstrates how to use the chrome.storage API.
Optional Permissions New Tab
Demonstrates optional permissions in extensions
Quick API Reference
Quick API can speed up the building of Chrome extensions.
No Cookies
Uses the chrome.declarativeNetRequest API to remove the "Cookie" header from requests.
Tab Inspector
Demonstrates the chrome.tabs API and the chrome.windows API by providing a user interface to manage tabs and windows.
Alarms API Demo
Uses the chrome.alarms API to allow the user to set alarms using an extension page.
BrowsingData API: Basics
Uses the chrome.browsingData API to clear the user's history without requiring the user to visit the history page.
My Bookmarks
A browser action with a popup dump of all bookmarks, including search, add, edit and delete.
chrome.commands
Uses the chrome.commands API by creating a new keyboard macro for switching tabs in the browser window.
Open side panel
Shows how to call sidePanel.open() to open a global side panel.
History Override
Demonstrates how to override the default history page.
Sandboxed Frame Sample
Demonstrates creation of a tab with a sandboxed iframe to which the main page passes a counter variable.
Action API Demo
Uses the Action API to change the badge text, icon, hover text, or popup page.
Hello Extensions
Base Level Extension
Web Accessible Resources Demo
Uses the web_accessible_resources key in the manifest.json file to control access to assets within an extension.
URL Blocker
Uses the chrome.declarativeNetRequest API to block requests.
Sandboxed Content Sample
Demonstrates creating a tab for a sandboxed iframe. The sandbox calls eval() to write HTML to its own document.
Top Sites
Uses the chrome.topSites API to get the user's most visited sites.
Notifications API sample
Demonstrates the creation of, and interaction with, each of the notification template types.
Geolocation - offscreen
Shows how to get geolocation access within a service worker.
CO2 meter extension
Demonstrates using WebHID to connect to a CO2 meter.
Font Settings API Sample
Demonstrates the chrome.fontSettings API by allowing users to modify the size of fonts on webpages.
URL Redirect
Uses the chrome.declarativeNetRequest API to redirect requests.
Scripting API Demo
Uses the chrome.scripting API to inject JavaScript into web pages.
Global Google Search
Uses the context menu to search a different country's Google
Tab Capture Example
Demonstrates how to use the chrome.tabCapture API.
Oliver Focus Mode
Example extension from DevTools Tips video.
Site-specific side panel
Shows how to display the side panel only on google.com using the Side Panel API.
Devtools - inspectedWindow API sample
Uses devtools.inspectedWindow to collect and use data on the resouces used in a web page.
Print Extension
Demonstrates all four methods of the chrome.printing namespace.
Favicon API in a popup
Demonstrates the favicon manifest permission by displaying the favicon of a url in the extension popup.
Debugger Extension
Uses the chrome.debugger API to capture network events on web pages.
Content settings
Uses chrome.contentSettings to display the settings of a given page in the extension's popup.
Tabs zoom API Demo
Uses the tabs.zoom API to manipulate the zoom level of the current tab.
webNavigation API Sample
Uses the webNavigation API to send notifications.
WebSocket Demo
How to use WebSockets in your Chrome Extension.
Offscreen API - Clipboard
Shows how to write a string to the system clipboard using the offscreen document.
WASM Load Example - Helloworld (no-modules)
Shows how to use WebAssembly (WASM) in Manifest V3.
Blank new tab page
Uses the "chrome_url_overrides" manifest key by replacing the user's default new tab page with a new html file.
Tab Capture - Recorder
Records the current tab in an offscreen document.
Context Menus Sample
Uses the chrome.contextMenus API to customize the context menu.
Merge Windows
Uses the chrome.windows and chrome.tabs APIs to manage tabs across different windows.
Idle - Simple Example
Demonstrates the Idle API
Tab Manager for Chrome Dev Docs
Geolocation - content script
Shows how to get geolocation access within a content script.
Focus Mode
Enable focus mode on Chrome's official Extensions and Chrome Web Store documentation.
Offscreen API - DOM Parsing
Shows how to use DOMParser in an extension service worker using the offscreen document.
Omnibox - New Tab Search
Demonstrates the "omnibox" manifest key and API by creating a keyword that opens a browser search in a new tab.
no-cookies Rule Manager
Demonstrates the chrome.declarativeNetRequest API by providing a UI to manipulate declarativeNetRequest rules dynamically.
Favicon API in content scripts
Demonstrates fetching the favicon from www.google.com and inserting it at the top left of every page.
File Handling Demo
Shows how to use the file_handlers manifest key with the web platform's Launch Handler API.
Advanced Font Settings
Demonstrates the chrome.fontSettings API by allowing users to modify the style of displayed fonts on web pages.
Broken Background Color
Fix an Extension!
Getting Started Example
Build an Extension!
WASM Load Example - Helloworld
Shows how to use WebAssembly (WASM) as a module in Manifest V3.
webRequest.onAuthRequired Demo
Demonstrates the webRequest.onAuthRequired listener to detect an authentication request and log the user into the designated site.
Page Redder
Turns the page red when you click the icon
Drink Water Event Popup
Demonstrates usage and features of the event page by reminding user to drink water
Reading time
Add the reading time to Chrome Extension documentation articles