Googleは、日本時間5月15日から開催中のイベント「Google I/O 2024」で、デスクトップ版のChromeが備える開発ツール「Chrome DevTools」に、同社の最新版の生成AIであるGeminiを組み込むと発表しました。 これによりDevToolsのコンソールで表示されるエラーメッセージなどをGeminiが解説し、エラーの解決などを支援してくれるようになります。 DevToolsのエラーをGeminiが解決 下記がGoogle I/Oのデベロッパー向け基……
Chromeで「Third-party cookie will be blocked」エラーが一部ユーザに表示される現象・原因について Chromeで「Third-party cookie will be blocked」エラーが一部ユーザに表示される現象発生中 2024年2月7日現在、Chromeを使用中に、「Third-party cookie will be blocked」というエラーが表示されるようになったという報告が一部ユーザからなされています。 エラーの内容は以下のとおりです。 Third-party cookie will be blocked. Learn more in the Issues tab. 引用元:Chromeのエラーメッセージ
Intro こういうタイトルを付けるのはあまり好きではないが、あえてこのようにした。 「ブラウザでキャッシュがヒットしない」 以下は、 Web における Caching の FAQ だ。 サーバで Cache-Control を付与したのにキャッシュがヒットしない サーバで ETag を付与したのに If-None-Match が送られない サーバで Last-Modified-Since を付与したのに If-Modified-Since が送られない 先日も、筆者が書いた MDN の Cache セクションで「記述が間違っているのでは?」と同様の質問を受けた。 Issue about the Age response header and the term "Reload" · Issue #29294 · mdn/content https://github.com/mdn/cont
セキュリティ研究者で、有名な拡張機能「AdBlock Plus」の元開発者でもあるウラジミール・パラント氏が、Chromeウェブストアにある多数の拡張機能に難読化された悪意あるコードが含まれていたことを発表したと報告しました。 More malicious extensions in Chrome Web Store | Almost Secure https://palant.info/2023/05/31/more-malicious-extensions-in-chrome-web-store/ パラント氏が最初にこの問題を発見したのは、PDFファイルの編集や結合などの機能を持つ「PDF Toolbox」という拡張機能です。200万人以上のユーザーと「4.2」の評価を得ていたこの拡張機能は、表面的には何の変哲もない拡張機能でしたが、アドウェアを配布している「serasearchtop
デベロッパーツールの地味だけど便利な新機能が実装されるので、紹介します。CSSの非アクティブなプロパティを表示し、それがなぜ機能しないのか、どう修正すればよいのか教えてくれる機能です。 たとえば、親がdisplay: flex;ではないのにFlexboxのプロパティを設定しまった場合は、下記のように表示されます。 CSSに携わる人なら、この機能をオンにしておいて損はないでしょう。 display: flex;ではないのにFlexboxのプロパティを設定 ほかにも、widthを設定したのに効かないときは、それインライン要素ですよ、と教えてくれます。 インライン要素にwidthを設定 デベロッパーツールのこの新機能は「Find inactive styles」と呼ばれるもので、要素に適用されている非アクティブなスタイルを見つけることができます。 Find inactive styles -Ca
Prepare for User-Agent Reduction changes in October Stay organized with collections Save and categorize content based on your preferences. What's happening with the User-Agent string, why Chrome is making this change, and what you can do to prepare. In October, Chrome will take the next step in reducing the information available in the browser's User-Agent (UA) string, to improve privacy for users
Chromeに実装された疑似クラス「:has()」がjQueryの「:has()」に悪影響、一定の条件下でWebサイトが壊れる可能性 最近リリースされたSafariとChromeで、CSSのSelectors Level 4(現時点でドラフト)仕様にある疑似クラス「:has()」が相次いで実装されました。 疑似クラス「:has()」は、カッコ内に要素を書くと、その要素を持つ親要素にのみ指定したスタイルを設定できる、という便利な機能を提供してくれます。 ところがこの「:has()」のChromeにおける実装は、jQueryで似たような機能(カッコ内の要素を持つ親要素を選択する)を提供する「:has()」に悪影響を及ぼし、このjQueryの「:has()」を使っているWebサイトでは、Chromeを利用した場合に一定の条件下でWebサイトが壊れるなどの問題を引き起こすことが分かりました(同じエ
ぶっちゃけ、ちゃんと動くWindows PCあるいはMacをお持ちであれば、あえてChromebookを選ぶ(あるいはChrome OS Flexをインストールする)理由はあまりないかもしれません。 でも、Chromebook、私は結構日常的に使っています。この連載「Googleさん」のため、というところもかなりありますが、普段からブラウザはChrome、スマートフォンはAndroid(Pixel 6 Pro)、Microsoft Officeを買わずに頑なにGoogle Docsだけで仕事もする、日本語変換は「Google 日本語変換」、なので、Windowsマシンとの併用ではありますが、十分使えています。 だって、軽い(ASUSのChrombook「Detachable CM3」は920グラム)。それに起動が速い。Androidスマートフォンとの連携もMicrosoftの「スマホ同期」
Yahoo!ニュースのとある記事のコメント欄を読んでいたところ、 「なんでこんなニュースばかり載せるんだ」「この話題もういい」「見たくないなら見なければいいんだけど、そもそも一覧に載せないでほしい」「加藤紗里というワードをブロックする機能が欲しい」 というコメントをみかけました。 なるほど、そんな機能ならもしかしたら割と簡単に作れるかもしれないと思い、 初めてChrome拡張機能を作ってみました。 拡張機能を作るにあたり、下記のサイトを参考にさせていただきました。 ありがとうございました。 Chromeブラウザの拡張機能を作ってみたい初心者向けに開発方法を紹介!【サンプルあり】Chrome拡張の作り方 (超概要)超最低限の Chrome エクステンションを開発しウェブストアで公開するまでの手順What are extensions? – Google Chrome(公式ドキュメント) さて
Chrome の 84 あたりから、クロスサイト クッキーが簡単には使えなくなりました。その為に、サイトの表示が変わることもありました。 それを、確認する為に、クロスサイト クッキーを受け付けていた Chrome 80 で確認する必要が出てきました。 次のサイトから、Chrome 80 をダウンロードします。 Google Chrome Older Versions Download (Windows, Linux & Mac) 64-bit deb for Ubuntu/Debian から、80.0.3987.149 を選びます。 ダウンロードすると、 google-chrome-stable_current_amd64.deb という名前になります。 そこで、 google-chrome-stable_80_amd64.deb にリネームします。 今使っている Chrome のアンイン
はじめに エクステンションの中には、ツールバーアイコンの右下に動的に数字を表示するものがあります。例えば、Google Mail Checkerはinboxの未読の件数を表示していますね。 今回はこのバッジ表示の仕方についてです。 やってみる やり方は簡単です。 chrome.browserAction.setBadgeText(object details); をコールするだけです。detailsは、 text:表示する数値の文字列(必須) tabId:特定のタブに限定する場合の当該タブのid(オプション) で構成されるオブジェクトです。 ひとまずエクステンションのロード時にバッジに"0"を表示させ、ツールバーアイコンを押したらカウントアップしていくようにしてみましょう。 manifest.jsonは次のようにしました。 { "name": "BadgeSample", "version
テストとかどうでも良いから自動操作がしたい! seleniumは本来phpUnitなどと組み合わせてテストを自動実行するために使われるのだが私はただブラウザの自動実行を体験したいだけ。 なので今回は『とりあえず自動操作を体感』したいという人に向けて発信する。 seleniumとは これをご覧になるのが一番。コマンドを叩くだけで勝手にブラウザが起動して入力・検索を行っている。本記事ではここまでを目指す。 環境構築 今回はPHPで自動操作のプログラムを書き、Chromeで自動操作を実行する。 公式ではphpでSeleniumを動かすドライバーがないため、Facebookの中の人が作ったSeleniumのPHP版、facebook-webdriverを使用する。(SNSのFacebookサービスとは無関係です) 作業ディレクトリの作成 とりあえず実行したいんじゃ、という方のためなので以後はこのフ
Chrome DevToolsにはさまざまな機能が搭載されています。そのうちの1つ「Rendering」には、ページのレンダリングパフォーマンスを視覚化する機能や、さまざまな見え方を疑似的に再現する機能が含まれています。 サイトのレンダリングパフォーマンス改善の取り組みに活用できる、こちらのRenderingタブ内の各機能についてご紹介します。 利用方法と各機能について Renderingタブはデフォルトだと非表示になっており、利用するにはまず次のいずれかの方法で表示する必要があります。 Chrome DevToolsを開いた状態でWindowsではCtrl+Shift+P、MacではCommand+Shift+Pを押して表示されるコマンドメニューに「Rendering」と入力し、「Show Rendering」を選択 Chrome DevTools内の三点ドットから「More tools
WebExtensions(ブラウザ拡張機能)では、 ツールバーのボタンを押したときにポップアップウィンドウを開くことができる。 ChromeとFirefoxの両方で使えるWebExtensionsを作ったとき、 Popupのサイズ周りでいくつかつまずいて、力づくで直した内容をメモしておく。 作った拡張機能の宣伝もあるよ! ※環境 Chrome: macOS 65.0.3325.162(64bit) Firefox: macOS 59.0.1(64bit) 1. Firefoxのスクロールバー幅問題 Popupするウィンドウのサイズは、PopupするHTMLのbodyタグのwidthやheightなどにcssで指定する。 この場合、ウィンドウ幅は400px固定で、高さはコンテンツの高さに合わせられるが、 最大値(600px)を超えているとスクロールバーが表示される。 ここで、スクロールバー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く