Chrome native messaging host with C# app in windows

由於工作需要使用到chrome擴充功能跟C#寫的app做資料傳輸，所以學了一下

以下開始來看，先看chrome extension的部分：

chrome的manifest.json:
{
  "name": "Native Messaging Windows",
  "version": "1.0",
  "manifest_version": 2,
  "description": "Communicate with a native application.",
  "icons": {
    "16": "icons/icon_windows.png",
    "48": "icons/icon_windows.png",
    "128": "icons/icon_windows.png"
  },
  "app": {
    "launch": {
      "local_path": "main.html"
    }
  },
  "permissions": [
    "nativeMessaging"
  ]
}

main.html:
<!DOCTYPE html>
 
<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:


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.hulk.chrome.example";
  appendMessage("Connecting to native messaging host <b>" + hostName + "</b>")
  port = chrome.runtime.connectNative(hostName);
  appendMessage("connectNative done");
  port.onMessage.addListener(onNativeMessage);
  port.onDisconnect.addListener(onDisconnected);
  updateUiState();
  appendMessage("updateUiState done");
}

document.addEventListener('DOMContentLoaded', function () {
  document.getElementById('connect-button').addEventListener(
      'click', connect);
  document.getElementById('send-message-button').addEventListener(
      'click', sendNativeMessage);
  updateUiState();
});

以上是chrome extension的部分

接下來看host app的部分
C# NativeMessageWindows code：
using Newtonsoft.Json;
using Newtonsoft.Json.Linq;
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.IO;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace NativeMessagingWindows
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
            //Console.WriteLine("Form1");
            JObject data;
            while ((data = Read()) != null)
            {
                var message = data["text"].Value<string>();
                this.label1.Text += "Received message form windows: " + message + "\n";
                var processed = ProcessMessage(data);
                Write(processed);
                if (processed == "exit")
                {
                    return;
                }
            }
        }

        private void button1_Click(object sender, EventArgs e)
        {
            JObject data;
            while ((data = Read()) != null)
            {
                var message = data["text"].Value<string>();
                this.label1.Text += "Received message form windows: " + message + "\n";
                var processed = ProcessMessage(data);
                Write(processed);
                if (processed == "exit")
                {
                    return;
                }
            }

            if (!string.IsNullOrEmpty(this.textBox1.Text))
            {
                string inputText = this.textBox1.Text;
                this.label1.Text += "Send message form windows: " + inputText + "\n";
                Write(inputText);
            }
        }

        public static string ProcessMessage(JObject data)
        {
            var message = data["text"].Value<string>();
            switch (message)
            {
                case "test":
                    return "testing!";
                case "exit":
                    return "exit";
                default:
                    return "echo: " + message;
            }
        }

        public static JObject Read()
        {
            var stdin = Console.OpenStandardInput();
            var length = 0;

            var lengthBytes = new byte[4];
            stdin.Read(lengthBytes, 0, 4);
            length = BitConverter.ToInt32(lengthBytes, 0);

            var buffer = new char[length];
            using (var reader = new StreamReader(stdin))
            {
                while (reader.Peek() >= 0)
                {
                    reader.Read(buffer, 0, buffer.Length);
                }
            }

            return (JObject)JsonConvert.DeserializeObject<JObject>(new string(buffer));
        }

        public static void Write(JToken data)
        {
            var json = new JObject();
            json["data"] = data;

            var bytes = System.Text.Encoding.UTF8.GetBytes(json.ToString(Formatting.None));

            var stdout = Console.OpenStandardOutput();
            stdout.WriteByte((byte)((bytes.Length >> 0) & 0xFF));
            stdout.WriteByte((byte)((bytes.Length >> 8) & 0xFF));
            stdout.WriteByte((byte)((bytes.Length >> 16) & 0xFF));
            stdout.WriteByte((byte)((bytes.Length >> 24) & 0xFF));
            stdout.Write(bytes, 0, bytes.Length);
            stdout.Flush();
        }

    }
}

在windows下必須要向系統註冊這個app
創建一個 com.hulk.chrome.example.json 檔案，內容如下：
{
  "name": "com.hulk.chrome.example",
  "description": "Hulk's Application",
  // "path": "C:\\Native\\NativeMessagingWindows.bat",
  "path": "C:\\NativeMessagingWindows.exe",
  "type": "stdio",
  "allowed_origins": [
    "chrome-extension://pdaadhknglcfmbocbpnknnkmglkohafo/"
  ]
}
json檔內的name要跟main.js的host name要一樣才找得到
path：位置的反斜線要兩個，windows的跳脫字元
chrome extension 號碼也要修改

完成這步以後我們需要在WIndows 登錄檔 中加入google 專案具體如下:

此處我在HKEY_Current_User及HKEY_LOCAL_MACHINE都有做設定
執行-> Regedit -> HKEY_Current_User->Software->Google->Chrome->NativeMessagingHosts->新建一個叫com.hulk.chrome.example的機碼，同時在這個項裡預設值設定為我們Native Messaging 的 位置 C:\Native\com.hulk.chrome.example.json

把執行檔放到該放的位置
把擴充功能加入，並且修改Chrome extension id

Chrome瀏覽器輸入
chrome-extension://pdaadhknglcfmbocbpnknnkmglkohafo/main.html
即可跟app做資料傳輸

不過app畫面不會執行起來，這個地方我還在研究，找不到原因
如果自己開啟app再開網頁，自己開起來的app windows沒有反應

狀況1:開啟網頁按connect，輸入一些字按send，然後按重新整理網頁，app windows才會跳出，可是也中斷連線了

這問題還在了解～～～

留言

張貼留言

這個網誌中的熱門文章

Visual Sudio2019創建MFC ActiveX工程製作IE OCX插件

圖片
前言 最近因為工作需要，實現IE extension插件，現在將學到的內容細節記錄下來， 本次的學習內容如下幾個主題： VS2019創建MFC ActiveX工程製作IE OCX插件 VS2019中MFC ActiveX工程如何調試 註冊ocx插件 在IE中使用JS調用第三方DLL函數 ㄧ. VS2019創建MFC ActiveX專案 1.新建專案 2. 默認，直接點下一步 3.  由於不需要顯示AboutBox，取消打勾“有關於對話框”，點擊完成 4. 建好的專案，文件格式如下圖 二. 加入自己要加的方法 js可以調用的ocx函數，一般寫在CDemoAXCtrl類中，該類即爲控件類（一個ActiveX可以寫多個控件類，本文就使用默認生成的這個CDemoAXCtrl控件類） 本人在 DemoAXCtrl.cpp中 添加了兩個隸屬於 CDemoAxCtrl底下的 方法，代碼如下 // JS調用返回 歡迎 xx，hello world！ BSTR CDemoAXCtrl::speakHelloWorld(LPCTSTR pname) { CString res(""); res.Format(_T("您好%s,hello world!"), pname); return res.AllocSysString(); } LONG CDemoAXCtrl::add(LONG a, LONG b) { return a + b; } 此時會有紅線，不用緊張， JS還不能調用，我們還需要在DemoAXCtrl.h & .cpp加入如下代碼 //DemoAXCtrl.h中，添加如下代碼 class CDemoAXCtrl : public COleControl { //此處爲默認生成的代碼 // 調度和事件 ID public: enum { dispidSpeakHelloWorld = 1L, dispidadd = 2L }; protected: // JS調用返回 歡迎 xx，hello world！ BSTR speakHelloWorld(LPCTSTR...
閱讀完整內容

Little Endian VS Big Endian

圖片
Endianness, 當一個資料要儲存到記憶體時 有兩種儲存方式， 如上圖其一為 Little Endian, 另一為 Big Endian 通常而言不需要考慮此排列方式的問題， 但是當要將資料傳遞到別的硬體平台上，或是網路上時 這問題就變得需要在意了， 在網路傳輸上使用的是 Big Endian， Kernel 中也有提供 htonl, htons, ntohs, ntohl 等 function 幫助將資料在 Big Endian 及 機器的 Endian 之間作轉換 ~ 目前也有平台是支援多種 Endianness 的 ex: ARM, PowerPC, MIPS … 透過硬體上的一個 Register 來設定要使用那種方式 當拿到一個新的硬體時，要如何得知此硬體目前使用的是哪一種 Endianness 呢？ 1. 翻閱 Spec, 一般而言 CPU Spec 上都會標明是哪一種，不過在可以並存的硬體上 就需要別的方式來幫助判斷了。 2. 寫小程式來判別，在此提供兩種程式寫法   2-1 先宣告 integer 0x12345678   再使用一個 char pointer 檢查第一個 byte 存 0x12 or 0x78 #include int main() { int a = 0x12345678; char *ptr = (char *)&a; if (*ptr == 0x12) printf("Big Endian\n"); else printf("Little Endian\n"); return 0; } 2-2 使用 htonl 來幫忙   剛剛有提到 htonl 會將資料轉成 Big Endian，若轉換前後一致那就是 Big endian 啦 #include int main() { int a = 0x12345678; int b = htonl(a); if (b == a) printf("Big Endian\n"); el...
閱讀完整內容

Converting Between Byte Arrays and Hexadecimal Strings in Java

1. Overview In the tutorial, we'll take a look at different ways to convert a byte array to a hexadecimal string, and vice versa. The record is introduced because the result of encryption and decryption will be a byte array, but my data must be passed through the HTTP protocol. 2. Converting Between Byte and Hexadecimal First of all, let's take a look at conversion logic between byte and hexadecimal numbers. 2.1 Byte to Hexadecimal The bytes are 8 bit signed integers in Java. Therefore, we need to convert each 4-bit segment to hex separately and concatenate them. Consequently, we'll get two hexadecimal characters after conversion. For instance, we can write 45 as 0010 1101 in binary, and the hexadecimal equivalent will be "2d": 0010 = 2 (base 10) = 2 (base 16) 1101 = 13 (base 10) = d (base 16) Therefore: 45 = 0010 1101 = 0x2d Let's implement the simple logic in Java: public String byteToHex(byte num) { char[] hexDigits = new char[2]...
閱讀完整內容