以下の公開計測会でやったものを個別に解説してみる。 細かいテクニックが多いのだが、それを可能な限りテキストとスクショで解説したい。使い方の解説が中心で、どういう意味があるかは解説しない。 Chrome131時点のスクリーンショットで、後で読む場合は頻繁にUIが変わっている点に注意。大事なのは意図。 宣伝: これを御社のサイトで解説する仕事をやっています。 デモのURL これに意味はなく、今日偶然見ていただけで意図はない。関係ないがエッジランナーズは最高のアニメ。 DevTools を開く F12 or 右クリックから「検証」 DevTools > Lighthouse この状態で計測 このとき、新しいプロファイルを作ったりして、可能な限り Chrome拡張が入ってない状態にすること。Chrome拡張による処理も計測に含まれてしまう。 Lighthouse レポートの読み方 点数部分にマウス
あらゆるサイトにダークテーマを。夜間や毎日のブラウジングにDark Readerで目を気遣います。 このアイ・ケアの拡張機能は、オンザフライでウェブサイトのためのダークテーマを作成し、ナイトモードを有効にします。 Dark Readerは鮮やかな色を反転させてコントラストを高め、夜間に読みやすくします。 明るさ、コントラスト、セピアフィルター、ダークモード、フォント設定、無視リストを調整することができます。 寄付でアプリの開発をサポートするようお願いする場合があります。設定ポップアップにDarkReaderに関するニュースが表示される場合があります。経験豊富なユーザー向けの開発ツールがあります。 Dark Readerは広告を表示せず、ユーザーのデータをどこにも送信しません。 また完全にオープンソースです https://github.com/darkreader/darkreader イ
There are lots of command lines which can be used with the Google Chrome browser. Some change behavior of features, others are for debugging or experimenting. This page lists the available switches including their conditions and descriptions. Last automated update occurred on 2024-12-08. Condition Explanation
selenium webdriverで任意のchrome profileを作成し、ログイン情報などを記憶させる 2018年1月29日 driverを起動させる度にログインさせるのが面倒 selenium webdriverを使っていると、ログインが必要なサイトにアクセスする時に毎回ログイン情報を入力させてからサイトの中を動作させなければなりません。 複数のdriverを起動させる場合もdriver毎にログインしなければなりません。 ログイン機能のテストをしているのであれば良いのですが、できればログインを飛ばしてしまいたいと思うことはありませんか？ 通常のChromeであればログイン情報が保存されているのでログインや2段階認証が飛ばせる いつも使っているChromeでは、ブラウザを立ち上げる度にgoogleのログインが求められますか？2段階認証を求められるでしょうか？ そんなことはありません
先日「Chrome デベロッパーツールの使い方」で華麗に使いこなすテクニックを紹介しましたが、それとは異なるデベロッパーツールの便利な使い方を紹介します。 Webサイトやアプリの制作時に、非常に役立つテクニックが満載です。 ※画像は元記事のものではなく、当方の環境のものを使用しています。 デベロッパーツールの便利な使い方 タブ「Elements」を選択 DOM要素を選択 右パネルのタブ「Computed」を選択 「Computed」には、選択したDOM要素に適用されている全てのスタイルが表示されます。そのプロパティの頭にある虫眼鏡アイコンをクリックすると、そのスタイルがあるCSSファイルとそのセレクタの指定を表示します。 これは大きなサイトを制作している時に、非常に有用です。
GitHub on steroids Browser extension that enhances GitHub code review and exploration. Features * Fast IDE-like code tree * Quick search in tree format * Bookmark repos, issues, PRs, files * Support GitHub themes * Support private repositories * High performance, working with repositories of any size PRO features * File icon themes * Code font settings * Quick PR navigation * Unlimited bookmarks *
2014年02月14日19:06 音楽再生に特化したChrome拡張「Streamus」が便利すぎてiTunesから曲を消した https://narumi.blog.jp/archives/3405214.html音楽再生に特化したChrome拡張「Streamus」が便利すぎてiTunesから曲を消した よく仕事中にiTunes立ち上げて音楽を聞いたりしていますが、考えてみたらプレイリストにある音楽ってほぼ全部YouTubeにもアップされてるんですよね。ってことはYouTubeで聞けばいいじゃんって思うんですが、聞きたい曲を「探す→再生する→止まる→また探す」っていうのが非常に面倒くさい。 そしたらGoogle Chromeの拡張で、YouTubeにある曲をBGM代わりに再生するのにぴったりなものがありました。「Streamus」というやつです。 Streaming YouTube m
2013-12-20 ChatPadでの会話は簡単に覗き見られる この記事はKMCアドベントカレンダーの20日目の記事です。 ChatPadというチャットサービスを知ってますか？ ChatPadは匿名でランダムな誰かと一対一でチャットができることが特徴で、暇な女子高生や性欲を持て余したおっさんなどに人気のチャットサービスです。 ChatPad｜1クリックで始まる！見知らぬ誰かとのチャットサービス いつも通りネカマ活動にシコシコ勤しんでいたところ、ChatPadにおける会話が盗聴されることに気づいたので、この記事ではそのことについて紹介します。 いかにして主婦は盗み聞きをするか 簡潔に言うと、ChatPadでは中間者攻撃により他ユーザー同士の会話を盗聴することが可能です。 中間者攻撃という言葉に馴染みがない人も、二本の電話の受話器をひっくり返して組み合わせることを考えてみてください（ちょうど
Chrome Extensions API リファレンス このページは、Google Chrome Extension作成のための勉強過程で作成しました。基本的にはほぼ の意訳になっています。いずれ本体で日本語ページが用意されると思いますが、それまで便利に使ってもらえれば良いなと思います。 また、拡張機能を 自作 している過程で出たポイントを、逆引きコンテンツとして追加したりもしてあります。 全体を通じて、誤り等もあるかと思います。また、黎明期の機能であるため、実装がそもそもドキュメントと異なる点も散見されます。このサイトによって引き起こされるいかなる不都合についても当方は責任を負いかねますが、ご意見や指摘などは、以下のいずれかに頂ければ幸いです。 拡張機能作成のために 公式サイトにもありますが、順番としては、次のような感じがやはり良いのではないかと思います。 はじめてみよう で、まずは動
出勤とか退勤とかするのめんどうで，忘れたら余計めんどうなことになるから，忘れないよう気をつけるみたいになってて，30分に1回くらい退勤のこと思い出したり，退勤忘れて帰る夢を見たりして，めんどうだった．革新的ソフトウェアを作って世界を変えるのが仕事なので，出勤や退勤といった些細なことに気をとられている場合ではないので，なんとかしないといけなかった． コマンドラインから退勤できるようにしたけど，普段から退勤する習慣がないから，すぐに退勤するの忘れて帰ってたりしてた． Google Chrome拡張を作って，定時過ぎたらポップアップが出て，退勤しますかとか聞かれて，OKしたら退勤できるようにしたら便利な感じになった． スペースシャトルの燃料タンクとか，心配になったら人が見るみたいな運用じゃなくて，普段は黙ってるけど減ってきたらウオオオとか言って，教えてくれるようになってると思う．まともなソフトウ
生きていればつらいことがある。 しかし、つらいからと言って簡単に投げ出す事は出来ないということも多い。 みなさんもつらまってる時、よく宮崎あおいを見ると思う。 当然のごとく僕もそうである。 最近つらい事がよくある。 そんな時のために、宮崎あおいを素早く表示する必要があった。 なので、宮崎あおいをすぐ見れるGoogle Chromeの拡張を作った。 「だめだ。もうやってらねー」って時は、空の tab を表示すればすぐ宮崎あおいに会える。最高。結婚したい。 chrome-tumblr-tile from soh335 on Vimeo. soh335/chrome-tumblr-tile · GitHub option で apiKey と 表示したい tumblr の hostname を設定すれば色々見られます。 本当はからっぽ を表示するのも良いと思います。 合わせて読みたい すぐに吉高
を、ようやく実装できました。 Amazon to Rakuten Chrome拡張「Amazon to Rakuten」は当初下記の流れで作っていました。 1. chrome.tabs.getSelectedで今開いてるamazonのページのURLを取得 2. XMLHttpRequestで取得したURLのHTMLを取ってきて、本のタイトルを正規表現で取得 3. 楽天ブックス総合検索APIに取得したタイトルを投げる 4. 検索結果をPopupに表示。表示されたやつをクリックすると無事楽天ブックスの商品詳細ページにジャンプ 1. Content ScriptでDOM解析し、今開いているamazonの詳細ページから商品タイトルを取得 2. 取得したタイトルをMessageでbackground.htmlに送信 3. background.html上で楽天ブックス総合検索APIに、Content
最近いくつかのChrome拡張機能を作っていて、すでに数千人のユーザを獲得できているものが出てきてたりします。 Image collector extension goo.gl URL Shortener extension mixi Check button extension Semantic inspector これだけ作ってると、何となく自分でのChrome拡張機能を作り出す際のデザインパターン・・・っていう大それたものじゃないけど、ようはテンプレが確立されてきます。全く褒められない書き方をしているかもしれませんが、ここでそのテンプレ達を晒しておこうかな、と思います。 manifest.json まずはChrome拡張機能の要であるマニフェストファイルです。これは誰が書いてもさほど変わらない記述内容となるでしょう。 { "manifest_version": 2, "name":
生成元横断XMLHttpRequest 通常のウェブページは XMLHttpRequest オブジェクトを使ってリモートホストとの通信を行う。しかしそこには 同一生成元ポリシー という制限が存在する。拡張機能では、そのような制限は設けていない。拡張機能は最初に生成元横断のパーミッションを要求しておくことで、異なる生成元のサーバとも通信することが出来る。 拡張機能の生成元 実行されている各拡張機能は、それぞれ分割された生成元に存在している。特別に特権を要求しなくても、XMLHttpRequestを使って自身のインストールフォルダからのリソース取得を行うことが出来る。例えば、拡張機能が config.json というJSONで記述された設定ファイルを config_resources というフォルダに持っている場合、次のように取得することが出来る。 var xhr = new XMLHttpR
This domain may be for sale!
PC 版の Google Chrome や Safari で見たときにユーザビリティーが落ちるから。 以上。 で終わってしまうと記事にならないので、ちゃんと説明しておく。 そもそも -webkit-text-size-adjust とは何か iPhone や Android のブラウザーは、縦向き (Portrate mode) と横向き (Landscape mode) の文字サイズを自動調整する機能がある。 これを制御するのが CSS の -webkit-text-size-adjust である。 文字サイズ自動調整の具体例 次のような HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-
By annais Amazonで検索した本の詳細に、近隣図書館にその本が置いてあるか否かの情報を自動で追加してくれるのがGoogle Chromeの拡張機能「その本、図書館にあります。」です。 Chrome ウェブストア - その本、図書館にあります。 まず、Google Chrome上で上記サイトにアクセスします。 画面右上にある「CHROMEに追加」という青いボタンをクリック。 「その本、図書館にあります。」を追加しますか？と聞かれるので「追加」をクリックします。 拡張機能が追加されました。青色だったボタンも「CHROMEに追加済み」という文字とともに緑色に変化。 続いて、アドレスバーの右にある設定ボタンから「ツール」を選択、「拡張機能」をクリックします。 こんな感じで拡張機能一覧が表示されるので、「その本、図書館にあります。」のオプションをクリック。 表示された画面で利用する図書館
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
