分类:
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):
效果图:
部分代码:
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"
[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,然后再研究迅雷的插件,看看迅雷是如何调用起来的(不是研究源码,是看怎么关联起来的,如注册表),这个过程并不需要花多少时间,一周左右的时间。