✏️

インターネット上のすべてのサイトの文末に「知らんけど」を追加してデマ情報から身を守ろう

2023/12/21に公開

Firefox

extension

tech

この記事はクソアプリアドベントカレンダーの21日目です。

インターネットの注意点

我々が使っているインターネットは便利ですが、一つ気をつけないといけない点があります。
それは、すべての情報が真実とは限らないということです。

不確かな情報、フェークニュース、間違った情報。
それらはこの大きなインターネットに潜んでいます。

シンプルな解決方法👍

では、すべてのサイトの文末に「知らんけど。」を追加すればそれらをすべて無力化できるのではないか？ と考えました。

文末に「知らんけど。」がついていれば誰もその情報を信用しないと思います。

なので、全てのサイトの文末に「知らんけど。」を追加するアドオンを作っていきます。
この記事を見ているみなさんもぜひこの手順で作ってみてください。

どうやって実装する？

簡単に、カスタムCSSを使って実装してみましょう。

p::after{
  content: "知らんけど。";
}

afterは、要素の後にコンテンツを追加するCSS疑似クラスです。
contentに「知らんけど。」を設定することで、文末(p要素の後)に「知らんけど。」という文字列を追加しています。

試してみよう！

StylebotなどのカスタムCSSを設定できる拡張機能を使って、上のCSSを試してみましょう。

サイト: https://developer.mozilla.org/ja/docs/Web/HTML/Element/ruby

👍いいですね！ちゃんと文字列の後に「知らんけど。」が追加されています。

拡張機能にしてみよう

カスタムCSSが動作したので、今度はそれを拡張機能にしてみましょう。
WebExtensionsはCSSの追加ができるので、上のCSSと同じコードを使うことができます。

適当な名前のフォルダを作り、中に次のようなmanifest.jsonを作成します。

{
    "manifest_version": 2,
    "name": "「知らんけど。」を追加",
    "version": "1.0.0",
  
    "description": "サイトの文末に「知らんけど」を追加します",
  
    "content_scripts": [
      {
        "matches": ["<all_urls>"],
        "css": ["custom.css"]
      }
    ]
  }

作ったフォルダの中にcustom.cssを作成します。さっきと同じやつですね。

p::after{
  content: "知らんけど。";
}

これで完成です！文末に「知らんけど」を追加する拡張機能ができました🎉

試してみよう

お手持ちのFirefoxでアドレスバーからabout:debugging#/runtime/this-firefoxを開いてください。

「一時的なアドオンを読み込む...」をクリックして、先程作ったmanifest.jsonを指定します。

試しにさっき試したのと同じページにアクセスしてみましょう！

文末にこのように「知らんけど。」が追加されていれば完成です！お疲れ様でした！

おまけ：これをAMOに公開してみた

この手順とほぼ同じ手順で作った「知らんけど」を追加するアドオンを、アドオンストアで公開中です！よかったら使ってみてください！

真面目に作ったもの

こんなもの作ってると普段は真面目なものは何も作らない人だと思われるかもしれませんが、実は真面目なものも作っています。

「ideaNote」というMarkdownメモソフトを開発しています。よかったら試してみてください。（突然の宣伝すみません）

最後に

明日は@po_miyasakaさんの記事「ビブルカードっぽいアプリを作りました。」です。