Using a custom browser extension

0
0

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>

Questions
Share
  • You must to post comments
Filter
Sort by: Recently Active
0
0

So, with the help of ChatGPT-01 I was able to get everything working! It was quite the journey and I barely understand what’s going on and why it works.

Perhaps this might be a nice Example on your documentation page? (Browser Extension example). I could provide you with a basic sample for each step needed and all you have to do is validate/improve it.

 

Anyway, I’ve attached the new source code of the WiseJ project. It has Page1 which checks if the extension is installed and the button launches the nativeApp via de extension. I bought a new server lisence so I could test with the latest WiseJ build. This seems to need version 3.5.11 and up.

If you have any tips that’d be great to hear!

Attachment
WiseNFCTest.zip
  • Frank (ITG)
    Hi Vincent, glad you figured it out. We’ll review your solution and get back to you. Regards, Frank
  • Levie (ITG)
    We could in the future add Application.PostMessage(payload) and Application.Message += Event_Handler to simplify communication between iFrames and other browser windows.
  • vincent_
    That sounds great! I now placed the application.eval() in program.vb and moved the subs there too. That way I can subscribe to events from any page or control. I just need to remember to unsubscribe these events. This way I can use a smartcard to login and have users register their cards all by using just two subs. When I’m done testing I’ll update the example here.
  • You must to post comments
0
0

A bit of additional context:

The browser extension injects contentScipt.js when the browser navigates to a specific url. In this case localhost.

The button on the index.html file tells the browser extension to start the nativeApp (consoleApp.exe) and relays the messages from that app.

The NativeApp (consoleApp.exe) only replies once. “No card reader found” or the scanned Card UID or any error. After either the ConsoleApp.exe closes.

  • You must to post comments
0
0

Hi Frank,

Attached the full source code for:

  • The Chrome extension
  • The ConsoleApp which is started by the extension and communicates with the extension
  • The WiseJ test project

The WiseJ project is just a page with a button and a label. I would like to be able to click the button and update the label with the current status. Just like it does on the testpage.html. If I can get that to work, I can work out the rest 🙂

If you want a simple guide on how to test the extension yourself I could write you one.

Thanks for looking in to it!

Vincent

Attachment
Test Chrome Extension.zip
  • You must to post comments
0
0

Hi,

please wrap up as simple Wisej sample that shows how you would want to use it.
Remove obj and bin and it can be uploaded as a zip file.

We could then take a look but not with just code snippets or screenshots.

Best Regards
Frank

  • You must to post comments
Showing 4 results
Your Answer

Please first to submit.