2024/11/04 フォームやり直し拡張機能を一般化する
Googleフォームで過去に送信した回答を確認できるようにするChrome拡張機能
2024/11/04 Microsoft Formsの回答復元スクリプト
この2つを同一のインターフェースで実装し、まとめることはできるだろうか?
まとめることは適切なのか?
回答結果ページで、点数と答えを記録しておき、コンテキストメニューからいつでも呼び出せるほうが嬉しいかもしれない
呼び出しのイメージは、Git stashをpopするようなイメージ
TypeScriptを使って書くことにする
可能であればTypesafeなDOMパーサを作りたいかも...
zodでオブジェクトの型を定義してparseするように、DOM構造を事前に定義して、それをparseする
Google Formsについて
questionIdとresponseIdを紐づけるためにFB_PUBLIC_LOAD_DATA_のparseが必要
このためにzodで型を定義しておきたい
Bundlerにはesbuildかrollupを使う
rollupの方はカスタムした経験があるから問題が起こっても解消しやすいかも...
publishの方法
manifest.jsonはdist/manifest.jsonとし、Gitの管理下に置いておく
GitHub Actions
mainブランチに対するマージをトリガーとする
1. rollupでビルドを行う
作成したファイルはdist/bundleディレクトリに置いておく
gitignoreでdist/bundle/*はGitで管理しないようにする
2. GitHub Releasesを作成する
https://github.com/softprops/action-gh-release
filesプロパティはglobなので、dist/*を指定する
とりあえずrollupの設定は完了した
https://github.com/coolwind0202/gform_retry/pull/4
次はzodで型定義?
バリデーションライブラリは正直何でも良いと思う。。
できた
構造がよくわかっていないものはz.unknown型にしておくと安全性が高い
code:example.ts
const responseValues = new Map<string, string[]>();
const addResponseValue = (questionId, value) => {
// initialize value
if (responseValues.get(questionId) == undefined) responseValues.set(questionId, []);
responseValuesquestionId.push(value);
}
for (const entry of document.querySelectorAll("inputname^=entry.")) {
const questionIdMatch = entry.name.match(/entry\.(\d+)/);
if (!questionIdMatch) return;
const questionId = questionIdMatch1;
if (!entry.disabled) addResponseValue(questionId, entry.value);
};
console.log(responseValues);
必要なデータのみを抜き出したい
inputの直前の要素であって、子孫にaria-labelが正解であるdivを持つようなinputを抽出する
code:extract.js
document.querySelectorAll("div:has(+ inputname='entry.1498083974'):has( divaria-label=正解) + input")
code:extract.js
document.querySelectorAll("div:has(+ inputname^='entry.':not(name$=sentinel)):has( divaria-label=正解) + input")
もうGoogle フォーム特有の機能(事前入力)はだいたい完成だ
Mergeした
https://github.com/coolwind0202/gform_retry/pull/8
Microsoft Forms用のコードをsrc/microsoft_forms以下に配置できるように準備した
疲れたのでまたしばらく寝かす😑
chrome.tabsとかpostMessageを上手く使って、事前入力機能を使わずにやり直しを実現するのが次の目標になる
1. Retryを押すとServiceWorkerにメッセージを送って起動させる
2. ServiceWorkerでタブを作って、Response情報を新規タブにpostMessageで送る
https://developer.chrome.com/docs/extensions/reference/api/tabs?hl=ja#messaging
3. 新規タブのContent Scriptは、受け取った情報を元に回答を復元する
これが場合によっては面倒になりそう。
2024/11/04 Microsoft Formsの回答復元スクリプトでもそうだったが、画面遷移するごとに都度、復元スクリプトを実行しなければならない