夢語るだけのREADME。
- node:
18.12.1
npm ci
npm run build:production:firefox
npm run output:firefox
cd dist/web-ext-artifactsnpm ci
npm run build:production:chrome
npm run output:chrome
cd dist/web-ext-artifacts- ブラウザ拡張機能
- Fx だけでいい
- ページの翻訳処理を行う
- 特定のページに対するパターン定義を取り込んで翻訳する
- 翻訳者がしんどい
- ユーザーは自然に読める
- 公式で日本語訳ページを作る企業あんまないでしょ
- 英語至上主義感がつらい
- いろんな言語も対応できたら誰かが幸せになる(設定ファイルがあればね！)
- 原文を自分で読んでも翻訳サイト使っても機微が分からん
- 翻訳先言語の多数の目があれば、とは思いつつ誰が訳すねんっていうね
| manifest.json | package.json | その他 |
|---|---|---|
name |
- | locale: ext_name |
short_name |
name |
ローカライズしない想定。 HTTP-HEADER: X-Extension としても使用される |
version |
version |
|
description |
description |
locale: ext_description |
- 基本的に package.json データを元に manifest.json を組み立てる
- 項目が重複するものは package.json を正として楽ちん管理したい
- バージョンアップ時は
versionだけ変えて運用したい
npm scriptsの*-env系スクリプトはプロジェクトディレクトリ直下の.npmrcの環境変数を使用する。- 注意 前提をいきなり覆すが、 Chrome を実行する場合
PTD_CHROME_APPLICATIONの設定は必須となる
- 注意 前提をいきなり覆すが、 Chrome を実行する場合
.npmrcを使用する場合、正しいパス・設定が行われている前提となる- Windows で動かすことが前提となっていることに注意
# npm scripts: *-env 系の環境を設定
# 変数名の先頭に PTD_ を付与すること
# Firefox 設定
# プロファイルディレクトリ
PTD_FIREFOX_PROFILE_DIRECTORY=X:\fx
# Chrome 設定
# アプリパス
PTD_CHROME_APPLICATION=C:\Program Files\Google\Chrome\Application\chrome.exe
# プロファイルディレクトリ
PTD_CHROME_PROFILE_DIRECTORY=X:\ch{
// 名前
"name": "example trans",
// バージョン
"version": "YYYY-MM-DD/x.xx.xxx",
// 対象ドメイン
"hosts": [
"example.com",
"www.example.com"
],
// 設定情報
"information": {
"website": "https://",
"repository": "https://",
"document": "https://"
},
// 優先度 0: 通常, 低 < 0 < 高
"priority": 0,
// 変換先言語
"language": "ja",
"watch": {
"window": [
// window 監視対象イベント
],
"document": [
// document 監視対象イベント
"pjax:end",
],
},
// パス
"path": {
// 対象パス(正規表現)
"^/$": {
// パスにクエリ部分を含めるか
"with_search": true,
// セレクタに対する処理
"query": [
// ID 指定
{
"selector": {
// 該当する <meta name=* content=*> に全条件を満たす場合にセレクタが使用される。
"meta": {
// 判定方法
// partial: 部分一致
// forward: 前方一致
// backward: 後方一致
// perfect: 完全一致
// regex: 正規表現
// not_empty: `content` が空でない
// ignore: パターンを無視(`content` を見ない)
"mode": "partial",
// 大文字小文字を区別するか
"ignore_case": true,
// パターン
"pattern": "pattern",
},
// セレクタ種別
// normal: 通常
// common: 共通
"mode": "normal",
"value": "#id",
// テキストノードの指定。 childNodes の #text だけを集計した 1 基底の番号: <span>[1]<br />[2]<br />[3]</span>
// 負数を指定した場合は全テキストノードが対象となる(matchesによる制御を想定)
// `-1` を指定すれば一致時点で後続終了、`-2`(負数-1未満) を指定した場合はすべて処理。
"node": 3,
// セレクタを全要素に適用するか
"all": false,
},
// 対象要素の (Element/Text).textContent
"text": {
"filter": {
// 改行をどう扱うか
// join: 半角スペース1つに置き換える
// raw: そのまま
"line_break": "join",
// 改行以外のホワイトスペースの扱い
// join: 半角スペース1つに置き換える
// raw: そのまま
"white_space": "",
// トリムを実施するか
"trim": true,
},
// 条件
"matches": [
{
// 判定方法
// partial: 部分一致
// forward: 前方一致
// backward: 後方一致
// perfect: 完全一致
// regex: 正規表現 (?<NAME>) 使用可能
"mode": "partial",
// 大文字小文字を区別するか
"ignore_case": true,
// パターン
"pattern": "pattern",
"replace": {
// 置き換え方法
// normal: 通常
// common: 共通
"mode": "normal",
// 条件が正規表現の場合で指定がある場合 `(?<NAME>)` を `$<NAME>` で使用可能
"value": "text",
// 条件が正規表現の場合にキャプチャグループ名に対する置き換え文字列を指定(未指定・一致しない場合にもと文字列)
"regex": {
// キャプチャグループ名
"NAME": {
// キャプチャした文字列に対する置き換え
"A": "aaa",
"B": "bbb",
}
}
}
}
],
// 置き換え(matches に該当しない場合)
"replace": {
"mode": "normal",
"value": "text",
}
},
// 対象要素の属性
"attributes": {
// 属性名
"attribute-name": {
// 属性値
}
}
},
{
"selector": {
"value": "html .class > child + next child[data-custom='xxx'] input",
}
// 置き換え処理
},
{
// 共通セレクタの使用
"selector": {
"mode": "common",
"value": "common-nav-logout",
},
"text": {
"replace": {
// 共通テキストの使用
"mode": "common",
"value": "common-nav-logout"
}
}
}
],
// 共通クエリの使用
"import": [
"common-query"
]
}
},
// 共通設定
"common": {
// 共通セレクタ設定
"selector": {
"common-nav-logout": "nav a.logout",
},
// 共通テキスト設定
"text": {
"common-nav-logout": "ログアウト",
},
// 共通クエリ設定
"query": {
"common-query": {
"selector": {
},
"text": {
}
}
}
}
}