ずっと家でアプリ作っていたい

業務効率化小ネタなど

【入門】Google Chrome Extension (拡張機能)でBootstrapを使用する

f:id:chang_app_dev:20210119003858p:plain

はじめに

せっかく作るならデザインが整った拡張機能を作りたいですよね。 そこでデザインを簡単・綺麗・シンプルに作ることができる Bootstrapと言うツールを拡張機能で使用する方法をシェアします。

Bootstrap

getbootstrap.jp

BootstrapとはCSSを簡単に整えるフレームワークです。

フレームワークとは

フレームワークとは「何かしらのプロダクトを開発する上で必要な機能が予め用意された骨組み」のことです。

このフレームワークを使うことでCSSを、より簡潔に整えることができます。

メリット

開発効率の向上

前述したとおり、開発の効率を上げることができます。 拡張機能程度の規模ではそこまでデザインで時間をかけて作成するシーンは あまりないと思いますが、より大規模のアプリだったりすると効率化をすることで、 より早くプロダクトを納品できます。

技術習得が容易

Bootstrapはとてもシンプルな構文で記述ができるので、習得もすぐにできます。

日本語ドキュメントが充実

日本でも広く使用されているので、日本語のドキュメントが充実しています。 またQiitaなどでもBootstrapに関する記事は豊富にアップされています。

今回はこのように簡単に綺麗なUIを作れるBootstrapを導入して、 Google Chrome拡張機能を作ります。

完成品

まず完成品をお見せします。

こちらはBootstrap ExamplesのFloating Labelsを参考に作成しました。 作業時間は大体20分程度です。 普段HTMLやCSSに慣れていない私でこの速さで作成できるので、 慣れている方でしたら5分程度で完成できると思います。

ソースコード

ソースコードを紹介します。

manifest.json

{
  "name": "bootstrap",
  "version": "1.0",
  "description": "build with bootstrap extension",
  "browser_action": {
    "default_popup": "popup.html",
    "default_icon": "icon.png"
  },
  "manifest_version": 2
}

style.css

body {
  width: 400px;
  height: 400px;
}

popup.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <div class="text-center mt-4 mb-4">
      <img src="bootstrap-icon.svg" alt="icon" width="60" height="60" class="mb-4">
      <p class="h2">Hello, Bootstrap!</p>
      <p>This is the sample chrome extension. <br>Bootstrap is so easy to learn!</p>
    </div>
    <div>
      <div class="form-label-group mb-2">
        <input type="text" id="email" placeholder="e-mail" class="form-control">
      </div>
      <div class="form-label-group mb-2">
        <input type="text" id="email" placeholder="password" class="form-control">
      </div>
      <div class="checkbox-area pl-2">
        <input type="checkbox" value="check" id="confirm">
        <label for="confirm">Remember me</label>
      </div>
      <div class="button-area text-center">
        <input type="submin" class="btn btn-primary" value="LOGIN">
      </div>
    </div>
  </div>
</body>
</html>

bootstrap-icon.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 612" focusable="false" role="img">
  <title>Bootstrap</title>
  <path fill="#563d7c" d="M612 510c0 56.1-45.9 102-102 102H102C45.9 612 0 566.1 0 510V102C0 45.9 45.9 0 102 0h408c56.1 0 102 45.9 102 102v408z"/>
  <path fill="#fff" d="M166.3 133h173.5c32 0 57.7 7.3 77 22s29 36.8 29 66.5c0 18-4.4 33.4-13.2 46.2-8.8 12.8-21.4 22.8-37.8 29.8v1c22 4.7 38.7 15.1 50 31.2 11.3 16.2 17 36.4 17 60.8 0 14-2.5 27.1-7.5 39.2-5 12.2-12.8 22.7-23.5 31.5s-24.3 15.8-41 21-36.5 7.8-59.5 7.8h-164V133zm62.5 149.5h102c15 0 27.5-4.2 37.5-12.8s15-20.8 15-36.8c0-18-4.5-30.7-13.5-38s-22-11-39-11h-102v98.6zm0 156.5h110.5c19 0 33.8-4.9 44.2-14.8 10.5-9.8 15.8-23.8 15.8-41.8 0-17.7-5.2-31.2-15.8-40.8s-25.2-14.2-44.2-14.2H228.8V439z"/>
</svg>

icon.pngはなんでもOKです。 今回はbootstrapのロゴを拝借しました。

上記のファイルを同一フォルダに配置します。 フォルダ名は今回は「bootstrap」にしました。

解説

今回のポイントはpopup.htmlファイルのタグ内の記述です。 なんとタグ内にBootstrapのCDNを利用するタグを設置するだけでGoogle Chrome拡張機能でBootstrapが使用できます! 設置するタグはBootstrapのサイトからコピーします。

getbootstrap.com

CDNについては説明を割愛させてもらいますが、簡単に言うとネットワークを通じてBootstrapを利用するためのファイルを取得しています。 興味のある方は以下のリンクなどを覗いてみてください。

www.wafcharm.com

<head>
...


  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

...
</head>

またmanifest.jsonの記載方法については以下の記事を参照してください。

www.stay-home-build-app.com

まとめ

今回Google Chrome拡張機能でBootstrapを使用する方法を説明しました。 ポイントはタグ内にCDNを利用するためのリンクを設置することです。

本内容が参考になったら嬉しいです。