MixchTools

最近ミクチャにはまっていて、PCからウェブ版ミクチャを快適に使うためのChrome拡張機能を作った。

Chrome拡張機能を作るのは初めてだったので、備忘録として残しておく。

ざっくりとした技術仕様は以下のような感じ。

Typescriptで書く
scssを使う
webpackでpackする

今回作った拡張機能には以下の2つの機能を実装した。 - コメントがあったらPush通知を出す - レイアウトを良い感じに変えられる

自宅のデスクは狭くて2枚のディスプレイを横に並べられないので、サブディスプレイは90度回転させて縦長にして使っている。デフォルトのレイアウトはライブの動画の横にコメント欄があって、横幅が狭いとかなり動画の領域が狭くなってしまうので、動画部分とコメントの部分を縦に並べられるようにしたい。

manifest.json

MixchTools/manifest.json at master · hayashikun/MixchTools · GitHub

manifest では、content_scripts として content_script.js と content_style.css を登録した。 content_script.js からはアクセスしているページのDOMをいじれるので、 content_script.js でコメント欄のDOMの変化を監視して、レイアウト変更のためにDOMをいじる。

background には background.js を登録して、page_action には popup.html を設定する。 popup.html では、popup.js を呼ぶようにした。

src/*.ts

MixchTools/src at master · hayashikun/MixchTools · GitHub

content側 (content_script.js) にbackground側 (background.js, popup.js) からメッセージを送るときは、以下のようにしてtab探して送信する。

chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
  chrome.tabs.sendMessage(tabs[0].id!, { message: 'push', activate: isActive })
})

メッセージを受け取るときは、content側にListenerを追加する。

chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) {
  switch (message.message) {
    case 'push':
      // Do something
      break
  }
})

content側からメッセージを送るときは以下のようにして送り、受け取り側では上と同じようにListenerを追加すれば良い。

chrome.runtime.sendMessage({ type: 'chat', data: chat })

webpack.config.ts

MixchTools/webpack.config.ts at master · hayashikun/MixchTools · GitHub

.tsファイルはwebpackでコンパイルしてdist に吐くようにした。

scssをコンパイルするために module.rules に以下を追加した。

      {
        test: /.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader'
        ]
      }

MiniCssExtractPlugin は plugin で以下のように追加しておく。

    new MiniCssExtractPlugin({
      filename: 'content_style.css'
    })

tsconfig.json

TypescriptでChrome拡張機能を書くにあたって、型定義は @types/chrome - npm というのがあるので、yarn add -Dしておいた。

.eslintrc.yml

eslintの設定では、env に webextensions: true を追加すれば、chrome.runtime とかで怒られない。

.github/workflows

MixchTools/.github/workflows at master · hayashikun/MixchTools · GitHub

gitで v* とtagを付けてpushしたらリリースにアップロードするgithub actions release.ymlを設定した。

これで快適にミクチャを見ながら作業ができるね！

f:id:hayashikunsan:20211107013953j:plain

はやし雑記

はやしです

TypescriptでChrome拡張機能を作った