kintone用Chrome拡張

はじめに

どうも、フリーランスでエンジニアをしている たむら と申します。
Qiitaは1年ぶりの投稿です。よろしくお願いします。

この記事はkintoneアドベントカレンダー2025の12/19の記事です。

私はdevkin meetup!という勉強会コミュニティの中で、Devkinoxというkintone関連の開発者用Chrome拡張を、コミュニティのメンバーと開発しています。

Chrome拡張のメリット

kintoneをカスタマイズするプラグイン、JavaScript/CSSファイルのアップロードと、Chrome拡張でのカスタマイズの違いを簡単に紹介します。

導入・運用が簡単

• 登録が簡単・更新も簡単
  公式のChrome拡張サイトからワンクリックでインストール、更新が可能です。プラグインはアプリごとにインストールする必要があり面倒ですが、Chrome拡張なら一度入れるだけでOKです。

• 環境を選ばない
  ドメインの違うkintone環境でも動作可能で、アプリごとにプログラムを反映する必要はありません。

プラグインとは違うアプローチが可能

• ツールとして開発
  汎用的な機能を現在表示しているアプリに対して実行するような、ツールとしてのカスタマイズに向いています。

• UIをkintoneの画面内に埋め込まなくてもよい
  Chrome拡張は、画面外のブラウザのURL欄から操作でき、独立したポップアップの表示も可能です。
  kintoneの画面に実行ボタンなどを配置しなくてもよいため、kintoneの画面のパーツとは競合せず、拡張性の高い画面が作れます。

Chrome拡張のデメリット

ブラウザ依存

Chrome/Edge以外のブラウザでは使用できません（Firefoxは別途対応が必要）。

使用シーンが多岐にわたる

プラグインは特定のアプリでのみ動作しますが、Chrome拡張はJavaScript/CSSファイルを
全体に適用したときのように、すべてのページで実行される可能性があります。
そのため、不要なページでの動作も例外として考慮する必要があります。

※Chrome拡張の開発を始めたところなので、まだ気づいていないデメリットがあるかもしれません...

---

Chrome拡張でのコード例

Chrome拡張を開発するにはmanifestファイルの作成やビルドが必要ですが、今回はそこは置いておいて、どんな感じでコードが実装できるかを紹介します。

Chrome拡張でもkintoneを操作するkintone REST APIやkintone JavaScript APIが使えるので、以下のような簡単な実装が可能です。

現在のアプリ情報を取得する

kintone JavaScript APIを使って、今表示しているアプリのIDや名前、
フィールド情報などを取得します。この情報があれば、開発時のデバッグや
アプリ情報の確認が素早くできます。

// kintoneの画面か判定
if (typeof kintone === "undefined" || !kintone || !kintone.app) {
  return null;
}

// アプリidを取得
const appId = kintone.app.getId();
if (appId === null || appId === undefined) {
  return null;
}
// 1. アプリ詳細情報を取得
const appDetails = await (kintone as any).api(
  (kintone as any).api.url("/k/v1/app.json", true),
  "GET",
  { id: appId },
);

// 2. アプリのフィールド情報を取得
const fieldsResponse = await (kintone as any).api(
  (kintone as any).api.url("/k/v1/app/form/fields.json", true),
  "GET",
  { app: appId, lang: "default" },
);
const appFields = fieldsResponse.properties;

// アプリ情報を返す（後続処理でこの情報を見やすく表示してあげる）
return {
  appId: appId.toString(),
  appName: appDetails.name || "（名称未設定）",
  spaceId: appDetails.spaceId ? appDetails.spaceId.toString() : undefined,
  threadId: appDetails.threadId
    ? appDetails.threadId.toString()
    : undefined,
  creatorName: appDetails.creator?.name || "（不明）",
  createdAt: appDetails.createdAt || "（不明）",
  modifierName: appDetails.modifier?.name || "（不明）",
  modifiedAt: appDetails.modifiedAt || "（不明）",
  fields: appFields,
};

Devkinoxでは、取得した情報をこんな感じで表示しています。

編集画面でフィールドに文字をセット

テスト用のダミーデータをサクッと作成するために、文字列一行フィールドにフィールドコードと同じ文字をセットします。

const fieldsResponse = kintone.app.record.get();
const record = fieldsResponse.record;
for (const key in record) {
  const field = record[key];
  if (field.type === "SINGLE_LINE_TEXT" && field.value === undefined) {
    field.value = key;
  }
}
kintone.app.record.set(fieldsResponse);

Devkinoxのダミーデータ作成機能での実行例

---

最後に

kintoneのカスタマイズをChrome拡張でツール化すると、プラグインやJavaScript/CSSファイルアップロードとは違うアプローチで開発が可能です。
そのうち商用プラグイン以外に、商用のkintone Chrome拡張が出てくるかもしれませんね。

Devkinoxは、オープンソースで開発しております。GitHubリポジトリ
今後も開発者がほしい機能を追加していく予定です。興味のある方はご参加ください。