@nyanator/chrome-ext-utils NPM

chrome-ext-utils

Chrome拡張のユーティリティクラスライブラリ。tsyringeによるコンストラクタインジェクションに対応します。

主要な機能:

AES暗号化されたコンテキスト通信に対応。
IndexedDBなどの外部依存の抽象化層を設定することで、アプリケーションを外部依存と切り離します。

Setup

Install

$ npm i @nyanator/chrome-ext-utils --save-dev

manifest.jsonのバージョン3に対応しています。permissionsに"tabs"、"storage"、"alarms"の指定が必要です。また、cryptokeyファイルにランダムなUUIDを保存して"web_accessible_resources"に追加してください。暗号化通信の鍵として利用します。

{
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "js": ["content.js"],
      "run_at": "document_start"
    }
  ],
  "description": "Web Develop Tools for ChatGPT",
  "manifest_version": 3,
  "permissions": ["tabs", "storage", "alarms"],
  "web_accessible_resources": [
    {
      "matches": ["https://chat.openai.com/*"],
      "resources": ["cryptokey"]
    }
  ]
}

Run tests

npm run test

API

`initializeDIContainer(arg: { databaseName?: string; storeName?: string; allowedOrigins: string[]; }): Promise<MessageData | void>`

tsyringe DIコンテナを初期化してメッセージングクラスや各種機能を登録します。

`databaseName`

Optional | string IndexedDBの初期化に使用するデータベース名称。

`storeName`

Optional | string IndexedDBの初期化に使用するストア名称。

`allowedOrigins`

Optional | string[] メッセージングクラスがデータの送受信を許可するオリジンの一覧。

Example

// entrypoint.ts
import { initializeDIContainer } from "@nyanator/chrome-ext-utils";

initializeDIContainer({
  databaseName: "databaseName",
  storeName: "storeName",
  allowedOrigins: ["https://www.example.com/"],
});

// module-class.ts
import {
  DatabaseAgent,
  Logger,
  RuntimeMessageAgent,
  WindowMessageAgent,
} from "@nyanator/chrome-ext-utils";
import { inject, injectable } from "tsyringe";

@injectable()
export class ModuleClass {
  constructor(
    @inject("CrossDispatcher") crossDispatcher: CrossDispatcher,
    @inject("DatabaseAgent") databaseAgent: DatabaseAgent,
    @inject("Logger") logger: Logger,
    @inject("RuntimeMessageAgent") runtimeMessageAgent: RuntimeMessageAgent,
    @inject("WindowMessageAgent") windowMessageAgent: WindowMessageAgent,
    ) { }
}

`RuntimeMessageAgent`

暗号化されたランタイムメッセージの送受信を管理します。chrome.runtime.sendMessageのラップクラス。

Methods

`sendMessage(channel: string, message?: MessageData, tabId?: number): Promise<MessageData | void>`

暗号化されたランタイムメッセージを送信します。指定したchannelへメッセージを送信します。tabIdが指定されている場合、そのIDのタブにメッセージを送信します。

`channel`

Require | string 送信先を識別する文字列キー。

`message`

Optional | MessageData 送信する本文データ。この部分がAES暗号化されます。

`tabId`

Optional | number 送信先のタブID。バックグラウンドスクリプトからコンテンツスクリプトへ送信する際などに指定します。

`addListener(channel: string, listener: (messageData: MessageData) => Promise<MessageData | void> | void): void`

指定したchannelでのランタイムメッセージを受信し、復号化してリスナー関数に渡します。

`channel`

Require | string 受信データをフィルタリングするための文字列キー。

`listener`

Require | fn チャンネルがデータを受信したときに実行されるリスナー。

Example

// content.ts
import {
  initializeDIContainer,
  RuntimeMessageAgent
} from "@nyanator/chrome-ext-utils";
import { container } from "tsyringe";

initializeDIContainer({
  allowedOrigins: ["https://www.example.com/"],
});

const messageAgent = container.resolve<RuntimeMessageAgent>("RuntimeMessageAgent");
messageAgent.sentMessage("channel", {message: "hello message"});

// background.ts
import {
  initializeDIContainer,
  RuntimeMessageAgent
} from "@nyanator/chrome-ext-utils";
import { container } from "tsyringe";

initializeDIContainer({
  allowedOrigins: ["https://www.example.com/"],
});

const messageAgent = container.resolve<RuntimeMessageAgent>("RuntimeMessageAgent");
messageAgent.addListener("channel", (messageData) => {
  console.log(messageData.message);
});

`WindowMessageAgent`

暗号化されたウィンドウメッセージの送受信を管理します。winodow.postMessageのラップクラス。

Methods

`postMessage(target: Window,　targetOrigin: string, channel: string, message?: MessageData,): Promise<void>`

暗号化されたウィンドウメッセージを送信します。指定したウィンドウ、オリジンのchannelへメッセージを送信します。

`target`

Require | Window 送信先ウィンドウ。

`targetOrigin`

Require | string 送信先オリジン。initializeDIContainerで許可したオリジン以外を指定すると例外が発生します。

`channel`

Require | string 送信先を識別する文字列キー。

`message`

Optional | MessageData 送信する本文データ。この部分がAES暗号化されます。

`addListener(channel: string, listener: (event: MessageData) => void): void`

指定したchannelでのウィンドウメッセージを受信し、復号化してリスナー関数に渡します。

`channel`

Require | string 受信データをフィルタリングするための文字列キー。

`listener`

Require | fn チャンネルがデータを受信したときに実行されるリスナー。

Example

// content.ts
import {
  initializeDIContainer,
  WindowMessageAgent
} from "@nyanator/chrome-ext-utils";
import { container } from "tsyringe";

initializeDIContainer({
  allowedOrigins: ["https://www.example.com/"],
});

const messageAgent = container.resolve<WindowMessageAgent>("WindowMessageAgent");
messageAgent.addListener("channel", (messageData) => {
  console.log(messageData.message);
});

// iframe.ts
import {
  initializeDIContainer,
  WindowMessageAgent
} from "@nyanator/chrome-ext-utils";
import { container } from "tsyringe";

initializeDIContainer({
  allowedOrigins: ["https://www.example.com/"],
});

const messageAgent = container.resolve<WindowMessageAgent>("WindowMessageAgent");
messageAgent.postMessage(window.parent, "https://www.example.com/", "channel", {message: "hello message"});