We must create two folders called app and host. The extension is the app folder while connection with a executable file is provided in the host folder.
main.html in the app folder :
<html>
<head>
<script src='./main.js'></script>
</head>
<body>
<button id='connect-button'>Connect</button>
<input id='input-text' type='text' />
<button id='send-message-button'>Send</button>
<div id='response'></div>
</body>
</html>
main.js in the app folder :
var port = null;
var getKeys = function(obj){
var keys = [];
for(var key in obj){
keys.push(key);
}
return keys;
}
function appendMessage(text) {
document.getElementById('response').innerHTML += "<p>" + text + "</p>";
}
function updateUiState() {
if (port) {
document.getElementById('connect-button').style.display = 'none';
document.getElementById('input-text').style.display = 'block';
document.getElementById('send-message-button').style.display = 'block';
} else {
document.getElementById('connect-button').style.display = 'block';
document.getElementById('input-text').style.display = 'none';
document.getElementById('send-message-button').style.display = 'none';
}
}
function sendNativeMessage() {
message = {"text": document.getElementById('input-text').value};
port.postMessage(message);
appendMessage("Sent message: <b>" + JSON.stringify(message) + "</b>");
}
function onNativeMessage(message) {
appendMessage("Received message: <b>" + JSON.stringify(message) + "</b>");
}
function onDisconnected() {
appendMessage("Failed to connect: " + chrome.runtime.lastError.message);
port = null;
updateUiState();
}
function connect() {
var hostName = "com.google.chrome.example.echo";
appendMessage("Connecting to native messaging host <b>" + hostName + "</b>")
port = chrome.runtime.connectNative(hostName);
port.onMessage.addListener(onNativeMessage);
port.onDisconnect.addListener(onDisconnected);
updateUiState();
}
document.addEventListener('DOMContentLoaded', function () {
document.getElementById('connect-button').addEventListener(
'click', connect);
document.getElementById('send-message-button').addEventListener(
'click', sendNativeMessage);
updateUiState();
});
window.onbeforeunload= function (e)
{
message = {"text": "terminate"};
port.postMessage(message);
appendMessage("Sent message: <b>" + JSON.stringify(message) + "</b>");
};
manifest.json in the app folder :
{
// Extension ID: knldjmfmopnpolahpmmgbagdohdnhkik
"key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAzcp66xi1ctUL0HvndH7IyjNw2CM9TdOMx8XPv0GbQXFmzm3xnqwQkbRYyfNoYN+pIIY0/TRu7qYOAnb0sogEqQRU73sbSAJajPbCxxBTVFueTypQtBpN5uuV/Z/Ox4myMiRVqcfLxDaVLFkVa3f9OGMhWJclDa74eIrwqc81GJQM8TG0JvZMSwE3u8FzH+d8U+x2p/f7a4546BNpP9Ssv2Jc/kE2KV5DIQS++8rg04aHnW3TZX2aUd1Bz+c416hmqxEb4iARGXhg7iURh6KIe9+490imIcXaedhUwWRiqnuJ3Kbkzl/iOSUI2XzIOHxGnkAGmLf9tfsrhKLcwtvvqQIDAQAB",
"name": "Native Messaging Example",
"version": "1.0",
"manifest_version": 2,
"description": "Send a message to a native application.",
"app": {
"launch": {
"local_path": "main.html"
}
},
"icons": {
"128": "icon-128.png"
},
"permissions": [
"nativeMessaging"
],
"background":{
"scripts":["main.js"],
"persistent": true
}
}
com.google.chrome.example.echo-win.json file in the host folder :
{
"name": "com.google.chrome.example.echo",
"description": "Chrome Native Messaging API Example Host",
"path": "nativeMessaging.exe",
"type": "stdio",
"allowed_origins": [
"chrome-extension://bcffeaabpankpgikpifpailfcihmheno/"
]
}
install_host.bat in the host folder :
REG ADD "HKCU\Software\Google\Chrome\NativeMessagingHosts\com.google.chrome.example.echo" /ve /t REG_SZ /d "%~dp0com.google.chrome.example.echo-win.json" /f
Also, nativeMessaging.exe and its required dlls could be exist in the host folder
After providing these two folders you should run the batch file in the host folder to register the json file in the registry.
Finally, you should upload the extension folder (app folder) through chrome browser (Settings -> Extensions -> Load unpacked extension).
