はじめに

昨日投稿した記事「超高機能な翻訳サービス「Kagi Translate」使ってみた！」でも紹介したKagi Translateがとても気に入ってよく使っています。しかし、まだ生まれたてのサービスのためGoogle翻訳のようなChrome拡張機能がありません。
つまり、ブラウザの中で翻訳したい内容が出てきたときはブックマークなどにあらかじめ登録したおいたサービスのリンクを開く、とかタブを固定で開いておくなどのひと手間が必要です。

(Google翻訳のGromeウェブストアより)

そこで「ないなら作ってみよう！」ということでやってみた記事です。

この記事でやること

Chrome拡張開発
- URLを開く
- アイコンを設定する
拡張機能をローカルでテストする

この記事でやらないこと

高度な機能の実装
Chromeウェブストアへの公開

今回作った拡張機能のリポジトリは公開していますので、ご自由に参考になさってください。

とは言ったものの、、、

私はChrome拡張を作ったことがありません。
そうだ、AIと二人三脚で作ろう！

意識したことはMVP(Minimum Viable Product)開発です。別に製品を作るわけではないですが、最小限の機能をもつ実行可能なものをつくり、段階的にやりたいことを実現していくということです。

Step1.URLを開くだけ

まず、https://translate.kagi.com/というリンクを開くだけのChrome拡張を作ってみます。

最低限必要なファイルはmanifest.jsonとbackground.jsです。

manifest.json

{
  "manifest_version": 3,
  "name": "Open Kagi Translate",
  "version": "1.0",
  "description": "Opens the Kagi Translate page in a new tab",
  "permissions": ["tabs"],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_title": "Open Kagi Translate"
  }
}

background.js

chrome.action.onClicked.addListener(() => {
  chrome.tabs.create({ url: "https://translate.kagi.com/" });
});

超絶シンプルですね。見たら想像がつくようにmanifest.jsonには拡張機能の説明や設定を記述しており、以下の部分でサービスワーカーと呼ばれる動作を記述したスクリプトを指定しているので、ここさえ一致させればbackground.jsというファイル名でなくてもよさそうというのは分かりました。

  "background": {
    "service_worker": "background.js"
  },

manifest.jsonの書き方は以下を参照してください。

Chrome拡張APIの詳細は以下を参照してください。

動かそう

ローカルでのテスト手順は公式ドキュメントを参照します。

Chrome
Edge

基本的には同じで、以下のような手順になります。

chrome://extensions/もしくはedge://extensions/を開く
デベロッパーモードを有効化
パッケージ化されていない拡張機能を読み込む
- 拡張機能のソースコードがあるフォルダを選択

先ほどのコードを実際にブラウザに読み込んでみると、味気ないアイコンの拡張機能が追加できクリックすると「Kagi Translate」を開くことが確認できました！🎉

Step2.アイコンを設定する

Step1の状態ではアイコンが設定されておらず素っ気ない見た目をしていたので、アイコンを設定します。
iconsのセクションを追加します。また。アイコンは適当なpngを用意します。

今回は適当にGoogle Fontsを使います。

manifest.json

{
  "manifest_version": 3,
  "name": "Open Kagi Translate",
  "version": "1.0",
  "description": "Opens the Kagi Translate page in a new tab",
  "permissions": ["tabs"],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_title": "Open Kagi Translate"
  },
  "icons": {
    "16": "icon/16.png",
    "48": "icon/48.png",
    "128": "icon/128.png"
  }
}

すると今度はアイコンを表示できました！

アイコンの形式はWebPとSVGがサポートされていないそうなので注意です⚠️

今回はここまで！