[Chrome extension] 高速勉強 #1「Browser Action」

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

会社でも仕事でも友達でも、僕の知ってる人殆どがPCではGoogleChromeを使ってるが、これはすでにスタンダードと言ってもいいのではないか??

そして、以前も軽くブログを書いたChrome Extensionについて、最近仕事でも必要になったので、詳しく調査して、且つ基本をもう一回おさらいすべく、dotinstallをナメておいたので備忘録をメモしておくことにした。

以前記事

Chrome Extension を作る

はじめの一歩

参考ページ

#01 Google Chrome拡張機能とはなにか?

公式サイト

http://developer.chrome.com/extensions/index.html

知識

Javascript

ツール

Chromeブラウザ
Text Editor

用語

Browser Action(ツールバーに常駐)
Page Action(特定のページで起動する)
Contents Scripts(特定のページで自動実行)
Context Menu(右クリックメニュー)

Browser Action

#02 Browser Actionを作ろう (1)
#03 Browser Actionを作ろう (2)
#04 拡張機能を読み込んでみよう

必要になるファイル

icon 19×19
manufest.json(メタ情報)
popup.html

1、事前準備

「ex1」フォルダを作成

2、参考ページ

browser-action
manifest

3、manufest.jsonの作成

4、popup.htmlの作成

5、各種確認

・Chromeブラウザの拡張機能へ移動
スクリーンショット 2016-09-01 23.48.35

・ディベロッパーモードにチェック
スクリーンショット 2016-09-01 23.52.01

・「パッケージ化されていない拡張機能を読み込む」ボタンを押し、「ex1」フォルダを選択
スクリーンショット 2016-09-01 23.54.16

・アイコンの表示確認
スクリーンショット 2016-09-01 23.55.10

・クリックすると「popup.html」が表示されることを確認
スクリーンショット 2016-09-01 23.56.14

第一歩の歩み

Chrome extensionはJavaScriptが使えれば比較的簡単に構築でき、開発環境もさほどスペックを問われないという事なので、
よく使われるツールを作れば、「神」になれる日もありえるのでは???
手なこと考えながら、いかに仕事で楽するかツールを考えるのであった。

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です