---
title: "Ladybird拡張機能 | 星源 Web Studio"
description: "Chrome Web Store公開の拡張機能。ノーコードのボタン追加、ビジュアル自動化フロー、ローカル暗号化保管庫、日英中UIに対応しています。"
url: "https://studio.i17i.com/ja/work/ladybird-extension"
---

ブラウザ拡張 / 自社プロダクト

# Ladybird ノーコードWeb自動化Chrome拡張

自社開発しChrome Web Storeで公開中のブラウザ拡張機能。ノーコードで任意のWebページにボタン・リンク・ツールチップを追加でき、ビジュアルフローエディタで自動化操作を構築。認証情報はローカル暗号化保管庫に保存、UIは日/英/中の3言語対応で継続的にアップデート中。

[サイトを見る](https://chromewebstore.google.com/detail/ladybird-no-code-buttons/nefpepdpcjejamkgpndlfehkffkfgbpe)

- Chrome Extension

- Manifest V3

- WXT

- React

- TypeScript

- Tailwind CSS

## スクリーンショット

chromewebstore.google.com

chromewebstore.google.com

## 背景と課題

繰り返しのWeb操作（フォームの逐次入力や一括クリック）は非エンジニアには大きな負担。スクリプトを書くにはハードルが高く、クラウド型の自動化SaaSは業務データを第三者に預ける必要がある。ノーコードで、データがブラウザ内に留まる自動化ツールを作り、Chrome Web StoreのManifest V3審査を通過して公開することが目標だった。

## ソリューション

Manifest V3 + WXT + React + TypeScriptで開発。サイドパネルでページ要素と自動化フローを一元管理し、ビジュアルフローエディタで入力・クリック・待機・データソースのマッピングなどのステップを再利用可能なフローとして構築。データを1行ずつフォームに反映して自動送信でき、非表示ルールでページ内の邪魔な要素をワンクリックで隠せる。認証情報はローカルの暗号化保管庫に保存。ストア公開用素材の準備から審査対応まで行い、公開後も継続的に改善している。

## 成果物

- 審査を通過しChrome Web Storeで公開、v2.x系まで継続アップデート

- ノーコード：ページへのボタン/リンク/ツールチップ追加＋ビジュアルフローエディタ

- データソースフロー：1行のデータを1回のフォーム入力にマッピングし一括自動化

- 認証情報はローカル暗号化保存、業務データはブラウザの外に出ない

## 主な機能

- ノーコードで任意ページにボタン・リンク・ツールチップを追加

- ビジュアルフローエディタ：入力/クリック/待機などのステップ構築

- データソースフロー：データ行→フォーム項目マッピング→自動送信

- 非表示ルール：邪魔な要素をワンクリックで非表示

- ローカル暗号化の認証情報保管庫

- 日/英/中の3言語UI

## 技術スタック

- Chrome Extension

- Manifest V3

- WXT

- React

- TypeScript

- Tailwind CSS

[お見積り依頼](https://studio.i17i.com/ja/contact)

## 関連サービス

[Chrome拡張機能開発 Manifest V3対応の拡張機能を要件定義からストア公開まで 40万円〜（機能範囲によりお見積り） 詳しく見る](https://studio.i17i.com/ja/services/chrome-extension)

## 関連する制作実績

[yaofengxny.com 成型炭製造・新エネルギー燃料 Yaofeng New Energy 成型炭メーカー海外向けサイト 成型炭メーカーの海外向けコーポレート・製品カタログサイトです。英語・中国語・アラビア語（RTL）・ロシア語の4言語に対応し、製品カタログ、OEM紹介ページ、問い合わせ導線までを設計から実装・公開まで一貫して担当しました。 - Next.js - TypeScript - Prisma - PostgreSQL 詳しく見る](https://studio.i17i.com/ja/work/yaofeng-new-energy)
[juns.i17i.com 家具・建築金物製造 Junsheng Hardware 金物メーカーB2Bカタログサイト 家具・建築金物メーカーのB2B向け製品カタログサイトです。製品カタログ、カテゴリ別ページ、製品詳細、カタログ請求フォーム、問い合わせフォームを備え、MOQ（最小ロット）表示など、B2Bの商習慣に合わせて設計しました。 - Next.js - TypeScript - Prisma - PostgreSQL 詳しく見る](https://studio.i17i.com/ja/work/junsheng-hardware)
[tn.i17i.com 越境ビジネス向けサービス・サブスクリプション サブスクリプション販売サイト（Stripe決済） 越境ビジネス事業者向けのサブスクリプション販売サイトを、企画・設計から実装・本番運用まで一人で担当しました。Stripe Checkoutによるオンライン決済、Webhookでの注文状態同期、管理画面、顧客向けセルフサービスページ、メール通知を実装しています。 - Next.js - TypeScript - Prisma - PostgreSQL 詳しく見る](https://studio.i17i.com/ja/work/subscription-commerce)

## 関連記事

- [ホームページを閉鎖する順番：サーバー・ドメインを解約する前にやること6ステップ閉店や活動終了でホームページ（WordPressサイト）を閉じるときに、サーバーやドメインを先に解約して困らないための順番をまとめました。ログイン情報の確認、保存版、写真の元ファイルの見分け方、解約で何が消えるかの一覧、よくある質問まで解説します。詳しく見る](https://studio.i17i.com/ja/blog/homepage-heisa-junban)

- [WordPressサイトを閉鎖前に保存する方法：HTTrackで崩れる理由とオフラインで見られる静的化閉鎖するWordPressサイトを、サーバーを止めたあとも見返せる形で残したい方へ。HTTrackなどの保存ソフト、ブラウザの保存機能、静的化プラグイン、バックアッププラグインの違いを比べ、画像が出ない・崩れる5つの原因と見分け方・対処、保存できたかを確かめる方法を解説します。詳しく見る](https://studio.i17i.com/ja/blog/wordpress-heisa-hozon)

- [PHP2Shellとは？PHPサイトの影響確認と修正手順PHP2Shell（CVE-2026-109618・CVE-2026-109619）の概要と対処方法を解説。Web側のPHP確認、セキュリティ更新、プロセス再起動、修正後の動作確認まで整理します。詳しく見る](https://studio.i17i.com/ja/blog/php2shell-security-fix)

## ホームページ制作のご相談はお気軽に

無料相談・お見積りは1営業日以内にご返信します。要件が固まっていない段階でも歓迎です

[無料相談](https://studio.i17i.com/ja/contact)
[実績を見る](https://studio.i17i.com/ja/work)