Google Chrome拡張機能を作ってみた - 株式会社シベスピ　従業員ブログ

Google Chrome 拡張機能とは

Google Chromeをカスタマイズして、よりリッチにするためのアドオンです。
例えば、
・広告をブロックする
・音声を自動的に文字起こしする
・Webページの表示をおしゃれにする
など様々なことができます。

作ってみた

Chromeウェブストアで公開されているようなしっかりしたものもありますが、
簡単なものなら自分で作成できます。
やってみたところ、とても簡単でしたので共有します。

今回作る拡張機能

Webページのふちを歩く猫を表示する拡張機能。
↓イメージ(vscodeの拡張機能)
https://marketplace.visualstudio.com/items?itemName=tonybaloney.vscode-pets

大まかな流れ

ソースが入ったフォルダを作成する
Google Chromeでフォルダを読み込む

以上です！見ていきましょう。

実装

1.ソースが入ったフォルダを作成する

今回は、主にJavaScriptとCSSで作成します。

フォルダ構成

 GCE_WalkingCat(ソースフォルダ)
   ├images
   │ └walking_cat.gif(歩いてる猫のGIF)
   ├css
   │ └style.css
   ├js
   │ └script.js(猫を移動させるスクリプト)
   └manifest.json(拡張機能の設定ファイル)

重要なのはmanifest.jsonです。
どのソースを動かすか、どこのページで動かすか、どのリソース(画像など)を使うかなどを記載します。
それではソースを見ていきます。

①walking_cat.gif

↓こちらのサイトからフリー素材を使わせていただきます。
https://freesozaixtrain.web.fc2.com/

②style.css

↓猫GIFの大きさと位置指定要素を設定しています。

#gce_cat_gif {
    position: absolute;
    width: 120px;
    height: 60px;
}

③script.js

↓表示されたページに猫GIFのimg要素を追加し、0.1秒ごとに移動させます。
右下→左下→左上→右上→右下の順に移動し、四隅に着いたらGIFを90度回転し方向転換します。

window.onload = function() {
  // htmlにimg要素作成
  var img_element = document.createElement('img');
  var gifPath = chrome.runtime.getURL('images\\walking_cat.gif');
  console.log(gifPath);
  img_element.src = gifPath;

  img_element.id = 'gce_cat_gif';
  var append_area = document.querySelectorAll("body")[0];
  append_area.appendChild(img_element);
  
  // gif表示設定
  var image = document.getElementById('gce_cat_gif');
  var distance = 10; // 移動速度
  var screenWidth = window.innerWidth; // 画面の幅
  var screenHeight = window.innerHeight; // 画面の高さ
  var currentX = screenWidth - image.width; // 画像の初期X
  var currentY = screenHeight - image.height; // 画像の初期Y
  
  // 初期位置
  image.style.left = currentX + 'px';
  image.style.top = currentY + 'px';

  // 画像の向きを変更
  function setDirection(deg) {
    image.style.transform = 'rotate(' + deg + 'deg)';
  }

  // 左方向の移動
  function moveLeft() {
    currentX -= distance;
    if (currentX < 0) {
      currentX = 0;
    }
    image.style.left = currentX + 'px';
    setDirection(0);
    if (currentX === 0) {
      currentX -= 28; // 左側隙間を微調整
      image.style.left = currentX + 'px'; // 左側隙間を微調整
      clearInterval(leftInterval);
      upInterval = setInterval(moveUp, 100);
    }
  }

  // 上方向の移動
  function moveUp() {
    currentY -= distance;
    if (currentY < 0) {
      currentY = 0;
    }
    image.style.top = currentY + 'px';
    setDirection(90);
    if (currentY === 0) {
      clearInterval(upInterval);
      rightInterval = setInterval(moveRight, 100);
    }
  }

  // 右方向の移動
  function moveRight() {
    currentX += distance;
    if (currentX > screenWidth - image.width) {
      currentX = screenWidth - image.width;
    }
    image.style.left = currentX + 'px';
    setDirection(180);
    if (currentX === screenWidth - image.width) {
      currentX += 30; // 右側隙間を微調整
      image.style.left = currentX + 'px'; // 右側隙間を微調整
      clearInterval(rightInterval);
      downInterval = setInterval(moveDown, 100);
    }
  }

  // 下方向の移動
  function moveDown() {
    currentY += distance;
    if (currentY > screenHeight - image.height) {
      currentY = screenHeight - image.height;
    }
    image.style.top = currentY + 'px';
    setDirection(-90);
    if (currentY === screenHeight - image.height) {
      clearInterval(downInterval);
      leftInterval = setInterval(moveLeft, 100);
    }
  }

  // 最初は左方向の移動
  var leftInterval = setInterval(moveLeft, 100);
};

※未完成のポイントがあります。時間の関係で見送ります。
　(1).スクロールに対応していません。ウィンドウの大きさを基準に移動していることが原因。
　(2).四隅で若干カクカクします。四隅の到達判定でGIFの向き変更を考慮していないことが原因。

④manifest.json

他にも設定できる項目はたくさんありますが、今回設定した項目はこちらです。

manifest_version:マニュフェストファイルのバージョン。v2は 2024年6月にはサポート終了のためv3。
name:拡張機能の名前。
version:拡張機能のバージョン
permissions:拡張機能の権限。"activeTab"は、アクティブなタブに対してアクセス可能な権限。
web_accessible_resources:
拡張機能がWebページからアクセス可能なリソース。
指定したリソースがすべてのWebページ("<all_urls>")から取得できる。
content_scripts:
拡張機能が特定のウェブページで実行するスクリプトやスタイルシートの定義。
すべてのWebページ("<all_urls>")で指定したスクリプトをスタイルを適用する。

2.Google Chromeでフォルダを読み込む

一瞬です！

①拡張機能の管理画面を開く

GoogleChrome右上の三点メニュー > 拡張機能 > 拡張機能を管理を開きます。

②ソースを読み込む

パッケージ化されていない拡張機能を選択します。

ソースが入ったフォルダを選択すると、拡張機能が読み込まれます。

③確認する

すべてのサイトで実行する設定にしているので、適当なWebページを開けば動いていることが確認できます。

感想

ソースさえ作成できれば、あとはフォルダを読み込むだけで簡単でしたね。
良く使うページでここをちょとだけ変えたい！などあれば、ぜひやってみてください。

Google Chrome拡張機能とは