Help us understand the problem. What is going on with this article?

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

sqrtxx
bitstar
インフルエンサーの広告マッチングサービスBitStarとマーケティングツールInfluencer Power Rankingを開発するベンチャー
https://corp.bitstar.tokyo/
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした