[Sy] Chrome拡張機能のpopup.htmlで入力途中の内容を保持しておく方法
Chrome拡張機能を使って開いているページの情報を送信する処理を実装しようと思ってpopup.htmlに入力項目を作ったんですが、閉じるたびに入力内容が消えてしまうので、裏で保持しておく方法を調べました。 昔同じようなものを作った時には、Background Pagesを使ってましたが、どうやらManifestのバージョンが2になってからはEvent Pagesというのを使うのが推奨されている様子。 下記ページに詳しく説明があったので読んでみる。 ⇒ Chrome拡張では、Background pages よりも Event pages を使用したほうが良い - よんちゅBlog 公式ドキュメントの翻訳をしてくれているところが参考になりました。 もし実行状態をメモリに保持しておく必要が有るなら、storage API または IndexdDB を使用する。event page は長時間ロ
![[Sy] Chrome拡張機能のpopup.htmlで入力途中の内容を保持しておく方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/7e91115ebb66440ab2183180b7131fc5d9c5a155/height=288;version=1;width=512/https%3A%2F%2Futano.jp%2Fimages%2FNoImage.jpg)
Chrome Extensionの作り方講座その４・popupとContent Scriptを連携させてみる
ChromeExtensionの作り方４週目は、２週目で説明したpopupと３週目で説明したContent Scriptを連携させる方法です。 お互いに違うhtmlを開いているので、データを連携させるには特別なAPIが必要となるのです。 今回はChrome.API.tabsというAPIを使います。 そのため、manifest.jsonにpermissionというものを設定しましょう。 [javascript] { "manifest_version": 2, "name": "sample", "description": "タイトルとURLを取得", "version": "1.0", "permissions": ["tabs"], "content_scripts": [ { "matches": ["https://*/*"], "js": ["jquery-2.0.3.min.j
chrome拡張のポップアップ画面でalert()やconsole.log()を出力する方法
chrome拡張のポップアップ画面でalert()やconsole.log()を出力する方法を紹介します。 １．問題点 「Google Chrome拡張の作り方（その4：オプション画面と保存データのバックグラウンド・ポップアップとの連携）」で作成したポップアップ画面のデバグをするために、次のようにalert()やconsole.log()をpopup.htmlに埋め込んでみましたが、alert()も表示されず、console.log()も出力されません。 var showOption = function() { var str = localStorage.getItem("test"); var obj = JSON.parse(str); console.log(obj['tab']) $('#maxtab').text(obj['tab']); }; $(function(){ s
Chromeのオリジナル拡張機能を開発しよう（ソースコードあり） | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
Chromeの拡張機能とは？ Chromeの拡張機能は実質的にはただの圧縮したフォルダです。そして、そのフォルダの中身もただのHTMLやCSS、JSファイルです。 つまり、拡張機能の作り方はWebページのそれとは大差ないということですね。 拡張機能にしか提供されていない豊富なChromeのネイティブのAPI群（Chrome.* API）を利用できるところが拡張の魅力です！ 一般公開目的ではなく、普段の業務効率化目的でも十分な利用価値があると思うので、まだの方はぜひ一度触ってみてください。 拡張機能の種類 拡張機能の種類は大きく分けて3つあります。 Browser actions Page actions Override Pages 1つずつ見ていきましょう。 Browser actions ツールバーの右側に小さなアイコンを表示させるタイプの拡張機能です。一番頻繁に見かけるのがこのタイプ
25 Essential Chrome Extensions for Web Designers & Developers – Speckyboy
25 Essential Chrome Extensions for Web Designers & Developers Chrome extensions offer a powerful way to enhance the design process and your workflow. They build on the solid foundation provided by Chrome Dev Tools, offering specialized functionalities that cater to the unique needs of web design and development. By integrating these extensions, you can significantly expand your browser’s capabilit
WEBページ構成ファイル保存と同時にリロードできるChrome拡張「Tincr」:phpspot開発日誌
Tincr Chrome Extension WEBページ構成ファイル保存と同時にリロードできるChrome拡張「Tincr」。 次のムービーのように外部エディタで編集したら即座にリロードしてくれてスピーディな開発を実現できそう。 他にも同様のソリューションがあったりしますが、導入が面倒。これならChrome拡張インストールだけでOKみたいです Windows, Mac, Linux にも対応 Ctrl+Rを押す回数が保存毎回分減るというのは大きいですね。 関連エントリ ページ内のアイテムのピクセル数をメジャーで測れるChrome拡張「MeasureIt!」 WEB開発者はインストール必須のChrome拡張「Pendule」 サイトに使われている技術が丸裸になるChrome拡張「BuiltWith」
キャッシュや閲覧履歴、ダウンロード履歴等を選択して一括クリアできるChromeエクステンション・Clear Cache
Chromeのユーザーデータを一括で クリア出来る、というエクステン ション。似たようなのもありそう な気もしますが、選択してクリッ クで一括削除できるのは楽なので 導入してみました。 今までは普通にchrome://chrome/settings/をブックマークして必要なときに消しに行ってたんですけどいい加減面倒になってきたので探してみたら便利なのがあった、という今更感満載な内容です。 ワンクリックでいつでも一括削除というのは結構楽ですので地味にオススメなエクステンションでした。 ↑ インストール後にセッティングします。クリア後にリロードするかどうか、クリアする項目を選びます。最下部に「1時間前」「1日前」などの選択も可能です。 項目はキャッシュやダウンロード履歴、ローカルストレージ、cookie、フォームデータなどなど。 楽に消せるので助かりました。 Clear Cache
Google Chrome上で動くMarkdownエディタ·TextDown MOONGIFT
TextDownはGoogle Chrome上で動作するMarkdownエディタです。 Webアプリケーションはどんどん増えていますが、それでもまだ物足りない分野があります。それがテキストエディタです。そこで今回はWebアプリではなくGoogle Chrome機能拡張として動作するMarkdownエディタ、TextDownを紹介します。 インストールします。 完了しました。Google Chromeのアプリタブに入ります。ここから起動します。 最初にドキュメントのタイトルを決めます。 メイン画面です。左側がエディタ、右側がプレビューになります。 キーボードショートカットは多数用意されています。 エディタ部の幅を広げてみました。 TextDownは左右にエディタとプレビュー画面に分かれており、まさにMarkdownテキストを表示、編集するのにテキスト機能拡張になっています。現状は保存機能はも
その場でiPhoneやAndroidのユーザーエージェントに切り替えられるChromeエクステンション・User-Agent Switcher - かちびと.net
その場でサクッとUAを切り替える 事が出来るChromeエクステンション User-Agent Switcherのご紹介です。 iPhoneやiPad、Androidだけでなく、 FirefoxやIEなどのブラウザにも スイッチできます。 FirefoxやIE、iPhone、iPadやAndroidなどのユーザーエージェントにその場で切り替え可能なChromeエクステンションです。ただそれだけなんですがシンプルだし地味に便利かなと思いまして。 閲覧中のページでサクッとユーザーエージェントを切り変える事が出来ます。iPhone4やiPad、AndroidなどのタッチデバイスだけでなくIE、Firefox、Safari、Operaなどにも変更可能です。 使い方 使い方は簡単で、User-Agent Switcherをインストールするとメガネのアイコンが表示されるようになりますので、好きなUAを
アドビの新ツール「Shadow」は、モバイル用Webアプリ開発者必須のツール
モバイルデバイス用のWebサイトやWebアプリケーション開発で大変なものの1つが動作確認です。何台ものデバイスを机の上に並べて、ひとつひとつ確認しなければなりません。 アドビシステムズのAdobe Labsが公開した「Adobe Shadow」は、そうした苦労をしているデベロッパー、デザイナーにとって手放せないツールになるでしょう。 複数デバイスに対する同時表示とリモートインスペクション Shadowがどんなツールなのか解説用ビデオの説明を紹介しましょう。 iPhoneアプリのShadowを起動すると番号が表示されます。 その番号を、MacOSかWindows用Chromeブラウザのエクステンションとして配布されているShadowに入力します。これで、ChromeブラウザとiPhoneがペアになりました。 同じように、Android用ShadowもChromeブラウザとペアにすることができ
使われているコードのチェックもできる！Google製のJavaScriptカバレッジツール·ScriptCover MOONGIFT
ScriptCoverはGoogle製のJavaScriptカバレッジテストツールです。任意のWebサイトに対してテストできます。 Googleが開発したJavaScriptのカバレッジツールがScriptCoverです。Google Chrome機能拡張としてインストールすることで任意のWebサイトにおけるJavaScriptカバレッジ率が分かります。 インストールしたところです。パッケージは提供されていないようなので自分でコンパイルしてインストールする必要があります。 任意のWebページを見るとこうやってカバレッジ率が出ます。 クリックすると分析開始です。しばらく待ちます。 完了しました。JavaScriptなので実行状況によってカバレッジ率も変化するようです。 さらに詳細なスクリプト単位でのカバレッジ率も見られます。 See full coverage reportをクリックするとス
カロシーのブログ ふたつのページを分割表示するGoogle Chromeの拡張「Frame two pages」
タブを行ったり来たりするのが面倒なので、分割して ひとつのタブで表示できる拡張がないか、GoogleChrome 拡張機能のページを検索したら「Frame two pages」とい う拡張でできそうなのでインストールしてみました。 Frame two pages https://chrome.google.com/extensions/detail/eldgpcphflnopbjadiaonofideekgdgm?hl=ja インストールするとツールバーにアイコンが表示され ます。 オプションはこんな感じです。 「Pages as columns」など各ボタンをクリックするだけで 設定が完了します。 以降ツールバーのアイコンをクリックすると、設定を変更 するまでその動作が行われます。 ２つのタブを開いた状態で使ってみました。 オプション一番上の「Pages As Columns」をクリック
よりセキュアなWebアプリケーションを目指す、JavaScriptチェックツール·DOM Snitch MOONGIFT
DOM Snitchは危険性のあるJavaScriptの処理を検出してスタックトレースするGoogle機能拡張。 DOM SnitchはGoogle Chrome用のオープンソース・ソフトウェア。先日、旧バージョンのjQueryに潜むセキュリティ問題が取沙汰された。JavaScriptが多用されるようになると、そこにセキュリティホールが潜む可能性がある（先日まで当サイトにも存在していた）。 DOM Snitchの画面 JavaScriptが出力したコンテンツなのか否か、Webブラウザを単純に使っている限りでは分かりづらい。ブラウジングを通じて問題があるかも知れない処理を発見できるのがDOM Snitchだ。Google製のGoogle Chrome機能拡張だ。 DOM SnitchはGoogle Chromeの機能拡張であり、Webブラウジング中に特定のメソッドを使われていないかどうか監視
Google ChromeとPHP開発の良い組み合わせ·PHP Console MOONGIFT
PHP ConsoleはPHPの開発、デバッグをヘルプするPHP/Google Chrome機能拡張。 PHP ConsoleはPHP/Google Chrome用のオープンソース・ソフトウェア。PHPで開発を行っている時にはvar_dumpやprintfといった関数を使って変数の内容を確認するといったことがよく行われる。しかし余計なデバッグ情報の出力はWebデザインを見がたくする欠点がある。 通知 そこでデバッグ情報を別な場所に表示しようと言うのがPHP Consoleになる。専用のロガークラスとPhpConsoleクラス、そしてGoogle Chrome機能拡張を使ってデバッグ作業をもっと快適にしてくれる。 メインの機能は三つある。一つは通知機能だ。Google Chrome専用のポップアップウィンドウを使った通知表示を行う。もう一つは開発者ツールのデバッグウィンドウにログを出力する機
難読化された読みづらいコードも一発で整形·JSBeautify For Chrome MOONGIFT
JSBeautify For ChromeはWebブラウザ上でJavaScriptを整形して表示するGoogle Chrome拡張。 JSBeautify For ChromeはGoogle Chrome用のフリーウェア（ライセンスはWTFPL）。本格的なWebアプリケーションが普及するにつれて、JavaScriptの利用範囲が拡大している。そんな中ではJavaScriptのファイル自体もサイズが大きくなっている。 Clippyあり版（整形前） そのためJavaScriptを多用するサイトでは余計なスペースや改行を消すなどしてサイズを減らすのが一般的になっている。しかしそれはコードが全て1行で書かれる、とても見づらいものになる。そこでJavaScriptの表示に際して使ってみたいのがJSBeautify For Chromeだ。 JSBeautify For ChromeはGoogle C
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Extensionizr