概要
Microsoft の docs や support ページでは、日本語では URL が /ja-jp/ 英語では /en-us/ となりますが、これをボタン一つで切り替えてくれる Chrome 拡張を作ってみました。
なお、Chromium ベースの Edge でも動作確認済みです。
本ページの最後では github からダウンロードできるようにしましたので、ご興味あればお使いください。
Microsoft の docs 例 :
https://docs.microsoft.com/ja-jp/intune/device-enrollment
https://docs.microsoft.com/en-us/intune/device-enrollment
自作アドイン :
経緯
お仕事柄 Microsoft のページを参照することが多いのですが、以下なときに英語から日本語に変換するのが微妙にめんどくさいです。
- 検索で引っかかったのが英語ページ
- ブックマークがリンク切れで英語ページにリダイレクト
(リダイレクトならまだ良くて消失してるのは本当にやめてほしい) - 同僚からの参考資料が英語
(さっき席で日本語で読んでたじゃないですか)
さくっと日英変換してくれるアドインがあったら便利だなーと思い、作成に至りました。
やったこと
良い時代なのでインターネット上の皆様はやってみた系の記事で詳細に実装方法を説明していただいているのですが、
さくっと作りたかったので、どなたかがシェアされていたコードを丸々パクらせていただき、必要なところだけ変えました。
開発環境は？
開発環境はいらず、フォルダを用意してマニフェストである manifest.json と実処理を書く background.js、あとアイコンやお約束系のファイルを置けば準備完了です。
マニフェストファイル
私が変更したのは名前やタイトルの変更と、
今回、タブの操作やメニュー表示のために permissions を追加しました。
{
"name": "en-us to ja-jp",
"version": "0.0.5",
"manifest_version":2,
"description": "/en-us/ -> /ja-jp/",
"permissions": [
"activeTab",
"tabs",
"contextMenus"
],
"background":{
"scripts": ["background.js"]
},
"page_action": {
"default_icon": "off19.png",
"default_title": "Language Change"
},
"icons" : {
"128": "128.png"
}
}
実処理
以下な感じで、ボタン押されたら URL を /ja-jp/ か /en-us/ で Replace してページ更新するだけです。
const JA_URL = "/ja-jp/";
const EN_URL = "/en-us/";
(function(){
// メニュー作成
const JEID = "jatoen";
const EJID = "entoja";
chrome.contextMenus.create({title: "ja-jp to en-us", id: JEID, contexts: ["all"]});
chrome.contextMenus.create({title: "en-us to ja-jp", id: EJID, contexts: ["all"]});
chrome.contextMenus.onClicked.addListener(function (info, tab) {
if ( info.menuItemId == JEID ) {
replaceUrl(tab, JA_URL,EN_URL);
}
else if ( info.menuItemId == EJID ) {
replaceUrl(tab, EN_URL,JA_URL);
}
});
// tab がアップデートされたとき
chrome.tabs.onUpdated.addListener(function(tabId){
// ページアクションを出す
chrome.pageAction.show(tabId);
})
// ページアクションアイコンをクリックしたときの挙動
chrome.pageAction.onClicked.addListener(function(tab){
replaceUrl(tab,EN_URL,JA_URL);
});
})();
function replaceUrl(tab, oldstr, newstr) {
var newurTmp = tab.url.replace(oldstr,newstr);
if (newurTmp != tab.url) {
chrome.tabs.update(tab.id, {url: newurTmp}, null);
}
}
インストール方法
以下より ZIP をダウンロードします。
https://github.com/nanmei365/nanmeitest
解凍し、中の langChange フォルダを適当な場所に置きます。
chrome://extensions を開き、"パッケージ化されていない拡張機能を読み込む" をクリックします。
langChange フォルダの中の data を選択します。
適当なページを開き直すと、右上のアイコンが活性化されますので、使ってみてください。