🍱

スプレッドシートで行ハイライトする拡張機能を公開したので、やったことをまとめてみる

2021/01/04に公開6

スプレッドシートで行ハイライトするブラウザ拡張機能を作って公開したので、そこまでに調べたこと&やったことをまとめました。

こちらの拡張機能は Chrome ウェブストアと Firefox Add-ons で公開しています。良ければご利用ください!

https://chrome.google.com/webstore/detail/cejijldbedfmdehondfmoadlkhgjcmkd?hl=ja

https://addons.mozilla.org/ja/firefox/addon/googlesheets-row-highlighter/

作るきっかけ

Googleスプレッドシートでカレントセルの行をハイライトする機能が欲しく、その方法を調べてみました。

しかし、シートの内容を書き換える方法しか見つからず、他の人も利用する共同編集シートで書き換えは良くないので却下。

自分で拡張機能を作れば解決できるかもしれないと思い、とりあえず調べてみることに。

拡張機能について

種類

拡張機能は HTML + CSS + JS + 画像などで構成されています。

拡張できる機能はいくつか種類があり、

  • ブラウザのバックグラウンドで動作する「Background Page」
  • ウェブページの内容を取得&操作する「Content Scripts」
  • 拡張機能のアイコンクリックでポップアップを表示する「Browser Action」
  • URLバーの中にアイコンを追加&ポップアップを表示する「Page Action」
  • 拡張機能の設定画面を表示する「Option Page」

この中から必要なものを組み合わせて拡張機能を作ります。

今回は Content Scripts と Browser Action で作成しました。

manifest.json

これらの設定は manifest.json というファイルで管理します。
拡張機能の名前や説明、実行に必要な権限などもこのファイルに記述します。

サンプルですが、以下のような内容です。詳しくは MDN に記載されているので、こちらから必要な設定を記述すると良いと思います。

https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json

manifest.json
{
  "name": "extension sample",
  "description": "...",
  "version": "0.1",
  "manifest_version": 2,
  "icons": {
    "48": "images/icon48.png",
  },  
  "background": {
    "scripts": ["scripts/background.js"],
    "page": "pages/background.html"
  },
  "content_scripts": [
    {
      "exclude_matches": ["*://developer.mozilla.org/*"],
      "matches": ["*://*.mozilla.org/*"],
      "js": ["scripts/content.js"]
    }
  ],
  "browser_action": {
    "default_popup": "pages/popup.html"
  },
  "permissions": ["storage"],
}

Message passing

スクリプト同士でメッセージを送受信するときには、
runtime.sendMessage, runtime.onMessage を利用します。

具体的には、ポップアップ内のボタンがクリックされたら Background Page にメッセージを通知するような用途です。

popup.js
const button = document.getElementById('button')

button.addEventListener('click', () => {
  chrome.runtime.sendMessage({ message: 'test' }, (response) => {
    console.log(response.message) // -> ok
  })
})
background.js
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  console.log(request.message) // -> test
  sendResponse({ message: 'ok' })
})

sendMessage では任意のオブジェクトを送信でき、レスポンスを受け取ることも可能です。

https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/API/runtime/sendMessage

WebExtension API

拡張機能からブラウザの機能(タブやストレージなど)を利用できる API が提供されています。
API の一覧はこちらから確認できます。

https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/API

利用する API は manifest.jsonpermissions に記載する必要があります。

https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions

多言語対応

i18n を利用して多言語対応できます。
_locales/${言語タグ}/messages.json の用意とデフォルトロケールの設定だけで利用可能で、言語タグには enja などが指定できます。

以下のような messages.json を用意してから

en/messages.json
{
  "extensionDescription": {
    "message": "Description of the extension."
  }
}
ja/messages.json
{
  "extensionDescription": {
    "message": "拡張機能の説明文です。"
  }
}

default_locale にデフォルトで表示する言語タグを指定して、
値に __MSG_${メッセージの名前}__ を指定することで、利用者の環境にあったメッセージを表示できます。

manifest.json
{
  ...
  "default_locale": "en",
  "description": "__MSG_extensionDescription__",
  ...
}

スクリプトからメッセージを取得することもできます。

content.js
const message = chrome.i18n.getMessage('extensionDescription')
console.log(message)

https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/Internationalization

動作確認

Chrome の拡張機能一覧(chrome://extensions/)で「デベロッパーモード」を ON にして、「パッケージ化されていない拡張機能を読み込む」から作業ディレクトリを選択します。

すぐに拡張機能が追加されるので、これで動作確認ができます。
コードの更新を反映する際には、ここの画面から拡張機能の更新が必要です。

公開までの流れ

Chrome ウェブストア編

デベロッパー登録
Chrome ウェブストアのデベロッパー登録から行います。
登録手数料として $5 Google先生に課金💰します。

支払い方法はクレジットカードのみです。


アイテム登録
デベロッパーダッシュボードが表示されたら、右上の「新しいアイテム」ボタンから拡張機能をZIPにまとめたファイルをアップロードします。


情報入力
拡張機能の説明や、アイコン画像、スクリーンショットなどを登録します。
多言語化した場合は言語毎に説明などを入力できます。

プライバシーという項目も入力が必要で、
拡張機能の用途や権限を何の為に使うのかを入力します。

過剰な権限や実行範囲を指定していると、審査に時間がかかるようです。


審査
「審査のため送信」というボタンから申請します。
審査の合格後、自動で公開するかを選んで送信します。

リジェクトされた場合は、理由がメールで送られてきます。
対応してから再度申請しましょう。


公開
自動公開を選んだ場合、審査に合格した時点で公開されてます。
ダッシュボードを確認するとステータスが「公開済み」になっていました🎉

Firefox Add-ons 編

Firefox の拡張機能は Chrome と互換性があるので、少ない変更で Chrome 用の拡張機能を実行できるようです。
今回は Firefox が chrome.* に対応していたおかげで、コードを変えずに拡張機能を実行できました。
Chrome ウェブストアにアップロードした拡張機能をそのまま申請してみます。

https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/Chrome_incompatibilities

余談:
browser.* の形で書いて Chrome でも動かせるようにする polyfill が用意されていました。
Chrome, Firefox 用の拡張機能を同時に作る際は利用すると良さそうです。使ってみたかった。

https://github.com/mozilla/webextension-polyfill


アカウント登録
Firefox アカウントがあればアドオン登録ができます。
アドオン開発センターの右上にある「拡張機能を登録または管理」からログインします。


アドオン登録
Chrome と同様にZIPファイルをアップロードします。

自動で検証がはじまり、事前に問題をチェックしてくれます。
JSのライブラリを外部からを読み込んでいたのですが、これがNGなようです…。(Chrome の審査では OK でした)
すべてローカルで完結するように修正すると、チェックが通るようになりました。

バンドラーなどを利用している場合は、ソースコードを提出する必要があるようです。
今回は利用していないので、そのまま次に進みます。


情報入力
拡張機能の名前と説明などを入力して「バージョンを登録」すると自動的に審査が始まります。
このあと、Chrome と同様に言語毎の情報入力や、スクリーンショットの登録ができます。


公開
メールで公開されたことを通知してくれます。
ダッシュボードを確認すると「認証済み」になっていました🎉

さいごに

最後までご覧いただき、ありがとうございます🙇
拡張機能の基本から公開までを大雑把にまとめた記事ですが、参考になれば幸いです。

開発は手軽にはじめられるので、拡張機能の作りにチャレンジしてみてはいかがでしょうか!

Discussion

kei10904kei10904

欲しかった機能です!Spreadsheetの作業効率があがりました。少額ですがサポートいたしました。

matsu7089matsu7089

サポートありがとうございます!!!
ご要望などあれば、ぜひ連絡ください!
今後も使っていただけると嬉しいです🙏

tako_engtako_eng

まさにほしかった機能です、ありがとうございます。
目grepによる眼精疲労がひどかったので、これで少しはよくなりそうです。
カレント行に色がついていても、ちゃんと透過して表示してくださってとても便利です。
心ばかりですがバッジお送りしました、たくさん使わせていただきます。

matsu7089matsu7089

嬉しいお言葉ありがとうございます!
カーソルのある行を目視で確認するの大変ですよね、、
今後も使って頂けると嬉しいです!
サポートありがとうございました!!

aiueoooaiueooo

作業がめちゃくちゃ楽になります!
作ってくださりありがとうございます!
使わせていただきます!

matsu7089matsu7089

コメントありがとうございます!!
使って頂けて嬉しいです!