LoginSignup
261

More than 5 years have passed since last update.

Chrome Extension を作って公開する

Last updated at Posted at 2014-01-29

Getting Started: Building a Chrome Extension - Google Chrome を見ながら作った.

流れ

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

どういうものを作るか

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

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

ベースを作る

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

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

ディレクトリ直下に manifest.json を作成する.
Manifest File Format - Google Chrome を参考にして作る.

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 を用意する. これは, 拡張ボタンを押した時に浮き上がってくるやつのこと.

# 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

  1. Extension を zip で固めておく
  2. とりあえず Dashboard
  3. $5 課金
  4. 新しいアイテムを追加から, zip をアップロード
  5. 拡張のスクリーンショットなどを追加し, 公開

Link Maker
sqrtxx/linkmaker

 2014-01-30 0.33.14.png

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

同系統の Extension

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

Copy Fixer

References

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
261