00:06
神経質やせ男です。
今日は、ブラウザ拡張機能の学習シリーズとして、 背景色を変える拡張機能をご紹介します。
前回までは、ポップアップ表示を作っていましたが、 今回は少し趣向を変えて、ボタンを押すだけで、 ページの背景色を変更する仕組みを作ってみました。
完成イメージはとてもシンプルです。
緑にする、青にする、桃色にするという3つのボタンが表示され、 クリックすると、ページ全体の背景色がその色に変わります。
まず、マニフィストJSONの設定は前回までとほぼ同じです。
特定のページを開いたときに、 JavaScriptを実行するコンテンツスクリプトを利用します。
そして、今回の主役はコンテンツJSです。
まず、アットボタンという関数を作ります。
この関数にはボタンの名前と色の情報を渡します。
例えば、緑にするとグリーンと渡せば、 緑色に変更するボタンが完成します。
関数の中ではボタンを作成し、 文字サイズや余白、背景色などを設定しています。
そして重要なのがクリックイベントです。
ボタンが押されたときに、ドキュメントボディの バックグラウンドカラーを書き換えることで、 ページ全体の背景色を変更しています。
最後に、緑にする、青にする、桃色にする、 という3つのボタンを関数で作成すれば完成です。
コード量は少ないですが、 JavaScriptでよく使う関数やイベント処理の考え方が詰まっています。
ちなみに、この方法はシンプルなウェブサイトでは 効果がわかりやすいのですが、
Amazonや楽天のように複雑なデザインのサイトでは 一部しか色が変わらない場合があります。
そのため、まずは自治体のホームページなど、 シンプルな構成のサイトで試してみるのがおすすめです。
プログラミングは小さな成功体験の積み重ねが大切です。
まずは色を変えるところから始めて、 少しずつできることを増やしていきましょう。
それではまた次回お会いしましょう。
本日の内容は以上となります。
最後までお聞きいただきありがとうございました。
最後にAmazon Kindleで発売中の電子書籍のお知らせです。
キレイごとゼロの別居介護をリアルに環状ではなく、 システムとエクセルで立ち向かった瞬間、
手取り23万円のエンジニアがエクセル1枚で 実家の破綻を防いだ話、
そして実家の保守運用を行なすための時間を 圧倒的にひねり出す技術を書いた、
会社公認爆速仕事術、PC魔改造、
この2冊が現在Amazon Kindleにて絶賛発売中です。
どちらもKindle Unlimited読み放題の対象となっていますので、
会員の方は追加料金なしですぐにお読みいただけます。
音声を聞いた後にスマホの画面の下にある 概要欄のリンクからぜひチェックしてみてください。
それではまた次回の配信でお会いしましょう。