🍱

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

2021/01/04に公開6件

Chrome

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

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

作るきっかけ

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

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

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

拡張機能について

種類

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

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

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

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

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

manifest.json

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

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

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 では任意のオブジェクトを送信でき、レスポンスを受け取ることも可能です。

WebExtension API

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

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

多言語対応

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

以下のような 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)

動作確認

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

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

公開までの流れ

Chrome ウェブストア編

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

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

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

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

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

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

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

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

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

Firefox Add-ons 編

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

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

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