ブックマークレット開発環境を作りたい

ブックマークレットを作っていて動作を確かめたいとき毎回こんなことをやっていました。

１，Visual Studio Codeでブックマークレットのソースコードを編集する。
２，Visual Studio Codeの標準機能（JoinLines）を使ってソースコードを1行にし、Ctrl + Cでコピーする。（1行にするのは必要ないかもしれないです。）
３，Chromeに移動してブックマークレットを右クリックし「編集」を押してCtrl + Vでソースコードを一行にしたソースコードを貼り付ける。
４，「保存」を押して、ブックマークレットの動作を確かめたい対象ページを開きブックマークレットを実行し動作を確かめる。

ざっとまとめるとこんな感じなのですが、結構面倒くさかったです。
ブックマークレットが思うように動かないと、この作業をする回数がさらに増えるのでさらに面倒くさいです。

そこでブックマークレットをもっと楽に開発できる環境を作ってみました。
必要なものは以下です。

・Visual Studio Code

Visual Studio Code - Code Editing. Redefined

・node.js

Node.js — Run JavaScript Everywhere

・ScriptAutoRunner（Chromeの拡張機能）

ScriptAutoRunner

前提として「Visual Studio Code」と「Node.js」はインストールまでしておいて欲しいです。
方法としてはざっくり言うと、動作を確認したいブックマークレットのソースコードを外部ファイルとしてJavaScritpファイルに書き込み、立ち上げたローカルサーバでJavaScriptファイルを立ち上げ、「ScriptAutoRunner」で対象ページに対して書き込んだJavaScriptを実行させる、という感じです。
では実際の作り方です。

1.ローカルサーバを立ち上げ、JavaScriptファイルをあげる

まずローカルにフォルダを作って、そのフォルダをVisual Studio Codeで開きます。そしてそのフォルダにJavaScritpファイルを2つ作ります。
今回は「server.js」と「bookmarklet.js」を作ります。

「server.js」に以下のソースコードを貼り付けます。

// httpモジュールを読み込む
const http = require("http");
// fsモジュールを読み込む
const fs = require("fs");
// ポート番号を指定
const port = 3000;

//ローカルサーバの構築
const server = http.createServer((request, response) => {
  //動作を確認したいJavaScriptファイルをローカルサーバに設置
  fs.readFile("./bookmarklet.js", "UTF-8", (error, data) => {
    response.writeHead(200, { "Content-Type": "text/plain" });
    response.write(data);
    response.end();
  });
});

// ポートを待機状態にする
server.listen(port, () => {
  console.log("Server running");
});

ローカルサーバをたててもう一つのJavaScriptファイルを実行させるためのコードです。

「Terminal」→「New Terminal」を押して、ターミナルを開きます。

そして「node server.js」のコマンドを打ち込んで、Enterを押して実行するとローカルサーバが立ち上がります。

そして「bookmarklet.js」に動作を確認したいブックマークレットのソースコードを書き込みます。今回はテストでalertを動かしてみます。

javascript: (function () {
  alert("bookmarklet");
})();

2.「ScriptAutoRunner」にJavaScriptファイルを設定する

次は「ScriptAutoRunner」をChromeに追加します。
追加出来たら「ScriptAutoRunner」のオプション画面を開きます。開くと下記のよう画面が出てきます。

赤枠部分のボタンを押して新しくScript枠を増やします。

下記画像の①②のように記載する。

①は対象のページで起動させたいローカルサーバに上げるJavaScriptファイルのディレクトリです。
これを見て、ローカルに動作を確認したいブックマークレットのソースコードを書き込んだJavaScriptファイルを用意して「file:///C:/Users/user/bookmarklet.js」みたいなディレクトリを①に記載すればいいのでは？と思った方がいるかもしれませんが、それだとダメでした。

②はブックマークレットの動作を確かめたい対象のページのドメインです。
今回はテストでnoteのTOPページにしています。（https://note.com/）
記載するものは「ドメイン」のみで大丈夫です。
（例：「https://note.com/info/n/n051d2a53e6e0」を対象ページとしたい場合も「https://」と「/info/n/n051d2a53e6e0」を除いた「note.com」のみ記載します。）

最後に赤枠部分を押してScriptが動くようにします。

下記画像の状態になったら「ScriptAutoRunner」の準備は完了です。

最後に対象のページを開いて、JavaScriptが実装されていることを確認出来たら開発環境準備が完了。

あとは「bookmarklet.js」を動作を確認したいブックマークレットのソースコードに編集して、保存し、動作を確認したい対象ページをリロードするだけ！

最後に今回作成したファイルたちを下に置いておきますのでよかったら使ってください。

bookmarklet-js.zip

760 Bytes

ファイルダウンロードについて

ダウンロード

こんな感じでブックマークレットの開発環境をつくることができました。
ただ、最初の準備で拡張機能を追加したり、ローカルサーバを立てたりとやはり少し手間がかかってしまうのが気になるため、もっと楽な方法を今後時間あれば探してみたいと思います。

というわけで以上です！ご覧いただきありがとうございました！