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

tokです。今日は千葉県知事選挙の日です。選挙に行きましょう。

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

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

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

拡張機能インストール時の警告
拡張機能インストール時の警告

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

Chromeの拡張機能は危険?

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

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

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

Chromeの拡張機能の作り方

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

Manifest.json

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

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

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

項目名意味
manifest_versionこのファイルのフォーマットとしてバージョンいくつを使うか。
現在最新はバージョン3。今回はバージョン2を使用。
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倍した量を与えることで速いスクロールを実現しています。遅くしたい場合は2の部分を小さくしてください。1や1.5など。

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

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

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

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

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

拡張機能の設定の開き方
拡張機能の設定の開き方

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

拡張機能の設定の開き方2
拡張機能の設定の開き方2

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

拡張機能の設定画面デベロッパーモードOFF
拡張機能の設定画面デベロッパーモードOFF

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

拡張機能の設定画面デベロッパーモードON
拡張機能の設定画面デベロッパーモードON

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

拡張機能を読み込んだところ
拡張機能を読み込んだところ

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

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

拡張機能の内容を修正して反映する場合
拡張機能の内容を修正して反映する場合

まとめ

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

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

コメント

タイトルとURLをコピーしました