Chrome Extension を作って公開する

[Getting Started: Building a Chrome Extension - Google Chrome](https://developer.chrome.com/extensions/getstarted.html) を見ながら作った.

## 流れ

manifest と ポップアップ時の html を作ってアイコン作って Chrome ストアに上げる.

## どういうものを作るか

**あとで読む Extension**
アイコンを押すと, 現在見ているページが trello のあとで読むリストに追加される.

を作りたかったが, 想定した時間ではできなかったので, とりあえずリンクを Markdown 形式とかで表示する Extension を作った.

## ベースを作る

Extension 管理用ディレクトリを作る.

```bash
mkdir linkmaker
cd linkmaker
# git init から Initial Commit まで
```

ディレクトリ直下に manifest.json を作成する.
[Manifest File Format - Google Chrome](https://developer.chrome.com/extensions/manifest.html#icons) を参考にして作る.

```manifest.json
{
  "manifest_version": 2,
  "name": "Link Maker",
  "version": "1.0",
  "description": "Make link of current tab quickly",
  "browser_action": {
    "default_icon": "icon.png"
  },
  "permissions": [
    "tabs"
  ],
  "icons" : {
    "128": "icon.png"
  }
}
```

icon.png も作成する. 最大で 128 * 128 サイズなので, 500 四方で作っておいた.
ここまでできたら, Chrome の chrome://extensions/ に移動し, 「パッケージ化されていない拡張機能を読み込む」から作業したディレクトリを選択し, インストール. 右上にアイコンが表示されれば OK.

## 現在見ているページを取得する

JavaScript (jQuery) を使う. まず, 土台となる HTML を用意する. これは, 拡張ボタンを押した時に浮き上がってくるやつのこと.

```bash
# JavaScript のライブラリは js/lib に入れる.
mkdir -p js/lib
# jQuery 2.1.0 圧縮版 をとりあえず落としておく
wget -O js/lib/jquery.min.js http://code.jquery.com/jquery-2.1.0.min.js
```

popup.html を作る

```popup.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Link Maker</title>
    <link rel="stylesheet" href="css/popup.css" type="text/css">
  </head>
  <body>
    <p id="title"></p>
    <p id="url"></p>
    <!-- Load JavaScript-->
    <script src="js/lib/jquery.min.js"></script>
    <script src="js/popup.js"></script>
  </body>
</html>
```

CSS (popup.css) も用意しておく.

```css/popup.css
body {
    width: 400px;
    margin: 0px;
    background-color: #fff;
    min-width: 357px;
    overflow-x: hidden;
    font-family: "Helvetica Neue",Helvetica,"Hiragino Kaku Gothic Pro","Lucida Grande",Verdana,Arial,Meiryo,"メイリオ",sans-serif;
}

img {
    margin: 5px;
    border: 2px solid black;
    vertical-align: middle;
    width: 75px;
    height: 75px;
}
```

JavaScript ファイルを作る.

```js/popup.js
$(function () {
    chrome.tabs.getSelected(null, function(tab) {
        $('#title').text(tab.title);
        $('#url').text(tab.url);
    });
});
```

最後に, manifest の default_popup に popup.html を指定しておく.

```manifest.json
{
  "manifest_version": 2,
  "name": "Link Maker",
  "version": "1.0",
  "description": "Make link of current tab quickly",
  "browser_action": {
    "default_popup": "popup.html",
    "default_icon": "icon.png"
  },
  "permissions": [
    "tabs"
  ],
  "icons" : {
    "128": "icon.png"
  }
}
```

## ここまでのディレクトリ構造

- linkmaker
    - manifest.json
    - popup.html
    - css
        - popup.css
    - js
        - popup.js
        - lib
            - jquery.min.js
    - icon.png

これで, 拡張機能ページからリロードすると,
現在見ているページのタイトル, URL を表示するはず.

## 公開する

Bootstrap とか使ったりして, 見た目をある程度整えたら公開する.
公開する前に, 登録料として $5 払う必要がある.
手順は以下を参考にした.

[Publishing Your App - Chrome Web Store — Google Developers](https://developers.google.com/chrome/web-store/docs/publish)

1. Extension を zip で固めておく
- とりあえず [Dashboard](https://chrome.google.com/webstore/developer/dashboard) へ
- ``$5`` 課金
- 新しいアイテムを追加から, zip をアップロード
- 拡張のスクリーンショットなどを追加し, 公開

[Link Maker](https://chrome.google.com/webstore/detail/link-maker/ifflbbedjddjmfkcpjflbjbngojooojc)
[sqrtxx/linkmaker](https://github.com/sqrtxx/linkmaker)

![ 2014-01-30 0.33.14.png](https://qiita-image-store.s3.amazonaws.com/0/29618/6aa6bbd7-848c-5541-70f3-0bb7081bdd74.png)

できてよかった, よかったですね.

### 同系統の Extension

あまり調べてないが, Copy Fixer を愛用している.

[Copy Fixer](https://chrome.google.com/webstore/detail/copy-fixer/gkpoieconkiifjafemnnohlegmfpipaa)

## References

- [Getting Started: Building a Chrome Extension - Google Chrome](https://developer.chrome.com/extensions/getstarted.html)
- [Qiitaの通知を表示できるChrome拡張を作った - Qiita [キータ]](http://qiita.com/yuku_t/items/cc30710256da2427c974)
- [Publishing Your App - Chrome Web Store — Google Developers](https://developers.google.com/chrome/web-store/docs/publish)