Browser Extensions I Actually Use - The Media Temple Blog
I’m a web developer and blogger. These are the browser extensions that I actually use right now. It’s an ever-changing set, and I’m never afraid to try new ones, but I’m also fairly picky and uninstall anything I don’t find myself using. Ghostery Ghostery is a browser extension that shows you, and more importantly, helps you block third-party resources (mostly scripts). This is a big deal for a bu
[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
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テキストを表示、編集するのにテキスト機能拡張になっています。現状は保存機能はも
Google Driveを使ったオンラインコードエディタ·Neutron Drive MOONGIFT
Neutron DriveはGoogle Drive連携のコードエディタです。 Google Driveで気になるのはGoogleドキュメントと完全には連携しておらず、オンラインでのファイル編集ができないことです（一旦エクスポートしないといけないのは不便です）。そんな中注目したいのはNeutron Drive、Google Drive連携型のプログラミングコードエディタです。 インストールします。 Googleアカウントと紐づける必要があります。 Googleドライブ、ドキュメントへのアクセス権限が必要です。 メイン画面です。左側は検索とファイルツリー、右側が編集画面です。ファイルが色々とあるのでファイルツリーはお見せできませんが…。 一気に寄せて編集部を大きく出来ます。 設定ウィンドウです。 複数ファイルを開けます。 https://www.youtube.com/watch?v=Piy
その場でiPhoneやAndroidのユーザーエージェントに切り替えられるChromeエクステンション・User-Agent Switcher
その場でサクッと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をクリックするとス
CSSFrag Safari Extension // ShaunInman.com
The Last Rocket An 8-bit game for iPhone, iPad and iPod touch Minted of course. In partnership with Update Karan Lyons has created a new and significantly improved version of CSSFrag that (among other improvements) can automatically generate CSSFrag links from the context menu. I have now passed the torch of CSSFrag Safari Extension maintainer to Karan. We tried to rig up a way to smoothly and aut
カロシーのブログ ふたつのページを分割表示する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ブラウジング中に特定のメソッドを使われていないかどうか監視
Firefox拡張機能(extension)の作り方 — ありえるえりあ
Firefox拡張機能(extension)の作り方 Firefox拡張機能(extension)の作り方を説明します。 Firefox 拡張機能とは Firefox add-onの一種です。 add-onは次のように分類できます。 plugin ...実体はexeやdll。C++で作成。素人にはお勧めしません 検索バー ...実体はXMLの設定ファイルのみ。見れば分かるので説明はしません スペルチェッカ ...日本語には無縁なので未調査(たぶんファイルを作るだけ) 拡張機能 ...実体はXML、JavaScriptとCSS。必要なら、C++で書くXPCOM。これから説明します テーマ ...拡張機能のサブセット。CSSのみの場合をテーマと呼びます
10分で作るFirefoxアドオン - LukeSilvia’s diary
今回は、はじめてFirefoxのアドオンを作ったので、調べたことをメモしておきます。難しいと思っていたのですが、簡単なものなら直に作れることを知りました(*´艸｀) ※ 動作対象はFirefox <= 3.6 になります。 何を作るか ブログを書く時に使うような、「開いているページのタイトルとURLを一回の操作で、マークアップ形式でクリップボードにコピーする機能」を作成します。機能を使う方法は、「Shift+u」か、「右クリックメニューから選択」の2種類とします。 作り方 作り方を以下のステップに分けて説明します。 「copytitleurl」フォルダ作成 「install.rdf」作成 「chrome.manifest」作成 「chrome」フォルダ、「content」フォルダ作成 「copytitleurl.js」作成 「copytitleurl.xul」作成 「copytitleur
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Extensionizr
Chromeで拡張機能をグループ化して切り替えられる Contextで遊ぼう!! - 週刊アスキー
