ブラウジング中に今年のコナン映画のネタバレを食らうのをどうにかして回避する。

2024/04/12に劇場版名探偵コナンが公開されました。

劇場版『名探偵コナン 100万ドルの五稜星（みちしるべ）』

今年は絶対に何が何でもネタバレを踏みたくなかったので、ネタバレを含みそうなページの表示をブロックするChrome拡張をつくりました。

Chrome拡張の実装

bodyの中身をMutationObserverで監視して、ネタバレになりそうなワードを含む場合にページの中身を書き換えることにしました。 大したことはしないのでcontent scriptだけでどうにかします。

const keywords = [
  "名探偵",
  "コナン",
  "100万",
  "五稜",
  "みちしるべ",
  "怪盗",
  "まじっく",
  "以下思いつく限りネタバレに繋がりそうなワードを羅列する",
  "キーワードはこの他に20くらい設定しました",
];

const target = document.body;

const observer = new MutationObserver(() => {
  const text = document.body.textContent;
  if (keywords.find((keyword) => text.search(keyword) > 0)) {
    document.body.innerHTML = "映画のネタバレを含みそうなページです。";
  }
});

observer.observe(target, {
  childList: true,
  attributes: true,
  characterData: true,
  subtree: true,
});

manifest.jsonは適当です。

{
  "icons": {
    "16": "icons/16.png",
    "48": "icons/48.png",
    "128": "icons/128.png"
  },
  "name": "コナンのネタバレを消し飛ばす拡張",
  "description": "ネタバレを絶対に見たくない",
  "version": "0.1",
  "manifest_version": 3,
  "content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*"],
      "js": ["script.js"],
      "all_frames": true,
      "run_at": "document_end"
    }
  ]
}

実行結果

適当に旧Twitter（今はX）を開いてみます。

どうやらおすすめにコナン関係のワードがあるらしい
どうやらおすすめにコナン関係のワードがあるらしい

無事にネタバレの可能性を回避できました。

感想

公開から1週間経った後に見に行ったのですが、無事ネタバレを一切踏むことなく映画を鑑賞できました。本当に何も知らない状態で見たかったので、目的が達成できて良かったです。

最初はalertを表示してOKを押下すればページを表示するように考えていたのですが、モーダルウィンドウで背景を黒一色に設定しないと中身が目に入ってしまう可能性があったので、いっそのこと全部表示しない実装にしてしまいました。結果的にこのくらい厳しくして良かったと思います。bodyを監視するのと、searchでキーワードを総なめするのでかなり重くなると思ったのですが、実際動かしてみるとそこまで気になりませんでした。

反省点

映画を見たあとに設定したキーワードを見返したのですが、全然足りなかったと思いました。場合によってはネタバレを踏んでたかもしれなくて結構危なかったです。

あと、拡張の実装とは全然関係ないのですが、映画館で着席した時に前に座ってた2周目っぽい人たちがはちゃめちゃに盛り上がってて肝が冷えました。コナン映画を周回する人の民度には期待できないので、開演5分後の予告とか宣伝とかやってる時間に入るか、直前までイヤホンで音楽聞いてたほうが良かったですね。でもあの内容だったら盛り上がっても仕方ないと思いました。