Chrome拡張機能 から Edge を開く

そろそろ IE も本格的に滅びそう(滅んでほしいですが)なので、以前作成した Chrome拡張機能 から IE を開く の Chrome拡張機能 をカスタマイズして、 Edge で開くバージョンを作成しました。

前提としては、 Edge の IEモード が有効であるとします。

コード

ディレクトリ構造やファイル構成はそのままです。 manifest.jsonversion 以外そのまま流用。

app/options.js

+// writefile
+async function writeFileToothWarrior(fileHandle, contents) {
+    // writable作成
+    const writable = await fileHandle.createWritable();
+    // コンテンツを書き込む
+    await writable.write(contents);
+    // ファイル閉じる
+    await writable.close();
+}
+// savefile
+async function saveFileToothWarrior(fileHandle, contents, saveFileOptions) {
+    if(!fileHandle) {
+        fileHandle = await window.showSaveFilePicker(saveFileOptions);
+    }
+    await writeFileToothWarrior(fileHandle, contents);
+    return fileHandle;
+}
+

 // Saves options to chrome.storage
 const disperseSkeleton = () => {
     // 略
         function() {
             const status = document.querySelector('#c-saveMsg');
             status.textContent = '保存されました';
+            // sites.xml
+            let sitesList = '';
+            for (const actUrl of actionUrlArray) {
+                sitesList += `
+    <site url="${actUrl}">
+        <compat-mode>IE11Enterprise</compat-mode>
+        <open-in>IE11</open-in>
+    </site>`;
+            }
+            const textContent = `<site-list version="2">
+    <created-by>
+        <tool>EMIESiteListManager</tool>
+        <version>10.0.14357.1004</version>
+        <date-created>01/17/2020 00:00:00</date-created>
+    </created-by>
+${sitesList}
+</site-list>
+`;
+            const saveFileOptions = {
+                types: [
+                    {
+                        description: 'xml file',
+                        accept: {
+                            'text/xml': [
+                                '.xml'
+                            ],
+                        },
+                    },
+                ],
+            };
+            let globalHandle;
+            // savefile
+            globalHandle = saveFileToothWarrior(globalHandle, textContent, saveFileOptions);
         }
     );
 };

設定画面用の JS 。変更点は IEモード で起動させるための sites.xml を生成するようにXMLのテンプレートとファイル書き込み機能を追加。

exaple.com:10080
exaple.com/hoge
192.0.2.1:10080
...

例えば設定画面でこのように対象URLを記述すると……

<site-list version="2">
    <created-by>
        <tool>EMIESiteListManager</tool>
        <version>10.0.14357.1004</version>
        <date-created>01/17/2020 00:00:00</date-created>
    </created-by>

    <site url="exaple.com:10080">
        <compat-mode>IE11Enterprise</compat-mode>
        <open-in>IE11</open-in>
    </site>
    <site url="exaple.com/hoge">
        <compat-mode>IE11Enterprise</compat-mode>
        <open-in>IE11</open-in>
    </site>
    <site url="192.0.2.1:10080">
        <compat-mode>IE11Enterprise</compat-mode>
        <open-in>IE11</open-in>
    </site>
...
</site-list>

このようなXMLをファイル書き込みします。なお、 url はプロトコルを使用しないこと、とエンタープライズ モード スキーマ v.2 ガイダンス (IT 担当者向け Internet Explorer 11) – Internet Explorer | Microsoft Docsに注意書きがあるので http://https:// は記述しないようにしています。

host/register-host.bat

レジストリに書き込みを行う準備用のバッチ。

 REG ADD "HKCU\Software\Google\Chrome\NativeMessagingHosts\transi.nmancie.revenant" /ve /t REG_SZ /d "%~dp0revenant.json" /f
+REG ADD "HKLM\SOFTWARE\Policies\Microsoft\Edge" /ve /t REG_SZ /f
+REG ADD "HKLM\SOFTWARE\Policies\Microsoft\Edge" /v "InternetExplorerIntegrationLevel" /t REG_DWORD /d 1 /f
+REG ADD "HKLM\SOFTWARE\Policies\Microsoft\Edge" /v "InternetExplorerIntegrationSiteList" /t REG_SZ /d "%~dp0sites.xml"

Edge が IEモード で起動するためのレジストリの値3つの書き込みを追記。

host/revenant.ps1

-    $shell = New-Object -ComObject Shell.Application
-    $ie = New-Object -ComObject InternetExplorer.Application # IE起動
-    $ie = $objShell.Windows() | ? {$_.Name -eq "Internet Explorer"} | Select-Object -First 1
-    $ie.Visible = $true
-    $ie.Navigate($url, 4)
+    Start-Process shell:AppsFolder\Microsoft.MicrosoftEdge_8wekyb3d8bbwe!MicrosoftEdge $url

ホストアプリ本体です。ここで IE 起動から Edge 起動に内容を変更しています。

主な変更点は以上、これで Chrome → Edge 起動ができるようになりました。

参考

モダンアプリをコマンドプロンプトやPowerShellから起動する

sites.xml

  • プロトコルは使用しないでください。 たとえば、http://、https://、またはカスタム プロトコルです。 これらによって解析が中断されます。

エンタープライズ モード スキーマ v.2 ガイダンス (IT 担当者向け Internet Explorer 11) – Internet Explorer | Microsoft Docs

この記事を書いた人

アルム=バンド

フロントエンド・バックエンド・サーバエンジニア。LAMPやNodeからWP、Gulpを使ってejs,Scss,JSのコーディングまで一通り。たまにRasPiで遊んだり、趣味で開発したり。