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）