Slack の #hackpack-chrome-ext に参加して、助けを求めたり、一緒に過ごしたり、あなたのプロジェクトを披露しましょう！

Overview

Congratulations! このハックパックを選択したあなたは、超クールな製品を作るための道を順調に進んでいます！

このハックパックでは、カスタマイズ可能なルールに従ってウェブページのコンテンツを置き換えるクローム拡張機能を構築します。

1. すべての Web ページでテキスト “cal” のすべてのインスタンスを置き換える。
2. ユーザーが指定した置換ルールに従って、Web ページ上のすべてのテキストを置き換える。
3. ユーザーが指定した置換ルールに従って、Web ページ上のすべての画像を置換します。

これらのタスクを完了すると、自分のブラウザで使用できる刺激的なアプリケーションが構築できます！

Getting Started

1. スターター コードをダウンロードして解凍します。

おおよそ次のファイルがあるはずです。

hackpack-chrome-ext-master/├── README.md├── manifest.json├── icons│ ├── TreeHacks-white-128.png│ ├── TreeHacks-white-16.png│ ├── TreeHacks-white-19.png│ ├── TreeHacks-white-32.png│ ├── TreeHacks-white-48.png│ ├── TreeHacks-white-64.png│ └── TreeHacks-white-96.png└── src ├── bg │ └── background.js ├── browser_action │ ├── browser_action.css │ ├── browser_action.html │ └── browser_action.js ├── inject │ └── inject.js └── options ├── options.css ├── options.html └── options.js

あるいは、あなたが Git マスターであれば、HTTPS または SSH で当社の Git リポジトリと同期できます。 注：Git に慣れていない場合、または以下の行が何をするかわからない場合は、以下のコマンドを実行しないでください！

# From Terminal.app or equivalent...# Clone via HTTPS$ git clone https://github.com/TreeHacks/hackpack-chrome-ext.git# or SSH$ git clone [email protected]:TreeHacks/hackpack-chrome-ext.git

Getting Started

Download Google Chrome

Chrome 拡張機能を構築するには、Google Chrome が必要です！

# From Terminal.app or equivalent...# Clone via HTTPS$ git clone https://github.com/TreeHacks/hackpack-chrome-ext.git# or SSH$ git clone [email protected]:TreeHacks/hackpack-chrome-ext.git

Google Chrome をダウンロードするには、次の手順に従います： Chrome 拡張機能を構築するには、次の手順に従います。 まだ、Chromeをダウンロードしていない方は、こちらから最新版をダウンロードしてください。 このハックパックでは、Chromeのバージョン40以降が必要です。 バージョンを確認するには、Omnibarからchrome://version/にアクセスし、一番上の行をご覧ください。 4987>

Google Chrome48.0.2564.109 (Official Build) (64-bit)

のように表示されているはずですが、全く同じでなくても気にしないでください。 メジャー番号（小数点の前）が 40 より大きい限り、設定完了です！

Load the Starter Code

Chrome は通常、拡張機能を .crx ファイル（.zip ファイルと同様）として出荷しています。 その代わりに、スターター コード フォルダを拡張機能として扱うように Chrome に指示します。

私たちの Chrome 拡張機能を構築するために、Chrome Developer 設定を有効にする必要があります。

右上の開発者モード チェックボックスがオンになっていることを確認します。

[解凍した拡張機能を読み込む] をクリックして、ファイルを選択するダイアログをポップアップ表示します。

拡張機能ファイルのあるディレクトリに移動し、それを選択します。

以下のような画面が表示されます。

さらに、Reload リンクに細心の注意を払います。

デフォルトでは、コードを更新しても、Chrome は拡張機能を自動的に再読み込みしません。 したがって、拡張機能をテストしたい場合、テストの前に拡張機能を再読み込みする必要があります。 さもなければ、あなたの変更はアクティブな拡張機能には存在しません。 基本的に、Chrome でライブにテストしたいコードに変更を加えるたびに、その再ロード ボタンを使用して拡張機能を再ロードすることを確認します。

背景知識

このプロジェクトでは、Javascript と Chrome 拡張機能のいくつかの知識が必要になります。 スターター コードには、各ファイルについて説明する十分なコメントがあるはずですが、ハックパックを始める前にこれらのシステムについて深く理解したい場合は、以下にいくつかのチュートリアルへのリンクを用意しました。 特に、Javascript を見たことがない場合は、Javascript のチュートリアルに目を通すことを強くお勧めします。

Javascript について学ぶ

JavaScriptとは

JavaScript はコンピュータ用のスクリプト言語です。 ポップアップメッセージやライブクロックのような動的なコンテンツを作成するために、Webブラウザアプリケーションで実行されることがよくあります。 プログラミング言語 Java とは関係ありません。

お気に入りの Javascript チュートリアルをいくつか紹介します！

以前にいくつかのプログラミング言語のエキスパートだった、または Javascript を知っていて構文の復習が必要なだけだという場合は、Learn X in Y Minutes をチェックしてみてください。 このチュートリアルの所要時間は約 10 分です。

Javascript を見たことも聞いたこともない、または Javascript を一から学ぶ詳細なチュートリアルが必要な場合は、Codecademy をお勧めします。 このチュートリアルは約10時間かかります。

あらゆるJavascriptの包括的なチュートリアルが必要な場合は、W3 Schoolsをチェックしてください。 このチュートリアルは約10時間かかります。

もちろん、自分でチュートリアルを探したり、実際にやってみるのも自由です。

Chrome拡張機能の基礎

Chrome拡張機能とは？ HTML、JavaScript、CSS などの Web 技術を使用して記述します。

Chrome 拡張機能についてもっと知りたい場合は、Google の拡張機能の紹介と Google のハイレベルな概要をお読みください。

チェックポイント 1: Cal to Butt

それでは、始めましょう！

Task A: Read the starter code

コードを書き始める前に、提供したスターター コードとコメントを一通り読んでみてください。 特に、src/inject/inject.js のすべてを読んでください。なぜなら、そのファイルでほとんどの変更を行うことになるからです。 もし何か質問があれば、私たちの Slack チャンネルで助けを求める良い機会になるでしょう！

Task B: Update modifyText to replace every instance of ‘cal’ with ‘butt’

最初のタスクでは、与えられた単語内の文字列 ‘cal’ の部分インスタンスをすべて ‘butt’ に置換するように src/inject/inject.js の modifyText 関数を更新して、修正後の文字列を返します。 パート 1 では、settings 変数は null になります。

たとえば、modifyText('calhacks organizer', null) は butthacks organizer を返すべきです。

/* File src/inject/inject.js */function modifyText(text, settings) {// YOUR CODE HEREreturn text;}

UC Berkeley Wiki ページまたは CalHacks ウェブサイトにアクセスして、あなたの方法をテストしてください。 私は個人的に Calculus Wiki ページが好きです。

(Hint: Check out the documentation on JavaScript String replace)

Edge cases: 文字列 'iCalendar' はどうなるのでしょうか。 部分文字列 cal の元のケースを尊重するように modifyText を更新してみてください。 つまり、'cal' -> 'butt' だけでなく、'Cal' -> 'Butt' や 'CAL' -> 'BUTT' も同様です。 この関数は他にどのような一般的な大文字/小文字の区別を考慮しますか。

チェックポイント 2: カスタム翻訳

これを考えたのは私たちが最初ではありません。 XKCDを読んでいる人なら、このうちのいくつかは見覚えがあるかもしれません。 XKCD を読んだことがないなら、まあ、コーディングの休憩をとって、古き良き時代の Web コミックを読んでみてはいかがでしょうか。 ここでは、私たちのお気に入りのいくつかを紹介します。

これらのコミックでは素晴らしいテキスト置換を紹介していますが、ここでは平文で再掲しています。

batman -> a man dressed like a batkeyboard -> leopardwitnesses -> these dudes i knowallegedly -> kinda probablynew study -> tumblr postrebuild -> avengespace -> spaaacegoogle glass -> virtual boysmartphone -> pokedexelectric -> atomicsenator -> elf-lordcar -> catelection -> eating contestcongressional leaders -> river spiritshomeland security -> homestar runnercould not be reached for comment -> is guilty and everyone knows itforce -> horsedebate -> dance-offself driving -> uncontrollably swervingpoll -> psychic readingcandidate -> airbenderdrone -> dogvows to -> probably won'tat large -> very largesuccessfully -> suddenlyexpands -> physically expandsfirst-degree -> friggin' awfulsecond-degree -> friggin' awfulthird-degree -> friggin' awfulan unknown number -> like hundredsfront runner -> blade runnerglobal -> sphericalyears -> minutesminutes -> yearsno indication -> lots of signsurgedrestraint by -> drunkenly egged onhorsepower -> tons of horsemeat

そしてもちろん、私たち自身の

cal -> butt

このプロジェクトの残りの部分では、この「矢印構文」を使用してテキスト置換ルールを表現するつもりです。 特に、文字列"pattern"から文字列"replacement"への変換を

pattern -> replacement

と表現することにします。 例えば、"years -> minutes" は部分文字列 "years" のすべてのインスタンスを文字列 "minutes" に置き換えることを意味し、"minutes -> years" は部分文字列 "minutes" のすべてのインスタンスを文字列 "years" に置き換えることを意味する。

Task C:

このタスクでは、src/inject/inject.js の関数 parseSettings を書いて、置換規則を表す行の入力配列を変換し、パターンから置換へのマップを出力します。

関数のシグネチャは

function parseSettings(lines) { // YOUR CODE HEREreturn null;}

例えば、

parseSettings()

は

{ "batman": "a man dressed like a bat", "keyboard": "leopard", "force": "horse"}

を返すはずで、線の配列のそれぞれのエントリは少なくとも一度は部分文字列 '->' を含むことが保証されています。 あなたの関数は行 "a -> b -> c" をどのように処理するのでしょうか。 "a": "b -> c" にするのか、"a -> b": "c" にするのか、それとも他のものにするのか。 パターンがない場合（つまり、行が "->word" のように見え、矢印の前にテキストがない場合）はどうなりますか。 置換がない場合（つまり、矢印の後にテキストがない"word->"のような行の場合）にはどうすればよいのでしょうか。 2文字だけの行 -> の場合はどうでしょうか (つまり、矢印の前にも後にもテキストがない)？ この関数は空白をどのように処理するのでしょうか。 " a -> b " という行を "a":"b" として処理するのか、それとも " a ": " b " として処理するのか? 同じパターンを持つ2つの行があった場合はどうなりますか。 例えば、配列の1行が"force->horse"で、別のエントリーが"force->fore"?

タスクD: 置換規則のマップを使用して、いくつかのテキストの置換を実行する

parseSettings関数を完了したので、今度はmodifyText関数に戻って新しい置換規則を使用する必要があります！

では、置換規則のマップを使用して、いくつかのテキストの置換を実行します。 スターター・コードでは、parseSettings関数の戻り値をsettings変数としてmodifyText関数に渡します。

このタスクでは、src/inject/inject.jsでmodifyTextを更新し、マップからのすべての置き換えルールが実行されるようにする必要があります。

たとえば、マップに "force" と "horse" (すなわち settings = "horse") の間の関連がある場合、テキスト内の部分文字列 "force" のインスタンスはすべて文字列 "horse" に置き換えられ、マップ内の pattern: replacement ペアの残りについても同様に置き換えられます。 いつものように、"cal" を "butt"

Edge のケースで置き換える必要があります。 置換はどのような順序で評価されるのだろうか。 仮に settings = {'train':'bus', 'use':'eat'} とする。 文字列 "trainer" はどうなるのでしょうか。 まずtrainが適用され、buser、beatrとなるのでしょうか。 それとも、useが最初に適用され（効果はない）、trainが適用されて最終的にbuserとなるのでしょうか？ チェックポイント1同様、原文の場合はどのように処理するのでしょうか？ 元の大文字と小文字を尊重する一般的な方法はありますか。

ブラウザ アクションを使用するこの機能をテストするために、拡張機能のブラウザ アクションを提供しました。 Chrome ウィンドウの右上に、小さな TreeHacks のアイコンが表示されます）

アイコンをクリックすると、置換ルールを入力する UI が表示されます。 入力した置換ルールは、関数に渡され、ページに適用されます。 このスクリーン ショットを次に示します。

このボックスに入力したテキストは永続的で、ポップアップを閉じても消えません。 もし興味があれば、これを行うためのコードは src/browser_action/ にあります。 保存ボタンを押すとテキストが Chrome のローカル ストレージに保存され、クリアボタンを押すとローカル ストレージがクリアされます。

チェックポイント 3: 画像の置き換え

最後のチェックポイントである第 3 段階では、テキストの置き換えと同じように画像の置き換えをユーザーが指定できるように拡張機能の機能を拡張します。 画像変換ルールを表現するために、好きなエンコーディングスキームを使うことができます。 私たちは、すべての画像がhttps://path.to/image.pngにある画像に置き換えられるべきであることを示すために、img->https://path.to/image.pngスキームを使用することをお勧めします。

Task E: Find all images on a given webpage.

Web ページ上のすべての画像を置き換えたい場合、まずその Web ページ上のすべての画像を持っている必要があります。 ページ上のすべての画像のリストを返す (ヘルパー) メソッドを記述します。

jQuery を使用したくなるかもしれませんが、注意してください – Chrome 拡張機能に jQuery を組み込むことは簡単ではなく、バニラ JS を使用してこれを解決する方法があります。 ヒントが必要な場合は、querySelectorAllのドキュメントをチェックしてください。

Task F: テキスト置換ルールに加えて画像置換ルールを処理するために parseSettings を更新する。

画像置換ルールについて調べるために parseSettings の実装を変更しなければならないでしょう。

Task G: Update the source of each image on the page.

画像と置換 URL を入手したら、ターゲット URL を表示するように元の画像を更新するコードを記述してください。 ヒントが必要な場合は、画像の src 属性を見てください。

Task H: We’re All in This Together

これらのヘルパー メソッドを手に、src/inject/inject.js の replaceAllImages 関数を実装してください。 この関数はテキストの置換が評価された直後に呼ばれる。 すべてがうまくいけば、ブラウザのアクションに画像置換ルールを入力し、すべての画像が置換されることを確認できるはずです！

おめでとう！

やったね！

おめでとう！

やったね。 非常によくやった。 Web サイトのコンテンツを置き換えるクールなクローム拡張機能を構築し、さらに、それを維持することができます！

少しリラックスして深呼吸し、構築したプロジェクトを振り返ってみてください。 とても素晴らしいです！

ここまできたら、Slackチャンネル #hackpack-chrome-ext に来て、お祝いしましょう！

そして、このプロジェクトに参加したことを誇りに思いましょう！

そして、このプロジェクトに参加したことを誇りに思いましょう。

拡張機能

高いレベルでは、ポップアップ ダイアログ (Chrome のブラウザ アクション) とすべての Web ページで実行されるスクリプトとの間のメッセージ交換に依存するシステムを構築してきました。 私たちはこれを使用して、テキストや画像の置換に関する情報をインジェクション スクリプトに渡してきましたが、そこで終わらせる必要はありません。 無限の可能性がありますが、ここではいくつかの提案を行いました。

• Match more than just plain text – match regular expressions! modifyText の機能を拡張し、settings からのパターンを単なるプレーンテキストではなく、正規表現を表すものとして扱います。 タグ名 (img だけでなく a や iframe も)、または .class 名、あるいは #ids でさえもマッチングします。 セレクタのフル セットのサポートを構築できますか。
• すべての画像を置き換えるのではなく、いくつか（たとえば 1%） を置き換えるだけです。 youtube のリンク ("youtube" を含む href を持つ a タグ) を Rick Astley のビデオに変更できますか。

置き換えの領域から離れて、

• ユーザーがバックグラウンド スクリプトに情報を通知できるようにする。 たとえば、名前を尋ね、名前を含むテキストを赤くハイライトします。 基本的な Tor を構築したことになります。
• ユーザーが自分の健康データを入力できるようにし、1 つのサイト (咳の Reddit) を閲覧している期間ごとに運動するよう (フレンドリーなポップアップまたはリダイレクトで) 推奨します。 あなたの想像力を膨らませてください。 あなたが何を作るのか見るのが楽しみです！
  

  その他

  フィードバック

  もし何かコメントがあれば、ポジティブでもネガティブでも、フィードバックを Sam Redmond (Slack の @organizer-sam) に連絡してください！

  フィードバック

  その他

  フィードバック

  フィードバックは、あなたが何を作るのか見るのが楽しみです。 私たちは、あなたが素晴らしいと思うこと、そして私たちが改善できると思うことを聞きたいと思います。

  クレジット

  アイデアのクレジットは Cloud-to-Butt Chrome Extension の創始者に、素晴らしいドキュメント（その多くを私たちは恥ずかしげもなく盗みました）のクレジットには Chromium contributors に、画像のクレジットには XKCD に、それぞれ感謝します。