【結構簡単】ブラウザアクションボタン発火の自作Chrome拡張機能の作り方＆サンプル | degitekunote2
オムニバー横のブラウザアクションをクリックして発火させる2番目に簡単なChrome 拡張機能（Extension）の作り方の紹介です。 単純にボタン一発で何らかの処理を行ないたい時に使える方法になります。 Chrome拡張機能には幾つかの種類があり、ちなみに１番簡単なChrome 拡張機能はscript.jsに処理内容を書いてページが読み込まれれば即実行するタイプです。実行するページURLも指定できるので、とにかく読み込み後問答無用で実行したい時に使えます。 例えばページを読み込むと「背景色を黒に変更させる」なんていう処理が可能なわけですね。まぁ実際はそんな拡張機能なんて使われないので、Google等の検索結果画面にファビコンを表示させたり、ページのサムネイルを表示させるなんていう拡張機能もあったりします。 ただ今回は全てのページ対象で、任意のタイミング（ここではブラウザアクションボタンを
Chrome拡張でとっても役立つAPIのまとめ - Qiita
「BLOCK CLOCK」という、Chrome拡張のサービスを作りました。リリースの記事をQiitaにも投稿してサービスの紹介をさせていただいたのですが、技術的な内容が全くなかったので、開発に使用したChrome ExtensionのJavaScript APIsにも触れておきたいと思います。 Chrome拡張を作るためのGoogoleが提供しているChrome ExtensionのJavaScript APIsを呼び出しています。公式リファレンスは存在していますが全て英語で書かれており、APIの内容を調べるのに苦労しました。 Chrome拡張の開発で、同じように苦戦する方がいると思うので、少なくとも僕が使ったAPIだけは今回まとめておこうと思います。 JavaScript APIs BLOCK CLOCK - 仕事の時間をSNSから守るクローム拡張 マニフェストファイル chrome拡張
📝 Markdown エディタなら『StackEdit』がおすすめ！ - mattintosh note
Markdown エディタなら Mac/Linux/Windows で使える Chrome アプリの『StackEdit』がおすすめ！ 『StackEdit』を試してみたらとても良かったのでレビューです。 Chrome アプリだから Mac/Linux/Windows で使える！ 初回起動時の画面。この時点で「この子はデキる子に違いない！」感が漂ってきます…。OS が変わっても操作方法は同じで見栄えもほとんど変わりません。 OS X OS X 10.9 Linux Linux Mint 17 Windows Windows 7 ＊上記画像はディスプレイサイズがそれぞれ異なります 分割ビューの縦横切り替えやキーボード・ショートカット設定など機能が豊富！ 分割ビューの縦横切替やテンプレート設定など機能も豊富です。テーマもいくつか切り替え可能で黒背景も用意されています。エディタ側のフォントはリッ
Chrome DevToolsを使いこなすための参考サイトまとめ | 1 pixel｜サイバーエージェント公式クリエイターズブログ
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 フロントエンドエンジニアの谷です。 本記事ではGoogle Chromeの開発者ツール、Chrome DevToolsを使いこなすために参考になるサイト、ページの紹介をします。 すでに多くのフロントエンドエンジニアが開発で使っているかもしれませんが、「要素のインスペクタなどの基本的な機能しか使っていない」「UA切り替えくらいしかつかってない」というような方や、そもそもほとんど使ったことがない、という方もこれらを参考にフロントエンド開発を効率化していきましょう！ 基本的な使い方 Chrome DevTools Overview 基本はやはり公式ドキュメ
ScaleOut | Supership
2024年4月1日より、Supership株式会社は親会社であるSupershipホールディングス株式会社に吸収合併されました。 合併に伴い、存続会社であるSupershipホールディングスは社名をSupershipに変更し、新たな経営体制を発足しました。本件に関する詳細は、プレスリリースをご確認ください。 2024年4月1日より、Supership株式会社は親会社であるSupershipホールディングス株式会社に吸収合併されました。 合併に伴い、存続会社であるSupershipホールディングスは社名をSupershipに変更し、新たな経営体制を発足しました。 本件に関する詳細は、プレスリリースをご確認ください。
Google ChromeでJavaScriptのデバッグをする際にはぜひインストールを！·JS Runtime Inspector MOONGIFT
JS Runtime InspectorはGoogle ChromeのJavaScriptデバッグを強力にサポートしてくれるソフトウェアです。 最近はJavaScriptを徹底的に活用したWebアプリケーションも増えてきました。そんな中デバッグは非常に困難になってきています。そこで使ってみたいのがJS Runtime Inspectorです。 インスペクタにJS検索フィールドが追加されます。 検索結果です。 そこから定義されている場所に簡単に飛べます。 利用例。 JS Runtime Inspectorを使えばJavaScriptを掘り下げて調べるのがとても簡単になります。関数名の他、値でも検索できるので目的の処理を見つけるのが簡単になるはずです。 JS Runtime InspectorはGoogle Chrome用、MIT Licenseのオープンソース・ソフトウェアです。 MOONG
Chrome拡張 EditWithMacVim (もどき)
Chrome拡張 EditWithMacVim (もどき) http://bridge.grumpy-troll.org/2012/06/macosx-launchd-macvim-chrome.html TextAreaにeditボタンができて、それ押すとMacVimで編集可能。便利。 EditWithEmacsをインストールするpycl.pyをこぴる https://gist.github.com/3000309#file_gistfile1.txtlaunchd用plistを用意する https://gist.github.com/3000309#file_org.grumpy_troll.edit_with_emacs_pycl.plist走らせる https://gist.github.com/3000309#file_start.sh
WEB開発者必携。任意ヘッダーやメソッドを指定して送信できるChromeアプリ「Dev HTTP Client」:phpspot開発日誌
WEB開発者必携。任意ヘッダーやメソッドを指定して送信できるChromeアプリ「Dev HTTP Client」 2012年05月01日- Chrome ウェブストア - Dev HTTP Client WEB開発者必携。任意ヘッダーやメソッドを指定して送信できるChromeアプリ「Dev HTTP Client」 サーバに対して、POSTやGET等のメソッドで、独自のクッキーやヘッダーなどを加えて手動で送信できるChromeのアプリです。 POSTで送信する場合ってフォームを用意しないといけないのが面倒ですが、それも手動で指定できるため、非常に便利。 その場で返却値がカラーリングされつつ整形されて見れるので、JSON等の値を見る場合には超便利です JSON返却値の例。カラーリングと整形がありがたい なくてもそこまで困らないかもしれませんが、エントリポイントをちゃんとチェックしたいっていう
超簡単にBookmarkletをChrome拡張に変換する-Convert bookmarklet to Chrome extension | 適宜覚書-Fragments
超簡単にBookmarkletをChrome拡張に変換する-Convert bookmarklet to Chrome extension BookmarkletはJavaScriptで記述された小さなプログラムでWebブラウザのBookmarkツールバーに登録して利用できます。手動で繰り返すような操作を簡単にクリック一発で出来るようになったり、痒いところに手が届くものが多くあります。でも、Bookmarkletはお手軽な分散らかりやすくて、管理に向かない面があります。 今回はこのBookmarkletを超簡単にChrome拡張に変換するConvert bookmarklet to Chrome extensionを紹介します。
複数アカウントを切り替えるときに便利なGoogle Chrome機能拡張·Chrome Cookie Switcher MOONGIFT
Chrome Cookie SwitcherはGoogle ChromeでCookie内容を切り替えるGoogle Chrome機能拡張です。 Googleの各種サービスではアカウントスイッチ機能が提供されています。これで複数のアカウントを切り替えつつサービスが使えるようになっています。そんなアカウントスイッチを任意のWebサイトで実現するのがChrome Cookie Switcherです。 インストールするとアドレスバーの端にアイコンが出るようになります。 まず現状のプロファイルを作成します。このとき、Cookieデータがプロファイルに入ります。 後は別なアカウントでログインしたときに別なプロファイルを作成します。これで準備は完了です。 プロファイルをロードした後、再読み込みするとCookie情報が上書きされます。Chrome Cookie SwitcherはWebサイト単位に設定でき
使われているコードのチェックもできる！Google製のJavaScriptカバレッジツール·ScriptCover MOONGIFT
ScriptCoverはGoogle製のJavaScriptカバレッジテストツールです。任意のWebサイトに対してテストできます。 Googleが開発したJavaScriptのカバレッジツールがScriptCoverです。Google Chrome機能拡張としてインストールすることで任意のWebサイトにおけるJavaScriptカバレッジ率が分かります。 インストールしたところです。パッケージは提供されていないようなので自分でコンパイルしてインストールする必要があります。 任意のWebページを見るとこうやってカバレッジ率が出ます。 クリックすると分析開始です。しばらく待ちます。 完了しました。JavaScriptなので実行状況によってカバレッジ率も変化するようです。 さらに詳細なスクリプト単位でのカバレッジ率も見られます。 See full coverage reportをクリックするとス
はじめてのChrome extension
Wprowadzenie do tworzenia wtyczek w edytorze TinyMCE 4.* dostępnym od WordPressa 3.9
Backlogの課題の一覧性を上げる方法 : akiyan.com
Backlogの課題の一覧性を上げる方法 2011-08-26 目次 Backlogの課題一覧がちょっと見づらい Backlogは、個人的にはとてもバランスの良くとれた、タスク管理のウェブサービスです。そのBacklogにおいて最もよく見る画面は「課題一覧」なのですが、課題１行の高さがそれなりにあるので、ノートPCの画面などでは1ページに表示される20件すべてを一度に表示させることができません。 高さが1080ピクセルぐらいのモニタでないと、一度に20件を表示することができない。 課題一覧をよく見ると、どうも余白が大きいです。件名が長くなって折り返すこともありますが、ほとんどは プロフィールアイコンの高さのせいで１行の高さが大きくなり、無駄な余白ができてしまっているようです。 スタイルシート拡張で解決してみた そこで、Backlogのプロフィールアイコンを小さくするスタイルシート拡張を作っ
ChromeでRangeとかゴリゴリ使う時にハマる - 食べられるキリン
JavaScriptWRONG_DOCUMENT_ERRORが突然出るようになって原因を調べたiframeを使ってrangeを色々やりたい場合はDocumentは揃える必要がある。Firefoxなどでは不要。とりあえずWRONGかどうかはたいした問題ではなく、Rangeを生成した段階で要素が空だった時が問題。d = iframe.contentWindow.docuyment;range.selectNode(d.body);として何かを選択させておく必要がある。簡単にまとめChromeで要素が選択されていない状態でRangeを使う時はとりあえずbodyでもなんでもいいから選択させとけよ。
Open _new & _blank in new background tab - ｋ本的に無料ソフト・フリーソフト
いつもフォアグラウンドなタブで開くリンクを、バックグラウンドで開けるようにする Google Chrome 拡張。 クリックするとアクティブな新規タブで表示されるリンクを、常にバックグラウンドな新規タブに開けるようにします。 「Google Chrome」では、 target="_new" target="_blank" 属性が付いたリンク※1 は、通常フォアグラウンドなタブ（＝アクティブな状態）で開くようになっています。 （ホイールクリックした時や、「Shift」キー を押しながらクリックした時は別ですが） 1 「別窓で開く」という意味合いを持った属性。 こういったことが全く気にならない人もいるとは思いますが、中には 毎回フォアグラウンドで開かれるのはちょっと困る という人もいるかと思います。 リンクに target="_new" や target="_blank" が付いているかどうか
Webのリファレンスを簡単に参照する方法 - new.perldoc.jp/fooとかphp.net/fooとか - （ひ）メモ
追記 new.がとれて、http://perldoc.jp/ でアクセスできるようになったんで、s@http://new.perldoc.jp@http://perldoc.jp@g と目sedしてお読みくださーい。 をより便利に、アドレスバーに長いURL打ち込まなくてもいいようにする方法の紹介です。 具体的には、これを読めばあなたも今日から pd perlrerefと打ち込めば http://new.perldoc.jp/perlreref が表示される pd openと打ち込めば http://new.perldoc.jp/open が表示される ようになります。ね、簡単でしょう？ PHPも http://php.net/if や http://php.net/=== や http://php.net/split といったのが用意されているので、今回紹介する方法がそのまま使えますね。あ
ブロガーを楽にする8つのChromeエクステンション
有名な拡張が多いですが、僕の簡単な使い方を含めて紹介します。 Lightshot スクリーンショット系の拡張は数あれど、僕は一番こいつがお気に入りです。こいつなしじゃブログを書く気が起きないくらい依存してます。 こいつのスゴイところは、フラッシュだろうがウィンドウの外だろうがなんでも撮れる安定感が素晴らしいのです。 スクリーンショットが取りたい場所で、羽のボタンをクリックします。すると画面全体が暗くなるので、コピーしたい場所をドラッグで範囲選択をします。 すると選択範囲の右下にメニューアイコンが複数表示されます。 選択範囲を編集 Lightshot専用の画像サービスにアップロードされます。（使ったことない） 選択範囲を画面全体に引き伸ばします。 クリップボードにコピーします。 ファイルにPNG形式で保存します。 キャンセル 実にシンプルです。とくにPNG形式で問答無用で保存してくれるのがエ
Mozilla Re-Mix: Google Chromeのタブをサイド部に表示する方法。
Firefoxアドオンには、タブを上下左右に移動することができるアドオンがいくつかあります。 この中でも人気なのはタブをサイドバー部に表示するというもので、こうしたアドオンを利用してタブをサイドバー部に並べている方も多いと思います。 Google Chromeの場合、現行Firefoxと違ってタブは最上段に置かれ、これはこれで使い勝手がいいのですが、同じようにサイドに表示したいという方もいらっしゃるでしょう。 そんな方は以下の方法により、エクステンションなどを利用せずにGoogle Chromeのタブをサイド部に表示することができるようになります。 なお、以下の方法でタブバーをサイド表示するには、Google Chromeのdev版を利用する必要があります。 ＜設定方法＞ *見本はWindows 7での例です。 １．dev版をインストールされている方は、Google Chromeを終了した
Google Chromeを使ってスクリーンショット+説明書き·Explain and send screenshots MOONGIFT
Explain and send screenshotsはGoogle Chrome向けのフリーウェア。Webサイトを使って、何かの説明を行いたいと思うことはよくある。遠い場所にいる人に対してサイトのどこを見るべきか説明したり、サイトのヘルプを作ったり、デザインの修正依頼をしたりといった具合だ。 一部の範囲を指定して説明書きを加えられる そんな時によくやる手としてはWebサイトのスクリーンショットを撮って、画像編集ソフトウェアで開いて矢印や文字を加えてアップロードするといった操作だ。これでは手間がかかりすぎる。解決するのはExplain and send screenshotsだ。 Explain and send screenshotsはGoogle Chromeの機能拡張で、任意のWebサイトでボタンを押すと、範囲を指定してスクリーンショットを撮る機能になる。そこで送りたい範囲を指定す
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
