スマートキャンプに入社しました！& Chrome拡張機能をVue.jsで作りました！

初めまして！8月よりスマートキャンプにエンジニアとして中途入社した吉永です！

私は現在19歳で、通信制の大学に通いながらエンジニアチームの一員として開発に携わっています。

プログラミングは中学生の時に始め、高校在学時にとあるスタートアップ企業でインターンしたり、卒業後はエンジニアとして正社員で開発を行っていました。

得意分野はフロントエンドで、主にVueやNuxtを使った開発が好きですが、前職ではLaravelやDjangoを使ったバックエンドの開発も行っていたため、メンバー構成に左右されない柔軟な開発を行えることが強みだと思っています。

薪入れ作業でChrome拡張機能を開発しました
全体的なまとめ
- 参考にさせていただいたサイト

薪入れ作業でChrome拡張機能を開発しました

スマートキャンプは月一で、普段は機能開発を優先していて手がつけられない、開発チームで解決できる改善課題を行う日を設けています！

この日僕らは、開発環境と本番環境を間違えてしまう課題を解決するために、

開発用環境か本番環境かをすぐにわかるようにするChrome拡張機能を作る

という課題を設定しました、恐らく見ていただいた方がわかりやすいと思うので、画像を載せると

左上にこれは本番環境ですという文言が出ていることがわかると思います。

なぜこの拡張機能が必要だったのか

「こんなものなくてもURL見れば判別できるじゃん！」と思う方もいると思いますが、STG環境のアプリ内のリンクが一部本番のURLになっているため、STGを触ってるはずがいつの間にか本番を見ているみたいなことが度々あり、それに気が付かずボタンを押してしまうことが多かったのです。

例えば

上の画像はBoxilの資料請求画面ですが、もし開発環境と間違えて本番環境で資料請求をしてしまうと、顧客からの資料請求と認識されてしまい、Boxilの売り上げとなってしまいます。

この場合、他の部署に問い合わせをして、

「今の資料請求間違いです！取り消してください！」

と言わなくてはいけなくなってしまうのです。

そのため、URLを見なかったとしても必ず目に入るような形で本番環境をアピールする必要がありました。

どうやって作ったか

Chromeの拡張機能について調べていると、どうやらVue.jsで作れるらしいという記事を発見しました。

ディレクトリ構成はこんな感じ

構成自体は至って普通で、VueCLIで作った時とほぼ同じです。

主要ファイル解説・作り方

・main.js

import Vue from "vue";
import App from "./App.vue";

(function () {
  'use strict';
  document.querySelector('body').insertAdjacentHTML(
    "beforeEnd",
    `<div id="app"></div>`
  );
  let vm = new Vue({
    render: h => h(App)
  }).$mount("#app");
})();

bodyの中にid = appの要素を挿入し、そこにVueをマウントします。

・App.vue

<template>
  <div class="test">
    HelloWorld !
  </div>
</template>

<script>
  export default {
    name: "app"
  };
</script>
<style scoped>
  .test {
    background-color: red;
  }
</style>

今回はテスト用に作った、HelloWorldという文字を画面に表示させるだけのApp.vueにしました。 app以外にもコンポーネントを作りたいという場合は、普段と同じようにcomponentsフォルダの中に.vueのファイルを作り、importしていくといった流れになります。

・manifest.json

{
  "manifest_version": 2,
  "name": "BOXILチーム",
  "version": "0.0.1",
  "description": "テストコード",
  "content_scripts": [
    {
      "matches": [
        "https://www.google.co.jp/*"
      ],
      "js": [
        "js/app.js"
      ]
    }
  ],
  "permissions": [
    "tabs",
    "activeTab",
    "https://www.google.co.jp/*"
  ]
}

googleにアクセスした時にこの拡張機能が動作するように権限の要求だったり、マッチするURLなどを定義します。

・vue.config.js

module.exports = {
  filenameHashing: false, //ファイル名のハッシュ化防止
  productionSourceMap: false, //ソースマップ作成防止
  configureWebpack: {
    optimization: {
      splitChunks: false //チャンクファイルの生成防止
    },
  },
  publicPath: './',
  css: {
    extract: false //cssを別ファイルに分けずに、一個のjsファイルとして出力させる
  }
};

ビルドした際に、各ファイルの名前がハッシュ化されてしまうといけないので防止したりしています。 CSSの読み込みなども後々手間なので、一つのjsファイルに出力されるようにしました。

・package.json

//長いので省略
"scripts": {
    "build": "vue-cli-service build src/js/main.js",
    "generate": "npm run build && cp src/manifest.json dist/ && rm dist/index.html"
},
//長いので省略

ビルド後にmanifest.jsonをdistフォルダにコピーし、index.htmlを削除しています。

主要ファイルは以上で、npm run generateでdistフォルダに出力します。

その後chromeの拡張機能読み込み画面で、パッケージ化されていない拡張機能を読み込むを選択し

distフォルダを選択します。

選択後、https://www.google.co.jp/にアクセスすると...

このように、HelloWorldが表示されていることがわかります！

詰まったところ

URLの内容を見て、本番環境かそうでないかを判別するだけなら簡単でしたが、ページのボタンクリックなども制御しようとした場合に、結局document.querySelectorAllなど素のJSを使ってボタン制御をしなくてはいけませんでした。そう考えると、「Vueで実装する必要あった...?」みたいな話になってしまいそうですが、面白かったので良しとします。