1

In a Chrome extension, we are trying to communicate with a microcontroller via the Web Serial API. The source code to the extension is on GitHub: https://github.com/capstone-coi/COI

The extension, thus far, creates a pop-up containing a button to open Chrome's serial port chooser. When clicking this button, the following error results immediately: Uncaught (in promise) DOMException: Failed to execute 'requestPort' on 'Serial': No port selected by the user.

The pop-up window contains window.js, which has the code:

onload = function() {
    document.getElementById("connect-button").addEventListener('click', async () => {
        console.log("Connect button clicked");
        await navigator.serial.requestPort();  // This is what fails
        console.log("Port requested");
        await navigator.serial.getPorts().then(async (ports) => {
            console.log(ports);
            buildPortPicker(ports);
            openSelectedPort();
        });
        console.log("Ports gotten");
    });    
}

This is the manifest.json file:

{
    "manifest_version": 3,
    "name": "COI",
    "description": "Control the COI Computerized Oblique Illumination Device",
    "version": "0.1",

    "background": {
        "service_worker": "background.js"
    },

    "options_page": "options.html",

    "action": {
      "default_popup": "popup/popup.html",
      "default_icon": "images/icon.png"
    },
    "permissions": [
        "storage",
        "activeTab",
        "scripting",
        "tabs"
    ]
}

When executing navigator.serial.requestPort(); by itself in the console, Chrome immediately returns with: Uncaught (in promise) DOMException: Failed to execute 'requestPort' on 'Serial': No port selected by the user.

When executing the same line in the console when not inspecting the page generated by this extension (i.e. in a new tab), it works as expected, showing a little pop-up to select a port to grant access to. Something about the context of this Chrome extension seems to be interfering.

Thanks in advance!!

Joseph Freeston
  • 11
  • 2
  • It's a bug in Chrome. The workaround is do it inside a new tab (chrome.tabs.create) or a new window (chrome.windows.create) or in an iframe exposed via web_accessible_resources. – wOxxOm Mar 08 '23 at 22:39
  • Thank you for your response! The code already runs within a window created by `chrome.windows.create`. I believe that `web_accessible_resources` is intended for exposing resources to outside web applications separate from the extension itself? – Joseph Freeston Mar 10 '23 at 14:59

0 Answers0