僕が考えたChrome拡張機能を作るときのデザインパターン
最近いくつかのChrome拡張機能を作っていて、すでに数千人のユーザを獲得できているものが出てきてたりします。 Image collector extension goo.gl URL Shortener extension mixi Check button extension Semantic inspector これだけ作ってると、何となく自分でのChrome拡張機能を作り出す際のデザインパターン・・・っていう大それたものじゃないけど、ようはテンプレが確立されてきます。全く褒められない書き方をしているかもしれませんが、ここでそのテンプレ達を晒しておこうかな、と思います。 manifest.json まずはChrome拡張機能の要であるマニフェストファイルです。これは誰が書いてもさほど変わらない記述内容となるでしょう。 { "manifest_version": 2, "name":
Google Chromeエクステンションのセキュリティ確保
Nov 15, 2011 さて、ずいぶんと日が経ちましたがVichromeにセキュリティの脆弱性があるとのご報告を頂きました。 http://twitter.com/#!/teramako/status/127357023242289154 つまり、コンテンツに要素を追加すると、コンテンツ側のスクリプトがその要素に対してアクセスできてしまうわけです。 Chrome Extensionとセキュリティというのは、以前から議論されている話ではありますが、エクステンションの開発者を含めて一般的に浸透されているとは言い難い状況なので簡単にまとめておきます。 まずはChrome Extensionはどのような仕組みなのかから始めましょう。 Chrome Extensionってどうやってできてるの？ 一般的なChrome Extensionは主に3つのコンポーネントから構成されていて、それはConten
はじめてのChrome extension
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
Javascript Deminifier :: Add-ons for Firefox
The plugin uses the algorithm from jsbeautifier.org to beautify javascript. It will only apply the beautification to content served with the mime types 'application/javascript', 'text/javascript' or 'application/x-javascript'. These content types can be changed by modifying the "extensions.jsdeminifier.contenttypes" preference. The plugin can be enabled and disabled for a tab by clicking on the JS
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
Making Your First Google Chrome Extension
The Google Chrome web browser is slowly growing in popularity. This is no surprise, as it is a great browser, and is backed by no other than Google. It also provides great tools for web developers and I find myself using it more and more (actually Firebug is the only thing keeping me from crossing to the other side). With the introduction of extensions, Google Chrome became even more agile and pow
Safari拡張の作り方 - os0x.blog
Safari拡張をいくつか作って大体感覚は掴めたので、ざっくりと拡張の作成手順を解説してみます。 なお、Windows版で作業していますが、Macでもほとんど同じだと思います。 Safari拡張とは 最初に、Safari拡張とはなにか、について。Safari拡張はHTML/CSS/JavaScriptをベースに、ブラウザ側が用意したAPIを使ってブラウザを便利にするモジュールです。通常、JavaScriptだけではクロスドメインの問題など、実現できることに制限がありますが、その点を拡張用に用意されたAPIで補います。そのため、APIが用意されていない部分については対応できないという制限があります。しかし、開発のし易さ、ウェブとの親和性の高さからアイディア次第で便利で強力なツールとなるのがSafari拡張・Chrome拡張です。 なお、現状のAPIは暫定的なもので、ここで紹介するのもあくまで
[Programming] Safari Extension を作ってみた
Google Chrome に見切りを付けた私といたしましては渡りに舟ということで、早速、手を出してみました。まだ大雑把にしか把握してませんが、流石はWebKitベースという事で、アーキテクチャが Chrome Extension にそっくりです。Global HTML は Chrome で言うところのバックグラウンドページinjected Scripts → content_scriptsExtension Bar → ブラウザアクションdispatchMessage → chrome.extension.sendRequestinfo.plist → manifest.jsonといった感じですね。 試しに作ってみたのは、ページ内の単語やフレーズをGoogle翻訳、アルク、Urban Dictionaryといった辞書サイトに渡して新規タブにて表示するというものです。マウスで単語を選択しコ
![[Programming] Safari Extension を作ってみた](https://cdn-ak-scissors.b.st-hatena.com/image/square/efd13aef517eb38d05db12d5173a3d41f1fca049/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fblogger.googleusercontent.com%2Fimg%2Fb%2FR29vZ2xl%2FAVvXsEjnUypvHerauA5mFj1_-zpTHOV7Cabg3bQm6sDQ-N3EGtAi4UOkXCjG4bcbb9FyAdWNJnzvc26ROH5ZB-PO6154XNl4s7MViUGo__bRFdRmhlRoZJ9IkZGplZJL9AoHhyTs12FvBkauWz0%2Fw1200-h630-p-k-no-nu%2Fscs.png)
Safari Extension でニコニコントローラ（習作） - こたにき
出ましたね！ Safari 5！ 何と言っても目玉機能は拡張 (extension) 機能です。Firefox のアドオンみたいなもんですね。Safari → Chrome に浮気をしていた理由がこの拡張機能だったので、元サヤに収まれそうです。 早速、習作としてニコニコ動画のプレイヤーをコントールするツールバーを作ってみました！ Play を押すと再生、Pause を押すと一時停止… のようになります。 ダウンロード: nicontroller.safariextz ソースコード: http://github.com/kotas/nicontroller 使い方 まずは Safari 5 をダウンロード＆インストールします。 Safari 5 を起動してメニューから環境設定を開きます。（Mac だと Cmd+,） 詳細タブを開いて、「メニューバーに''開発''メニューを表示」にチェックを入
Courses and Tutorials in Tools | Envato Tuts+
Get every type of asset for any type of project, and access to AI tools From $16.50/m
第4回 ベータ版に向けたExtension総復習 | gihyo.jp
こんにちは、株式会社ALBERTの太田です。Extensionsが有効になるベータ版のリリースが近づいてきました。そこで今回は、現時点（2009年11月23日）でのExtensionsの作り方をまとめてみます。 Extensionsの開発の下準備 まずは開発環境を整理します。といっても、基本的にHTML／CSS／JavaScriptで作成するので最低限エディタがあればなんとかなります。 ただ、実際に開発／テスト／リリースをする場合には、プロファイルの異なる複数のChromeを起動できると何かと便利です。そういった場合、起動オプションで--user-data-dirを指定することで同時起動ができます（User Data Directory - Custom-Location）。 プロファイル ディレクトリの指定 [パス省略]\chrome.exe --user-data-dir="C:\
html5detector (Google Chrome Extensions) « HTML5.JP ブログ
Google Chrome Extensions について、多くの方がすでにご存じのことでしょう。この Extensions は、JavaScript の知識があれば、簡単に書けます。もちろん、Chrome がサポートしている HTML5 の API も使えます。いろいろ面白いことができそうですね。 ということで、簡単な Extensions を作ってみました。あまり実用性はないのですが、私個人的にほしいと思っていた機能を実装したものです。 題して「html5detector」です。html5detector は、表示されているページが HTML5 でマークアップされていれば、アドレスバーの中にアイコンを表示する Google Chrome Extentions です。 1 日で試行錯誤で作ったものですので、表示されたページが HTML5 でマークアップされていることを教えてくれるだけで、
FirefinderはJavaScriptプログラマ以外も使うべき - monjudoh’s diary
Firefinderとは何か？ https://addons.mozilla.org/en-US/firefox/addon/11905/ CSSセレクタやXPathで要素を検索出来るFirebugの拡張です。 どんな人にお勧めか？ hiddenフィールドの値を閲覧したり、 formのどの要素のnameが何かとかさくっと見たくなることないですか？ あるならお勧めです。 Firebugには既に$$というCSSセレクタで要素を検索出来る関数があるんだが？ CSSセレクタのサポートの度合いが違います。 $$関数では基本的なCSSセレクタしかサポートされていないので、 例えば、ここなら、http://images.google.co.jp/advanced_image_search?hl=ja $$('input'); // [input, input ja, input Google 検索, i
SURGAVIP : Link Slot Gacor PG Soft Maxwin Slot Online
SURGAVIP # Link Slot Pragmatic Gacor Malam Ini Modal Kecil Janji Maxwin Sekarang ! Selamat datang di SURGAVIP situs slot terpercaya dari server PG Soft ternama, banyak jenis permainan slot gacor dan mudah menang maxwin disini bersama surgavip. main dengan modal receh pulang dengan uang berlimpah. SURGAVIP dikenal sebagai situs terpercaya dengan koleksi lengkap game dari pg oft, provider yang udah
Sign in - Google Accounts
Not your computer? Use a private browsing window to sign in. Learn more about using Guest mode
Firebugクックブック #1 - bits and bytes
最近の中学生のはじめてのプログラミング言語がJavaScriptだったりするこの時代、最も使いやすいJavaScriptの実行環境であるFirebugは現代のコマンドラインです。UNIXコマンドラインでgrepやuniqを使って、日常の細々した処理を行うのと同じようにFirebugとjavascriptを使いこなせると、日常作業のちょっとしたことをさくっとこなすことができます。ちょっとした作業だから手作業でやってもいいけど自動でやればミスったりしないし、気分的には楽なので自動でやりたい、という作業がけっこうないでしょうか。例えば、ページの中の特定の部分の文字列をリストにしてテキストファイルに保存したい、とか。 そこで今回は私が普段よくやっている単純作業をFirebug+javascriptでさくっとかたづける方法を2回にわけてご紹介します。 ページの中からテキストや属性の値を拾う ページの
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Chrome Extensions | Chrome for Developers
Admiral
Under construction - Awesome site in the making!
conma.me