1. 程式人生 > >實現chrome擴充套件啟動本地程序

實現chrome擴充套件啟動本地程序


示例 主要包含如下部分 com.google.chrome.demo-win.json native_cmd.bat manifest.json popup.html popup.js 功能簡介:    實現一個擴充套件,使用者點選一個按鈕後會啟動本地的notepad程式(也可以為自己寫的程式,這裡示例就啟動notepad,類似迅雷擴充套件的功能) 實現概述:    通過啟動本地的一個批處理來進而呼叫啟動notepad.exe 拓展:    可以將批處理換成自己寫的程式,然後再在該程式中實現訪問本地磁碟資料或者其它事

程式原始碼在網盤(Chrome Plugin目錄下的Demo.rar):

效果圖:


部分程式碼:

manifest.json
{
     //  Extension ID: ndnigonbfjhpjlcabmadmkpdcfomenlp
     "manifest_version": 2,

     "name": "Invoke Native Application",
     "description": "example",
     "version": "1.0",

     "browser_action": {
          "default_icon" : "icon.png",  
          "default_popup": "popup.html"   //定義了點選擴充套件後顯示的頁面
     },
     "permissions": [
         "nativeMessaging"     //定義許可權,需要和本地應用程式通訊
  ]
}

popup.js
function updateResult(obj, state){
     document.getElementById(obj).innerHTML = state;
}
function invoke(){
     //hostName為登錄檔上項的名稱
     var hostName = "com.google.chrome.demo";
    //啟動本地應用程式
     var port = chrome.runtime.connectNative(hostName);
     updateResult("result1", "invoke..");
}

//為button1新增監聽事件
document.addEventListener('DOMContentLoaded', function() {
  document.querySelector('#button1').addEventListener(
      'click', invoke); 
});

com.google.chrome.demo-win.json

{
  "name": "com.google.chrome.demo",
  "description": "Chrome Native Messaging API Example Host",
 //path 必須是絕對路徑,指向要啟動的程式
  "path": "D:\\Work\\Chrome plugin\\Native Messaging Example\\Demo\\native_cmd.bat",
  "type": "stdio",
  "allowed_origins": [
    "chrome-extension://niekdnkneilndiimkikogmplndpcfknp/"
  ]
}
com.google.chrome.demo-win.json
{
  "name": "com.google.chrome.demo",
  "description": "Chrome Native Messaging API Example Host",
 //path 必須是絕對路徑,指向要啟動的程式
  "path": "D:\\Work\\Chrome plugin\\Native Messaging Example\\Demo\\native_cmd.bat",
  "type": "stdio",
  "allowed_origins": [
    "chrome-extension://niekdnkneilndiimkikogmplndpcfknp/"
  ]
}


native_cmd.bat   notepad.exe 我的登錄檔匯出的值(位置要注意下HEKY..): Windows Registry Editor Version 5.00

[HKEY_CURRENT_USER\Software\Google\Chrome\NativeMessagingHosts\com.google.chrome.demo]
@="D:\\Work\\Chrome plugin\\Native Messaging Example\\Demo\\com.google.chrome.demo-win.json"

======================2016.2.15 補充=============================================

  之前有博友私信我關於不能啟動的問題,這裡是我疏忽了一個挺重要的步驟,就是許可權問題。

在allowed_origins下的chrome-extension表示允許的外掛。這串字母很重要,要和你安裝的ID一致。如下,這個外掛為hnaekmhaniojodkaageacnjfldljhiek,那麼相對於安裝的ID也是必須一致。

 "allowed_origins": [
    "chrome-extension://hnaekmhaniojodkaageacnjfldljhiek/"
  ]


這裡涉及了外掛打包的問題,順便也提一下。

如下,選擇打包擴充套件程式,其中根目錄為外掛所在位置,這樣打包後會生成兩個檔案,一個pem金鑰檔案,另一個為crx安裝程式。安裝後可以看到外掛的ID,然後複製下來到填上,再將crx安裝程式刪除,重新來打包一次,但是這一次下面的私有金鑰檔案要選擇剛剛生成的。這樣ID就對應了。

補充實現的由來:

這裡對於當時我接到要寫一個chrome外掛任務的時候,那時候首次接觸外掛的時候,解決思路是先收集資料,然後確定採用Native Messaging方式來實現時,就檢視相關文件以及官方Demo,然後再研究迅雷的外掛,看看迅雷是如何呼叫起來的(不是研究原始碼,是看怎麼關聯起來的,如登錄檔),這個過程並不需要花多少時間,一週左右的時間。