实现chrome扩展启动本地进程 - 补充

Posted 2020-08-19 吃饭了吗

实现chrome扩展启动本地进程 - 补充

标签： chrome扩展启动本地程序访问本地磁盘

2014-10-17 11:42 6753人阅读 评论(17) 收藏 举报

 分类：

Chrome Plugin

版权声明：本文为博主原创文章，未经博主允许不得转载。

示例 主要包含如下部分

com.google.chrome.demo-win.json

native_cmd.bat

manifest.json

popup.html

popup.js

 

功能简介：

   实现一个扩展，用户点击一个按钮后会启动本地的notepad程序（也可以为自己写的程序，这里示例就启动notepad，类似迅雷扩展的功能）

 

实现概述：

   通过启动本地的一个批处理来进而调用启动notepad.exe

拓展：

   可以将批处理换成自己写的程序，然后再在该程序中实现访问本地磁盘数据或者其它事

程序源码在网盘（Chrome Plugin目录下的Demo.rar）：

  http://pan.baidu.com/s/1hcVuQ

 

效果图：

 

 

部分代码：

 

manifest.json

 

[javascript] view plain copy

 

 

1. {  
2.      //  Extension ID: ndnigonbfjhpjlcabmadmkpdcfomenlp  
3.      "manifest_version": 2,  
4.   
5.      "name": "Invoke Native Application",  
6.      "description": "example",  
7.      "version": "1.0",  
8.   
9.      "browser_action": {  
10.           "default_icon" : "icon.png",    
11.           "default_popup": "popup.html"   //定义了点击扩展后显示的页面  
12.      },  
13.      "permissions": [  
14.          "nativeMessaging"     //定义权限，需要和本地应用程序通信  
15.   ]  
16. }  

 

 

popup.js

[javascript] view plain copy

 

 

1. function updateResult(obj, state){  
2.      document.getElementById(obj).innerHTML = state;  
3. }  
4. function invoke(){  
5.      //hostName为注册表上项的名称  
6.      var hostName = "com.google.chrome.demo";  
7.     //启动本地应用程序  
8.      var port = chrome.runtime.connectNative(hostName);  
9.      updateResult("result1", "invoke..");  
10. }  
11.   
12. //为button1添加监听事件  
13. document.addEventListener(‘DOMContentLoaded‘, function() {  
14.   document.querySelector(‘#button1‘).addEventListener(  
15.       ‘click‘, invoke);   
16. });  
17.   
18. com.google.chrome.demo-win.json  
19.   
20. {  
21.   "name": "com.google.chrome.demo",  
22.   "description": "Chrome Native Messaging API Example Host",  
23.  //path 必须是绝对路径，指向要启动的程序  
24.   "path": "D:\\Work\\Chrome plugin\\Native Messaging Example\\Demo\\native_cmd.bat",  
25.   "type": "stdio",  
26.   "allowed_origins": [  
27.     "chrome-extension://niekdnkneilndiimkikogmplndpcfknp/"  
28.   ]  
29. }  

 

com.google.chrome.demo-win.json

[javascript] view plain copy

 

 

1. {  
2.   "name": "com.google.chrome.demo",  
3.   "description": "Chrome Native Messaging API Example Host",  
4.  //path 必须是绝对路径，指向要启动的程序  
5.   "path": "D:\\Work\\Chrome plugin\\Native Messaging Example\\Demo\\native_cmd.bat",  
6.   "type": "stdio",  
7.   "allowed_origins": [  
8.     "chrome-extension://niekdnkneilndiimkikogmplndpcfknp/"  
9.   ]  
10. }  

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也是必须一致。

 

[javascript] view plain copy

 

 

1. "allowed_origins": [  
2.    "chrome-extension://hnaekmhaniojodkaageacnjfldljhiek/"  
3.  ]  

 

这里涉及了插件打包的问题，顺便也提一下。

如下，选择打包扩展程序，其中根目录为插件所在位置，这样打包后会生成两个文件，一个pem密钥文件，另一个为crx安装程序。安装后可以看到插件的ID，然后复制下来到填上，再将crx安装程序删除，重新来打包一次，但是这一次下面的私有密钥文件要选择刚刚生成的。这样ID就对应了。

 

补充实现的由来：

这里对于当时我接到要写一个chrome插件任务的时候，那时候首次接触插件的时候，解决思路是先收集资料，然后确定采用Native Messaging方式来实现时，就查看相关文档以及官方Demo，然后再研究迅雷的插件，看看迅雷是如何调用起来的（不是研究源码，是看怎么关联起来的，如注册表），这个过程并不需要花多少时间，一周左右的时间。