標籤：read manager 檔案 rip pts har sys any imu
Chrome 外掛程式: 起動本地應用 (Native messaging)www.MyException.Cn 網友分享於：2014-08-01 瀏覽：3次 Chrome 外掛程式: 啟動本地應用 (Native messaging)最近碰到了一個新問題，需要利用Chrome 的外掛程式, 從我們的一個網站中啟動一個我們的本地C#應用，同時給這個應用傳值來進行不同的操作。
在這裡記錄下解決的過程，以便以後尋找
首先我們需要建立一個google的外掛程式 這個外掛程式包含了三個檔案
manifest.json(名字不可改, 建外掛程式必須檔案),background.js(檔案名稱可改, 後台檔案),content.js(content script檔案 負責與網站頁面互動)
首先我們來看看manifest.json 這個檔案
<span style="font-family:SimSun;font-size:18px;">{"name" : "FastRun","version" : "1.0.1","description" : "Launch APP ","background" : { "scripts": ["background.js"] },"permissions" : ["nativeMessaging","tabs","http://xxx/*"],"content_scripts": [ { "matches": ["http://xxx/*"], "js": ["content.js"] }],"minimum_chrome_version" : "6.0.0.0","manifest_version": 2}</span>
裡面的premissions非常重要, 他表示我們的外掛程式在什麼條件運行, "nativeMessaging" 代表要在這個外掛程式中允許調用這種方法
"xxx"填入你想要的載入的網址
"content_scripts" 中"xxx" 表示在什麼網頁下運行我們與介面互動的script.
再來看看後台檔案
background.js
var port = null; chrome.runtime.onMessage.addListener( function(request, sender, sendResponse) { if (request.type == "launch"){ connectToNativeHost(request.message); }return true;});//onNativeDisconnectfunction onDisconnected(){console.log(chrome.runtime.lastError);console.log(‘disconnected from native app.‘);port = null;}function onNativeMessage(message) {console.log(‘recieved message from native app: ‘ + JSON.stringify(message));}//connect to native host and get the communicatetion portfunction connectToNativeHost(msg){var nativeHostName = "com.my_company.my_application";console.log(nativeHostName); port = chrome.runtime.connectNative(nativeHostName);port.onMessage.addListener(onNativeMessage);port.onDisconnect.addListener(onDisconnected);port.postMessage({message: msg}); }
在這個檔案裡有兩個方法非常重要
chrome.runtime.onMessage.addListener
和
connectToNativeHost
先來看第一個方法，
是一個響應事件，當接收到類型為"launch"的訊息時, 調用 connectToNativeHost方法並傳入資料。
com.my_company.my_application
這個是我們之後需要註冊在Regestry和Native Messaging裡面的名字 之後會講到。
runtime.connectNative這個方法串連我們的Native Messaging然後利用 postMessage 去發送我們要的資訊給我們的本地應用
當然這裡我們可以替換為 sendNativeMessage 直接給本地應用傳值詳見
https://developer.chrome.com/extensions/runtime#method-connectNative
我們在來看看ContentScript: content.js這個檔案
<span style="font-family:SimSun;"><span style="font-size:18px;">var launch_message;document.addEventListener(‘myCustomEvent‘, function(evt) {chrome.runtime.sendMessage({type: "launch", message: evt.detail}, function(response) { console.log(response)});}, false);</span><strong></strong></span>很簡單, 響應了一個頁面中的事件"myCustomEvent", 同時發布一個訊息給我們的後台檔案background.js，這個訊息包含了訊息標示 "launch" 和 我們要傳的值 evt.detail
關於Content Script 的資訊 詳見 https://developer.chrome.com/extensions/content_scripts
到這裡我們的google外掛程式部分就做好了
別忘了在Chrome 外掛程式裡開啟開發人員模式 並載入這個外掛程式
-------------------------------------分割線-------------------------------------
我們在來看看 Native Messaging 部分 我們再建一個 json 檔案 我這裡也叫做manifest.json(名字可以不是這個) 存在了我本地C:/Native目錄下
<span style="font-family:SimSun;font-size:18px;">{"name": "com.my_company.my_application","description": "Chrome sent message to native app.","path": "C:\\MyApp.exe","type": "stdio","allowed_origins": ["chrome-extension://ohmdeifpmliljjdkaehaojmiafihbbdd/"]}</span>
完成這步以後我們需要在WIndows 註冊表 中加入google 項目具體如下:
運行-> Regedit -> HKEY_Current_User->Software->Google->Chrome->建立一個叫NativeMessagingHosts的項->建立一個叫com.my_company.my_application的項, 同時在這個項裡預設值設定為我們Native Messaging 的 位置 C:\\Native\\manifest.json
這樣我們就完成了NativeMessaging的設定
-------------------------------------我是分割線-------------------------------------
我們再來看看這個外掛程式如何和我們的網站互動
先建一個簡單的網頁內容如下
<span style="font-family:SimSun;font-size:18px;"><!DOCTYPE HTML><html><head><script>function startApp() {var evt = document.createEvent("CustomEvent");evt.initCustomEvent(‘myCustomEvent‘, true, false, "im information");// fire the eventdocument.dispatchEvent(evt);}</script></head><body><button type="button" onClick="startApp()" id="startApp">startApp</button></body></html></span>
-------------------------------------我是分割線-------------------------------------
我們最後再來看看C#程式, 隨便做一個非常簡單的程式, 放到了
C://MyApp.exe這裡
在Main裡面 我們可以加入下面這個方法, 利用Console.OpenStandardInput這個 我們可以接收到由頁面傳到我們應用的值並進行我們想要的一些操作, 在這裡我們用一個log4net 記錄我們程式運行情況
[assembly: log4net.Config.XmlConfigurator(Watch = true)]namespace MyApp{ static class Program { public static log4net.ILog log = log4net.LogManager.GetLogger(System.Reflection.MethodBase.GetCurrentMethod().DeclaringType); [STAThread] static void Main(string[] args) { if (args.Length != 0) { string chromeMessage = OpenStandardStreamIn(); log.Info("--------------------My application starts with Chrome Extension message: " + chromeMessage + "---------------------------------"); } } private static string OpenStandardStreamIn() { //// We need to read first 4 bytes for length information Stream stdin = Console.OpenStandardInput(); int length = 0; byte[] bytes = new byte[4]; stdin.Read(bytes, 0, 4); length = System.BitConverter.ToInt32(bytes, 0); string input = ""; for (int i = 0; i < length; i++) { input += (char)stdin.ReadByte(); } return input; } }}
點擊我們在頁面上加入的按鈕, 然後檢查log檔案:
2014-07-30 09:23:14,562 [1] INFO MyApp.Program ----------------------------------------My application starts with Chrome Extension message: {"message":"im information"}---------------------------------
如果想要在安裝我們本地軟體時安裝這個外掛程式, 我們需要把我們的外掛程式先發布到Chrome web store上詳見https://developer.chrome.com/extensions/external_extensions
在這裡就不再贅述了
Chrome 外掛程式: 起動本地應用 (Native messaging)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
