Zfort Group社のブログ（ こちら ）で私のプロジェクトを見た後、プロジェクトとその実装の概要を共有することにしました。
アイデア：manifest.jsonの構成を含む、Chromeアドオンの基本テンプレートをすばやく作成します。
Extensionizr.comは Webアプリケーションとして構築され、出力でzipアーカイブを生成します。
アーカイブを含むJavascriptを使用して、クライアント側ですべてが行われます。
そうでない場合は、ビルド：
ブログに新しい投稿を書く時期だと判断したので、WordPressにアクセスして、何を書くべきか考え始めました。
何を書くかを決めている間に、WordPressのいくつかの機能のために新しいプラグインが必要だと思い、ウェブを検索しました。
適切なプラグインを見つけた後、それをダウンロードしてから自分のサイトにアップロードする必要があり、このプロセスを自動化したいと考えました。
このためにChromeの簡単な拡張機能を作成できると判断したので、この拡張機能の計画を開始しました。
5分後、これまでに作成したすべての拡張機能がこのコンピューター上にないことに気付きました。 また、必要に応じてファイルをコピーしたり変更したりする場所がないため、すべてを書き直す必要があります。
ライトが点灯しています！
そして、Chrome拡張機能のテンプレートを取得するのに役立つJohnatan VerrecchiaのInitializr.comのようなプロジェクトがあれば、最初からすべてを書く必要はないことを思いつきました。
12時間後、私のプロジェクトの準備が整いました！
プロセス
最初は、Chrome拡張機能のデザインテンプレートを見つけようとしましたが、実際にこことここでペアを見つけました。
Initializr.comはオープンソースプロジェクトであることを思い出し、それを基にアイデアを練ることができることに気づき、探索に行きました。
判明したように、Initializrはそれほど単純ではなく、サイトに加えて、Javaのサーバー側コードがあります！
私はJavaを知らないので、そこで何が起こっているのか見ようとさえしませんでした。代わりに、クライアント側のマニアとして、これがHTMLとJavaScriptを使用してのみ構築できるかどうかを考え始めました。
結局、これは2012年であり、IEについて気にすることができます。これは、Chromeの拡張機能を構築したい人だけがChromeをインストールしていると想定できるからです。
Google I / OおよびZip.js
Eric Bidelmanのスピーチ「 html5 can 」を思い出しました。そこでは、Javascriptを使用してファイルを作成およびダウンロードできるファイルシステム（ファイルシステムAPI）の操作のデモがありました。
残念ながら、彼のプロジェクトでは、ファイルをダウンロードすることはできず、ダウンロードして作成するだけです。 そして、世代の終わりには、zipアーカイブが必要でした。
幸いなことに、超才能のあるGildas LormeauがZip.jsライブラリを作成しました。
ライブラリには2つの主要な部分があります。 ZIP.jsおよびZIP-fs.js。後者は、アーカイブ内のファイルとディレクトリの構造を調べるために使用されます。
残ったのは、APIの基礎を学ぶことだけでした（デモは非常に有用で、zip.jsファイル内のテストファイルも同様でした）。残りは簡単でした。
すべての仕組み
とても簡単です。
Extensionizrに記載されているすべてのファイルと設定を含む、2つのテンプレートに基づいてアーカイブを準備しました。
アーカイブは事前に準備されているため、ユーザーが必要としないものをアーカイブから消去する必要があります。
Extensionizrが起動するとすぐに、zip.jsを使用してすぐにアーカイブをアップロードします。
function importZip(callback){ zipFs.importHttpContent("ext.zip", false, function() { ... }); }, onerror); };
ユーザーがいくつかのオプションを選択すると、Extensionizrは、アーカイブに追加および削除するプロパティのリストを作成します。
すべてのパラメーターが収集され、ユーザーがダウンロードファイルボタンをクリックすると、Extensionizrはアーカイブを編集し、不要になったファイルを削除し、manifest.jsonを編集します。その後、このアーカイブのBase64を生成し、<a>タグのhrefパラメーターに挿入します。
zipFs.exportData64URI(function (data) { var clickEvent = document.createEvent("MouseEvent"); clickEvent.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); downloadButton.href = data; downloadButton.download = 'extensionizr_custom' + Date.now() + '.zip'; downloadButton.dispatchEvent(clickEvent); event.preventDefault(); return false; });
ダウンロードダイアログを開始するために、chromeにパラメーターがあります
?
?
12 , ( , , .)
, , , .
Github, , , , .
, .
?
?
12 , ( , , .)
, , , .
Github, , , , .
, .
?
?
12 , ( , , .)
, , , .
Github, , , , .
, .
?
?
12 , ( , , .)
, , , .
Github, , , , .
, .