🐥

10日でChrome拡張機能を開発する

2024/01/24に公開

1件

 はじめに今回、Chrome 拡張機能を初めて開発しました。

その名も パネルメモ です。

自分でも意外と使えるものが作れたと思っており、満足しています。

この記事や開発したサービスがお役に立ちましたら幸いです。

 サービス紹介「パネルメモ」という名の通り？、サイドパネルでメモが取れるサービスとなっております（「サイドメモ」にしようと思ったのですが、同名のサービスが既に Chrome Web Store にありましたので、このような名前になりました、、）。

 機能基本機能
メモの作成
メモの編集
メモの削除
メモの一覧表示
その他機能
メモの固定
メモの背景色変更
メモ内容をクリップボードにコピー
メモのテキスト検索

 一部画面の紹介
 メモ一覧画面

 メモ詳細画面

 作ろうと思ったきっかけ私は普段の仕事で日報を書いたり、業務内容やタスクをメモしたりすることが多々あります。毎回 Windows 標準アプリの「付箋」を使用していたのですが、Chrome 上で業務を行うことが多いため、そのデスクトップアプリを開くたびに画面を切り替えたり、画面サイズを調整したりしなければならず、それがストレスになっていました。
これを解消するために考えたのが、Chrome 拡張機能です。デスクトップアプリや Web アプリと違って画面やタブを切り替える必要がなく、Chrome での業務と並行して利用できる Chrome 拡張機能は、間違いなく自分の業務の生産性を上げてくれると思いました。
また、Web 系に憧れているというのもあり、JavaScript のモダンなフレームワークを使った開発がしてみたかったというのも理由の一つです（Angular は経験したことがあります）。

 スケジュール1 日 3 〜 4 時間 × 10 日ほどで完成しました。スケジュールははじめは決めていなかったですが、リリースした今振り返ると以下のようになります。
1 日目：企画
2 日目 〜 3 日目：画面設計
4 日目 〜 9 日目：開発（+勉強）
10 日目：テスト、リリース

 使用技術Vue3
Vuetify3
React か Vue か迷いましたが、Vue を選んだのは個人的に React の JSX 記法が見慣れないというただそれだけの理由です。

Vuetify に関しては、Web で調べたところメジャーな UI ライブラリだという所感を持ったので採用しました。

 終わりに最後まで読んでいただきありがとうございました。

興味を持った方は パネルメモ を見ていただけると嬉しいです。

また、GitHubでコードも公開していますので、よろしくお願いします。
また次回何かしら開発したら共有できればと思います。

Discussion

草村

こんにちは。パネルメモを利用させていただいている者です。
こちらの拡張機能のおかげで簡単にサイドパネルでメモが確認でき、非常に便利で重宝しております。

この度、メモが増えた際に保存されなくなる現象に気づき原因を探っていたところ、どうやら「chrome.storage.sync」はGoogleのデータサーバに保存される反面、サイズ上限が全体で100KB/1アイテムあたり8KBまでという制限がある事がわかり、恐らくこれが原因ではないかと考えました。
また、同期はできませんが「chrome.storage.local」は上限が10MBとのことで、こちらなら多くのメモを保存できそうだという事もわかりました。

私では知識が乏しくAIにコードの精査をお願いしたので大変恐縮なのですが、次のようにコードを書き換えるとよいのではないかとの事でしたので、参考程度にご確認いただけますと幸いです。

MemoList.vue

const fetchMemos = async () => {
    let data = await chrome.storage.local.get("memos");
    if (!data.memos) {
      const syncData = await chrome.storage.sync.get("memos");
      if (syncData.memos) {
        await chrome.storage.local.set({ memos: syncData.memos });
        data = { memos: syncData.memos };
      }
    }
    memoList.value = data.memos ? JSON.parse(data.memos) : [];
    memoList.value.forEach((memo) => (memo.isCopied = false));
  } catch (err) {
    console.error("メモの読み込みに失敗しました:", err);
    memoList.value = [];
  }
};

const updateMemos = async () => {
  try {
    await chrome.storage.local.set({ memos: JSON.stringify(memoList.value) });
  } catch (err) {
    console.error("メモの保存に失敗しました:", err);
    alert("メモの保存に失敗しました。容量が大きすぎる可能性があります。");
  }
};

この場合、同期ができなくなる点で不便になる可能性があるためご対応が難しいかと思うのですが、
もしお時間がありましたら不具合についてご確認とご対応をいただけると大変ありがたいです。
ぜひ今後も利用させていただきたいです。よろしくお願いいたします。