# はじめに
Web拡張機能で、Native Messaging という技術があります。
Native Messaging を使用すると、拡張機能とネイティブアプリケーション（Windowsの場合、exe）間でデータのやり取りが可能になります。

<a href="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/kousei.svg" target="_blank" rel="nofollow noopener"><img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/kousei.svg" alt="" loading="lazy" style="margin-top: 5px;"></a>
 
今回、Native Messaging 機能を利用したexeと拡張機能のお試し版を作成しましたので、仕組みをご紹介していきます。

<a href="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/DL_Chrome.gif" target="_blank" rel="nofollow noopener"><img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/DL_Chrome.gif" alt="" loading="lazy"></a>

 

・[動作内容](#anchor1) 
・[ネイティブアプリインストール](#anchor2) 
・[Chrome拡張機能インストール](#anchor3) 
・[Chrome動作確認](#anchor4) 
・[Firefox拡張機能インストール](#anchor5) 
・[Firefox動作確認](#anchor6) 
・[Chrome公式サンプル](#anchor7) 

 

<blockquote class="warn">
今回の検証環境は、
<code>Windows 10 Pro(x64)</code>
<code>Chrome: 91.0.4472.114（Official Build） （64 ビット）</code>
<code>Microsoft Edge: 91.0.864.59 (公式ビルド) (64 ビット)</code>
<code>Firefox Developer: 90.0b12 (64 ビット)</code>
<code>python 2.7.18</code>
になります。
</blockquote>

 

**【ブラウザ・拡張機能の限界】** 
・「名前を付けて保存」はできるが、一つずつ選択になる。（設定で保存先を聞くか聞かないかはできる） 
・拡張機能などでまとめてダウンロードはできるが、設定で決めたダウンロードフォルダにしかダウンロードされない。（設定で保存先を聞くにすると、毎回聞いてくる） 
<a href="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/download_normal1.gif" target="_blank" rel="nofollow noopener"><img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/download_normal1.gif" alt="" loading="lazy"></a> 
<a href="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/download_normal2.gif" target="_blank" rel="nofollow noopener"><img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/download_normal2.gif" alt="" loading="lazy"></a> 
・exeなどをダウンロードすると、警告が表示されて、ユーザーへの確認が行われる。 
↓ 
Native Messaging 機能を利用すると・・・ 
↓ 
**【exeがやれることはできる】** 
・フォルダ選択画面を表示して、まとめてダウンロードできる。 
・上書きダイアログなどのインターフェイスのカスタムもできる。 
・exeの実装次第。 

<a href="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/uwagaki.gif" target="_blank" rel="nofollow noopener"><img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/uwagaki.gif" alt="" width="450px" loading="lazy"></a> 
 

| 動作内容 | JS | 拡張機能 | Native Messaging |
| ---- | ---- | ---- | ---- |
| ダウンロード | ✔ | ✔ | ✔ |
| まとめてダウンロード | ❌ | ✔ | ✔ |
| ユーザー選択してまとめてダウンロード | ❌ | ❌ | ✔ |
| exeを起動 | ❌ | ❌ | ✔ |
| DVDのトレイを開ける | ❌ | ❌ | ✔ |
| アプリ側でＱＲコード解析（録画データ解析） | ❌ | ❌ | ✔ |
 
 
 

<a class="anchor" id="anchor1"></a>

# 動作内容
Native Messaging 機能を利用した試作アプリの動作内容を先出しすると、以下の動作内容になります。 

<a href="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/dousanaiyou.svg" target="_blank" rel="nofollow noopener"><img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/dousanaiyou.svg" alt="" loading="lazy" style="margin-top: 7px;"></a> 

 

JavaScriptでnativemesssampleLaunchAppイベントを発火 
↓ 
nativemesssampleLaunchAppイベントを拡張機能が検知 
↓ 
var port = chrome.runtime.connectNative( 'nativemesssample' );でアプリに接続 
※nativemesssampleはアプリの名前（アプリ側manifest.jsonに名前が登録されている） 
↓ 
port.postMessage( request.message ); 
でダウンロードするべきファイル等のパラメータをアプリに渡す 
※保存されるファイル名は、ここで渡すパラメータ次第 
↓ 
アプリが保存先ダイアログを表示 
↓ 
ユーザーが保存先を選んだらダウンロード 
（GET /ファイル名） 
↓ 
ダウンロードし終わったら、アプリから拡張機能にメッセージを送信 
↓ 
アプリ - 拡張機能の接続を切断 

 

<a class="anchor" id="anchor2"></a>

# ネイティブアプリインストール 
msiをダブルクリックしてインストールします。 
<a href="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/image1.png" target="_blank" rel="nofollow noopener"><img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/image1.png" alt="" width="300px" loading="lazy"></a>
 
<a href="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/image2.png" target="_blank" rel="nofollow noopener"><img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/image2.png" alt="" width="400px" loading="lazy"></a>
 
アプリとして登録されます。
<a href="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/image3.png" target="_blank" rel="nofollow noopener"><img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/image3.png" alt="" width="400px" loading="lazy"></a>
 
C:\Users\[ユーザー名]\AppData\Local\nativemesssample\nativemesssample.exe 
が登録されますが、nativemesssample.exe を起動しても何も起きません。 
 
レジストリに 
**【Chrome用】** 
**キー：** コンピューター\HKEY_CURRENT_USER\SOFTWARE\Google\Chrome\NativeMessagingHosts\nativemesssample 
**値：** C:\Users\admin\AppData\Local\nativemesssample\Chrome\manifest.json 
 
**【Firefox用】** 
**キー：** コンピューター\HKEY_CURRENT_USER\SOFTWARE\Mozilla\NativeMessagingHosts\nativemesssample 
**値：** C:\Users\admin\AppData\Local\nativemesssample\Mozilla\manifest.json 
が追加されます。 
 
値のmanifest.jsonは、ネイティブアプリ側の定義ファイルです。 
 

`Chrome\manifest.json`

```json
{
 "name": "nativemesssample",
 "description": "Native Message Example.",
 "path": "..\\nativemesssample.exe",
 "type": "stdio",
 "allowed_origins": ["chrome-extension://egddaljlhmaflljhmfhkdhlhcmbkmdih/"]
}
```

 

`Mozilla\manifest.json`

```json
{
	"name": "nativemesssample",
	"description": "Native Message Example.",
	"path": "..\\nativemesssample.exe",
	"type": "stdio",
	"allowed_extensions": ["nativemesssample@itccorporation.jp"]
}
```

 

<a class="anchor" id="anchor3"></a>

# Chrome拡張機能インストール

<blockquote class="warn">
開発中の手順です。正規プロダクトの手順とは異なります。
</blockquote>

<blockquote class="warn">
Edge(Chromium)も同じような手順でできましたので、Edge(Chromium)の説明は省略します。
</blockquote>

設定→拡張機能 
もしくは、 
`chrome://extensions/`
をURL欄に入力します。 
 
デベロッパーモードをONにして、 
「パッケージ化されていない拡張機能を読み込む」 
で読み込みます。 
<a href="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/image4.png" target="_blank" rel="nofollow noopener"><img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/image4.png" alt="" width="600px" loading="lazy"></a>
 
<a href="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/image5.png" target="_blank" rel="nofollow noopener"><img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/image5.png" alt="" width="400px" loading="lazy"></a>
 
（ここで選択するのは、拡張機能のmanifest.jsonがあるフォルダになります。） 
 
ここで、拡張機能のＩＤが表示されます。 
<a href="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/image6.png" target="_blank" rel="nofollow noopener"><img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/image6.png" alt="" width="600px" loading="lazy"></a>
 
先ほど、ネイティブアプリのインストールで見た 
<code>C:\Users\admin\AppData\Local\nativemesssample\Chrome\manifest.json</code> 
の allowed_origins の値と合っていないと動作しません。 
（ネイティブアプリ側が拡張機能からの通信を拒絶します。） 

 

<a class="anchor" id="anchor4"></a>

# Chrome動作確認
ApacheやNginx等のWebサーバー経由で参照できるように以下のようにファイル（HTML,js,ダウンロード対象ファイル）を配置します。 

```sh
# find /var/www/html/
/var/www/html/
/var/www/html/jquery-1.8.3.min.js
/var/www/html/ExcelWorkSheet10.xlsx
/var/www/html/ExcelWorkSheet7.xlsx
/var/www/html/nativemesssample.html
/var/www/html/ExcelWorkSheet1.xlsx
/var/www/html/ExcelWorkSheet2.xlsx
/var/www/html/ExcelWorkSheet6.xlsx
/var/www/html/ExcelWorkSheet5.xlsx
/var/www/html/ExcelWorkSheet9.xlsx
/var/www/html/ExcelWorkSheet8.xlsx
/var/www/html/ExcelWorkSheet3.xlsx
/var/www/html/ExcelWorkSheet4.xlsx
```

`http://[Webサーバー]/nativemesssample.html`
へアクセスします。 
 
Downloadボタンを押して、ネイティブアプリ（保存先選択画面）を起動し、ダウンロードします。 

<a href="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/DL_Chrome.gif" target="_blank" rel="nofollow noopener"><img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/DL_Chrome.gif" alt="" loading="lazy"></a>

チェックしたファイルが選択したフォルダにダウンロードされます。 

 

<a class="anchor" id="anchor5"></a>

# Firefox拡張機能インストール

<blockquote class="warn">
開発中の手順です。正規プロダクトの手順とは異なります。
署名されていない拡張機能の場合、「Firefox Developer」「Firefox Nightly」どちらかが必要です。
</blockquote>

URL欄に `about:config` と入力します。 
「危険を承知の上で使用する」をクリックします。 
<a href="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/image7.png" target="_blank" rel="nofollow noopener"><img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/image7.png" alt="" loading="lazy"></a>
 
「設定名を検索」のところに `xpinstall.signatures.required` と入力します。 
<a href="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/image8.png" target="_blank" rel="nofollow noopener"><img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/image8.png" alt="" loading="lazy"></a>
 
右にある切り替えボタンをクリックして、`false`へ切り替えます。
<a href="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/image9.png" target="_blank" rel="nofollow noopener"><img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/image9.png" alt="" loading="lazy"></a>
 
「アドオンとテーマ」を開きます。 
<a href="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/image10.png" target="_blank" rel="nofollow noopener"><img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/image10.png" alt="" loading="lazy"></a>
 
「拡張機能」をクリックします。
<a href="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/image11.png" target="_blank" rel="nofollow noopener"><img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/image11.png" alt="" loading="lazy"></a>
 
アドオンのzipをドラッグ＆ドロップします。 
警告が表示されますが、「追加」をクリックします。 

<a href="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/FirefoxAddon.gif" target="_blank" rel="nofollow noopener"><img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/FirefoxAddon.gif" alt="" loading="lazy"></a>

 

Firefoxの方は、 
拡張機能側のmanifest.json（先ほどドラッグ＆ドロップしたzipの中に有ります。） 
と 
先ほど、ネイティブアプリのインストールで見た 
`C:\Users\admin\AppData\Local\nativemesssample\Mozilla\manifest.json`
の allowed_extensions の値と合っていないと動作しません。 

 

`拡張機能側のmanifest.json`

```json
	"applications": {
		"gecko": {
			"id": "nativemesssample@itccorporation.jp",
```


 

<a class="anchor" id="anchor6"></a>

# Firefox動作確認

`http://[Webサーバー]/nativemesssample.html` へアクセスします。 
 
Downloadボタンを押して、ネイティブアプリ（保存先選択画面）を起動し、ダウンロードします。 
このとき、アクセスするhtml,js、起動するアプリはChromeのときと同じものになります。 

<a href="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/DL_Firefox.gif" target="_blank" rel="nofollow noopener"><img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/DL_Firefox.gif" alt="" loading="lazy"></a>

チェックしたファイルが選択したフォルダにダウンロードされます。 

 

<a class="anchor" id="anchor7"></a>

# Chrome公式サンプル
GoogleChrome公式サンプル（<a href="https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/mv2-archive/api/nativeMessaging" target="_blank">GoogleChrome/chrome-extensions-samples(GitHub)</a>）があるのを見つけました。 
こちらは、以下のようになっています。

<a href="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/dousanaiyou2.svg" target="_blank" rel="nofollow noopener"><img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/dousanaiyou2.svg" alt="" loading="lazy" style="margin-top: 7px;margin-bottom: 3px;"></a> 

特にネイティブアプリケーションじゃないとできないことはやっていないですが、ブラウザ - ネイティブアプリ間の通信の様子が実際に体験できます。 

 

## インストール

<blockquote class="warn">
Python 2.* がインストールされていて、パスが通っているものとします。</stron>Python 2.*のインストールの説明は省略します。
</blockquote>

<blockquote class="warn">
Edge(Chromium)も同じような手順でできましたので、Edge(Chromium)の説明は省略します。
</blockquote>

install_host.bat をダブルクリックします。 
<a href="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/image12.png" target="_blank" rel="nofollow noopener"><img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/image12.png" alt="" width="350px" loading="lazy"></a>
 
**キー：** コンピューター\HKEY_CURRENT_USER\SOFTWARE\Google\Chrome\NativeMessagingHosts\com.google.chrome.example.echo 
**値：** C:\Users\admin\Desktop\nativeMessaging\host\com.google.chrome.example.echo-win.json 
が追加されます。

<blockquote class="warn">
C:\Users\admin\Desktop\nativeMessaging\host
までは、ダブルクリックしたフォルダになりますので、以降、hostフォルダの位置を変えると動かなくなります。
</blockquote>

<blockquote class="info">
appフォルダ： 拡張機能Googleアプリ
hostフォルダ： Python2で動作するネイティブアプリケーション
です。
</blockquote>

 

設定→拡張機能 
もしくは、 
`chrome://extensions/` 
をURL欄に入力します。 
 
デベロッパーモードをONにして、 
「パッケージ化されていない拡張機能を読み込む」 
で読み込みます。 

<a href="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/image13.png" target="_blank" rel="nofollow noopener"><img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/image13.png" alt="" width="400px" loading="lazy"></a> 
（ここで選択するのは、拡張機能のmanifest.jsonがあるappフォルダになります。） 

 

## 動作確認
URL欄に `chrome://apps/` を入力します。 
Native Messaging Example のアイコンをクリックします。 
<a href="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/image14.png" target="_blank" rel="nofollow noopener"><img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/image14.png" alt="" width="600px" loading="lazy"></a> 
 
「Connect」ボタンを押すと、アプリが起動してきます。 
<a href="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/image15.png" target="_blank" rel="nofollow noopener"><img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/image15.png" alt="" width="600px" loading="lazy"></a> 
↓ 
ブラウザ側："ping" 
アプリ側："pong" 
と入力すると、お互いの入力内容が画面に反映されます。 

<a href="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/ping_pong.gif" target="_blank" rel="nofollow noopener"><img src="https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/native_messaging/ping_pong.gif" alt="" loading="lazy"></a>
 
 
 
できました！

Web拡張機能で、Native Messaging という技術があります。 Native Messaging を使用すると、拡張機能とネイティブアプリケーション（Windowsの場合、exe）間でデータのやり取りが可能になります。 今回、Native Messaging 機能を利用したexeと拡張機能のお試し版を作成しましたので、仕組みをご紹介していきます。 ・動作内容 ・ネイティブアプリインストール ・Chrome拡張機能インストール ・Chrome動作確認 ・Firefox拡張機能インストール ・Firefox動作確認 ・Chrome公式サンプル

Native Messagingのexeを試作してみた(Chrome,Firefox,Edge拡張機能)