Chrome拡張「Toggle Design Mode」をリリースしました

Chrome 拡張ってまだ書いたことなかったんですが、なんか無駄にやる気が出てしまったので、リリースまでこぎつけました。開発者登録で 5 ドル持っていかれましたが、これで僕も Chrome 拡張開発者です！

超単機能なので堂々とリリースしたなんていうほどもんでも無いんですが、せっかくなのでブログにも書いておきます。

公開したもの

Chrome のデベロッパーツール開いてdocument.designMode="on"ってやったら文字編集できるんですが、わざわざデベロッパーツール開いて〜とかやるのめんどいじゃないですか。いや僕はめんどくないんですが、めんどい人あるいはそんな機能を知らない人もいるわけです。

なので、それをやるため「だけ」の拡張を作りました。

なおリポジトリはこちら。

PR、issues はご自由にどうぞ。

RSS を読んでいたら¹、document.designMode="on"ってあったなーってことを思い出しまして（この記事読むまで完全に忘れていた）。

普段僕がこういうことをやるときって、普通に HTML いじっちゃうんですが、document.designMode使えばもっとカジュアルにできるわけです。

特に、非エンジニア向けとして。

前にもブログで触れてますが、今僕は WEB メディアの開発運用をしていて、一応文字数のレギュレーションも決まってるんですよね。なので普通はそれに則ってやればいいわけなんですが、xx の文字が増えた時にどう見えるか知りたい！みたいなニーズはまぁちょこちょこありました。

その時の選択肢としては、

このいずれかでやってたんですが、document.designModeを使えばもっとスムーズに出来るんじゃないかなーと思って、拡張を作り始めました。

とりあえず書いてみるでもいいじゃんって思われる方いるかもしれません。まぁごもっともなんですが、Gridsome を AWS Amplify でホストしていて、ビルドが 5 分くらいかかっちゃうんですよね。なのでビルド待ちが発生しちゃって、時間が無駄に過ぎがちです。

冒頭でも述べたとおり、僕は Chrome 拡張書いたことなかったので、ガッツリと先人の知恵を~~パクって~~参考にしました。Chrome 拡張の書き方自体は Qiita にいっぱい転がっていたのでそれを参考にしつつ、コアの処理系に関しては以下の記事を参考にしています。

やりたいことまんま見つかったので、これを使って実装した感じですね。よく言えばマッシュアップ。

最終成果物としては、前者の記事に追加して、document.designMode="off"の処理を組み込んだ感じになってます。ループでぶん回してるので処理効率は良くないですが、まぁパフォーマンスに影響するほどの要素数は基本的にはないでしょう（きっと）。

すいません、ないです:(

bugfix 以外でアップデート入れることはないと思いますね…単機能ですし。document.designModeが無くなった、あるいは API が変わったとかなるまで、このまま生き続けると思います。

あとは当初の目的どおり、社内にばら撒くタスクを残すのみです:)

ノリと勢いだけで作った拡張でしたが、無事に公開までいけてよかったです。仕組み上結構広めの権限をつけざるを得なかったので、公開されるまでソワソワしてましたが、土日挟んで 4 日くらいで審査通ったと思います。

作り終わった直後のツイート。

気づいたら公開されてた時のツイート。