chrome-ext-utils
Chrome拡張のユーティリティクラスライブラリ。tsyringeによるコンストラクタインジェクションに対応します。
主要な機能:
-
AES暗号化されたコンテキスト通信に対応。
-
IndexedDBなどの外部依存の抽象化層を設定することで、アプリケーションを外部依存と切り離します。
Setup
Install
$ npm i @nyanator/chrome-ext-utils --save-devmanifest.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 testAPI
initializeDIContainer(arg: { databaseName?: string; storeName?: string; allowedOrigins: string[]; }): Promise<MessageData | void>
tsyringe DIコンテナを初期化してメッセージングクラスや各種機能を登録します。
databaseName
Optional |
stringIndexedDBの初期化に使用するデータベース名称。
storeName
Optional |
stringIndexedDBの初期化に使用するストア名称。
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"});Etc
-
CrossDispathcer 片付けされたイベントエミッター
-
CryptoAgent 暗号化インターフェース
-
ErrorObserver 未処理例外をユーザーに通知する機能を提供
-
And More...
Author
👤 nyanator
- Github: @Nyanator
📝 License
Copyright © 2023 nyanator.
This project is MIT licensed.
This README was generated with ❤️ by readme-md-generator