More than 5 years have passed since last update.

Chrome Extension を作って公開する

Last updated at 2017-07-27Posted 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"
  }
}