Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

updated at

Chrome Extension を作って公開する

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_version": 2,
  "name": "Link Maker",
  "version": "1.0",
  "description": "Make link of current tab quickly",
  "browser_action": {
    "default_icon": "icon.png"
  "permissions": [
  "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 を作る

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

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 ファイルを作る.

$(function () {
    chrome.tabs.getSelected(null, function(tab) {

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

  "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": [
  "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

 2014-01-30 0.33.14.png

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

同系統の Extension

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

Copy Fixer


Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
Help us understand the problem. What are the problem?