Hi!
I’ve created a browser extension which uses NativeMessaging to communicate with my NFC reader. This extension works when I use the attached test html page. But now I want to use this in my WiseJ project. I’ve tried reading the manual but I’m at a loss. This seems quite easy but I cannot get it to work….
The script in the Attached HTML file has this:
<script>
let extensionInstalled = false;// Functie om de extensie te controleren
function checkExtensionInstalled() {
return new Promise((resolve, reject) => {
// Stuur een bericht naar het content script
window.postMessage({ type: ‘CHECK_EXTENSION’ }, ‘*’);// Wacht op een antwoord
function handleMessage(event) {
if (event.source !== window) return;if (event.data && event.data.type === ‘EXTENSION_INSTALLED’) {
extensionInstalled = true;
window.removeEventListener(‘message’, handleMessage);
resolve(true);
}
}window.addEventListener(‘message’, handleMessage);
// Stel een timeout in
setTimeout(() => {
if (!extensionInstalled) {
window.removeEventListener(‘message’, handleMessage);
resolve(false);
}
}, 1000); // Timeout na 1 seconde
});
}// Functie om een bericht te sturen naar de content script
function startNativeApp() {
if (!extensionInstalled) {
alert(‘Extensie is niet geïnstalleerd.’);
return;
}// Schakel de knop uit tijdens de verwerking
document.getElementById(‘start-button’).disabled = true;
document.getElementById(‘response’).textContent = ‘Bezig met verwerken…’;// Stuur een bericht naar de content script
window.postMessage({ type: ‘START_NATIVE_APP’ }, ‘*’);
}// Luister naar berichten van de content script
window.addEventListener(‘message’, function(event) {
// Controleer de oorsprong van het bericht
if (event.source !== window) {
return;
}if (event.data.type === ‘NATIVE_APP_STATUS’) {
console.log(‘Extensie reactie:’, event.data.status);
}if (event.data.type === ‘NATIVE_APP_RESPONSE’) {
// Toon het antwoord op de pagina
document.getElementById(‘response’).textContent = ‘Antwoord van native app: ‘ + event.data.data;// Schakel de knop weer in
document.getElementById(‘start-button’).disabled = false;
}
}, false);// Controleer bij het laden van de pagina of de extensie is geïnstalleerd
window.addEventListener(‘DOMContentLoaded’, async () => {
const installed = await checkExtensionInstalled();
if (installed) {
console.log(‘Extensie is geïnstalleerd.’);
document.getElementById(‘extension-status’).textContent = ”;
document.getElementById(‘start-button’).disabled = false;
} else {
console.log(‘Extensie is niet geïnstalleerd.’);
document.getElementById(‘extension-status’).textContent = ‘Extensie is niet geïnstalleerd.’;
document.getElementById(‘start-button’).disabled = true;
}
});
</script>
This shows that the page checks if the extension is installed and if it is, it enables a test button. How can I get this to work within a WiseJ page or even better, in a UserControl?
Any help would be soo greatly appreciated!
Thanks in advance!
PS
As I cannot upload the html file as it is not allowed, here is the source:
<!DOCTYPE html>
<html lang=”nl”>
<head>
<meta charset=”UTF-8″>
<title>TestNFC Extension Testpagina</title>
<style>
#response {
margin-top: 20px;
font-weight: bold;
}#extension-status {
color: red;
font-weight: bold;
}#start-button:disabled {
background-color: #ccc;
cursor: not-allowed;
}
</style>
<script>
let extensionInstalled = false;// Functie om de extensie te controleren
function checkExtensionInstalled() {
return new Promise((resolve, reject) => {
// Stuur een bericht naar het content script
window.postMessage({ type: ‘CHECK_EXTENSION’ }, ‘*’);// Wacht op een antwoord
function handleMessage(event) {
if (event.source !== window) return;if (event.data && event.data.type === ‘EXTENSION_INSTALLED’) {
extensionInstalled = true;
window.removeEventListener(‘message’, handleMessage);
resolve(true);
}
}window.addEventListener(‘message’, handleMessage);
// Stel een timeout in
setTimeout(() => {
if (!extensionInstalled) {
window.removeEventListener(‘message’, handleMessage);
resolve(false);
}
}, 1000); // Timeout na 1 seconde
});
}// Functie om een bericht te sturen naar de content script
function startNativeApp() {
if (!extensionInstalled) {
alert(‘Extensie is niet geïnstalleerd.’);
return;
}// Schakel de knop uit tijdens de verwerking
document.getElementById(‘start-button’).disabled = true;
document.getElementById(‘response’).textContent = ‘Bezig met verwerken…’;// Stuur een bericht naar de content script
window.postMessage({ type: ‘START_NATIVE_APP’ }, ‘*’);
}// Luister naar berichten van de content script
window.addEventListener(‘message’, function(event) {
// Controleer de oorsprong van het bericht
if (event.source !== window) {
return;
}if (event.data.type === ‘NATIVE_APP_STATUS’) {
console.log(‘Extensie reactie:’, event.data.status);
}if (event.data.type === ‘NATIVE_APP_RESPONSE’) {
// Toon het antwoord op de pagina
document.getElementById(‘response’).textContent = ‘Antwoord van native app: ‘ + event.data.data;// Schakel de knop weer in
document.getElementById(‘start-button’).disabled = false;
}
}, false);// Controleer bij het laden van de pagina of de extensie is geïnstalleerd
window.addEventListener(‘DOMContentLoaded’, async () => {
const installed = await checkExtensionInstalled();
if (installed) {
console.log(‘Extensie is geïnstalleerd.’);
document.getElementById(‘extension-status’).textContent = ”;
document.getElementById(‘start-button’).disabled = false;
} else {
console.log(‘Extensie is niet geïnstalleerd.’);
document.getElementById(‘extension-status’).textContent = ‘Extensie is niet geïnstalleerd.’;
document.getElementById(‘start-button’).disabled = true;
}
});
</script>
</head>
<body>
<h1>TestNFC Extension Testpagina</h1>
<p id=”extension-status”></p>
<button id=”start-button” onclick=”startNativeApp()” disabled>Start Native App</button>
<div id=”response”></div>
</body>
</html>
