技術/Chrome/Chrome Extension の勉強メモ(copy_tab_urls) (v1)

• [ Prev ]
• [ Next ]
• [ 技術 ]

前から作ってみたい簡単なChrome拡張のアイデアがあったので、Chrome拡張作るのの勉強に、作ってみた時のメモ。

やりたかったこと：

そのウィンドウで開いてるタブの、タイトルとURLを、あるフォーマットにしたがって一覧化したい。
技術系のblog書いてる時とかに、参考URLのリストを、開いてるタブから集約したい時に使う。

chrome.tabs.query()で現在ウインドウのタブの一覧を取り出せる：

• chrome.tabs - Google Chrome
  • https://developer.chrome.com/extensions/tabs#method-query

また、フォーマットはカスタマイズ出来るようにしたい。
→インストール時に初期化して、オプションページで保存したり、デフォルトに戻したりしたい。
→localStorage + backgroundのeventpageで実現できた。

ソース：
https://github.com/msakamoto-sf/copy_tab_urls

Chromeストア：
https://chrome.google.com/webstore/detail/copy-tab-urls/dpddcgncoldfnleboobgkogkjnbdofce

以下、参考URL

入門系：

• Chrome Extension を作って公開する - Qiita
  • http://qiita.com/sqrtxx/items/19fd2114430e9e1fb57f
• Google Chrome拡張の作り方（その1：マニフェストファイル作成とパッケージ化）: 小粋空間
  • http://www.koikikukan.com/archives/2014/06/03-012345.php
• Google Chrome拡張の作り方（その2：browser_actionを使ったアイコン表示）: 小粋空間
  • http://www.koikikukan.com/archives/2014/06/05-015555.php
• Google Chrome拡張の作り方（その3：ポップアップ表示とバックグラウンドスクリプトとの連携）: 小粋空間
  • http://www.koikikukan.com/archives/2014/06/12-025555.php
• Google Chrome拡張の作り方（その4：オプション画面と保存データのバックグラウンド・ポップアップとの連携）: 小粋空間
  • http://www.koikikukan.com/archives/2014/06/19-005555.php
• Getting Started: Building a Chrome Extension - Google Chrome
  • https://developer.chrome.com/extensions/getstarted

manifest.json:

• Manifest File Format - Google Chrome
  • https://developer.chrome.com/extensions/manifest#icons

デバッグ方法：

• Tutorial: Debugging - Google Chrome
  • https://developer.chrome.com/extensions/tut_debugging
• chromeの拡張機能をデバッグする際のメモ - うぇっぶぷろぐらまーになりたい日記
  • http://d.hatena.ne.jp/ganr/20120316/1331887322

拡張のサンプル沢山：

• Sample Extensions - Google Chrome
  • https://developer.chrome.com/extensions/samples

設定をlocalStorageに保存：

• localStorageをつかってエクステンションの設定を管理する - 心魅 - cocoromi -
  • http://umezo.hatenablog.jp/entry/20091115/1258291572
• Google Chrome extension上で、localStorageの中身がundefined - QA@IT
  • http://qa.atmarkit.co.jp/q/3031

インストールやアップデートされた時に何かしたい（イベント）：

• Event Pages - Google Chrome
  • https://developer.chrome.com/extensions/event_pages
    • 以前はbackgroundページとなってたのが、イベントページという概念にアップデートされたっぽい。アクセスAPIも変わってる。
• chrome.runtime - Google Chrome
  • https://developer.chrome.com/extensions/runtime#event-onInstalled
• Detect Chrome extension first run / update - Stack Overflow
  • http://stackoverflow.com/questions/2399389/detect-chrome-extension-first-run-update

公開への流れ：

• Publishing Your App - Google Chrome
  • https://developer.chrome.com/webstore/publish

• [ Prev ]
• [ Next ]
• [ 技術 ]