画像・JavaScript・Cookieを無効化するChrome拡張機能

画像・JavaScript・Cookieを無効化するChrome拡張機能Feature Switchを作成した。

Chrome ウェブストア

リポジトリ

説明

実はこの拡張機能と全く同じ機能を持つ拡張機能が既に世にある。(しかし今もあるかはわからない)

当時の自分はその拡張機能を危険そうなサイトでJavaScriptやCookieを無効化するのに使ったり、怪談サイトでいきなり画像に出くわしてびっくりするのを防ぐのに使ったりしていた。

すごく便利だったのだが、いつの間にか見失ってしまった。検索しようにも何という名前だったか思い出せず、二度と出会えなくなってしまった。

WXTを使うと効率良く拡張機能を作れるので、手作りすることにした。

画像・JavaScript・Cookieを無効化する

Google ChromeにはcontentSettingsというAPIが用意されており、画像・JavaScript・Cookieの無効化に使える。

このAPIを使うにはcontentSettingsの権限が要る。

wxt.config.ts

import { defineConfig } from "wxt";

export default defineConfig({
  modules: ["@wxt-dev/module-react"],
  srcDir: "src",
  manifest: {
    name: "__MSG_applicationName__",
    version: "1.0.0",
    description: "__MSG_description__",
    default_locale: "ja",
    permissions: [
      "contentSettings", // 機能の切り替えに必要
      "storage", // 設定の保存に必要
    ],
  },
});

このAPIを呼ぶ関数を作成する。

src/entrypoints/popup/App.tsx

const SETTING_KEYS = ["images", "javascript", "cookies"] as const;
type SettingKey = (typeof SETTING_KEYS)[number];

async function applyContentSetting(key: SettingKey, enabled: boolean) {
  const cs = (browser as any).contentSettings;
  cs[key].set({
    primaryPattern: "<all_urls>",
    setting: enabled ? "allow" : "block",
  });
}

あとはReactでUIを作る。

src/entrypoints/popup/App.tsx

import { useEffect, useState } from "react";
import styles from "./App.module.css";

const SETTING_KEYS = ["images", "javascript", "cookies"] as const;
type SettingKey = (typeof SETTING_KEYS)[number];
type Settings = Record<SettingKey, boolean>;

async function applyContentSetting(key: SettingKey, enabled: boolean) {
  const cs = (browser as any).contentSettings;
  cs[key].set({
    primaryPattern: "<all_urls>",
    setting: enabled ? "allow" : "block",
  });
}

function App() {
  const [settings, setSettings] = useState<Settings>({
    images: true,
    javascript: true,
    cookies: true,
  });

  useEffect(() => {
    browser.storage.local.get([...SETTING_KEYS]).then((stored) => {
      setSettings({
        images: stored.images !== false,
        javascript: stored.javascript !== false,
        cookies: stored.cookies !== false,
      });
    });
  }, []);

  const toggle = async (key: SettingKey) => {
    const next = !settings[key];
    setSettings((prev) => ({ ...prev, [key]: next }));
    await browser.storage.local.set({ [key]: next });
    await applyContentSetting(key, next);
  };

  return (
    <div className={styles.container}>
      <ul className={styles.list}>
        {SETTING_KEYS.map((key: SettingKey) => (
          <li key={key} className={styles.item}>
            <input
              id={key}
              type="checkbox"
              checked={settings[key]}
              onChange={() => toggle(key)}
            />
            <label htmlFor={key}>{browser.i18n.getMessage(key)}</label>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

以上