はじめに
ブラウザで特定のページを開いたときに
「自動でスクリプトを走らせたいな～」
とか
「スタイルを部分変更したいな～」
とか思ったことありませんか？自分はありました。
そこで “Chrome拡張機能 スクリプト実行 スタイル変更” などと検索すると実現できそうなものがいくつかヒットしました。
ただ、人によっては拡張機能をむやみやたらに入れられなかったり、あるいは拡張機能が要求するアクセス権限が多くて心配になることもあるかと思います。
じゃあどうするか？そういうときは自作しちゃえばいいんです！
というわけでこの記事ではその方法と利用例をいくつか紹介します。
方法
いたってシンプルです。
- manifest.jsonをつくる。
- サイトごとに適用したいスタイルシートやスクリプトをつくる。
- フォルダにまとめてブラウザの「パッケージ化されていない拡張機能を読み込む」からインストールする。
これだけです。
たとえば以下のような構成でつくって、
/js-css-apply
├ /css
│ └ github.css
│
├ /js
│ ├ google.js
│ └ unitedcinemas.js
│
└ manifest.json
manifest.jsonにはこんな感じで対象にしたいサイトのURLパターンと適用したいスクリプトあるいはスタイルシートを指定します。
{
"name": "js-css-apply",
"version": "1.0",
"manifest_version": 3,
"description": "JS CSS Apply",
"content_scripts": [
{
"matches": [
"https://github.co.jp/*",
"https://github.com/*"
],
"css": [
"css/github.css"
]
},
{
"matches": [
"https://www.google.co.jp/search?*"
],
"js": [
"js/google.js"
]
},
{
"matches": [
"https://www.unitedcinemas.jp/pticket/seat.php*"
],
"js": [
"js/unitedcinemas.js"
]
}
]
}
利用例
自分が実際に使っているケースをいくつか紹介します。どういう使い方ができるかイメージしやすくなれば幸いです。
GitHubのサインアップボタンを消し去る
サインインとサインアップ、いまだにどっちがどっちかわからなくなるので不要な方（サインアップ）は消しちゃいました。
/* サインアップの非表示 */
a[href="https://github.com/join"],
a.HeaderMenu-link--sign-up {
display: none !important;
}
これで何も考えることなく右上をクリックすればログインできるようになりました。グッバイミスクリック！
ユナイテッドシネマの空き座席数を表示する
ユナイテッドシネマの予約ページで総座席数が表示されるのですが、そこに空き座席数も計算して表示するようにしてみました。
const showVacantSeat = async () => {
// 読み込み完了後に1秒待ってから処理を開始
await new Promise(resolve => setTimeout(resolve, 1 * 1000));
// 総座席数のセル
const td = document.querySelector('table#seatSelect>tbody>tr>td');
// 空き座席数
const vacant = document.querySelectorAll("table#view_seat td:has(a)").length;
if (td && td instanceof HTMLTableCellElement) {
td.innerHTML += ` / 空き座席数 <span class="seat">${vacant}</span>席`;
}
}
showVacantSeat();
予約ページを開くと総座席数のところに空き座席数も表示してくれます。だからなんだという話ですが...
ちなみに、もともとブックマークレットとしてつくったものを自動で実行されるように移植したのでなんとなく1秒の待ち時間を入れています。
このサイトではもしかしたら不要かもですけど、対象サイトのつくりによっては描画やデータ取得を待つ必要があるかもしれないという点は覚えておくとよいかと。
Google検索のAIによる回答を消す
Google検索結果のページでたまに表示される "AIによる概要" というAIが回答を返す機能を回避します。
消し方をググってみるとクエリパラメータに &udm=14 を付ければいいみたいです。
なので、URLを見てパラメータが未設定なら付与して再検索するようなスクリプトを流してみます。
// udm=14を含まない場合は含めて遷移
if (!document.location.href.includes('udm=14')) {
// replaceで履歴に残さない
window.location.replace(`${document.location.href}&udm=14`);
}
AIの回答が消えましたね。というか見比べてて気づいたんですけど、単にウェブタブに遷移してるだけっぽいですね。
ちなみに、この方法を使うと「天気」などと検索したときに気象情報を表示してくれる機能や「電卓」「15 * 4 + 3」などと検索したときに電卓を表示してくれる機能も表示されなくなるので普段から利用している人は注意してください。
おわりに
見た目も動きも自分好みに変えて快適なブラウジングライフを手に入れよう！
最後まで読んでいただきありがとうございました。