タグ別アーカイブ: chrome

私のLaunchpadは野性的です(草ボーボー管理してないってこと

Adobeの謎のフォルダやGoogle日本語入力に付随する何かが入っていてほっとき放題。

一番嫌だったなぞのブラウザリンクのアイコンだけやっと消したのでメモメモ。

[Mac]Launchpadへ勝手に表示されるChromeのリンクアイコンの消し方 | オレっち.com

[Mac]Launchpadへ勝手に表示されるChromeのリンクアイコンの消し方

【memo】今週のおバグさんとか

ホバー時にgifアニに切り替えるとChromeで止まる

Gif画像のリロード問題 – Qiita
https://qiita.com/RuriKameoka/items/dfc2ef45a85221ccc4b1

ロールオーバーで画像切り替え レスポンシブイメージ編 – Qiita
https://qiita.com/hibikikudo/items/95376b5134023811a9c1

忘れがちなやつ

max-widthのリセットはautoではなくinitialを使う – Qiita
https://qiita.com/volkuwabara/items/90654ed6bb81c2b8cdaf

Google が提供する日本語 Web フォント – Qiita
https://qiita.com/shotets/items/502f8093d53369eaab50

forループの中でsetTimeoutしたらiはどうなるか – console.lealog();

Chrome Extension を作ってみた

ずっと前にシンプルに口が臭い…じゃなくて
シンプルにURLコピペ出来るエクステンション探してて、なくて、つくればいいじゃん!って言われて、つくりました。
開発者モードでローカルで持ってるファイルを登録して使ってたんだけど、
どうせなら公開してみっか、ということで軽いノリで公開してみました。

だが、まぁ、公開にあたってちょっとわからん項目が多いこと多いこと。
そしてスクショとかの用意にも時間がかかり、夕飯食べ終わってからずっとやってたですよ。
4時間。。。(アホ

そしてアナリティクス仕込めると書いてたけどわしJSしか用意してないよママン。。。
けいそくとれたらいいね!表示されないから多分無理な気がするけど!

参考:
Chrome Extension を作って公開する – Qiita
http://qiita.com/sqrtxx/items/19fd2114430e9e1fb57f

ただタイトルとURLをコピーするだけのエクステンション、公開しました!

Just Copy URL – Chrome ウェブストア
https://chrome.google.com/webstore/detail/just-copy-url/pdbikiamkjijdamfmbmnladmjfjhjmgn

Chromeの拡張でもつくるか。のメモ

基礎の基礎

基本必要なのは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の8月更新でのDevToolsのEmulationパネル変更がワタシ的に残念な件

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]ボタンを押してブラウザ全画面状態に戻す。その後、サイトを更新しないようにひっそりと暮らす
・値を変えながらエミュレートを繰り返すとバグったので、その場合は新しいタブを作ってひっそりと一からやり直す

という感じです。

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

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

ではでは。

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

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

Firefox から Chromeに移行するときに

こまったこと

アドオンがない

↓丁寧にFirefoxのコレの昨日はChromeではコレにあるよ!とアドオン紹介してくれている
■Webデザイナーに必須のGoogle Chromeの拡張機能
http://www.coolwebwindow.com/weblife_column/work/000286.php

■ページキャプチャはこっちのほうがいいかも
Awesome Screenshot
https://chrome.google.com/webstore/detail/alelhddbbhepgpmgidjdcjakblofbmce?hl=ja