Safari拡張の作り方 - os0x.blog
Safari拡張をいくつか作って大体感覚は掴めたので、ざっくりと拡張の作成手順を解説してみます。 なお、Windows版で作業していますが、Macでもほとんど同じだと思います。 Safari拡張とは 最初に、Safari拡張とはなにか、について。Safari拡張はHTML/CSS/JavaScriptをベースに、ブラウザ側が用意したAPIを使ってブラウザを便利にするモジュールです。通常、JavaScriptだけではクロスドメインの問題など、実現できることに制限がありますが、その点を拡張用に用意されたAPIで補います。そのため、APIが用意されていない部分については対応できないという制限があります。しかし、開発のし易さ、ウェブとの親和性の高さからアイディア次第で便利で強力なツールとなるのがSafari拡張・Chrome拡張です。 なお、現状のAPIは暫定的なもので、ここで紹介するのもあくまで
yoshimasa niwa - Mac OS XでネイティブAPIをGoogle Chromeの拡張機能から実行
先日のWWDCでAppleはSafariの拡張機能を公開し、またSafari Developer Programを開始しました。 既にGoogleはChromeブラウザで拡張機能を提供していますし、にわかにFirefoxの独壇場だった拡張機能市場が盛り上がりを見せています。 実際、僕はSafariがデフォルトブラウザなのですが、たまにChromeを使って、Chrome上からURLをSafariに送りたくなったりします。 しかし、ちょっと探してみてもそのような拡張機能はありません。なければ作るしかないわけですね! ただ、これを実現するには他のアプリケーションをGoogle Chromeから起動しなくてはいけませんし、そうするためにはMac OS XのネイティブAPIを呼び出す必要があるわけです。ひょっとしたらもっと賢い方法があるかもしれないのですけど。Google Chromeは幸いネイティ
Anychrome って Google Chrome 拡張を作っています - *iroi*
id:hitode909 さんに手伝ってもらいました。ありがとうございます。 概要 こちらをインストールすると追加されるかわいいトマトのアイコンを押すと、開いてるタブと履歴からインクリメンタルに選んでアクティブにしたり開いたりできます。 今はタブと履歴から選ぶしかできませんがそれなりに便利なので公開します。(上のようにタブをたくさん開く人には特に)いずれ anything.el のように同じインタフェースでブックマークや Web 上のリソースなど色々な候補から選んで操作できるようにしたいです。 ChromeMigemo に対応していて一緒にインストールするとタブを探すときに migemo が使えます。 使い方 キーボードでしか操作できません。 C-n, ↓ 下の候補 C-p, ↑ 上の候補 C-m, RET 一つ目のアクションを実行 C-i, TAB アクションを選択 C-g キャンセル
Safari Extension 三分クッキング！ - こたにき
Safari Extension 作りたい！ という方にお届けする、三分クッキング！ HTML5 + JavaScript を使って簡単な機能拡張（extension）を作ってみます。 本日のメニュー ツールバーで動く時計 完成予定図: 最大の難関 Safari Extension を作るにあたって、最大の難関は Apple ID の登録と、Safari Developer Program への登録です。 三分クッキングとしては、「既に登録されたアカウントがこちらになります」と別のお鍋を取り出す場面です。 軽く要所要所だけ説明しますので、フィーリングとリーディングとやる気で乗り切ってください。 Safari Developer Program のページを開いて「Join now」を押します。 次のページでは登録状況によってチェック先が変わります。 Apple ID を持っていない人：左上の
Greasemonkeyを超えた！ユーザースクリプトを自在に実行できるChromeエクステンション「jsshell」 - Chrome Life
先日、Adobeからモバイル向けFlashの開発中止というニュースがありました。 リッチコンテンツの領域で独占していたFlashでさえ、HTML5の標準化の波には逆らえなかったんですね。 来年あたりから、HTML5の利用が一気に加速していく予感がします。 筆者も、最近ではサイト構築の際にHTML5を選択する機会が増えてきました。 HTML5+CSS3+jQuery この組み合わせで、ほとんどのWebアプリケーションの機能を実装することができる時代になってきたと思います。 必要なデータは、クラウドに保存してAPI経由で読み書きできれば良いので、その部分だけサーバーサイドに任せる感じのシンプルな構成になればベストです。 JavaScriptの部分は、別にjQueryじゃなくてもよいのかもしれませんが、プラグインや情報が豊富で、jQueryが使える開発者も多いことから、jQueryを選択しておけ
これはすごい！Chromeで最強のコマンド環境を構築する方法「gleeBox＋Quix」 - Chrome Life
皆さんはキーボード派ですか？マウス派ですか？ 筆者のようにプログラマの方であれば、キーボード派の人が多いと思います。 マウスでグリグリ操作するよりも、ショートカットキーを使いこなす方が何倍も早く操作できることを知っているはずです。 ターミナルをよく開いている人は1日の大半はキーボードだけで生活しているでしょうw しかし、そんな人でもブラウザの前では、キーボードだけでは効率良く操作できないので、仕方なくマウスで操作するしかありません。 そこで今回ご紹介するのは、Chromeをコマンドで操作できるようにしてくれるキーボード派のためのエクステンション「gleeBox」です。 「gleeBox」は、Chrome上に入力ボックスでコマンドを打ち込むだけで様々な操作が可能になるエクステンションです。 何がそんなにスゴイかというと、ほとんどマウスを使わなくても操作ができるように様々なコマンドが用意されて
extension作りで勉強したことメモ - こっそりmaroe
delicous引っ張ってくるext作ってみた Part2 を作った際に覚えたことのまとめ。 同じこと調べないためのﾒﾓとして。 データ保存編 localStorage key-value型のデータをブラウザ内に永続化する。 extensionのオプション設定などをお手軽保存出来る。 localStorage.setItem(key, value); var value = localStorage.getItem(key); //上下どちらでもOK localStorage.key = value; var value = localStorage.key; *valueには文字列しか保存できないので変換が必要。 var obj = { hoge: fuga, foo: bar }; // 保存 localStorage.hogehoge = JSON.stringify(obj); /
webRequest APIをざっくり理解する。(あるいはChrome拡張の作り方) – mzsm.me
昨日2月9日、Google Chrome 17の安定版がリリースされました。 このバージョンでの変更点の一つに、webRequest APIが正式に実装されたことがあります。 これまでこのAPIはexperimental(実験的機能)として実装されていましたが、今回晴れて正式なものになりました。 このAPIを使うと、Chromeが行う通信を監視して通信があるたびにイベントを実行したり、HTTPヘッダを書き換えたりすることができます。 Chrome 17では、User-Agentを他のブラウザに偽装することができる機能がDeveloper Toolsに付いたのですが、その機能もこのAPIを利用して実装されてい(ると思われ)ます。(Developer Tools自体もJavaScriptによって実装された“Webアプリ”なので、多分そのはずです) HTTPヘッダをいじれるというと不安に思われる
Yuyak.com » Chrome拡張でContent ScriptsからlocalStorageにアクセスする
Google API Expertが解説するHTML5ガイドブック 羽田野 太巳, 白石 俊平, 古籏 一浩, 太田 昌吾 2010-09-16 売上ランキング: 5430 評価 これがなかなか一筋縄ではいかないのである。 Content Scriptsは現在表示しているWebサイトのコンテキストで発動する。 そのため、Content ScriptsからlocalStorageにアクセスしても、そこで得られるのはChrome拡張で設定したものではなく、そのWebサイトのものとなってしまう。 では、どうすればいいのか。 background.htmlを介してアクセスすればいいのだ！ では、実践 Manifestはこんな感じ。 { "name": "My extension", ... "background_page": "background.html", ... } backgrou
クロスブラウザ拡張ライブラリExtension.js
DEV-008_Developing on the Edge. ～Web プラットフォームと Cordova～decode2016
Chrome Extension
Google ChromeのExtension作成メモ 基本的に自分がつくったextensionに必要な箇所のメモ Manifest V2について Content Security Policy (CSP) などをセキュリティの向上のため新しい拡張機能の実装ルールとしてManifest V2が定義されている。 Tutorial: Migrate to Manifest V2 この方式は拡張機能内のmanifestファイルに記載するバージョン ( "manifest_version": 2 ) を記述すると有効になる。この方式にそっていない拡張機能は新しくインストールできなくなり、すでにインストール済みの拡張機能もChromeのバージョンアップによって実行できなくなる見込み。従って新規に実装する場合はManifest V2にそって実装しないといけないし、既存の拡張機能もバージョンアップしない
content_scripts と background_page でデータをやり取りする [Chrome Extensions を作ってみる：第五回]
Safari Extensions での「スクリプト」と「グローバルページ」でデータをやり取りするように、Chrome Extension でもやり取りが当然できる。しかも Safari Extensions よりも簡単にできる。 ★content_scripts // 変数 msg に "send" を格納 var msg = "send"; // sendRequest で background_page に送信 chrome.extension.sendRequest({action: "chgMsg", text: msg}, function(rcv) { // function(rcv) がコールバックとして受信時に発動 getMsg(rcv); }); // コールバック受信により発動 function getMsg(afterMsg) { alert("after:" +
extension内のパーツやextension間で通信するためのAPI - 心魅 - cocoromi -
extensionには様々なパーツがありますが。 それぞれのパーツ間でメッセージングを行うAPIが用意されています。 Message Passing http://code.google.com/chrome/extensions/messaging.html Communication between extensions and their content scripts works by using message passing. Either side can listen for messages sent from the other end, and respond on the same channel. A message can contain any valid JSON object (null, boolean, number, string, array, o
Google Chrome Extension タブの情報を取得
Google Chrome Extension で、extension をクリックされたときなどに 今開いているタブの情報（ページのURL, タイトルなど）を取得するには chrome.tags.* API を使います http://code.google.com/chrome/extensions/tabs.html 1. manifest.json で permission に tabs を追加します { "name": "My extension", ... "permissions": [ "tabs" ], ... } Samples Filter by API に chrome.tabs を選択する 2. JavaScript で API を使う 2.2 getSelected 全面に出ている（＝選択されている）タブの Tab Object を取得するには chrome.tab
Google Chrome Extensionのチュートリアル - メメメモモ
Tutorial: Getting Started (Hello, World!) - Google Chrome Extensions - Google Code を参考にExtensionを作成しました。 一番分かりやすいチュートリアルなんじゃないかと思います。 チュートリアルでは、manifest.jsonとpopup.htmlのみを作成するシンプルなものになっています。 自分はこれに加えて、「Page Action」「Background Page」「Options Page」のAPIを使用して、簡単なExtensionを作成しました。 その作業の流れのメモです。 最初のmanifest.jsonの設定とポップアップページの作成 Extensionでは、どういったAPIを使い、どのスクリプトをどのタイミングで実行するのか、といった事を設定するファイルがあります。 それがmanife
Chromium拡張作成: crxmake - 枕を欹てて聴く
以前作成したRuby Script Chrome Extension Packaging Script - 枕を欹てて聴く を整理してgemにし, 公開しました. Constellation's crxmake at master - Github http://github.com/Constellation/crxmake/tree/master install gem取得先にgithubを登録していない場合, gem sources -a http://gems.github.com として, sudo gem install zipruby sudo gem install Constellation-crxmake とすることでinstallできます. githubがgem作ってくれなくなったのでgemcutterに移行しました. gem取得先にgemcutterを登録していない
スピードアップに効く！Google Chrome Extension 厳選14本＋1 | シゴタノ！
少し出遅れの感がありますが、2週間ほど実際に使い続けてみて「これなら仕事に役に立つかな」と思えたChrome Extensionをご紹介。いずれも「むしろ仕事の邪魔になるかも」あるいは「意味ないかも」と思えたものは自分でも無効化もしくはアンインストールしたので、「ちょっと便利」程度のものは入っていません。 また、以下の堀さんのエントリーで紹介済みのものも入っていません。 » Mac 版 Chrome で作業を大幅加速！ 必須の 8 個の拡張機能 1．Go Extensions 拡張機能一覧ページ（chrome://extensions/）へのショートカット。 » Extensionをいろいろ試したいなら最初に入れるべきExtension。 2．LinkOpenNewTab クリックしたリンクが異なるドメインの場合は、新規タブで開く。 » 新規タブで開くかと思いきや、表示中のタブに上書きされ
第1回 Chrome ExtensionsのAPI#1 | gihyo.jp
こんにちは、ALBERTの太田です。今回からChrome4のリリースまでの間、Google Chrome Extensionsの詳細を追っていきたいと思います。なおタイトルの通り、この連載は先取り！ Google Chrome Extensionsの続編となっています。 まず、重要なお知らせがあります。前回の特集で何度か使用していたToolstripsとMoleがベータリリースまでに削除されることが決まりました。その代わりとして、今回解説するBrowser Actionsが利用できるようになります（Important: Toolstrips being removed in favor of browser actions）。また、Browser Actionsに合わせて、第3回で解説したPage Actions APIの新バージョンが提案されています。こちらも詳細は追って解説します。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Google Calendar for Todayの紹介と拡張内ページ間通信の実例
Google Chrome Extensions - Google Mail Checker