内容
特定のサイトを強制的に見られなくするchromeの拡張機能を作りました。
「〇〇のサイトをどうしても見てしまう！」という人に役立つといいなと思います。
具体的な内容は次の2つでとてもシンプルです。
- ページが読み込まれる
- htmlタグを削除する
この2つの機能をJavaScriptを書いて実現しました。
chromeに自作の拡張機能を追加する方法は以下の記事をご覧ください。
１. JSを書く
index.js
window.onload = function () {
const intervalId = setInterval(() => {
const element = document.getElementsByTagName('html')[0];
if (element) {
element.remove();
clearInterval(intervalId); // 削除したら止める
}
}, 50);
};
内容はシンプルで、ページがすべて読み込まれたらelementにhtmlタグを代入します。
そしてhtmlタグを取得できていたらhtmlタグをelement.remove()で削除します。
仕様上、<html></html>は１組しかありません。
setInterval()を使っているのは、サイトによってはhtmlタグが消されて画面が真っ白になった後でも、音声が流れ続けることを防ぐためです。正直、setInterval()が最適解ではないと思っていて、いろいろ試す中でこれが上手くいったから使っている状況です。今後、より洗練されたコードを考えていこうと思います。
2. マニュフェストを書く
manifest.json
{
"manifest_version": 3,
"name": "〇〇を見ない",
"version": "1.0.0",
"description": "特定のサイトのhtmlタグを削除します。",
"content_scripts": [
{
"matches": ["https://sample.com/*"],
"js" : ["index.js"],
"all_frames" : true
}
]
}
content_scripts.matchesの値をhtmlを削除したいサイトのURLに置き換えてください。
3. 拡張機能を追加する
最後に、作った拡張機能をchromeに追加すればOKです。これでページを開いても真っ白になるので、ネットの使い過ぎを少しは減らせるかと思います。
最後に
今回拡張機能を作ってみて、結構簡単に作れるなと感じました。JSのコードを書くときは調べながらなので時間がかかりましたが、全体を通して必要な工程はそれほど多くありません。普段よく使うサイトの見た目を変えたいときに自分で拡張機能を作ってもいいなと思いました。
↓拡張機能を自分で作る詳しい方法が書かれています。