JSとCSSをサクッと書いて、特定のURLで動かして、他人に共有したい
そういうツールが欲しいので、作る
自分が使っててもちょっとペインがある
エディタがややレガシー。MonacoEditorとか使ってリッチな補完の恩恵とか受けたい
CSS書きづらい。JSにベタ書きしてstyleタグをappendChildしてる
やりたいことは大抵DOM操作なんだけど、いい感じのクエリセレクタ書くのだるい。DevToolsあるからなんとかなってるが
人に配りたいなって思うときが稀にあるけど、相手がTampermonkeyの使い手じゃないとハードル高い
エンジニアが書いたコードをノンエンジニアに渡してサクッと動かせたら嬉しい
社内ツールのプロトタイプとかはもはやそれでいいんじゃないかとすら思う(言い過ぎ)
未踏ジュニアの提案書読んでて、「それChrome拡張でサクッと作れるよな…」という課題に対して最初から大仰な設計で挑もうとしてる方が毎年いる
Chrome拡張を自分で作ったことないと、何が出来るのかよく分からないんだと思う
Tampermonkeyとか紹介したいけど、初期UIが英語だったりして、なんか人に勧めづらい
そういう訳で、自分が考える一番シンプルでスマートなTampermonkeyぽいやつを作ってみようかと思っている
思いつき
designModeをONにする機能を付けたら、まずはそれだけでノンエンジニアにインストールして貰えるのではなかろうか? DevToolsでDOMテキストいじってスクショ撮って人に見せる、みたいなシチュエーションはエンジニアだとよくある
DevToolsの使い方が分からない人は、それが出来ることすら知らないので、便利なChrome拡張に見えると思う
他人と共有するシチュエーション
コードの作者(teramoto@notainc.comとか)さえ分かってれば良い?
個人ユーザーは「gistで共有」で十分な気がする
gist.github.comにインストールボタン出しちゃうとかね
ものすごいシャドーITなので世の中のコーポレートIT部門の人たちからは目の上のたんこぶと思われそうだけど Google Workspaceとか使ってる世界観で、@notainc.comみたいなアカウント持ってる人たちだけに全共有する
@notainc.comの人たちには誰がどんなコードをインストールして最後にいつ実行したかまで全部分かるとかにすればむしろ透明性が高まってイイかも知れない
でも環境変数とかを別途共有する方法はいるなぁ、1Password連携とか…?
そういえば実際Tampermonkey使ってて環境変数書いたこと無いなぁ
ブラウザのCookieで十分だからかも
GitHub Appsにして、リポジトリの作成、配布、インストールまで面倒見てあげるパターン
Organizationsにこれ用のリポジトリを1個立てて、そこにソースコードまとめて入れれば良い
ソースコード読めるのはリポジトリの閲覧権限持ってる人だけ。巨人の方に乗る
分かってきた
これは、Chrome拡張作れない、作るまでもない人たちに向けた、Chrome拡張っぽいもの簡単に作ってシェアできるツール
Chrome Web Storeの中に、さらにプラットフォームがある。アプリでいうスーパーアプリみたいな位置づけ
そう考えると、この拡張が流行ったら、もっと別の用途が生まれるかも知れない?
分からん、とりあえず開発者向けに絞って考えている
CSSどうやって読み込ませよう
CSSにも// ==UserScript==を書く?
CSSのコメントは/* */なのでURLマッチと相性が悪い
JSに// @css index.cssって書く?
良さそうだけど、ファイルパスで指定するのどうなんだろう
JSとセットでCSSを書くことにしよう
index.jsとindex.cssがペアで存在しているイメージ
メタ情報はJS側にだけ書く
良さそう
CSSはHMR出来るんじゃないか?
TampermonkeyのunsafeWindow必要か?
デフォルトでOKで良さそうな気がする
一旦対応しないでやってみる
名前の案
チームのための