Google Chrome拡張機能をFirefoxに移植するために行ったこと

はじめに

自分はゴシップサイトブロッカーというGoogle Chrome拡張機能を作っています。
Googleが開発していたPersonal Blocklistと同様に、Google検索結果から不快なサイトをブロックします。

この拡張機能をFirefoxに対応したときにやったことをまとめてみます。

• Chrome版: ゴシップサイトブロッカー - Chrome ウェブストア
• Firefox版: ゴシップサイトブロッカー – 🦊 Firefox (ja) 向け拡張機能を入手

やったこと

• ブロックするためのリンクが出ないのを修正(拡張機能関係なし)
• manifest.jsonの見直し
• ポップアップの背景色
• オプション画面へのリンクを追加
• 「いかがでしたか」を除外して検索するボタンが出ないのを修正

ブロックするためのリンクが出ないのを修正(拡張機能関係なし)

Firefoxでは検索結果をブロックするためのリンクが出ませんでした。
原因を調査したところ、User Agentの値によってGoogle検索の結果が異なり、
そのために正しく判定されずに動かないことが分かりました。

具体的には以下のように、Chromeではping属性がありますが、Firefoxではonmousedownが使われています。

Google Chromeの場合

<a
  href="https://ja.wikipedia.org/wiki/%E3%83%86%E3%82%B9%E3%83%88"
  ping="/url?sa=t&amp;source=web&amp;rct=j&amp;url=https://ja.wikipedia.org/wiki/%25E3%2583%2586%25E3%2582%25B9%25E3%2583%2588&amp;ved=..."
>
  <h3 class="LC20lb">テスト - Wikipedia</h3>
  <br />
  <div class="TbwUpd">
    <cite class="iUh30">https://ja.wikipedia.org/wiki/テスト</cite>
  </div>
</a>

Firefoxの場合

<a
  href="https://ja.wikipedia.org/wiki/%E3%83%86%E3%82%B9%E3%83%88"
  onmousedown="return rwt(this,'','','','2','...','','...','','',event)"
>
  <h3 class="LC20lb">テスト - Wikipedia</h3>
  <br />
  <div class="TbwUpd">
    <cite class="iUh30">https://ja.wikipedia.org/wiki/テスト</cite>
  </div>
</a>

どちらが来ても検索結果をブロックできるように修正しました。

manifest.jsonの見直し

FirefoxとChromeでは以下の違いがありました。

• Firefox: version_nameに非対応
• Chrome: browser_specific_settingsに非対応
  • 後で述べる id を設定するために必要

ChromeとFirefoxでファイルを分けたくなかったため、結局どちらも使っていません。

ポップアップの背景色

Google検索の結果画面で拡張のアイコンをクリックすると、以下のようなポップアップが出ます。

Firefoxではこの背景色が黒になってしまっていました。
明示的に background-color: white をセットすることで対処しました。

オプション画面へのリンクを追加

Chromeでは拡張のアイコンを右クリックすると、「オプション」メニューが標準でついています。
しかしFirefoxでは見当たりませんでした。

オプション画面へアクセスしやすくするために、左クリックで出てくるポップアップにリンクを追加しました。

「いかがでしたか」を除外して検索するボタンが出ないのを修正

Google検索の結果画面で拡張のアイコンをクリックすると出るポップアップに
【「いかがでしたか」を除外して検索】ボタンがあります。これがFirefoxでは出ませんでした。

このボタンが出るかどうかの判定方法は、 chrome.i18n.getUILanguage() の値が ja かどうかでした。Chromeは日本語の場合 ja を返していたのですが、Firefox(macOS)では ja-JP-mac を返していました。

判定方法を「jaかどうか」から「jaで始まるかどうか」に変更しました。

自動検証テスト

Firefoxのアドオンを登録するためにアカウントを作成しました。
そしてzip化したアドオンのアーカイブをアップロードすると、自動的に検証されます。

その結果警告が5つ出ました(4つは同じなので実質2つ)

• innerHTMLを使っているところで警告
• storage.localを使っているところで警告

innerHTMLについては、プログラムを修正して使わないように変更しました。

storage.localで出た警告には、次のように書かれていました。

This API can cause issues when loaded temporarily using about:debugging in Firefox unless you specify applications|browser_specific_settings > gecko > id in the manifest. Please see: https://mzl.la/2hizK4a for more.

リンク先は次のページになります。

• Extensions and the add-on ID - Mozilla | MDN

この記事の内容を読むと、データの同期やアップデートなどで、アプリケーションを識別するためにIDが使われているようです。

実際には、自動でIDが割り当てられるため、多くの場合は不要なのと、
IDをmanifest.jsonでセットするとChromeで読み込めないため、何もセットしませんでした。

審査はすぐ完了

修正したアドオン審査に出したのですが、すぐに審査は完了しました。
審査完了の文面を見ましたが、特に怪しい所がなければ自動で通して、
問題がありそうなら後で修正依頼する感じでしょうか。

This version has been screened and approved for the public. Keep in mind that other reviewers may look into this version in the future and determine that it requires changes or should be taken down. In that case, you will be notified again with details and next steps.

おわりに

修正はありましたが、細かいところばかりでした。
APIの互換性はかなり高いです。