前編JavaScriptChromechrome-extensionはじめにGoogleのChrome拡張の公式が出してるチュートリアルを解説します。僕なりに分かりやすくなるように、公式の流れに沿って書こうと思います。ただの翻訳といえば否定できませんが、それだけだとつまらないので、ところどころ補足欲しいなぁ〜て自分が感じたところを付け足していきます。僕は英語が嫌いなので、僕と同じように英語で書いてあるサイト読むのだりぃ〜って人の役に立てばと思います。前編と後編に分かれていて、前編ではユーザから見えないシステム側の設定になります。マニフェストファイルの作成アップロードBackgroundファイルの作成の順番に説明していきます。Qiitaを読んでいただけると少しは理解しやすくなるかと思います。分かりにくかったら、その記事に載せてる参考文献が分かりやすいので、そちらを見てください。ScriptPopupの3つの世界を使い分ける必要があるってことです。理解していただけたら、次に進みましょう。チュートリアルさっそく補足ですが、まずは色々なファイルを入れる用のフォルダを作っておきましょう。場所はどこでも良いです。名前も何でも良いです。僕は試しに、デスクトップに「testChromeExtension」というフォルダを作りました。ここに、これから作成するファイルや、アイコンの画像などを入れていきます。それでは作成していきます。公約」という意味から分かるように、決まりごとを書いていくファイルです。これがないと拡張機能が作れません。この拡張機能の名前は何なのかマニフェストのバージョンは何を使うのかアイコンの画像はどれかPopupのHTMLファイルはどれを使うのかなどをJSONファイルに書いていきます。ファイル名は「manifest.json」にしましょう。2}とりあえずこれだけです。マニフェストのバージョン(これは固定、現在*投稿日現在*は2を書く)という意味になります。"これはChrome拡張機能のテストです。アップロードマニフェストファイルを作り終えたら、最初に作成したフォルダに保存しましょう。これをアップロードしていきます。ローカルで実行するだけですので、実際に拡張機能のストアに公開するわけではありません。0のデベロッパーツールをオンにして、「パッケージ化されていない拡張機能を読み込む」、「拡張機能をパッケージ化」、「更新」の3つのボタンを表示させましょう。1の「パッケージ化されていない拡張機能を読み込む」というボタンを押しましょう。UNPAKED」と書いてあるかと思います。フォルダを選べるようになるので、最初に作成してマニフェストファイルを入れたフォルダ(2)を選択します。選択!(3)すると、マニフェストファイルに書き込んだ名前・バージョン・説明・自動生成されたIDが表示されてるかと思います。アイコンはまだ設定していないので、デフォルトのままですね。表示されていたら成功です。なっているかを確認してください。以上がアップロードの手順です。これからファイルを更新したら、右下のラジオボタンの隣にある更新マークを押せば反映できます。反映されない場合は、一旦削除してから再びアップロードするなどを試してみてください。Backgroundファイルの作成まずは、マニフェストファイルに、「Backgroundのコードはこのファイルに書くよ!」ということ教えてあげる必要があるます。公式と同じように追加します。"これはChrome拡張機能のテストです。2}BackgroundファイルはJavaScriptで記述します。ファイル名は何でも良いですが、無難に「background.js」とでもしておきましょう。それぞれの説明をします。使うAPI等を記述します。APIを使用します(詳細は後述)。Backgroundに関しての色々を記述します。Backgroundファイルのファイル名を記述します。falseにすることで、backgroundファイルが呼ばれた(通信する時)のみ動きます。永続的に動いているとメモリが無駄に消費されてしまうので、falseにすることをお勧めします。実際にBackgroundファイルを作成していきます。APIは、名前の通りデータを保存してくれるストレージのAPIです。Scriptファイルに書くことで、わざわざBackgroundにデータを移さなくても、データを保持してくれるみたいです。容量がそんなに大きく無いのと、セキュリティがガバガバなので個人情報などは扱わない方が良い、というのが注意点です。拡張機能がインストールされたときや更新された時に関数内を実行する。colorというKeyに#3aa757というValueをセットしています。コンソールに文字を出力します。デバッグなどに使えます。これらをコピペして、フォルダに保存してください。拡張機能を更新しましょう。ページ」というリンクができているかと思います。そのリンクを押すと、Backgroundのデベロッパーツールが表示されます。background.jsに書いたコンソール出力は、ここで確認することができます。これでBackgroundでChrome拡張を開発することはできました。見た目には何も変化がないですが、重要な準備段階です。おわりに後編はこちらです。後編いよいよユーザから見える部分を開発していきます。Optionsの設定の順番で説明していきます。requestStockLike1@T-Kawashima自分向けのメモ程度に適当に書いていきます。upLoginユーザーは見つかりませんでした。