Chrome
chrome-extension

Chrome Extension を作って公開する

More than 1 year has passed since last update.

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