はじめに

今回は、「最悪のChrome拡張機能を作ってみた」と題して、作成したChrome拡張機能の紹介とコードの解説をしていきます。

どんなものか(閲覧注意)

画面の要素を揺らしまくります。それだけ。

どんな人も数十秒で酔わせる強い決意をもって作りました🫡

どうやってやっているのか

拡張機能のアイコンをクリックしたとき、ページのBlock要素を全部とってきて、Animate.cssを使用して揺らしています。

manifest.json

{
  "manifest_version": 3,
  "name": "drunk",
  "version": "1.0",
  "description": "絶対に酔わせる拡張機能。体調の悪い方、酔いやすい方はご注意ください",
  "permissions": ["activeTab", "scripting"],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_title": "アニメーション開始"
  },
  "icons": {
    "16": "icon.png",
    "32": "icon.png",
    "48": "icon.png",
    "128": "icon.png"
  }
}

permissionsには権限を設定しています。
どちらもスクリプトを流し込むための権限です。

アイコンは色々なサイズが必要かと思いきや、128px*128pxの画像１つで審査は通ります(豆知識)

background.js

chrome.action.onClicked.addListener((tab) => {
  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    files: ["content.js"],
  });
});

chrome.action.onClicked.addListenerは拡張機能アイコンのクリックを監視するものです。
chrome.scripting.executeScriptで、アイコンクリック時にcontent.jsを流し込むことができます。

content.js

// Animate.cssを使えるようにlinkタグを挿入
const link = document.createElement("link");
link.rel = "stylesheet";
link.href =
  "https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css";
document.head.appendChild(link);

// body、main、header以外のブロック要素を選択
const elements = document.querySelectorAll("*:not(body):not(main):not(header)");

// Animate.cssの速度を変化させるクラスをランダムに取得
function getRandomSpeedClass() {
  const speedClasses = ["animate__slow", "animate__fast"];
  const randomIndex = Math.floor(Math.random() * speedClasses.length);
  return speedClasses[randomIndex];
}

// 各ブロック要素にAnimate.cssのクラスを追加
elements.forEach((element) => {
  if (window.getComputedStyle(element).display === "block") {
    element.classList.add(
      "animate__animated",
      "animate__shakeX",
      "animate__infinite",
      getRandomSpeedClass()
    );
  }
});

割とみたまんまのコードです。
特に難しいことはしていませんが、割とキレイにまとめられたんではないかと思います。

Animate.cssについては以下の記事も併せてご覧いただくといいかと思います！

さいごに

お読みいただきありがとうございました！
ぜひこの拡張機能を使用して、三半規管をぶっこわしてみてください！