基礎の基礎

基本必要なのはmanifest.jsonというjsonファイル。
Chromeさんご用意のサンプルとかから記述をまなんでさっくり作れる。
アイコンとかも必要に応じて自分が作ったフォルダ内に突っ込めば読み込んでくれる。
公開するには$5かかるらしいので、ローカルで試して終了☆

Chromeさんのサンプル集はこちらから検索！
Sample Extensions – Google Chrome
https://developer.chrome.com/extensions/samples

参考URL

↓なんかいっぱい説明してくれているありがたいサイト。

ブラウザアクション | Chrome Extensions API リファレンス : http://dev.screw-axis.com/doc/chrome_extensions/guide/browser_action/

↓上記を見る前に見たサイト。
特定サイトだけで動く拡張なら下記ですぐできちゃう。

jQuery を使って 30 分で Chrome 拡張を作ってみた (フェンリル | デベロッパーズブログ) :
http://blog.fenrir-inc.com/jp/2012/09/jquery-chrome-extension.html

↓clipboardについての注意書き

chrome-extension – Chrome Extension で content_scripts から clipboard を使う – Qiita : http://qiita.com/ororog/items/146b7cdac85a48690c1e

↓ホントはこういうの先に見てからやるもんだと思う

独自のブラウザー拡張機能を作成する: 第 1 回、Chrome を拡張する : http://www.ibm.com/developerworks/jp/opensource/library/os-extendchrome/

↓自分の環境の拡張の一覧はここ

とりあえずはクリップボードにアイコンワンクリックでURLコピーしたいんだけど、
まだアイコンとアラートが出ただけで感動しているところ。（アホみたいやけど）
アンダーバー使うな使うな言われて全然動かんかったけど、バックアップ用に_script.jsとか置いてたのがじゃまだっただけみたい。

続きはまたアイドルタイムに！！！

再開。

色々見てたら（全然見てないけど）現在アクティブなtabの内容は簡単に取れるらしい・

var text = tab.title + tab.url;

そのものずばりなサンプル
http://www.pakzilla.com/2012/03/20/how-to-copy-to-clipboard-in-chrome-extension/

demoのままだと改行が入んないからなんでだろ？とおもったらdivでむりくり編集可能にしているからだった。textareaに変更したらばっちすできました！

出来上がったファイル

↓出来上がったソースがこちら↓
■manifest.json

{
  "browser_action": {
    "default_icon": "logo.png",
    "default_title": "**********"
  },
  "name": "**********",
  "version": "0.0.1",
  "manifest_version": 2,
  "description": "ページのURLとtitleをブログに貼り付けやすいようにクリップボードにコピーする",
  "permissions": [
   "activeTab"
  ],
 "background": {
   "scripts": ["copy.js"],
    "persistent": false
  }
}

■copy.js

// Called when the user clicks on the browser action.
chrome.browserAction.onClicked.addListener(function(tab) {
	// No tabs or host permissions needed!
	var text = tab.title +'\r\n'+ tab.url;


	var copyArea = document.createElement('textarea');
	// copyArea.contentEditable = true;
	document.body.appendChild(copyArea);
	copyArea.innerHTML = text;
	// copyArea.unselectable = "off";
	copyArea.focus();
	document.execCommand('SelectAll');
	document.execCommand("Copy", false, null);
	document.body.removeChild(copyArea);
});

Chromeちゃん、、、emulation画面の項目変更ありがとう、、でもこれ、、、
＿人人 人人人人人＿
＞　使いづらいよ！　＜
￣Y^Y^Y^Y^Y^Y^Y ￣

ちょろめさんの8/26らへんの更新で開発者ツール（デベロッパーツール、DevTools）のなかみも若干変わった模様。
変わったパネルの内容は下記のサイトでまとめてくださっているとおり。

【テーマカスタマイズ】モバイル表示を簡単に確認！Google Chromeのデベロッパーツールの標準機能で出来ちゃうよ！ | Taka’s Life :
http://takaslife.com/2014/08/28/chrome-mobile-view/

なるほど確かにツールバーにアイコンが増えて直接使えるようになったので恩恵を受ける方もおおいのだろうなー。

でもこれ、、、わたしには、、、
＿人人 人人人人人＿
＞　使いづらいよ！　＜
￣Y^Y^Y^Y^Y^Y^Y ￣

理由は

今までは例えば端末名のプルダウンでiPhone5を選ぶと、
UAと表示領域の変更をバラバラに設定できていたけど、
それが一緒になっちゃった模様だから！

旧画面の使い方は下記記事でまとめてくださっている
Chromeデベロッパーツールのモバイル向けデバッグ機能について | infoScoop開発者ブログ : http://www.infoscoop.org/blogjp/2014/06/20/chrome-devtools-mobile-debug/

それによって
・viewportでcontent=”width=640″っつって指定してあるけど画面の大きさは320px〜♪って基準で表示してくれる

・DevicePixelRatioの項目があるけど、値を変更してもなんもない

・「iPhone5の画角はポートレートはコレな！ランドスケープはコレな！」となって期待した表示にならない場合の調整が面倒

・画面のエミュレートがちゃんとできていない状態が見受けられる

＿人人 人人人人人＿
＞　め ん ど い ！　＜
￣Y^Y^Y^Y^Y^Y^Y ￣

今までどおり、UAだけ偽装させてよ。。
下手なエミュレートは携帯全盛期にうんざりするほど見てきたからそっちの機能拡張にははじめから希望持っていないよ。。。
画角なんてブラウザ枠持って自分で変えるよ。。。

＿人人 人人人人人＿
＞　　対　策 ！　　＜
￣Y^Y^Y^Y^Y^Y^Y ￣
いまのところ、640px基準のサイトを見るには
・エミュレートパネルのresolutionを640px*1136pxにかえて端末名を変えないようにひっそりと暮らす
・エミュレートさせてみて変なことになっていたらエミュレートパネルの[reset]ボタンを押してブラウザ全画面状態に戻す。その後、サイトを更新しないようにひっそりと暮らす
・値を変えながらエミュレートを繰り返すとバグったので、その場合は新しいタブを作ってひっそりと一からやり直す

という感じです。

以上、壊れるほど愛しても３分の１も伝わらないマイホォァ〜〜を記事にしたためてみました。
どなたがいい方法ありませんかね(ヽ´ω`)

英語だったらいい文献が落ちているのでしょうが、情熱と冷静の間で…（めんどい）。
ツイッターで「Chrome ツール」で検索した限りは「ボタンが置かれて便利になった」って意見も多いなー。まだまだツイート自体が少ないけど。

ではでは。

[2014.09.10 追記]
スマホサイトのpjaxの検証したら挙動がおかしい。。。
前の時は大丈夫だったのに。。。なんなん。。。もう。。。
[//2014.09.10 追記]

[2014.09.11 追記]
わかった。端末指定せずに解像度（resolution）指定して
Emulate Mobileにチェックが入った状態で保存すればいいのか。
なぞがとけた！pjaxのバグもなんか直ったわーい。
[2014.09.11 追記]