1、准备工作-目录结构
1)、manifest是沟通后台的程序文件，必须要有
2)、background.js、content.js、图标可自定义命名。
3)、文件目录
2、manifest文件内容
{
"name" :"扩展程序测试",
"version" :"1.0.1",
"description" :"init APP ",
"background" : {"scripts": ["background.js"] },
"permissions" : ["file://*/*","http://*/","https://*/","downloads","nativeMessaging","storage","webRequest","webRequestBlocking","tabs"],
"content_scripts": [
{
"all_frames":true,
"matches": ["*://*/*" ],
"js": ["content.js" ],
"run_at":"document_idle"
}
],
"icons": {
"512":"icons/ntko.png"
},
"minimum_chrome_version" :"6.0.0.0",
"manifest_version":2
}
4、分别对应两个文件的路径
5、background.js文件内容
var port = null;
chrome.runtime.onMessage.addListener(function(request,sender,sendResponse) {
if (request.type=== "launch"){
connectToNativeHost(request.message);
}
return true;
});
//onNativeDisconnect
function onDisconnected() {
console.log(chrome.runtime.lastError);
console.log('disconnected from native app.');
port = null;
}
function onNativeMessage(message) {
console.log('recieved message from native app: ' + JSON.stringify(message));
}
//connect to native host and get the communicatetion port
function connectToNativeHost(msg)
{
var nativeHostName= "com.wisdombud.qingdao";
// console.log(nativeHostName);
port = chrome.runtime.connectNative(nativeHostName);
const docmadsa= document.createElement('div',port)
document.body.append(docmadsa)
port.onMessage.addListener(onNativeMessage);
port.onDisconnect.addListener(onDisconnected);
port.postMessage({message: msg});
}
6、content.js
var launch_message;
document.addEventListener('myCustomEvent',function(evt) {
chrome.runtime.sendMessage({type: "launch", message: evt.detail},function(response) {
console.log(response)
});
},false);
7、然后通过扩展程序路径放到扩展程序上
8、然后新建三个文档ccc.text、install.reg、nativecall.json
1)、ccc.text随便输入点文字
2)、install.reg：需要匹配
nativecall.json 文件路径,然后保存双击此文件生成注册表
Windows Registry Editor Version 5.00
[HKEY_CURRENT_USER\SOFTWARE\Google\Chrome\NativeMessagingHosts\com.wisdombud.qingdao]
@="C:\\native\\nativecall.json"
3) 、nativecall.json ：path: 匹配ccc.text
{
"name": "com.wisdombud.qingdao",
"description": "Chrome sent message to native app.",
"path": "C://native//ccc.text",
"type": "stdio",
"allowed_origins": [
"chrome-extension://aepcpdpmdgfhgjllbpngajemhiliogdh/"
]
}
9、找个文件随便写个html
10、打开浏览器、点击按钮就可以通过扩展程序，实现操作页面打开本机应用。
