Chromeの拡張機能（プラグイン）を自作で作ってみたので、色々書く。 やってみたこと やった結果 動かせたの？ 開発した時の環境 ハマりポイントと解消方法の一覧 そもそも拡張機能を作るために必要な構成や作るべきファイルがわからない 開発成果物のそれぞれの役割がよくわからない 自作したChrome拡張機能の取り込み方法がわからない ツールを修正した時の取り込み方法がよくわからない service_workerが動作しない原因がわからず、デバッグもできない content_scriptsに指定したcssの参照先画像(URL)にアクセスできない 拡張機能アイコンクリック時の動作が定義しても動かない service_workerで外部jsが使えない 自作した拡張機能用HTMLでonclick属性が動作しない Local Storageから読み込んだ情報が想定外にObjectになった Javasc
数年ぶりにChrome拡張のつくりかたを調べた。 本当に何も分からなかったので、Twitterで「2022年にChrome拡張つくりたかったら何見て学べばいい？」とつぶやいてみたところ、何人かの人が教えてくれた。教えてもらった中から幾つかのリンク先を紹介するような形で記述していく。 Create a Vite-React Chrome Extension in 90 seconds - DEV Community 2022年時点だと比較的新しめのフロントエンド向けツールであるviteと、viteのChrome拡張向けプラグインである@crxjs/vite-pluginを使ってChrome拡張をつくってみよう、という記事。今回自分は主にこれを参考にしながら開発を進めた。Reactと言っているが、自分のChrome拡張ではUIは存在しなかったので、Reactに関する部分は読み飛ばして、vite
Googleは 23 日、Chrome 拡張機能プラットフォームの Manifest V2 終息と Manifest V3 移行タイムラインを公開した (Chrome Developers のブログ記事、 Manifest V2 support timeline、 9to5Google の記事)。 Manifest V3 は Chrome 拡張の信頼性向上を目指して 2018 年に発表された。コンテンツブロッカーの動作が制限されるとして反対の声も出ていたが、その後制限はある程度緩和された。今年 1 月には Chrome 88 で Manifest V3 がロールアウトし、Chrome ウェブストアで Manifest V3 拡張機能の登録が可能になっている。 Manifest V2 終息タイムラインによると、2022 年 1 月 17 日には Chrome ウェブストアで公開設定が「一般公
開発環境にChromeを選ぶなら知っておきたい12のテクニック Photo by Morning Brew on Unsplash さて、何らかの理由で、開発ブラウザとしてChromeを選んだとします。次は、デベロッパーツールを開き、コードのデバッグを開始します。 Consoleパネルを開いてプログラムの出力を確認したり、Elementsパネルを開いてDOM要素のCSSコードを確認したりします。 でも、Chromeデベロッパーツールを本当に理解していますか？実は、パワフルだけど知られていない機能がたくさん用意されていて、開発効率を大幅に改善できるのです。 ここでは、最も便利な機能を紹介します。お役に立てたら嬉しいです。 ChromeのCommandメニューから始めましょう。ChromeのCommandメニューは、LinuxのShellのようなものです。コマンドを入力してChromeを操作で
こんなことはありませんか？ ChromeでDevToolsを使って解析しているのに、別タブが開いてしまって 何のリクエスト投げて遷移してるか見れない ロード時に実行されるJSをデバッグできない みたいな。 開発中だと自分で作ってたりするので、あまり問題にならないのですが 運用後に発覚したバグの調査とか、急に担当者がいなくなった、 とかそんな事案が年に１回くらい発生します。 地味に方法を見つけるのに時間がかかってしまったので （開発者ツールを別タブで開く記事ばかりヒットするので） 自分がググった時の単語を記事のタイトルにしました。 設定自体は５クリックくらいでできます。 DevToolsのSettingsから [Preferences]→[Network]→[Preserve log]をONにして [Preferences]→[DevTools]→[Auto-open DevTools fo
マイクロソフトが無償で提供しているコードエディター「Visual Studio Code（略称：VS Code）」はGoogle ChromeやMicrosoft Edgeのデバッグ機能と連携できます。VS Code上でブレークポイントを設定してコールスタックを確認したり、ステップ実行や変数のウォッチなどを行えます。複雑なJavaScript開発を行っている方は、デバッグ機能を使うことで、効率のよい開発体験を得られるでしょう。 本記事ではデバッグ機能を使うためのVS Codeの導入方法について説明します。 導入手順と前提 VS Codeにはデフォルトでデバッグ機能が搭載されています。 ※2021年8月以前のVS Codeでは拡張機能「Debugger for Chrome」の導入が別途必要でしたが、今のVS Codeでは拡張機能をインストールする必要はありません。 本記事では、ウェブページ
既に2ヶ月前の2016年9月8日、Google Developers Japan Blogに、僕にとって非常に興味深いブログが掲載されました。 Chrome アプリからウェブアプリへ 簡単にまとめると、「Chromeアプリは（ChromeOSを除いて）終了します」という内容でした。薄々感じ取ってはいたものの、改めて正式に言われてしまうと、とてもショックです。まあ、でも、確かに仕方のないことなんですけど、特に日本においてはChromebookを目にする機会はほとんどありませんし、そのためChromeアプリ開発者の数も非常に少なかったと思います。OpenSocialといい、Chromeアプリといい、そろそろ僕も「お前が注目した技術は数年後になくなる」とか声が聞こえてきそうですが、2年近く、かなり本気を出して取り組んできたChromeアプリの世界だけに、立ち直れるまでかなりの時間がかかったという
疑惑どころか 99.99% くらい黒な話。 （後記：セッション盗まれたと思ってたけど、よくよく考え直してみると生パスワードごと盗まれてる可能性もあるしやばい） 追記：続報 11月3日 今回指摘した HTTP Headers 以外にも、「Tab Manager」「Give Me CRX」「Live HTTP Headers」等で同様（？）の問題が報告されています。第三者が元の作者からソフトウェア権利を買い取って悪用する、というケースが割とある模様（？）。皆さま情報ありがとうございます。 11月4日 Zaif については、「不正な Chrome 拡張」と「スクリプトから保護されていなかったクッキー」のコンボによりセッションが盗まれていた可能性あり。 Zaif のセッション情報が盗まれた原因のひとつについて。JavaScript からクッキー値を取得させない方法。 - clock-up-blog
作成：2016/07/11 更新：2017/04/16 Web制作 > 使い方 初めてデベロッパーツールを触る人でも分かるように、簡潔・シンプルに書きました。画像付きのチートシートのようなものですね。今回は初心者の方向けということでChromeデベロッパーツールの入門編。Chromeは最新版です。 エンジニア速報は Twitter の@commteで配信しています。 設定 背景色を黒にする タブの幅を変える エディタ エディタとして使う ローカルファイルのコードを整形する コンソール ログの閲覧・JavaScriptの入力や練習 エレメント 編集 CSS内の画像サイズと大きさを知る カラーフォーマットの変更 Breakpoints / クリックされた時のコードを見つける モバイル 回線速度のエミュレート 通信環境を選択 Androidデバッグ モバイルデバックの実機を増やす ネットワーク
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに プログラミングの上達において、デバッグスキルを上げることはとても重要で近道の1つだと考えています。 私自身、勉強し始めた頃に知っていれば（理解できていれば）とよく思います。 今回、JavaScriptデバッグについてChromeDevtoolsとブレークポイントを使った基本パターンを整理しました。 自身の復習かつ、あまり馴染みの無い方でも、以下おおよそ理解できるようになれば良いなぁ、というのが本稿の目的です。 どのようなものにブレークポイントが貼れるのか どういった時にブレークポイントが発動されるのか ブレークポイントが発動さ
最近、普段以上にChromeの開発者ツールを使うことに時間をかける機会がありました。その過程で、自分が今まで気づいていなかった機能をいくつか見つけました（少なくとも今までその機能を探す必要に迫られていなかった、とも言えるのですが。例えばブラックボックス化や非同期のスタックトレースなど）。そのため、開発者ツールでとても気に入っているいくつかの機能についてまとめてみたくなったのです。 小さな虫眼鏡ののアイコンは、特定の要素やCSSプロパティに対して、「どのCSSファイルに書かれているどのセレクタ/クラスが最終的なスタイルを決めているか」を示してくれます。例えば、どれかDOM要素に対して「要素を検証」を選び、右側の「Computed」というタブを選びます。確認したいCSSプロパティを見つけてその虫眼鏡アイコンをクリックすることで、すぐさま右側に正しいCSSファイル内のクラス/セレクタを表示してく
先日「Chrome デベロッパーツールの使い方」で華麗に使いこなすテクニックを紹介しましたが、それとは異なるデベロッパーツールの便利な使い方を紹介します。 Webサイトやアプリの制作時に、非常に役立つテクニックが満載です。 ※画像は元記事のものではなく、当方の環境のものを使用しています。 デベロッパーツールの便利な使い方 タブ「Elements」を選択 DOM要素を選択 右パネルのタブ「Computed」を選択 「Computed」には、選択したDOM要素に適用されている全てのスタイルが表示されます。そのプロパティの頭にある虫眼鏡アイコンをクリックすると、そのスタイルがあるCSSファイルとそのセレクタの指定を表示します。 これは大きなサイトを制作している時に、非常に有用です。
Nintendo Switch 2: Everything we know about the coming release
2018年4月25日をもちまして、 『CodeIQ』のプログラミング腕試しサービス、年収確約スカウトサービスは、 ITエンジニアのための年収確約スカウトサービス『moffers by CodeIQ』https://moffers.jp/ へ一本化いたしました。 これまで多くのITエンジニアの方に『CodeIQ』をご利用いただきまして、 改めて心より深く御礼申し上げます。 また、エンジニアのためのWebマガジン「CodeIQ MAGAZINE」は、 リクナビNEXTジャーナル( https://next.rikunabi.com/journal/ )に一部の記事の移行を予定しております。 今後は『moffers by CodeIQ』にて、 ITエンジニアの皆様のより良い転職をサポートするために、より一層努めてまいりますので、 引き続きご愛顧のほど何卒よろしくお願い申し上げます。 また、Cod
「Animated Gif Capture」というアニメーションGifを作るChrome拡張を公開しました。 Chromeに表示中のWebページをアニメーションGifに変換します。また、オプションページから設定を変更すると、デスクトップやChrome以外のウィンドウもアニメーションGifにすることが出来ます。 Chrome Web Storeに登録してあるので、ここからインストールできます。 Chrome Web Store - Animated Gif Capture - アニメーションGifキャプチャ キャプチャ例 Flashもキャプチャできます。 ※http://demouth.net/sketch/016/ 以前私がAS3で作ったやつ FlashのキャプチャできるのでVimeoでもYouTubeもいけます。 フレームレートを高めると滑らかなアニメーションGifになります。 ※これは
本の虫: Chromeがいつの間にか縦書きを実装し始めていた
注意：ここに示したCSSは、実用的な目的には、まだ使ってはならない。何故ならば、-webkitベンダープレフィクスを使っているからである。。これは、webkitの実装がまだ完全ではないことを意味する。 Chrome（というよりもwebkit）がいつの間にか、縦書きを実装し始めていた。つまり、CSS3のwriting-modeプロパティのvertical-rlとvertical-lrをサポートしているのである。まだ、ベンダープレフィクスが必要なので、完全な実装ではないのかもしれないが、少なくとも、ある程度は動くようだ。 例えば、以下の様なマークアップが、 <p style=" writing-mode : vertical-rl ; -webkit-writing-mode : vertical-rl ; font-family : '@ＭＳ 明朝' ; font-size : 16pt ;
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
