In December of last year, we paused the planned deprecation of Manifest V2 in order to address developer feedback and deliver better solutions to migration issues. As a result of this feedback, we’ve made a number of changes to Manifest V3 to close these gaps, including: Introducing Offscreen Documents, which provide DOM access for extensions to use in a variety of scenarios like audio playback Pr
Chrome 113 で、 DevTools の Network ペインで HTTP ヘッダを好きなように編集して、いろんな状態をお試しできるようになっている。 What's New in DevTools (Chrome 113) - Chrome Developers で紹介されている。 GitHub から example.com を fetch してみる GitHub の CSP ヘッダを上書き example.com の CORS のヘッダを上書き 途中で指定したフォルダの中身は何？ 上書きをやめるには？ 感想 GitHub から example.com を fetch してみる 試しに、 CSP で外部への通信がそれなりに制限されている GitHub から、 example.com への fetch を成功させてみる (外部サイトへの通信は、認証情報や秘密の情報の漏洩などに気をつ
Contents (Click to expand) ↕️ Design Mode Pretty Print Command Pallet and Super Search Snippets Live Expressions Tracking Changes Console Shorthand Find Unused Code Rendering Panel Network Paint Times Network Timings Inspect Network Requests Performance Identifying Memory Leaks Raw Memory Inspection Test bfcache Full Refresh Lighthouse Page Size Breakdown Record User Flows Advanced User Flow Opera
Chromeに実装された疑似クラス「:has()」がjQueryの「:has()」に悪影響、一定の条件下でWebサイトが壊れる可能性 最近リリースされたSafariとChromeで、CSSのSelectors Level 4（現時点でドラフト）仕様にある疑似クラス「:has()」が相次いで実装されました。 疑似クラス「:has()」は、カッコ内に要素を書くと、その要素を持つ親要素にのみ指定したスタイルを設定できる、という便利な機能を提供してくれます。 ところがこの「:has()」のChromeにおける実装は、jQueryで似たような機能（カッコ内の要素を持つ親要素を選択する）を提供する「:has()」に悪影響を及ぼし、このjQueryの「:has()」を使っているWebサイトでは、Chromeを利用した場合に一定の条件下でWebサイトが壊れるなどの問題を引き起こすことが分かりました（同じエ
Python × Seleniumで、ChromeDriverのバージョンを気にしたり、手動ダウンロードする手間をゼロにしましょう。 【Windows・Mac共通】 Seleniumバージョン4.6以上ならこれ↓だけでOK。 Pythonfrom selenium import webdriver driver = webdriver.Chrome()※ 4.6〜4.10だと動かず最新版へ更新必要な場合あり Selenium 4.5以下の場合、下記のどちらか Seleniumを最新版へ更新して上記記法に書き換え更新できないなら、"webdriver-manager"を使って書き換え Selenium 4.6から、Selenium自体にChromeDriver自動更新機能「Selenium Manager」が搭載されたことで、このシンプルな記述だけで済むようなりました。 ChromeDriv
長い間 Chrome の DevTools を使ってきて、便利だなと思った機能をまとめてみました。 様々な機能があり、これを覚えておくと開発時に役に立つかもしれないので、ぜひ使ってみてください。 この記事は Corome DevTools 公式 を参考にしています。 日本語化 英語が苦手な方は日本語化しましょう。 手順 DevTools を開いたら、歯車マークをクリック Language で日本語を選択 [Reload DevTools] をクリックして DevTools のリロードをする 要素の状態を強制 指定の要素を :hover や :focus などの状態に強制的にすることができます。 そうすることで指定状態時のスタイルを確認することができます。 手順 要素タブをクリックする 状態を変更したい要素を選択する 今回は Google の検索フォームを選択 [:hov] をクリックする
見ているサイト上に露出している機密情報(APIトークン、IPアドレスなど)を見つけるブラウザ拡張を作りました SecretlintというAPIトークンなどの機密情報がファイル内に含まれているかをチェックできるツールを書いています。 Secretlintはコマンドラインツールとして動くので、主にCIやGitのpre-commit hookを利用して、リポジトリに機密情報が入るのを防止できます。 SecretlintでAPIトークンや秘密鍵などのコミットを防止する | Web Scratch 一方で、実際のウェブサービスなどは機密情報がファイルにハードコードされているわけではなく(Secrelint自体がこういうハードコードを防ぐツールです)、環境変数やDatabaseに保存していると思います。 このような場合にも、コードのミスなどによって公開するべきではない情報(秘密鍵、APIトークン、Sl
先日YoutubeでフォローしているチャンネルでBF4のプレイ動画を60FPSで撮影してる方がいたので見てみようと思ったところ、再生してみるとゴムバンド現象に似たような再生異常がおき、何故かChrome自体までもが重くなる始末。拡張機能が何か悪さをしているのでは？とは思ったが十数個あるプラグインを一つ一つ動作を確認しながらオン・オフする作業はしたくないな･･･と思いほかの方法で解決を試みることに。まぁ、結果これで正解だったのですが。忘備録として記事にして残しておきます。 スポンサーリンク 結論から言うと、原因は『ハードウェアアクセラレーション』でした。こいつは何かと簡単に言うと、Chromeの使用上で画像や動画なんかを描画する時にGPU（グラボ）を使うという機能。CPUの負荷をGPUが肩代わりするというイメージですかね。最近だとスマホでもユーザー側で設定が選べたりしますね。 ただこいつ、未
Chromiumとは Chromiumは、Chromeとほぼほぼ同等なWebブラウザ（OSS）です。 ChromeとChromiumの違いについては、マイナビニュースにまとめられているので、 よければ見てみてください。 Chromeの古いバージョンは入手ができませんが、 Chromiumは古いバージョンが公開されているので、 Chromeの古いバージョンが必要な時はChromiumで該当バージョンを探すのが良いでしょう。 Chromiumの取得方法 少しやっかいかつ日本語訳がなかったので、ここにまとめます。 今回はバージョン62がほしい、という前提で話を進めます。 chromeのリリースサイトにアクセスする バージョン62の記載を見つけ、バージョンの詳細をメモる （今回なら、ピンク色部分の 62.0.3202.97 ) OmahaProxyで、先ほどメモったバージョンを入力して、Looku
会員登録フォームなどで、たまにクリップボードからのペースト（貼り付け）が禁止されているサイトがあります。 これは不便なので、強引にペーストしてしまおうという内容です。 注意点 本記事で紹介している手法は、開発者ツールやJavaScriptの実行を伴うものです。 一般論として、「開発者ツールでこう操作すると良いよ」「このJavaScriptを貼り付けると良いよ」という記事を理解せずに鵜呑みにすることは、高いセキュリティリスクを伴います。利用の判断は慎重にお願いします。 なぜ困るのか パスワードは通常パスワードマネージャや適当なジェネレータで生成すると思います。 英数記号を含む20文字以上の文字列を、1文字ずつ I と l と 1 を間違えないように気をつけながら心を込めて打ち込むのも趣がありますが、忙しいときにはそんなことはしたくありません。パスワードマネージャのauto type機能を使え
[レベル: 上級] HTTPS で配信するページでの混在するコンテンツを Google Chrome がデフォルトでブロックするようになります。 ブロックを解除するオプションがユーザーには提供されます。 仕様変更は段階をへて導入されます。 Google Security Blog がアナウンスしました。 現状は iframe と JavaScript のみ完全ブロック HTTPS で配信するページで、画像やスクリプトなどのサブリソースを HTTP で配信すると一般的なブラウザでは警告が出ます。 Chrome も例外ではありません。 いわゆる、「混在するコンテンツ (Mixed Content)」です。 Chrome の場合、現状では、次のサブリソースは HTTPS ページなのに http:// で配信されていても、警告は出ますが読み込まれます。 画像 オーディオ 動画 一方、次のサブリソー
Chrome DevToolsを使いこなそう！ Web開発に必須なブラウザ開発ツールによるデバッグの基本 開発者ツール（DevTools）とは、ブラウザに搭載されているデバッグツールです。多岐にわたる技術の集合体であるWebページやWebアプリケーション、いわゆるフロントエンドの開発において、なくてはならないツールです。 皆さん、どうもこんにちは。今回で3度目のエンジニアHubの登場となる大竹智也です。春の季節もそろそろ終わりを迎え、新生活を迎えた人たちも新たな環境に慣れてくる時期だと思いますが、元気にお過しでしょうか。 前回までエディタの話ばかりしてきましたが、今回はエディタから離れてWebブラウザ（以下、ブラウザ）の話をしたいと思います。ただ、ブラウザの話といっても、エンジニアHubは開発者向けの媒体なので、ブラウザに搭載されている開発者ツール（Developer Tools）のお話を
先日「Chrome デベロッパーツールの使い方」で華麗に使いこなすテクニックを紹介しましたが、それとは異なるデベロッパーツールの便利な使い方を紹介します。 Webサイトやアプリの制作時に、非常に役立つテクニックが満載です。 ※画像は元記事のものではなく、当方の環境のものを使用しています。 デベロッパーツールの便利な使い方 タブ「Elements」を選択 DOM要素を選択 右パネルのタブ「Computed」を選択 「Computed」には、選択したDOM要素に適用されている全てのスタイルが表示されます。そのプロパティの頭にある虫眼鏡アイコンをクリックすると、そのスタイルがあるCSSファイルとそのセレクタの指定を表示します。 これは大きなサイトを制作している時に、非常に有用です。
Chromeを使っていたら最小化のボタンの左隣にいきなり出現したこのボタン どうやらユーザー管理の新しいUIみたいなんですが、ユーザー名が表示されるので気になる、Chromeブラウザを最小化しようとおもって間違って押しちゃうなど、このボタン邪魔だよっていう声が多いみたいですね… バージョン44からは、この記事で紹介しているオプション（chrome://flags/）および起動オプション（–disable-new-avatar-menu）を使って非表示化する方法が使えなくなっています。。 それ以降のバージョンは完全非表示はできないようですが、一応パッと見で非表示にする小ワザは存在するので紹介します。 現行のChromeで非表示にしたい人は↓の記事のやり方でどうぞ。 関連記事：【最新版】Chromeの右上のユーザー名（ユーザーアイコン、切り替えボタン）を消す、非表示にする方法 以前までは無かっ
var XHR = new XMLHttpRequest(); query = "http://www.muratayusuke.com/"; XHR.open("GET",query,true); XHR.onreadystatechange = function(){ if (XHR.readyState == 4 && XHR.status == 200){ alert("hoge"); } }; XHR.send(null); 上記のコードなんかよく見るXMLHttpRequestのコードだと思いますが、最近のChromeでこいつがエラーを吐くようになりました。そう、 "XMLHttpRequest cannot load http://www.muratayusuke.com/. Origin http://muratest is not allowed by A
9月末ぐらいからChromeでGoogle検索利用してると「Googleインスタント検索はご利用いただけません」とやらた警告してきてて鬱陶しくイライラ……。 OFFにしてるんだから利用できないのは当たり前だろヴォケ！( ﾟдﾟ )ｸﾜｯ!! 2013年10月19日追記 Chromeの検索エンジンを再設定すると解消される〜と記事を書きましたが、気持ちよくインスタント検索をOFFれる方法がありましたので、記事を書き換えました。 chrome://settings/searchEngines を開いて、GoogleのURLを下記に書き換えてください。 {google:baseURL}search?q=%s&{google:RLZ}{google:originalQueryForSuggestion}{google:assistedQueryStats}{google:searchFieldtri
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く