ブラウジングがたのしくなるChrome拡張


![img-header-min.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478782/d29760c0-9c79-4ba7-f05a-ab2694a4f079.png)


この記事は[クソアプリ Advent Calendar 2022](https://qiita.com/advent-calendar/2022/kuso-app)の
カレンダー2の23日目の記事です。

## カタカタカタ...カチッカチッ...カタカタカタ...

コードを書いていると一日の大半がネットーサーフィンなんてことも。

「カタカタカタ...カチッカチッ...カタカタカタ...」

普段のブラウジングは、こんな味気ない感じ。。

**なので、ブラウジングがハッピーになるChrome拡張を作りました!!**

## つくったもの

**『 Happppppppppy Browssssssing!!!!!! 』**
👉 [Chrome Web Store](https://chrome.google.com/webstore/detail/happppppppppy-browssssssi/pkdicjoonmjmennalcinlenhomdiknnm)

![img-header-min.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478782/c28a1038-00f5-202c-2c1f-50432b86d177.png)


<iframe width="560" height="315" src="https://www.youtube.com/embed/0VRUiyMJT6Q" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

この拡張機能があればクリックやEnterごとに楽しいエフェクトが!!  
味気ない画面が一気に華やかになります(\*´ω｀\*)!!

**※注意※ たのしい音も出るので音量にはご注意ください**

設定で発生する確率を変更も。
HAPPYモードはほぼ無限に発生します(\*´ω｀\*)

![option1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478782/3f0af34e-6e08-7c0d-fcaa-2adfee66243c.png)

## 使った技術

今回はこんな感じの構成で作ってます！

- [Vite3](https://ja.vitejs.dev) ... ビルドツール
- [Vue3](https://ja.vuejs.org/)
- [CRXJS](https://crxjs.dev/vite-plugin) ... Chrome拡張用のViteプラグイン
- [Tailwind CSS](https://tailwindcss.com/)
- [daisyUI](https://daisyui.com/) ... Tailwind CSSベースのCSSライブラリ
- [Lottie](https://airbnb.design/lottie/) ... アニメーションライブラリ
- [howler.js](https://howlerjs.com/) ... オーディオライブラリ

クリックとEnterキーのイベントが発生すると、  
一定の確率でエフェクトを再生するシンプルなつくりです(\*´ω｀\*)

全体のソースコードはここに。

https://github.com/memorylovers/crx-happy-browsing

音やアニメーションの素材はこちらのものを使わせていただきました！

- [LottieFiles: Download Free lightweight animations for website & apps.](https://lottiefiles.com/)
- [効果音ラボ - フリー、商用無料、報告不用の効果音素材をダウンロード](https://soundeffect-lab.info/)
- [無料 BGM・効果音のフリー音源素材 | Springin’ Sound Stock](https://www.springin.org/sound-stock/)

### Vue/Vite

普段はNuxt.jsで開発しているので、慣れているVue/Viteで画面を作れるように。

- [Vite3](https://ja.vitejs.dev) / [Vue3](https://ja.vuejs.org/)

### CRXJS

Chrome拡張機能用のViteプラグイン。  
manifest.json作成やパスの解決などをしてくれる便利なやつ。

- [CRXJS](https://crxjs.dev/vite-plugin)

### Tailwind CSS/daisyUI

CSS系はTailwindベース。  
daisyUIはUIコンポーネントのクラスを用意してくれているTwilwindプラグイン。  
ボタンとかスイッチとか用意してあるので便利。

- [Tailwind CSS](https://tailwindcss.com/)
- [daisyUI](https://daisyui.com/)

### Lottie

WebやiOS/Androidで使えるアニメーションライブラリ。  
フリーで使える素材もあり、アニメーションが簡単に追加できるやつ。

- [Lottie](https://airbnb.design/lottie/)
- [LottieFiles: Download Free lightweight animations for website & apps.](https://lottiefiles.com/)

こんな感じで、DOM要素(`container`)とアニメーションデータ(`path`)を指定するだけで、  
簡単にアニメーションを再生してくれる。

```typescript
// INSTALL: npm i lottie-web
import { default as lottie } from "lottie-web/build/player/lottie_light";

lottie.loadAnimation({
  container: element, // the dom element that will contain the animation
  path: 'data.json' // the path to the animation json
  renderer: 'svg',
  loop: true,
  autoplay: true,
});
```

### howler.js

[Web Audio API](https://webaudio.github.io/web-audio-api/)と[HTML5 Audio](https://html.spec.whatwg.org/multipage/media.html#the-audio-element)の操作を楽にしてくれる
JavaScriptのオーディオライブラリ。

- [howler.js](https://howlerjs.com/)

こんな感じで、再生したいファイルを指定すればOK。

```typescript
// INSTALL: npm i howler
import { Howl } from "howler";
const sound = new Howl({
  src: ['sound.mp3'],
  autoplay: true,
});
```

## おわりに

ブラウジングが楽しくなると一日の大半がしあわせになりますね♪
よかったら、ぜひ使ってみてください〜(\*´ω｀\*)

https://chrome.google.com/webstore/detail/happppppppppy-browssssssi/pkdicjoonmjmennalcinlenhomdiknnm

https://github.com/memorylovers/crx-happy-browsing

## ちなみに

こんな感じにイベントリスナーを登録しているので、  
クリックとEnterでほぼ何もできなくなります(\*´ω｀\*) 

```typescript
const eventListener = (e) => {
  const isTriggered:boolean = // エフェクトを再生するかどうか
  if (!isTriggered) return;

  event.stopPropagation();
  event.preventDefault();
};
document.body.addEventListener("click", eventListener, true);
document.body.addEventListener("keydown", eventListener, true);
```