インターネットライフに感じた限界
私は毎日、インターネットで技術調査をしたり、Twitterをしたり、YouTubeを見たり、ブログを読んだり、そんなありふれた日常をオンラインで過ごしています。
楽しいですね。しかし突然、次のどれかに遭遇することになります。
- 誹謗中傷
- 罵詈雑言
- 悪口
- 悪意
- 炎上
- イキリマウンティング
- 突然のネタバレ
普段は何ともないように対処していたとしても、時にはあまりにも非道な言葉を見かけることもあります。とてもつらい
インターネットが地獄と化したのはいつからでしょうか。最初から地獄だったのでしょうか。
今日のインターネットは無防備なまま放り出されるにはちょっと酷な空間だなと、そう感じています。
さて、幸いなことに自分はエンジニアです。必要なら作っちゃえばいいじゃない、心無い言葉から身を守る盾を！
ブラウザ拡張機能『EmoGuard』
というわけで、作りました。
EmoGuardはChromeとSafariに対応したブラウザ拡張機能です。
EmoGuardを使うと、Webサイト上の見たくないキーワードをブロックすることができます。
つまりインターネットが存在しなければ出会うはずもなかった非道な言葉から身を守ることができちゃいます。
なんとiOS版もあります！
開発の背景
キーワードブロッカーと呼べるようなブラウザ拡張機能はいくつか存在していますが、デザインがシンプルで柔軟にカスタマイズできてついでにクロスプラットフォームで動いてくれる、そんな贅沢三昧セットを備えたシロモノは見つかりませんでした。
なかったので自分で作ることにしました。
EmoGuardのデモ
1. キーワードをブロック
基本は超シンプル！EmoGuardを開いて、キーワードを追加。
たったそれだけでほとんどのWebサイトでキーワードをブロックすることができます。
2. ターゲットの隠し方を変える
ツールは自分好みにカスタマイズしたいのがエンジニアの性でしょう。
「カスタマイズ」モードを有効にすれば、ブロック方法を完全に自由にコントロールすることができます。
まずは「カスタマイズ」を有効化
テキストだけをピンポイントで隠すか、指定した要素を丸ごと隠すか選べます
Web開発者にはおなじみのCSSセレクターを自分で追加することもできるので、
どんなサイトでも自分好みのブロック方法を追求することができます。
3. どのCSSセレクターが有効になっているかチェックする
目のアイコンをクリックすると、どのCSSセレクターがテキストや要素を隠しているのかリアルタイムに確認することができます。
また、この表示/非表示の設定はEmoGuardを閉じたりブラウザをリロードしても残るので、追加したCSSセレクターを削除したくはないけど一時的にオフにしたい、といった時にも役立ちます。
4. 絵文字も変えちゃおう
デフォルト設定ではWebページ上のキーワードが「😎👍」という絵文字で置き換わります。
実はこの絵文字はオプションから自由に変更可能です。
全部🥺に置き換えたり…
ぶっちゃけ絵文字じゃなくてもOKです
この機能、割と個人的に気に入ってます。
5. データを同期できちゃう
例えば、Windows版ChromeとiOS版Safariの間でデータを同期することができます。
同期は最高ですね…（この機能実装するの死ぬほど苦労した…）
さらに詳しい使い方
公式サイトのチュートリアルやよくある質問で詳しい使い方を解説しています！
キーワードを縦横無尽にブロックできるようになりたい方は立ち寄ってみてください🤗
ちょっと技術的な話
EmoGuardにはイマドキの技術が採用されています。
キーワードブロック機能はできればブラウザにデフォルトで搭載されていてほしい、と個人的には思っています。（過激派）
だからなるべく「公式っぽい見た目」のアプリにしたくてMUIを採用しました。
欲しいコンポーネントは大抵何でも揃っていますし、開発効率も爆上がりなので非常にオススメできます。
もしTypeScrypt・React・MUI（もしくは他のUIフレームワーク）無しにフルスクラッチで開発していたらと想像するとゾッとしてしまうくらい、これらはパワフルに開発者をバックアップしてくれます…
が、これらをブラウザ拡張機能で動かそうとするとちょっと大変です。
webpackはデフォルトでエントリーポイントを一つしか生成しませんが、ブラウザ拡張機能には「popup」「options」「content scripts」「background」と4つものエントリーポイントが必要です。
そのためwebpackの動作を少々ハックする必要があります。
今回はwebpackの設定を上書きするためにreact-app-rewiredとcustomize-craを導入しました。
これらのライブラリを駆使してChrome拡張機能でReactを動作させる方法としては、以下のQiitaの記事が非常に参考になりました。
この場を借りて感謝申し上げます。
react-app-rewiredとcustomize-craではwebpackの設定を上書きするために config-overrides.js というファイルを作成する必要があり、先程の記事でもその手順が記載されています。
しかしwebpackのバージョンが上がったことで不要となった設定や、より本格的な拡張機能のために追加で必要な設定等があったため、参考情報として私のプロジェクトで使用しているコードをここに残しておきます。
const path = require('path');
const { override, disableChunk } = require('customize-cra');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
paths: function (paths, env) {
paths.appIndexJs = path.resolve('src/popup/index.tsx');
return paths;
},
webpack: function (config, env) {
// エントリーポイントを追加
config.entry = {
// `main` エントリーが必須のため popup を main に設定
main: [path.resolve('src/popup/index')],
options: [path.resolve('src/options/index')],
'content-script': [path.resolve('src/content-script/content-script')],
background: [path.resolve('src/background/background')]
};
// ファイル名からハッシュを除外
config.output.filename = 'static/js/[name].js';
const defaultMiniCssExtractPlugin = config.plugins.find(plugin => plugin.constructor.name === 'MiniCssExtractPlugin');
defaultMiniCssExtractPlugin.options.filename = 'static/css/[name].css';
// 指定した <script> タグのみを `popup.html` に挿入
const defaultHtmlWebpackPlugin = config.plugins.find(plugin => plugin.constructor.name === 'HtmlWebpackPlugin');
defaultHtmlWebpackPlugin.userOptions.filename = 'popup.html'
defaultHtmlWebpackPlugin.userOptions.chunks = ['main'];
config.plugins = config.plugins.concat([
// options ページ用の HTML ファイルを生成
new HtmlWebpackPlugin({
inject: true,
filename: 'options.html',
template: 'public/index.html',
chunks: ['options'],
minify: Object.assign({}, defaultHtmlWebpackPlugin.userOptions.minify)
})
]);
return override(
disableChunk()
)(config, env);
}
};
Happy Internet Life!
最初は個人的な感情から開発を始めた拡張機能でしたが、誰かの役に立てばと思い本格的な開発に移行して気づけばそれなりの時間が経ってしまいました。
ようやくリリースにたどり着けたのは実は結構感無量だったりします。
私は昔、インターネットが結構好きでした。
でも今はちょっと違うかも、というのが本音です。
自分がまたインターネットを好きになるために作ったこの拡張機能が、他の人にも楽しいインターネット生活を取り戻してくれたらいいな。
Happy Internet Life!
Twemoji graphics made by Twitter, Inc and other contributors are licensed under CC-BY 4.0:
https://creativecommons.org/licenses/by/4.0/