chrome瀏覽器插件啟動本地應用程序

chrome瀏覽器插件啟動本地應用程序  

2014-04-20 00:04:30|  分類： 瀏覽器插件|舉報|字號 訂閱

    

 

 

  下載LOFTER 我的照片書  |

 

 

chrome的插件開發這里就不多講了，本篇文章只講如何調用谷歌瀏覽器的api啟動本地的程序並與之通信

要啟動本地的應用插件需要包括兩部分的內容：

1）安裝到瀏覽器的插件部分

2）放置在本地的json文件

第一部分就跟普通的谷歌瀏覽器插件是一樣的，包括兩個必須的文件：

1）background.js（名字不一定為background.........取你自己喜歡的也行）

2）manifest.json（這個名字就是固定的了.............取你自己喜歡的不行）

在谷歌瀏覽器中輸入chrome://extensions/->勾選開發者模式->加載正在開發的擴展程序->選擇你的擴展程序所在的文件夾（就是那個js文件和manifest.json所在文件夾）

現在，你的擴展程序已經加載到你的瀏覽器當中了

我們再看看manifest.json的內容：

{
"name" : "FastDownload",
"version" : "1.0.1",
"description" : "Get file download link fo Point",
"background" : { "scripts": ["background.js"] },
"permissions" : [
"nativeMessaging",
"contextMenus",
"downloads",
"tabs",
"http://*/*",
"https://*/*"
],
"minimum_chrome_version" : "6.0.0.0",
"manifest_version": 2
}

 

主要的是permissions那一項，因為，添加了"nativeMessaging"這一項是更本地應用程序通信的權限（新版的chrome建議使用這種方式），這樣就可以跟本地的應用程序通信了

background的scripts就是剛才講的那個script了

我們再看看這個background.js的內容：

//Author: match.yangwanqing
//Date: 2014.3.12
//Description: This is a javaScript file use for handle contextMenus action
//When click the contextMenus, it will sent the infomation to native app

//connect to native app
var port = null;
var nativeHostName = "fastdownload";//這個后面會講，是chrome與本地程序通信的橋梁
var downloadID = null;

function getDownloadID(URL)
{
/*chrome.downloads.download({"url": URL},
function(tmpDownloadID)
{
downloadID = tmpDownloadID;
});*/
//chrome.downloads.cancel({"downloadid": downloadID});
chrome.downloads.search({"url": URL},
function(tmpID)
{
alert(tmpID[0].id +
"#" + tmpID[0].totalBytes +
"#" + tmpID[0].mime);
});
}

//onNativeDisconnect
function onDisconnected()
{
//alert("連接到FastDownload服務失敗: " + chrome.runtime.lastError.message);
port = null;
}

//connect to native host and get the communicatetion port
function connectToNativeHost()
{
port = chrome.runtime.connectNative(nativeHostName);//根據配置文件連接到本地程序
port.onDisconnect.addListener(onDisconnected);
}

//調用connectToNativeHost函數連接到本地程序，完成后使用port.postMessage函數即可

//將信息寫入I/O流與本地程序通信
function getClickHandler() {
return function(info, tab) {
connectToNativeHost();
//getDownloadID(info.linkUrl);
port.postMessage(info.linkUrl);
};
};

//在瀏覽器啟動時即創建右鍵菜單，當點擊使用Point下載的時候就會調用getClickHandler（）函數處理

//信息並與本地程序通信
chrome.contextMenus.create({
"title" : "使用Point下載",
"type" : "normal",
"id": "FastDownloadMenu",
"contexts" : ["link"],
//"targetUrlPatterns":["*://*/*.*"],
"enabled": true,
"onclick" : getClickHandler()
});

上面說的這么神秘的配置文件就是最開始說到的第二部分：

fastdownload.json

我使用的測試環境是opensuse，ubuntu還有linuxdeepin，都是linux操作系統

我們需要新建一個路徑

/etc/opt/chrome/native-messaging-hosts/

然后將fastdownload.json拷貝到該路徑下，我們的插件在權限中加入"nativeMessaging"權限后就會到這個路徑查找相應的配置文件，拷貝完成后記得保證該文件可以讓其他人有讀的權限，不然插件就會報找不到制定host的錯誤，因為它沒有權限讀取配置文件

注意該文件的名字中不能使用大寫字母，只能使用小寫字母加上"."這些符號進行命名

我們看一下這個配置文件（配置文件的叫法並不准確，暫且這么叫吧，大家理解就好，具體看官方說明）的內容：

{
"name": "fastdownload",
"description": "Chrome sent download url to native app.",
"path": "/home/yang/QtWork…wnloadPopup/build/home/yang/QtWork…wnloadPopup/build/FastDownloadPopup",
"type": "stdio",
"allowed_origins": [
"chrome-extension://iebejdppbfamhgbnpoacblnlhpllanfbs/"

]
}

其中，name的內容就是剛才backgroound.js中的那個nativeHostName變量的值

"description"，隨便你寫，關於這個文件的描述

path，這個是重點，就是你的可執行文件所在的路徑，一定要絕對路經（windows的好像不用，沒試過），一定要確保權限可讀，不然你還是沒法啟動該程序並與之通信

type就是數據的通信方式，目前只能是通過I/O流的方式，所以值只能是“stdio”

allowed_origins,這個就是允許誰訪問啦，我們這里只允許ID為iebejdppbfamhgbnpoacblnlhpllanfbs的插件訪問

注意，插件的ID會在你改變了存放路徑等一些信息后有所改變，所以一定要確保配置文件所寫的ID跟你的擴展插件的ID是相同的，至此，整個插件的內容就算完成了，在谷歌瀏覽器中右鍵看看效果吧！

下面給出c++中接受數據的代碼：

unsigned int length = 0;

    //read the first four bytes (=> Length)

    //getwchar: receive char from stdin

    //putwchar: write char to stdout

    for (int i = 0; i < 4; i++)

    {

        length += getwchar();

    }

 

    //read the json-message

    fileURL = "";

    for (int i = 0; i < length; i++)

    {

        fileURL += getwchar();

    }

 

    //瀏覽器端傳來的數據會有一個雙引號引在兩端

    fileURL = fileURL.mid(1,fileURL.length()-2);

這段代碼可以放在main函數中也可以放在其他函數中，發揮你的想象吧！當然讀取的方式不止這一種，具體需求因人而異

（原創作品，歡迎轉載，轉載請注明出處，請尊重作者的勞動成果 I Match）