超簡単にChromeの拡張機能を作ってみる【誰でもできるよ】 - Qiita
はじめに みなさんはChromeの拡張機能を使っていますか？ 僕も使っていますが、案外Chromeの拡張機能を作るのは簡単です。 今回は、普段の業務の効率を上げるのも兼ねて自作してみました! 最低限準備するもの manifestファイル Javascriptファイル ぶっちゃけ、これだけで動きます。 実際に作ってみよう それでは実際に作成していきましょう。 今回はDとVを押すだけで、Markdownのリンクを作成する拡張機能を作成していきます。 まずは、manifestファイルから設定していきます! manifestファイル を参考にして、備忘録も兼ねて説明していきます。 今回は、最低限の設定を行います。 { "manifest_version": 3, "name": "Create markdown link", "version": "1.0.0", "icons": { "16":
ブラウザ上でデバッグするときに使えるテクニック
ウェブ上でJavaScriptを実行してバグが発生した場合、ブラウザに内蔵されている開発者ツールを使ってデバッグすることがよくあります。そうしたブラウザでのデバッグにおいて役立つテクニックをNetflixでフロントエンドの開発に携わっているアラン・ノルバウアーさんがまとめています。 67 Weird Debugging Tricks Your Browser Doesn't Want You to Know | Alan Norbauer https://alan.norbauer.com/articles/browser-debugging-tricks ◆高度な条件付きブレークポイント 開発者ツールの「ソース」タブにはデバッガーが用意されており、JavaScriptの任意の行にブレークポイントを設定することで実行を一時停止して変数やコールスタックの中身を確認できます。ブレークポイントを
ChatGPTを手軽に使えるChrome機能拡張3選 有能なアシスタントを雇った気分になれるかも
2月上旬にマイクロソフトがChatGPTを検索用にカスタマイズし、さらに高速で正確に動く対話式のAIをWebブラウザの「Edge」と「新しいBing」に導入すると発表しました。私も、先日やっと順番がまわってきたので、新しいBingを試すことができました。 とりあえず、信ぴょう性含めて判断するには、自分のことを調べるのがいいので、自分の名前で検索してみましたが、サジェストされた候補を4回ほどクリックするだけで、私と私がデザインしたカバンがあること、そして、そのすてきなレビュー動画をあるところまで辿り着きました。 まだまだレスポンスは少し遅いですし、リンク先の情報がマウスオーバーで表示されるまでには少し時間がかかりますが、なんとなく分かっているんだけど思い出せない言葉やその周辺情報、全く知らないジャンルのことをなんとなく把握したいときなどには十分に使えます。 ChatGPTの、ただテキストが並
ブックマーク専用の新しいChrome・Firefoxブラウザ拡張機能を公開しました。 - はてなブックマーク開発ブログ
2022/3/16 10:30 追記 拡張機能について追加のお知らせを公開しました。よろしければ当記事とあわせてご覧ください。 bookmark.hatenastaff.com はてなブックマークの新しいChrome拡張、ならびにFirefoxアドオンを公開しました。Webの気になった記事をブラウザから素早くブックマークできる公式の拡張機能です。 下記のリンクよりブラウザにインストールして、ぜひご利用くださいませ。 インストールはこちらから Chromeウェブストア chrome.google.com はてなブックマークの既存のChrome拡張とは異なるバージョンです。別の新たな拡張機能として追加されます。 Firefoxアドオンページ addons.mozilla.org 昨年の8月より旧来のFirefoxアドオンをインストールできない状況が続いたことにより、お待ちいただいた皆様にはご不
Chrome DevTools の知っておくと便利かも機能 - Qiita
長い間 Chrome の DevTools を使ってきて、便利だなと思った機能をまとめてみました。 様々な機能があり、これを覚えておくと開発時に役に立つかもしれないので、ぜひ使ってみてください。 この記事は Corome DevTools 公式 を参考にしています。 日本語化 英語が苦手な方は日本語化しましょう。 手順 DevTools を開いたら、歯車マークをクリック Language で日本語を選択 [Reload DevTools] をクリックして DevTools のリロードをする 要素の状態を強制 指定の要素を :hover や :focus などの状態に強制的にすることができます。 そうすることで指定状態時のスタイルを確認することができます。 手順 要素タブをクリックする 状態を変更したい要素を選択する 今回は Google の検索フォームを選択 [:hov] をクリックする
ブラウザ上の操作手順を自動でスクショしてくれるChrome拡張機能【今日のライフハックツール】 | ライフハッカー・ジャパン
共有資料や手順書の作成で、スクリーンショットを撮りながら進めるのはちょっと面倒です。 身内への手順共有であれば画面録画を活用する手もありますが、それにしても編集したり考えながら操作を進めたり…といった要望がありますよね。 ウェブブラウザ上の操作をキャプチャするのなら、Chrome拡張機能『Tango』を追加すれば効率化が叶います。 ステップ・バイ・ステップの操作を、キャプチャ・説明してくれる自動化ツールをご紹介します。 一通り操作するだけでOK！Screenshot: 山田洋路 via TangoTangoを追加すれば、いい感じの操作説明資料が一瞬で作れるようになります。 説明対象のウェブページを開いたら、拡張機能アイコンをクリック。 「CAPUTURE WORKFLOW」ボタンを押せば、キャプチャ開始です。 Screenshot: 山田洋路 via Tango説明したい操作を一通り行ない
【Chrome拡張】英単語の意味をすぐに調べられ、忘れないように復習設定もできる「BooQs Dictionary」を試してみた【英語学習】 | DevelopersIO
英単語の意味すぐ忘れません？ 英語で書かれたドキュメント、GitHub や Stack Overflow 内でのやりとり、海外の方のツイートなど日常生活には英語に接する機会がたくさんありますよね。 ただ情報を入手するだけならサクッと機械翻訳をかましてしまえばいいのですが、英語学習のためと思って英語で読むこともあるでしょう。そのような時に意味が分からない英単語に出会い、意味を調べても翌日には忘れてるといったことありませんか？ 私はあります。 そのような方におすすめしたいのが Chrome 拡張機能の「BooQs Dictionary」です。 BooQs Dictionary があれば！ BooQs という「挫折させない英単語アプリ」と連携ができる英単語辞書拡張機能です。 BooQs については以下のように説明されています。テスト効果や分散効果といった手法を用いて英語学習ができます。 BooQ
Chrome 91でデベロッパーツールがさらに便利に！スクロールスナップの実装と検証が簡単になりました
25日にリリースされたChrome 91のデベロッパーツールに、CSSの実装に役立つツールが搭載されました。Chrome 90ではFlexboxのデバッグツールが搭載され、今回のChrome 91ではスクロールスナップ（scroll-snap-typeプロパティ）の配置が可視化できるようになり、実装と検証に役立ちます。 参考: What's New In DevTools (Chrome 91) スクロールスナップ（scroll-snap-typeプロパティ）について、以前の記事をご覧ください。 CSSのスクロールスナップの便利な使い方、実装の注意点を徹底解説 では、Chrome 91のデベロッパーツールでスクロールスナップ（scroll-snap-typeプロパティ）のデバッグツールの使い方を紹介します。 まずは、スクロールスナップを使用しているページをChrome 91で開きます。手元
Chrome Devtoolのmonitorを使うと関数の呼び出しを観察できて便利 - ぱすたけ日記
を読んで思い出したのでご紹介です。 元の記事と同様に以下の関数 sum について、 function sum(nums, acc = 0) { console.log({ nums, acc }); if (nums.length === 0) return 0; if (nums.length === 1) return nums[0]; return sum(nums.slice(1), acc + nums[0]); } この関数sumの引数 (nums と acc) の呼び出しごとの変化を見たい場合は、所謂プリントデバッグや debugger を使うのは一般的なテクニックとしてよく知られていますが、このような関数呼び出し時の引数を知りたい場合はmonitor(function)という関数を使うことで同様の効果を得ることが出来ます。 この場合は monitor(sum)とした後に、関
英語学習が捗るGoogle Chrome拡張機能7選 | ライフハッカー・ジャパン
YouTubeや海外のWeb記事などを使って英語学習をしている人、始めようとしている人は多いはず。 かさばらず、費用も抑えられる一方で、単語を調べるために、いちいちタブの切り替えやアプリの作動が必要になったり、書き込みができず頭に入らなかったりなど、不便さを感じている人もいるのではないでしょうか。 最近は、そんな悩みを解決する拡張機能が多く登場しているんです。 今回は、インターネット上での英語学習をもっと効率的に進めるためのChrome拡張機能を紹介します。 自分だけの辞書が作れるせっかく調べた単語でも、調べっぱなしでは身につきませんよね。 単語をコレクションできるこの拡張機能では、単語の意味に加え、その単語が使われた文章もストックできるのが特徴。 どのような文脈で使われたかをひと目で把握できるため、単語の理解度も上がりそうですね。
Beyond Console.log() – Level up Your Debugging Skills — SitePoint
You may have established a pattern of coding that utilizes a few key tools offered by your browser’s console. But have you dug any deeper lately? There are some powerful tools available to you, and they might just revolutionize the way you work. The Comfort Zone As developers, we like to find a way of working that make us feel efficient. The trap, though, is that we get comfortable with a certain
【Chrome】textareaの改行時にカーソル位置がガタっとずれる問題の対処法
Enterキーを押すとtextareaのスクロール位置がずれる問題 ふとZennのスクラップのエディターで、Enterキーを押すと、カーソルのあたっている部分のスクロール位置がガタっとずれる問題が発生することに気づきました。 Enterキーを押したタイミングでカーソルの位置がviewportの先頭もしくは末尾にジャンプするようなイメージです。 もう少し調べてみると、Chromeでは問題が発生するものの、FirefoxやSafariでは問題が再現できませんでした。 とりあえずautosize textareaを疑う スクラップのエディターではtextareaの高さがテキストの長さに応じて変わるreact-textarea-autosizeを使っています。最初はこのパッケージを疑ったのですが、HTMLの<textarea>タグに書き換えても問題は解消しませんでした。 Reactのcursor
Prime Videoの映画やドラマ、アニメで楽しく語学学習できるGoogle Chrome拡張機能「Subtitles for LL」【1月25日追記】／動画の字幕や再生速度をコントロールする機能も
macのchromeやsafariで真っ白なページが表示される事があるのはESETのWebアクセス保護が原因かも - 文系プログラマによるTIPSブログ
君が犯人だったか〜 何がきっかけなのか解りませんが、最近急にGoogle ChromeやSafariで真っ白なページが表示されるようになりました。 少し調べてみて原因の特定ができたので、メモしておきます。 起きている環境 iMac late 2014 macOS mojave ESET ver6.6.300.2 Google Chrome v 70.0.3538.110 FireFox v64.0 Safari v12.0.2 起きている現象 Google Chrome・Safari・Firefoxの3種類のブラウザで真っ白なページが表示される「場合」がある。確実に真っ白になるわけではないが、リロードし続けると「何故か」表示される事がある。 キャッシュを全クリアしても解決しない。 OSを再起動しても解決しない。 Adblock Plusアドオンを入れている。 シークレットモードで表示しても
【CSS】transitionプロパティ使用時に、Chromeブラウザで1pxずれる現象を回避する | バシャログ。
先週インフルエンザに感染して、ダウンしてました ishida です。 今年のインフルエンザは感染力がかなり強いようで、 次女→自分→長女→嫁（いまココ）と感染してしまいインフル一家となってしまいました。。。 助けてぇ〜。 急な高熱・のどの痛み・関節痛などの症状がでたら、すぐ病院に行きましょうね。 さて今回は、先日コーディング中に遭遇したChromeブラウザのみにおきた現象を回避するための Tips を紹介します。 最近のHTMLコーディングでは、ボタンなどのマウスオーバーエフェクトを CSS で対応することが多いです。よく使うのは、以下のようなものです。 ソースコード HTML <p class="button"><a href="#"><img src="hogehoge.png" alt="ボタン" width="300" height="80"></a></p> .button {
Chrome デベロッパーツール本を書き始めたきっかけから入稿完了までの物語 #技術書典 5
本日(9/21)、雨がザーザー降る中、日光企画さんの浮間本社まで技術書典にだす本を入稿してきました。 本記事は書き始めるきっかけから入稿までの物語です。 まさかこんなことが技術書典へのサークル参加につながるとは思わなかったし、初執筆で500冊も刷ることになるとは思っていなかったし、何故か私の転職にもつながっているという話です。 5/9 Google IO 2018 の動画で Chrome デベロッパーツールに Eager evaluation という新機能を搭載するよ！というセッションを見た。「これはいいぞ！」と思ったのがはじまり。 5/17 Chrome Canary に搭載されたのを発見！ しかし言及している人が全然いなくて寂しい。 Eager evaluation について知ってほしくて Qiita に記事を書きはじめる。 5/20 「Chrome デベロッパーツールの Consol
Chromeのデータをページ速度評価にGoogleは確かに使っていた（Google社員に確認）#BrightonSEO
[レベル: 中級] ページの表示速度を計測するデータの1つとして、Chrome User Experience Report（Chrome ユーザー エクスペリエンス レポート）を Google は利用しています。 英ブライトンで先週参加した BrightonSEO で John Mueller（ジョン・ミューラー）氏に直接確認することができました。 Chrome によって取得されたデータを検索に利用 ページの読み込み速度をモバイル検索のランキング指標に取り入れる Speed Update（スピード アップデート）を7月に控えています。 Google はどのようにして読み込み速度を判断しているのでしょうか？ Distilled（ディスティルド）の Tom Anthony（トム・アンソニー）氏は、Chrome が取得したデータを使っていることを Google が認めたとコメントしていました（
Webブラウザの操作をJavaScriptで自動化。Headless Chromeのフレームワーク「Puppeteer」がバージョン1.0に到達。ChromeのDevToolsチームが開発
UIを持たずスクリプトから操作可能なWebブラウザのHeadless Chromeを利用するためのフレームワーク「Puppeteer」がバージョン1.0に到達した。Webアプリケーションの自動テストなどに利用可能だ。 GoogleのWebブラウザ「Chrome」は、ユーザーインターフェイスを持たずコマンドラインやリモートデバッグ機能を通じてWebブラウザを操作できる「Headless Chrome」機能を備えています。この機能は2017年6月にリリースされた「Chrome 59」から実現されたものです。 Headless Chromeを利用すると人間がWebブラウザをマウスやキーボードで操作することなく、プログラムでHeadless Chromeを起動し、特定のWebページを読み込み、画面キャプチャの取得や、指定された場所をクリックし、値を入力し結果を取得する、といった操作を自動的に行わせ
[CSS]Web制作者が知っておきたい、Webフォントを快適に表示するCSSの新しいプロパティ「font-display」
Webフォントを使用しているサイトやブログが増えてきました。そして、近日アップデートされるChrome 60では、Webフォントの使い勝手を向上する「font-display」プロパティがいよいよ正式に実装される予定です（参考: Chromium）。 追記: さきほどChrome 60がリリースされました。 Webフォントを適用したテキストが読み込み時に一瞬表示されない現象があり、今まではJavaScriptで対応していた人、仕様だとあきらめていた人は、このfont-displayを積極的に取り入れるべきだと思います。 font-display for the Masses 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ブラウザでフォントが読み込まれる仕組み font-displayプロパティとは ほとんどの場合、swapを使
![[CSS]Web制作者が知っておきたい、Webフォントを快適に表示するCSSの新しいプロパティ「font-display」](https://cdn-ak-scissors.b.st-hatena.com/image/square/a833243d7f7fa2de140f06d3243344bf1713f818/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201703%2F2017072510.png)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://jp.techcrunch.com/2021/03/15/google-5billion-lawsuit-incognito-tracking/
