creating-bookmarklets

ブックマークレットの作成

重要な要件

コメントスタイル — 絶対厳守

/* */ コメントのみを使用してください。// コメントは絶対に使用しないでください。

ブックマークレットの実行コンテキストでは、// スタイルは失敗します。コメントはすべてブロック形式にしてください。

/* ✓ Correct */
const x = 5; /* inline */

/* ✗ Wrong - breaks bookmarklets */
// const x = 5;
const y = 10; // inline

IIFE ラッパー

すべてのブックマークレットを IIFE でラップしてください。

(function() {
  /* bookmarklet code */
})();

プロトコルプレフィックス

提供するすべてのブックマークレットは、javascript: プロトコルで始めてください。

javascript:(function() {
  /* bookmarklet code */
})();

これにより、インストール時に手動で変更することなく、コードをすぐに使えるようになります。

ワークフロー

1. 整形済みコードを生成する

次の条件を満たす、読みやすいソースコードを作成してください。

• インデントは 2 スペース
• 説明的な変数名
• 重要なセクションにはブロックコメントを使用
• 論理的に整理
• コードの先頭に javascript: プロトコルを付加

javascript: プレフィックス付きのこのバージョンを GitHub に保存してユーザーに提示すると、手動で変更しなくてもインストールできる状態になります。

2. インストール方法を提示する

デフォルトの方法 — インストーラーを参照：

Install: https://austegard.com/web-utilities/bookmarklet-installer.html

インストーラーで処理する内容：

• Terser による圧縮
• URL エンコード
• ドラッグ可能なリンクの生成
• GitHub リポジトリとの連携

代替方法 — プログラムでリンクを生成する： リクエストされた場合は、Terser.js を使ってインストール可能なリンクを作成してください。

async function createBookmarkletLink(code, title) {
  const minified = await Terser.minify(code);
  const encoded = encodeURIComponent(minified.code).replace(/'/g, "%27");
  return `<a href="javascript:${encoded}">${title}</a>`;
}

必要なもの：<script src="https://cdn.jsdelivr.net/npm/terser/dist/bundle.min.js"></script>

3. 提供物

常に次のものを提供してください。

1. javascript: プロトコルを先頭に付けた整形済みソースコード
2. インストール方法（インストーラーリンクまたは生成済みリンク）
3. 機能の簡単な説明
4. 使用方法

コードはすぐに使える形式で提供してください。ユーザーがコードブロック全体（javascript: を含む）を変更せずにコピーできる必要があります。

コード規約

エラー処理

(function() {
  try {
    /* main logic */
  } catch (error) {
    console.error('Bookmarklet error:', error);
    alert('Operation failed: ' + error.message);
  }
})();

コンソールログ

デフォルトでデバッグトレースを含めてください。

console.log('Bookmarklet: Starting');
/* operations */
console.log('Bookmarklet: Complete');

ユーザーへのフィードバック

/* Success */
alert('✓ Content copied to clipboard');

/* Error */
alert('✗ Failed to access clipboard');

よくあるパターン

DOM 操作

(function() {
  const element = document.querySelector('.target');
  if (!element) {
    alert('Element not found');
    return;
  }
  /* manipulate element */
})();

データ抽出

(function() {
  const data = Array.from(document.querySelectorAll('.item'))
    .map(item => ({
      title: item.querySelector('.title')?.textContent.trim(),
      value: item.querySelector('.value')?.textContent.trim()
    }));
  
  console.log('Extracted:', data);
})();

クリップボード操作

(function() {
  const text = 'content to copy';
  navigator.clipboard.writeText(text)
    .then(() => alert('✓ Copied'))
    .catch(err => {
      console.error('Clipboard error:', err);
      alert('✗ Copy failed');
    });
})();

ライブラリの動的読み込み

(function() {
  if (typeof someLibrary === 'undefined') {
    const script = document.createElement('script');
    script.src = 'https://cdn.example.com/library.js';
    script.onload = function() {
      /* proceed with logic */
    };
    document.head.appendChild(script);
  }
})();

ブラウザー互換性

サポートされていない機能にはフォールバックを用意してください。

if (!navigator.clipboard) {
  alert('Clipboard API not supported');
  return;
}

制約

使用できないもの：

• 埋め込みなしの外部ファイル（CSS、画像）
• ビルドツールや前処理
• // スタイルのコメント

使用できるもの：

• Fetch API
• localStorage/sessionStorage
• 最新のブラウザー API
• CDN ライブラリ（動的に読み込み）

テスト

提供する前に、次の点を確認してください。

1. // コメントが存在しないことを確認する
2. IIFE でラップした状態でブラウザーコンソールでテストする
3. DOM 要素が見つからない場合のエラー処理を確認する
4. すべてのケースでユーザーへのフィードバックを確認する

出力例

javascript:(function() {
  /* Pretty-printed bookmarklet code */
})();

Install: https://austegard.com/web-utilities/bookmarklet-installer.html

Extracts all links from current page and copies to clipboard as markdown list. Works on any webpage.

GitHub への保存

ユーザーのリポジトリ：https://github.com/oaustegard/bookmarklets

整形済みの形式は保存要件に適合しています。インストーラーはこのリポジトリから直接読み込みます。