Quantcast
Channel: ほりひログ
Viewing all articles
Browse latest Browse all 44

2025年Chrome Extension初め

$
0
0

2025年も細々とコーディングを。
ストレスフリーで、作りたいものだけ作っていく。

新年一発目のネタ元はコチラ。

流れとしては、

  • ドキュメントのURL、パスの一部やクエリーパラメータでロケールや言語を指定できるサイトが多いし、大抵のサイトは省略した時*1ブラウザーに保存された*2言語設定に従ってリダイレクトしてくれる。
  • でもいろんなサイトからのドキュメントへのリンクが英語版へのリンクになっていることが多々ある。
    まずは日本語で読みたいのに*3
  • だったら、Azureポータル内のlearn.microsoft.comへのリンクからロケールを削除して、各自の言語設定でリダイレクトさせるくらいなら、Azure Portal Plusに追加してみようか。

という話。

じゃあAzure Portal Plusに実装をしてみようとブランチ切ったところで、

  • Azureポータル内のaタグのリンク先のURLを、書き換えるのはできる。
    けど、aタグにリンク先が短縮URLとかで、リダイレクト先が英語版のドキュメントとかだった場合とか、
    javascriptで画面遷移されたりとかを考えると、割と頑張んないといけないことが多そう。
  • そんなリダイレクト対応とかを頑張ったとて、そもそもAzureポータルからのリンクだけやっても、対象になるリンクも頑張る意味も少ないし、別物になっちゃいそう。

とかとか疑問が溢れ、Azure Portal Plusでこれを解決するのを断念。

ここまでが2024年末の話で、年が明けて2025年、改めて👆のネタを別のChrome拡張機能として新しく作り直した。

それがコチラ。

chromewebstore.google.com

この拡張機能のメイン機能は、対象のサイトを開くと、強制的に自動的に各自のブラウザー設定に従って各自の言語のページを開いてくれる自動遷移機能。

👇の動画はその自動遷移の様子。

www.youtube.com

最初の10秒あたりまでは、この拡張機能を使わない、普通の画面遷移。
/en-us/入りのリンクをクリックすると、当然英語版のページへ遷移している。

その後、この拡張機能を有効にして最初と同じリンクをクリック。
すると、/en-us/入りのリンクなのに本来のリンク先である英語版ではない日本語版へ遷移している。

仕組みは、

  1. 拡張機能が遷移先が対象サイトだと判断すると、ブラウザーロケール/言語部分を削除したURLへ自動的に遷移させる
  2. 次にロケール/言語がないURLをリクエストされたサイト側がブラウザーを各自の言語サイトにリダイレクトさせる

という動きをしている。
割とサイト側の実装に頼っている。

対象のドメインは、とりあえず最初のリリースでは、上の動画のlearn.microsoft.comも含め下記4つ。

  • learn.microsoft.com
  • docs.aws.amazon.com
  • cloud.google.com
  • docs.github.com

これら以外のドメインでも、

  1. URLのパスかクエリーパラメータにロケール/言語を表す文字列が入る
  2. URL内のロケール/言語を削除したURLにアクセスすると、サイト側が自動的にユーザーの既定の言語にリダイレクトしてくれる

の2つをクリアしていれば、今後対応ドメインに追加できるはず*4

その他、自動遷移機能については、

  • 同じドメイン内での遷移の時はこの自動遷移の対象外
  • 下記スクショのように、遷移後の画面の右下に数秒だけ出るToastをクリックすると本来のリンク先へ遷移

といくつかの事情でそれなりの工夫をしている。

自動遷移以外には、コンテキストメニューに ‘Open default locale page‘ とCopy URL without localeというメニューを追加。

それぞれ、

  • 原文のページからユーザー設定言語のページを開く
  • ユーザー設定言語のページ用のURLのコピー

ができる。

一応メインの特徴は自動遷移のつもりで作ってみたものの、公開申請後から自分で使っている感じ、コンテキストメニューの出番が割と多そうな気がしてきた。

2025年はこちらもご贔屓に。

2024年に切ったAzure Portal Plusのブランチの供養はまた別のお話。


*1:英語版がhttps://learn.microsoft.com/en-us/path/to/...ならhttps://learn.microsoft.com/path/to/...みたいに。

*2:CookieとかLocalStorageとか。

*3:あくまで「まずは」ですよ。必要なら英語も読みますよ。

*4:ちなみに azure.micirosoft.com は 2. を満たせずダメだった。


Viewing all articles
Browse latest Browse all 44

Trending Articles