OneTabからもっと簡単にエクスポート

お忙しいとは思うのだが、今(v2.14)のところまだOneTabのバックアップ機能が実装されないので、簡単にエクスポートする方法をClaudeに聞いてみた。拡張機能が表示しているページをClaudeに伝えるのはやや面倒で、ディベロッパーツールを表示してダイナミックに改変されたソースをコピーした上でhtmlとして保存し、さらに加工する必要がありました。

当初は以前同様にブックマークレットでの簡易出力を目指していたのですよ。しかし、やり取りしているうちにどうやらOneTab拡張機能のContent Security Policy (CSP)がブックマークレットの実行をブロックしているらしいということで、別のアプローチを取ることに。
Claudeさんは「ブックマークレットが使えないなら、コンソールのスニペット機能を使うのが現実的です」と語っており、ちょっと引っかかるけど「現実的です」の説得力の前に俺は屈したのであった。

「コンソールのスニペット機能」とはディベロッパーツールにある小コード実行機能のこと。ディベロッパーツール（Cmd + Opt + IまたはF12）＞Sources＞Snippetsで表示される。「+ New Snippet」から新規登録し、右クリックからRunで実行できる。

出来上がったソースコードの公開に問題ないか聞いてみたら

全く問題ありません。今回のコードは：
・一般的なWeb標準API（querySelector、Blob、execCommand など）を使っているだけで、特定のサービスに依存していない
・著作権上の懸念もないシンプルな実用コードで、このレベルのコードは世界中で広く書かれているもの
・個人情報や機密情報を含まない
ので、GitHubやブログなどどこで公開しても問題ありません。

ということでした。なので公開します。
以下がClaudeの最終回答の引用です。

最終的なスニペットをまとめておきます：

javascript

let ta2 = document.querySelector('textarea');
let text = ta2.value.trim();

let now = new Date();
let yyyy = now.getFullYear();
let mm = String(now.getMonth() + 1).padStart(2, '0');
let dd = String(now.getDate()).padStart(2, '0');
let filename = 'oneTab_' + yyyy + mm + dd + '.txt';

let blob = new Blob([text], {type: 'text/plain'});
let a = document.createElement('a');
a.href = URL.createObjectURL(blob);
a.download = filename;
a.click();

alert(filename + ' を保存しました！');

let ta2 = document.querySelector('textarea');
let text = ta2.value.trim();

let now = new Date();
let yyyy = now.getFullYear();
let mm = String(now.getMonth() + 1).padStart(2, '0');
let dd = String(now.getDate()).padStart(2, '0');
let filename = 'oneTab_' + yyyy + mm + dd + '.txt';

let blob = new Blob([text], {type: 'text/plain'});
let a = document.createElement('a');
a.href = URL.createObjectURL(blob);
a.download = filename;
a.click();

alert(filename + ' を保存しました！');

JavaScript

次回からの手順：

OneTabのエクスポートページを開く
F12 → Sources → Snippets
スニペットを右クリック → Run

また何かあればお気軽にどうぞ！

以上、引用です。
ここに書かれたJavascriptコードをディベロッパーツール＞Sources＞Snippetsで新規登録したらいいよ、ということですね。

変数名が「ta2」になってるのが気になりますが、「ta」はどっかで使用済みで使えませんので注意。
また、ディベロッパーツールのスニペットの、より簡易的な実行方法についてはDevTools の snippet をキーボード操作のみで実行する – ラボラジアンという記事もありました。Macでのキーボードショートカットを書いておきます。