Chromebookのマウスホイールの速度が遅いので自分で拡張機能作ってみた

Chromebookを購入して不便だと思っていたことの１つに「マウスのホイールを使ったスクロール量が変更できないこと」があります。今まで使ったOSで変更できなかったものは無いような気がします。

Chromeストアに拡張機能はあるけれど
Chromeの拡張機能は危険？
自分で作ったものは安全！
Chromeの拡張機能の作り方
1. manifest.json
2. プログラムファイル(content_scripts.js)
拡張機能のインストール方法
まとめ

Chromeストアに拡張機能はあるけれど

インターネットで検索すると、Chromeの拡張機能をインストールすれば実現できそうです。試しにインストールしようとすると次のような画面が・・・。

「アクセスしたウェブサイト上にある自分の全データの読み取りと変更」って軽い感じで許可求めてきますけど、よく考えると（よく考えなくても）メチャクチャ恐ろしい要求してきていますよね？ブラウザで入力したものや画面に表示されているものをこの拡張機能の作者に渡すということです。
（正確に言うと作者ではなくて作者が作ったプログラム）

Chromeの拡張機能は危険？

Googleさんもセキュリティの目を厳しくしていますが、完全に防ぐことはできていませんし、今後もできないと考えたほうがよいでしょう。もしインストールするときには信頼できるものかどうかしっかり確認しましょう！

自分で作ったものは安全！

調べると、この拡張機能、自分でも作れます。自分で作ったものならどのような動作をするものなのかわかりますし、自分が変更しない限り動作も変わりません。ストアに登録とか不要なので、気軽に試してみましょう。

Chromeの拡張機能の作り方

　最低限必要なのは拡張機能の概要を記載するファイル（manifest.json）と、動作するプログラムファイル（今回はcontent_scripts.js）になります。

※2022/2/20修正 Manifest.jsonだと読み込み時にエラーが出ます。小文字のmanifest.jsonになります。

manifest.json

テキストエディタで以下の内容のファイルを作成します。

{
    "manifest_version": 2,
    "name": "私の拡張機能",
    "description": "マウスホイールのスクロール量を変更",
    "version": "1.0",
    "content_scripts": [{
        "matches": ["http://*/*", "https://*/*" ],
        "js": ["content_scripts.js"]
    }]
}

内容は以下のとおりです。このファイルでは実際の動作ではなく、拡張機能の概要だったり、動作する条件を記載します。

項目名	意味
manifest_version	このファイルのフォーマットとしてバージョンいくつを使うか。現在最新はバージョン３。今回はバージョン２を使用。
name	拡張機能名。好きな名前にしても大丈夫です。拡張機能一覧に表示されます。
description	拡張機能の説明を簡単に。拡張機能一覧に表示されます。
version	この拡張機能のバージョン。一般的に最初に完成したものは1.0にして、修正や機能追加したときに値を増やしていきます。
content_scripts	ブラウザ上に表示されるページに対して、スクリプトを挿入して動作するタイプの拡張機能
matches	指定したURLで動作する。今回はブラウザでアクセスするhttp,httpsから始まるURL全て。
js	動作させるプログラムファイル名を指定

manifest.jsonの各項目の説明

プログラムファイル(content_scripts.js)

テキストエディタで以下の内容のファイルを作成します。

let dom = document.body;

dom.addEventListener('mousewheel', e => {
    event.preventDefault();
    scrollBy(0, -e.wheelDelta * 2);
} , { passive: false });

ホイールを動かしたときのイベントを追加。preventDefaultでオリジナルの動作（遅いスクロール）を止めて、scrollByで速いスクロールを行います。e.whellDeltaにホイールを回した量が入ってきます。その量を２倍した量を与えることで速いスクロールを実現しています。遅くしたい場合は2の部分を小さくしてください。1や1.5など。

逆に速くしたい場合は2の部分を大きくしてください。3や4.5など。

処理はこれだけです。変なところにデータ送ったりしていませんYO。

新しいフォルダを適当な名前（例えばmyext)で作成して、これまでに作った２つのファイルを入れましょう。これでインストール準備完了です。

拡張機能のインストール方法

Chromeアプリを開いて画面右上にあるジグソーパズルのアイコンをクリックします。

つづいて、「拡張機能を管理」をクリックします

拡張機能の設定画面になります。右上のデベロッパーモードのスイッチをクリックしてONにします。自分で作成した拡張機能をインストールする場合にはデベロッパーモードをONにする必要があります。

デベロッパーモードがONになると、「パッケージ化されていない拡張機能を読み込む」というボタンが画面上部に出現します。このボタンをクリックします。

フォルダを選択する画面では、さきほどの手順で作成した拡張機能のフォルダ（例えばmyext）を選択してください。成功すると「私の拡張機能」が画面に表示されます。manifest.jsonを作成したときにnameやdescriptionを変更した方は、自分が入力した名前で出てくることを確認してください。

これでインストール完了です。これ以降にアクセスしたサイトでは拡張機能が有効になっているのでマウスホイールのスクロールが変化しているか試してみてください。

スクロール量を変更したい場合は、jsファイルを編集して、拡張機能の設定画面の矢印がくるんと丸まっているアイコンをクリックしましょう。これで変更が反映されます。

まとめ

ホイールのスクロール量を変更するChromeの拡張機能を作成し、インストールしました。簡単な動作をするものであれば１０行程度のファイルを２つ作るだけで作成できることがわかりました。

いくつかのサイトで試してみましたが、一部の画面でホイールスクロールできなくなることがわかっています。原因調査中。動作に不具合等ございましたら拡張機能を無効にしてください。
よろしければそのときのURLや動作状況をお知らせください。

＜参考URL＞　情報ありがとうございます。
https://qiita.com/guru_taka/items/37a90766f4f845e963e5
http://degitekunote.com/blog/2016/11/02/chrome-extension/
https://qiita.com/k7a/items/26d7a22233ecdf48fed8
https://qiita.com/de_teiu_tkg/items/e7a95e1f653080e41106
https://q-az.net/javascript-mouse-stalker/
https://1-notes.com/javascript-on-mousewheel/
https://www.sejuku.net/blog/62930
https://qiita.com/KDE_SPACE/items/e21bb31dd4d9c162c4a6
https://kanoto.info/202001/679/
https://qiita.com/ledsun/items/4fbaee8e9397bb3e5321
https://qiita.com/mdstoy/items/9866544e37987337dc79
https://www.webprofessional.jp/event-bubbling-javascript/