Zenn
🙉

ユーザースクリプトで遊んでみたい

2024/12/18に公開
JavaScript
userscript
tech

対象読者

  • ユーザースクリプト始めてみたいけどなんか怖そうだと思ってる人
  • 俺だけの最強カスタムマクロを作りたい人

非対象読者

  • JavaScript (TypeScript) の書き方がわからない人

入れたもの

やったこと

Node.jsのインストール

wingetでおk

念の為winget show nodejsで確認したのち、問題なさそうであればwinget add nodejsでインストールする。
怪しげな名前のインストールスクリプトが管理者権限を求めてくるが、インストール元的に問題なく、そもそも信用する他ないので通す。

Powershellのセキュリティポリシー設定

参考: PowerShell のスクリプトが実行できない場合の対処方法 #Windows - Qiita

Node.jsを初めて入れたため、Powershellのセキュリティポリシーに引っかかりnpm -vが実行できなかった。
上記サイトを参考にセキュリティポリシーをSet-ExecutionPolicy RemoteSignedで変更することにより実行可能になる。

RemoteSignedは任意のローカル上の非署名なスクリプトを実行できてしまうが、Linuxなどでやってきたことと大差はない。
開発者になるのであれば、この辺りの怪しいスクリプトを見抜ける人でないと厳しい、ということなのだろう。
というより署名されていることのほうが少なさそう。この辺は要調査。

テンプレート作成

npm create <template-name>と入力すると、npmjs.comで公開されているcreate-<template-name>の形のスクリプトが実行され、いい感じのプロジェクトテンプレートが作成される。
今回はcreate-monkeyを使用。viteを使用していい感じの開発環境を構築できるらしい。

PS C:\Users\--\Develop> npm create monkey
Need to install the following packages:
create-monkey@1.37.0
Ok to proceed? (y) y


> npx
> create-monkey

√ Project name: ... <Project name>
√ Select a framework: » Vue
√ Select a variant: » TypeScript

Scaffolding project in C:\Users\--\Develop\<Project name>...

Done. Now run:

  cd <Project name>
  npm install
  npm run dev

動作確認

npmパッケージをインストールし、開発環境を起動する。
npm run devで自動的にviteコマンドが実行され、開発環境が起動される。

PS C:\Users\--\Develop\<Project name>> npm install

PS C:\Users\--\Develop\<Project name>> npm run dev

> <Project name>@0.0.0 dev
> vite


  VITE v5.4.0  ready in 1228 ms

  ➜  Local:   http://127.0.0.1:5173/
  ➜  press h + enter to show help

google.comを開き、画面の右側に変な領域が展開されていることを確認する。
テンプレート通りにやっているだけなため、使用しているライブラリーが更新されて互換性が切れるなどしない限り、ここまではスムーズに進行できるだろう。

また、vite.config.ts内で、https://www.google.com/でのみ実行されることが定義されていることを確認できる。
だからgoogle.comで確認する必要があったんですね。
実際に他のサイトへスクリプトを埋め込む場合は、この項目を編集することで許可設定ができる。

コンポーネントをサイトへ埋め込む

Vueコンポーネントの作り方はに関しては、探せばいくらでも出てくるので、調べていい感じにボタンを作るべし。
(というよりは、やりたいことによって参考になることが変わるため、それは各々頑張って調べたほうが速い)

どのスクリプトでも共通している問題は、実際にサイトへ埋め込む部分だろう。
Vueは大体body直下のdivをルートにして、でっかいアプリケーションを1個構築するといった使用方法が多い(要出典)が、今回行うのは「既存のサイト」に「1つもしくは複数のアプリケーションを埋め込む」といった方式であり、少々トリッキーな手法が必要となる。

とはいえ、HTML的におかしなHackをするわけではなく、正攻法の範疇ではある。
基本的にやることとしては以下のようになる

  1. document.createElement('div')でVueアプリケーション配置用のElementを作成する
  2. insertBefore()などで1.で作ったElementを入れたい場所へ挿入する
  3. createApp().mount()でVueアプリケーションをマウントする

コードだと次のような雰囲気だろうか

const targetDOM = document.querySelector('.hoge')

const appRoot = document.createElement('div')
targetDOM.parentNode?.insertBefore(appRoot, targetDOM.nextElementSibling)

const app = createApp(HogeButton)
app.mount(appRoot)

テンプレートが作成してくれているmain.tsを参考に、ボタンを挿入したいサイトに合わせて柔軟に行う必要があるだろう。

スクリプトを公開してみる

せっかく作ったなら、公開もしてみよう。
この手の公開サービスはいくつかあるようだが、今回はGreasyForkというサイトを使ってみる。

スクリプト投稿にアカウントが必要なことは言わずもがなだが、Google, GitLab, GitHubアカウントなどでもログインできる模様。アカウント管理が面倒だしGitHubアカウントで登録するのがよさそうだと思った。

ログインが完了したら、右上のアカウント名をクリックして出てきたメニューから「スクリプトを投稿する」を選択、出てきたページの「コード」と書いてある欄に、本番用のコードを書いて投稿する。

公開に必要な情報を設定する

と、その前に、本番用のコードを出力する出力があるが、そのためにいくつか情報を設定する必要がある。
テンプレート通りプロジェクトを作成した場合、プロジェクトのルートフォルダにあるvite.config.tsというファイルで設定できる。

必要な項目

  • name
  • description
    • 言語ごとに内容を変えることができるが、ja等のつかないデフォルト用(空 "")のdescriptionが必要らしい
  • match
    • 動作確認が済んでいるのであれば、すでに設定済みのはず
  • version
    • バージョンアップが判別できるなら数字はなんでも良い
  • namespace
    • 一意に定まりそうならなんでも良い。ユーザー名とかを入れておくといいだろう
  • license
    • MITなど、お好みの形式で

実際に本番コードを投稿する

必要な情報を設定したら、コンソール上でnpm run buildと実行することでdistディレクトリーへ投稿するようにまとめられたコードが出力される。
このファイルの中身をコピーして、先程の投稿画面にペーストする。
「スクリプトを投稿」を押せば投稿完了。つよつよプログラマーへ向けたさらなる歩みを1歩進めることに成功した。

1度投稿した後は、Webhookを使ってGitHubなどの管理と連携できるらしい。
この辺りはまたの機会に調べるとする。

ハマったこと (未解明)

window.close()ができない状況がある

不明。MutationObserverのコールバック内では使えない？
setTimedOut()などを挟むと閉じれるようになるっぽい。
どのみちディレイを入れないと都合が悪かったので、合わせて解決とした。

instanceofでチェックできない状況がある

意味不明。
実装されている関数の呼び出しはできるため、hoge.toString() === RadioNodeList.prototype.toString()のような形で回避した。

console.dirなどで調査してみたが「window.close()ができない状況がある」の現象と似ている。MutationObserverのコールバック内ではインスタンス回りがちゃんと動かないのだろうか？

Discussion