自分専用のブラウザー拡張機能を作っている話

はじめに

Web ブラウジング体験をプチ改善したいことって本当によくあります。 Partially Persistent Headers のようなユーザーを邪魔するだけの要素は本当にイライラするので撲滅したい。

• スクロールで出たり消えたりするヘッダー（Partially Persistent Headers）をページ上部に固定したい（「マイナビニュース」「DevelopersIO」など）
• テキスト選択時に出てくるポップアップを間違えて押さないよう非表示にしたい（「Medium」「note」「Yahoo!ニュース」など）
• 省略表示（...）されて途中までしか読めない文を全文表示したい（はてブのホッテントリのタイトルなど）
• Amazon の商品ページの URL を /dp/{asin} 形式に正規化したい
• ブコメの熊を消したい

いずれも数行の CSS または JS で実現できることばかりです。ユーザースタイルシートやユーザースクリプトさえ書ければ。

ユーザースタイルシートやユーザースクリプトを導入するサードパーティ製のブラウザー拡張機能は存在しますが、サードパーティ製のブラウザー拡張機能はセキュリティの懸念が大きすぎて気軽には導入できません。

• なぜ拡張機能にマルウェアが仕込まれる問題が後を絶たないのか？ - GIGAZINE
  https://gigazine.net/news/20210218-open-source-extensions-malware/

そこで私は自分専用の小さなブラウザー拡張機能を作っています。

つくりかた

実装

フォルダーを作って manifest.json と CSS や JS を置きます。私のはこんな感じです。 Chrome や Edge なら manifest_version を 3 にしても OK。

• manifest.json

{
  "manifest_version": 2,
  "name": "my browser extension",
  "version": "0.0.0",
  "description": "これは自分専用です。",
  "content_scripts": [
    { "matches": ["https://news.mynavi.jp/*"], "css": ["mynavi.css"] },
    { "matches": ["https://*.yahoo.co.jp/*"], "css": ["yahoo.css"] },
    { "matches": ["https://b.hatena.ne.jp/*"], "js": ["b.hatena.js"] },
    {
      "matches": ["https://www.amazon.co.jp/*"],
      "js": ["amazon.js"],
      "run_at": "document_end"
    }
  ]
}

• mynavi.css

.header {
  position: static !important;
}

• yahoo.css

#yjSearchPop {
  display: none !important;
}

• b.hatena.js

document.querySelectorAll('a[data-entry-id]').forEach(a => a.textContent = a.title)

• amazon.js

const asin = document.getElementById('ASIN')?.value
if (asin) {
  const normalizedUrl = `https://www.amazon.co.jp/dp/${asin}`
  if (location.href !== normalizedUrl) {
    console.log('replace url:', location.href, ' -> ', normalizedUrl)
    history.replaceState(0, '', normalizedUrl)
  }
}

※ 8月13日時点。当然ですがサイトの DOM 構造が変わると機能しなくなります。

適用

Chrome

拡張機能管理ページ（chrome://extensions/）を開いて「デベロッパー モード」を ON にします。「パッケージ化されていない拡張機能を読み込む」ボタンを押して manifest.json を含むフォルダーを選択します。

Edge

拡張機能管理ページ（edge://extensions/）を開いて「開発者モード」を ON にします。「展開して読み込み」ボタンを押して manifest.json を含むフォルダーを選択します。

Firefox

about:debugging#/runtime/this-firefox を開き、「一時的なアドオンを読み込む...」ボタンを押して manifest.json ファイルを選択します。

Safari

• Safari向けに既存のWeb Extensionを変換する方法 - 見つける - Apple Developer
  https://developer.apple.com/jp/news/?id=qiz0arxc

おわりに

サイトあたり数行のプチ拡張で、 Web ブラウジングは非常に快適になります。とても手軽なので、みんなやればいいのに、と思います。ぜひお試しください。

参考

• 初めての拡張機能 - Mozilla | MDN
  https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension
• manifest.json - Mozilla | MDN
  https://developer.mozilla.org/docs/Mozilla/Add-ons/WebExtensions/manifest.json