chrome.storageでchrome extension用のデータを保存・取得
chrome.storage の API を使う localStorage を使うとこれはこれで動くのですが、もう少し扱いやすい方法がないか調べたところ、chrome.storage という localStorage に似た方法を見つけました。 chrome.storage – Google Chrome localStorage の場合、background.js を通して Message Passing でデータのやり取りを行う必要がある。 これに対し chrome.storage では background.js なしで、ダイレクトに content_scripts 等から chrome.storage のデータにアクセスできます。また、chrome.storage.onChanged.addListener の API で、データ変更に対するコールバックを簡単に登録できて便利。 以
ReactでChrome Extensionを開発するために必要なwebpackのビルド設定 - hiro08gh
こんにちはhiro08です。お仕事でReact を使ってChrome Extensionを開発する機会がありました。初めはcreate-react-appをベースにしたプロジェクト構成で開発してましたが、Content ScriptsやBackground Scriptsを追加する時にwebpackのエントリーポイントを増やす必要がありました。 create-react-appでエントリーポイントを増やすにはeject(create-react-appの裏側で走っているwebpackなどを展開するコマンド)を実行する必要があります。しかしこれは構成が複雑化して、今後メンテナンスするときの負債になりそうでした。なので、一からwebpackのビルド設定して、要件によって柔軟に対応できるようにしました。この記事はその時の知見です。 テンプレートはGitHub上に置いてあります。 github.c
最新のユーザーエージェント対応はどうするべきか？ - ICS MEDIA
ユーザーエージェント文字列は、ユーザー分析やデバイス・ブラウザーで処理を分けたい時に広く用いられています。取得方法は昔からあまり変わっておらず、ウェブブラウザーの種類・バージョン・プラットフォームごとに固有の文字列を取得しています。 実は、この文字列が近い将来固定化され、正常に情報を取得できなくなってしまうことをご存知でしょうか？ 今回はユーザーエージェント文字列の変遷を追いながら、現在策定されている新しいユーザーエージェント仕様である「User-Agent Client Hints」の概要を紹介します。 User-Agent Client Hintsの使い方、ユーザーエージェント文字列が固定化された時の対応についてもまとめています。 旧来のユーザーエージェント判別方法 従来のユーザーエージェント文字列取得は、navigatorオブジェクトのuserAgentプロパティを参照する方法です。
Hands-on with Portals: seamless navigation on the web | Articles | web.dev
Hands-on with Portals: seamless navigation on the web Stay organized with collections Save and categorize content based on your preferences. Making sure your pages load fast is key to delivering a good user experience. But one area we often overlook is page transitions—what our users see when they move between pages. A new web platform API proposal called Portals aims to help with this by streamli
Chromium版EdgeのCanary版と開発者版リリース
米Microsoftは4月8日（現地時間）、12月に発表したChromium版EdgeのCanary Channel（プレ開発者版）とDev Channel（開発者版）をリリースしたと発表した。 正式版はWindows 7、Windows 8.1、macOSにも対応する予定だが、今回リリースされたバージョンはWindows 10のみで動く。Microsoft Edge Insiderサイトからダウンロードできる。 米GoogleのChromeやMozillaのFirefox同様に、開発はCanary、Dev、Betaの3つのチャネルで進行する。Canaryチャンネルはほぼ毎日アップデートされ、Devチャンネルは1週間単位でのアップデート。“間もなく”リリースのBetaチャンネルは6週間ごとのアップデートになる見込みだ。各チャンネルは並行してインストール可能だ。 Windows担当副社長のジ
[フロントエンド] AndroidのChromeをPCからデバッグする - YoheiM .NET
こんにちは、@yoheiMuneです。 スマホ向けWebサービスを開発していたら、Android端末での表示確認やデバッグが大変だった経験が誰しもあるのではないでしょうか？今日はAndroid ChromeをPCからデバッグする方法をブログに書きたいと思います。 目次 やりたいこと 開発したアプリケーションをAndroidのChromeブラウザで表示した場合に、CSSの確認や、ログの確認や、JSの実行などのデバッグ作業を高速に行いたい、というのが今回の目的です。 以降のステップを行うと、PCのChromeと同じようにディベロッパーツールからデバッグを行うことができます。 手順1：Android端末の開発者モードを有効化する AndroidとPCをUSBで接続してデバッグを行います。そのためAndroidの「開発者向けオプション」をONにする必要があります。基本的には設定アプリ内のビルド番号
![[フロントエンド] AndroidのChromeをPCからデバッグする - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/494570a4eff1377d03e0bb019ee0cd6b80fbc399/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F548.png)
ウェブサイトに適用する游ゴシックフォントを見直しまくった最終解 - Corredor
拙作のノーマライズ CSS ライブラリ、「Neo's Normalize」を見直していたところ、Windows の Chrome ブラウザで適用されている游ゴシックフォントがかすれていた。 「あれ？@font-face で游ゴシック Medium を指定してるのにな？」と思い、設定を見直したところ、コレが効かなくなっていた。 当時 Neo's Normalize を作る際、それなりに調査しまくった結果だったのだが、どうも仕様が変わっていたようなので、OS・ブラウザごとに挙動を見直すことにした。今回はその研究結果をまとめる。 游ゴシックフォントに関する基礎知識のおさらい Chrome で効かなくなっていた @font-face font-weight: 500 は効いたが、副作用が避けられない Chrome で游ゴシック Medium を使うのは諦める 別解 : 潔く Regular フォン
Highlights from Chrome Dev Summit 2016 | bitsofcode
A couple of weeks ago I was lucky enough to be able to attend the Chrome Dev Summit in San Francisco. It was a really great experience to be able to see, in person, a lot of the people working on the APIs I use everyday, as well as to see how other developers are creating complex modern web applications. I would urge you to watch all the videos yourself (Chrome Dev Summit 2016 Playlist), but here
Chrome Dev Summit 2018が開催！Web制作者がチェックしておきたい、CSSとJavaScriptの最新情報 | コリス
先週、サンフランシスコで開催された「Chrome Dev Summit 2018」から、Web制作者が特に注目しておきたいハイライトを紹介します。 ナビゲーションの新しい遷移方法、Squooshの開発秘話、新しいPageSpeed API、ChromeでもLazyloadをサポートなど、これからの制作に役立つものばかりです。 Highlights from Chrome Dev Summit 2018 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ナビゲーション遷移（Navigation transitions） Squoosh -15kbのJavaScriptアプリ PageSpeedとLighthouse APIによる統一されたパフォーマンス分析 ChromeでもLazyloadをネイティブにサポート ナビゲーション遷移（
What's New In DevTools (Chrome 65) | Blog | Chrome for Developers
New features coming to DevTools in Chrome 65 include: Local Overrides New accessibility tools The Changes tab New SEO and performance audits Multiple recordings in the Performance panel Reliable code stepping with workers and asynchronous code Read on, or watch the video version of these release notes, below. Local Overrides Local Overrides let you make changes in DevTools, and keep those changes
Web アクセシビリティ向け Node.js 製の自動チェックツールや DevTools 用の拡張機能など
アクセシビリティを担保するプロセス作り この記事は Web Accessibility Advent Calendar 2016 - Adventar の 12 日目の記事です。 UI 実装の再考と a11y - Frontrend Vol.8 LT でも述べましたが、Accessibility is a Process, Not a Project ということでアクセシビリティ対応するプロジェクトではなく、アクセシビリティを担保するプロセスを作りましょうということで、チェックツールをいくつか並べて俯瞰してみます。対象読者は自分と同じようなクライアントサイドの Web アプリケーション屋さんということにしておきます。 ちなみにアクセシビリティ評価ツールについては 3 日目のアクセシビリティ方針、報告書、試験支援ツールa11ycのご紹介 (Web Accessibility Advent C
DevToolsでz-index一覧できるやつ作ったよ。 | Ginpen.com
Chrome用とFirefox用です。 GitHubでソースコード公開してます。 ginpei/devtools-z-index 見た目 Chrome版。 Firefox版はサブペインじゃなくてパネルとして追加するのでちょっとアレです。仕方なかった。 はじまり コードスニペット版。これはこれで手軽でよろしいね。 ページ中の要素を `z-index` の数字が大きい順に一覧表示するやつです。https://t.co/gNGkdP03ta pic.twitter.com/v0VRNKCKel — 高梨ギンペイ (@ginpei_jp) June 11, 2018 Chrome版について https://chrome.google.com/webstore/detail/bcnpmhefiohkpmjacfoanhbjhikegmoe/ Elementsパネル内に “z-index” ペインを追
より重要になった、HTMLのアクセシビリティに関する問題を解決するChromeの拡張機能 -Alix
先週の記事「HTMLの潜在的な問題を見つける、少し高度なCSSのセレクタ」をブラウザで簡単に利用できるChromeの機能拡張を紹介します。 まだリリースされたばかりですが、早くも利用者が1,000人を超えようとしています。 Alix -GitHub Alix -Chrome ウェブストア Alixの特徴 Alixのインストールと使い方 Alixの特徴 Alixは少し高度なCSSセレクタを使用したスタイルシートを適用するだけで、HTMLのアクセシビリティに関する問題を解決できます。 実際にどんなセレクタを使用しているのかは、前回の記事を参考にしてください。 HTMLの潜在的な問題を見つける、少し高度なCSSのセレクタ スタイルシートを記述するのは時間がかかる、セレクタが難しい、という人でも大丈夫です。AlixはCSSでおこなうHTMLのLintツール「a11y.css」をブラウザから簡単に利
[CSS]これは便利！検証が面倒なフォールバックのスタイルを簡単に検証できるChrome, Firefoxの機能拡張
CSSでレイアウトをする際、最近の主流はFlexbox、そしてCSS Gridも増えてきました。 そんな中、サポートされていないブラウザ用に必要になるのがフォールバックです。 検証するのが面倒なフォールバックのスタイルを簡単に検証できるChrome, Firefox対応の機能拡張を紹介します。 Feature Queries Manager -GitHub Feature Queries Managerの機能 Feature Queries Managerのダウンロード Feature Queries Managerの使い方 Feature Queries Managerの機能 Feature Queries Managerはその名の通り、@supports機能クエリに記述されたCSSのスタイルを管理して、切り替えることができます。 例えば、レイアウトをFlexboxで実装する場合、Fle
![[CSS]これは便利！検証が面倒なフォールバックのスタイルを簡単に検証できるChrome, Firefoxの機能拡張](https://cdn-ak-scissors.b.st-hatena.com/image/square/971099afcdbec5ce4d85c8447e3cda9402d0849b/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201802%2F2018052507.png)
Increase your web development skills - 150 tips on Chrome DevTools - Umar Hansa
Increase your web development skills - 150 tips on Chrome DevTools I’ve published over 150 animated gifs which showcase how to use Chrome DevTools — as part of my Dev Tips newsletter. For most tips, you can fully grasp the feature in less than 30 seconds. I also provide a text based alternative if you want to read more about it. In this post, you can find some of the most popular tips which I’ve
知っておくとかなり便利！Chromeのデベロッパーツールであまり知られていない実用的な機能とテクニックのまとめ
Chromeのデベロッパーツールは、Web制作に欠かせないといっても過言ではありません。DOMインスペクター、スタイルパネル、JavaScriptコンソールなど基本的な機能だけでも便利ですが、さらに便利になる機能も数多くあります。 デベロッパーツールを使って、Webページやアプリの制作・デバッグのワークフローが大きく改善される実用的で便利な機能とテクニックを紹介します。 Mastering Chrome Developer Tools: Next Level Front-End Development Techniques 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 01. ダークテーマ 02. 要素をすばやく選択できる選択モード 03. グローバル変数として格納 04. アニメーション用のツール 05. 要素の疑似状態をシ
リンクもまるごとキャプチャしてSVGで出力するChromeスクリーンショット拡張をつくりました - #daiizメモ
閲覧しているウェブサイトの選択された範囲のスクリーンショットを撮ってSVG形式でダウンロードできるChrome拡張機能をつくりました．SVGで出力しているため，普通のPNGやJPGと比べると，以下のような少しだけ高度なことができます． スクリーンショットを撮ったページのURLを<svg>のdata属性として保持できる スクリーンショットの範囲内のリンクをそのまま残すことができる． ページ中の<a>の位置に，外部ページヘのリンクを持つ<rect>を挿入しています．クリックするとリンク先のページが開きます． ブラウザで通常リンクと同じように扱われるため，rectをホバーするとChromeの左下にジャンプしようとしているURLが表示されるので，移動先もしっかり確認できます． まだかなり荒いベータ版ですが，GitHubで公開しています．クローンして，そのままChromeの拡張機能管理ページから読み
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Chrome Platform Status
ChromeLens
Accessibility Developer Tools
