Wikipediaの寄付依頼をブロックするアドオンの作り方

# 成果物概要
WiKifuKiller(Wi寄付キラー)
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/229681/d65f52c2-0493-42b5-693b-9f42bd033214.png" alt="アイコン" title="アイコン" width="250">
Wikipediaのページを開いたときに表示される、寄付依頼を非表示にするブラウザ用アドオンです。
インストールするだけで難しい設定は必要ありません。
[ぷれりり](https://www.prerele.com/releases/detail/28401)様に掲載して頂きました。

# 画面イメージ
## Before
![unnamed.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/229681/1f72806c-4a88-6fe2-ceee-8d391a5a3b08.jpeg)

## After
![after.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/229681/a5fface8-b6af-1ec4-e648-b32ea0a37609.jpeg)

# インストール
各ブラウザのアドオン配布ページよりインストール可能です。
Firefox版：https://addons.mozilla.org/ja/firefox/addon/wikifukiller/
Chrome版：https://chrome.google.com/webstore/detail/wikifukiller/bkdigjebalbifmdhlklififbdibhmlmo?hl=ja
Edge版：https://microsoftedge.microsoft.com/addons/detail/wikifukiller/gjkedgecldjilmcbilahaicpfphndkem?hl=ja-JP

# 制作理由
寄付を募ること自体は良いことだと考えていますが、文言がきつくなっている点や画面上の占める面積が大きくなってきたと感じたため。
[Yahoo!ニュース](https://news.yahoo.co.jp/articles/0b419efcb34440ebe86b1872ac32640f69325bf5)で「圧が凄い」「怖い」と言ったコメントが目についたため。
[ガジェット通信](https://getnews.jp/archives/159365/gate)のAdSense利用案に賛同したため。

2021年版では[ロケットニュース24](https://rocketnews24.com/2021/07/20/1517586/)で「寄付バナーがエグい」「以前と比較したらハードさアップか」という記事が公開されているため。


>アフィリエイトやクリック報酬型広告はどうなのだろうか。
>既存のアフィリエイトやクリック報酬型広告サービス（アマゾンやGoogle Adsenseなど）では審査が通らないわけではないだろう。
>法人契約という方法もある。

[ガジェット通信](https://getnews.jp/archives/159365)より引用

# 開発環境
Visual Studio Code
(サクラエディタ等のテキストエディタでも可)
各種ウェブブラウザ

# 動作確認済みの環境(2021/07/15時点)
Mozilla Firefox 90.0
Google Chrome 91.0.4472.124
Microsoft Edge(Chromium版) 91.0.864.67

# 開発～リリースの流れ
1. [Firefoxアドオン開発のチュートリアル](https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension)を実施
2. 開発者ツールを使用し「寄付依頼」のタグ(適応されているid)を調査
3. チュートリアルと同じ要領でWikipediaの寄付依頼タグを削除する処理を記述
4. 各ブラウザで動作確認
5. 各ストアにてリリースの手続き

# コード解説

## manifest.json
```json:manifest.json
{

  "manifest_version": 2,
  "name": "WiKifuKiller",
  "version": "1.0.0",
 
  "description": "Wikipediaの寄付依頼をブロックします。",
  
  "icons": {
    "48": "icons/wikifukiller-48.png",
    "96": "icons/wikifukiller-96.png"
  },

  "content_scripts": [
    {
      "matches": ["*://*.wikipedia.org/*"],
      "js": ["wikifukiller.js"]
    }
  ]

}
```


>最初の 3 つのキー manifest_version、name、version は必須であり、拡張機能の基本的なメタデータを指定します。
>description は省略可能ですが、設定しておくことをお勧めします。この値はアドオンマネージャーに表示されます。
>icons は省略可能ですが、設定しておくことをお勧めします。この値は拡張機能のアイコンを指定するものであり、アイコンはアドオンマネージャーに表示されます。

[MDM web docsより引用](https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension)

manifest_version：「2」固定？
name：自分のアドオン名を記述
version：自分のアドオンのバージョンを記述
description：自分のアドオンの説明
icons：アイコン画像の相対パス
matches：適用先のURLを設定するため、WikipediaのURLを記述
js：読み込むJSファイル名を記述


## wikifukiller.js

```javascript:wikifukiller.js
if(document.getElementById('siteNotice') != null) {
  document.getElementById('siteNotice').remove();
}

if(document.getElementById('frb-inline') != null) {
  document.getElementById('frb-inline').remove();
}
```

「寄付依頼」タグに振られているidがある場合に削除するという処理を記述。
Firefoxの場合はタグの存在チェックを行わなくてもエラーとなりませんでした。
Chromeの場合はタグの存在チェックを行わないとエラーとなっていました。
Edgeは未調査です。

# リリース
## Firefox版
[こちら](https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/Packaging_and_installation)に記載されている通りにリリース作業を実施しました。
手続き後、待ちが41/42となっていたものの約3時間ほどで公開されました。

## Chrome版
[こちら](https://support.google.com/chrome/a/answer/2714278?hl=ja)に記載されている通りにリリース作業を実施しました。
手続き後、約3時間ほどで公開されました。

## Edge版
[こちら](https://docs.microsoft.com/ja-jp/microsoft-edge/extensions-chromium/publish/publish-extension)に記載されている通りにリリース作業を実施しました。
手続き後、約10時間ほどで公開されました。

# スペシャルサンクス
命名：[はるうさぎ](https://twitter.com/_harusa_p)様
アイコン：みなみ様

急な思いつきで命名やアイコン作成をお願いしたにもかかわらず、すぐに対応して頂き本当に助かりました！
お二方ともTwitterにてアイコンやヘッダ画像作成等のお仕事を募集されていますので、何かあれば是非依頼してみてください。
みなみ様は私が窓口となっていますので、私の[Twitter](https://twitter.com/tsukasa_labz)までご連絡を頂ければ取り次ぎます。

# 感想
以前Firefoxアドオンを作ろうと思い立ったときは、XULという独自言語で実装しなければならないなどハードルが高めの印象でした。
今はWebExtensionsに変わり、Firefox用に作成した物をそのままChrome、Edge向けにもリリースができ非常に楽でした。

Wikipediaには繁栄して欲しいとは思うもののAdsense利用など、もう少しやり方があるのではないかと思います。
何かご質問やご意見等がありましたら[Twitter](https://twitter.com/tsukasa_labz)にご連絡を頂ければと思います。

# 宣伝
### メイドカフェマップ for Android
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/229681/0d7b86ef-9142-6ae7-6543-fe4349706bf9.png" alt="メイドカフェマップアイコン" title="メイドカフェマップアイコン" width="250">

元メイドさんと一緒に作った～[メイドカフェマップ for Android](https://play.google.com/store/apps/details?id=com.tsukasa_labz.android.maidcafemap&hl=ja)を公開しています。
インストールして頂いて評価やコメントを頂けると喜びます:relaxed:
メイドカフェマップ アプリ内からツイートできる機能がありますので、そちらをして頂くとさらに喜びます:heart_eyes:
<br />

### Kindlist
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/229681/f6df6002-dbfc-f67f-75d8-3dd835c38bd1.png" alt="Kindlistアイコン" title="Kindlistアイコン" width="250">

Kindle for PCのXMLファイルを解析して、Excel形式に変換する機能を提供します。
書籍一覧が記載されたExcelファイルを、Kindle書籍管理にご活用下さい。
<a href="https://www.vector.co.jp/soft/winnt/util/se523241.html" target="_blank">Vector</a>よりダウンロードが可能です。
<br />

# 更新
2023/03/18時点で表示されている寄付依頼に対しても有効であることを確認しました。