※スマホ対応はしてません。

タグ: Chrome

ブラウザー拡張(アドオン、エクステンション)の作り方チュートリアル。

カテゴリー: JavaScript

思うところあって今後ちゃんと形にしようと思っているんだけど、その前に下書きというか叩き台くらいの感じで一度世に出してみます。

概要

  • すごいかんたん!
  • ビルドシステム類のない牧歌的構成でもいける
  • API互換性はそこそこ。ポリフィル入れてFirefoxに寄せて作るのが吉か
  • Edgeは闇を感じた
  • Safariは未調査

基本的な作り方

  1. フォルダを作る
  2. manifest.json を用意
  3. それに合わせて各種スクリプト等を用意
  4. ブラウザーで開発中のものを読み込み開発
  5. 公開

動く場所

  • ツールバーのボタン
  • 任意のサイト内
  • バックグラウンド
  • 独自ページ

他に開発者ツールにタブを追加したり、Firefoxならサイドバーを作ったりすることもできます。

できること

拡張用のAPIがいっぱいあるのでそれらを駆使する。

もちろん普通のウェブ開発の知見も再利用できるよ。

最新のJavaScriptを書ける

IE対応の必要がない(し、たぶんEdgeも無視されるだろう)ので、Chromeだけ、あるいはChromeとFirefoxだけが対象になります。すると最新のJavaScriptの書き方をがんがん使えます。

class とか async/await とか、関数引数の初期値とか分割代入とか。

そこら辺の勉強を兼ねて挑戦してみるのはきっと良い選択だと思います。

Hello Worldをインストールしてみる

最初のブラウザー拡張を自作するまえに、一度サンプルをインストールしてみましょう。どうせ自作したらやる作業です。

(さらに…)

IE7, IE8, IE9とかのダウンロードページまとめ。

カテゴリー: Web

全国のWeb屋さんは好むと好まざるとに関わらず、IEに対応するためにあれこれ環境を揃えたりしておられると思います。で、実際に環境をを作ろうとしてみたら各種IEのダウンロード先がバラバラでどこからダウンロードしていいかわからない……という経験もあるのではないでしょうか。

なんかもうそういうのが面倒なので、fuckin’ IEシリーズのダウンロード先をまとめておきます。

IE 9はWindows Vista/7専用です。XPでも使いたい方はこちらの記事をどうぞ:

IE以外のブラウザーは、だいたいトップページからダウンロードできます。せっかくなのでリンク張っておきますね。

あとついでなのでIE 10プレビュー版のダウンロード先も載せておきます。なおIE 10はVistaも駄目で、Windows 7専用です。

正式版になったら記事を修正してリストに追加する、かもしれません。

小さな文字は12pxまで!

カテゴリー: CSS

極小フォントによるデザインもあるとは思いますが、一般的なサイトを作る場合は12px以上のサイズにするのが良さそうです。

IE8の問題

IE8には、リンクにカーソルを乗せると文字サイズが変化する、というよくわからない不具合があります。

これってIE8のバグなんじゃね・・・?文字の大きさが勝手に変化するよ?|ぼくんちのTV 別館

この問題の一番嫌なところは、再現性がないところですね。なんかときどきなるんだけど、同じ事やってもならない。なんやねんこいつ。

ちなみに私の環境では、このページで再現しまくりです。

W3C CSS 検証サービス

元のサイズ

勝手に変わったサイズ(「简体中文」に注目)

W3Cの検証サービスをおかしくするとはさすがIE、やりますな。

Chromeの問題

Chromeでは文字サイズは10pxより小さなものを指定できないようです。指定しても10pxにまとめられてしまいます。

(さらに…)