The browser's serial and USB capabilities are not defined

I am currently working on accessing serial and USB ports through Chrome plugins/extensions. I have been following the guidelines provided by Chrome USB && Chrome Serial. However, upon starting my plugin, I encountered an error message:

"Uncaught TypeError: Cannot read property 'getDevices' of undefined"

Even after attempting to use the sample codes from Google Chrome Samples, I faced the same issue where chrome.usb / chrome.serial appeared to be undefined.

Any advice or suggestions to steer me in the right direction would be greatly appreciated. Thank you!

Below are snippets of my sample code:

popup.html

<!DOCTYPE html>
<html>
  <body style="width: 300px">
    Open <a href="http://stackoverflow.com" target="_blank">this page</a> and then 
    <button id="clickme">click me</button>
    <script type="text/javascript" src="popup.js"></script>
  </body>
</html>

popup.js

function readPorts() {
    console.log("Reading ports . . . . . ")
     chrome.usb.getDevices(function(devices) {
        console.warn('chrome.usb.getDevices error: ' +
                 chrome.runtime.lastError.message);
        for (var i = 0; i < devices.length; i++) {
           console.log('Device : ' + devices[i].path + '"===' + devices[i].path + '=====');
        }
    });
}

document.getElementById('clickme').addEventListener('click', readPorts);

manifest

{
  "manifest_version": 2,

  "name": "Getting started example",
  "description": "This extension will read the com ports from your machine",
  "version": "1.0",

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html",
    "default_title": "Read com ports!"
  },
  "content_scripts": [
    {
      "matches": ["http://*/*","https://*/*"],
      "js": ["myscript.js"]
    }
  ],
  "permissions": [
    "serial",
    "usb"
  ]
}

Answer №1

Exclusive access to hardware is limited only to Chrome Apps, not Chrome Extensions. To learn how to create a Chrome App and gain access to hardware, refer to the following guide: https://developer.chrome.com/apps/first_app

Answer №2

Both APIs mentioned are specific to Chrome Apps only. The manifest provided indicates an extension instead.

Chrome Extensions come with a distinct set of APIs that differ from those for Chrome Apps. While there may be some overlap, they are not interchangeable.

If you require a content script to interact directly with the browser, an extension is necessary. For utilizing the USB/Serial API, an App would be required.

You will need to reconsider how to communicate with the browser (Apps have methods to expose themselves to pages) or create both and enable them to communicate with each other.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Passing the return value of a function from a utility file to the state within a React component

I am currently reorganizing my functions to make them more modular in a neat way. My goal is to extract the return value from these functions and assign each of them to a state within my component. Although the functions successfully invoke and log the val ...

Strengthening Cross-Site Scripting vulnerabilities: Understanding DOM related challenges

How can I resolve the issues with the last two lines? Sink: jQuery() Enclosing Method: handleFilter() Taint Flags: WEB, XSS function handleFilter(panelId, textFilterId) { var text = $('#' + textFilterId).val(); if(text === &ap ...

What is the best way to fill in references that are nested within an array object using mongoose?

How do I go about populating the product fields within the cart array provided below? { "_id": "5bbd1c6e2c48f512fcd733b4", "cart": [ { "count": 1, "_id": "5bbd30ed9417363f345b15fc", "product": "5ba93a6d ...

What is the proper way to create a 'swiper' object in JavaScript?

I'm working on incorporating a horizontal timeline into my HTML page. I came across a template online that allows for a scrollable timeline. However, upon attempting to load the page, I encountered the error message "ReferenceError: Swiper not defined ...

Exploring the functionality of dynamic component imports in jest testing

Under a specific condition, I dynamically imported a component and stored it in an object property. Then, I displayed it in the template using vue <component :is="">. Everything is functioning correctly at the component level. However, I am ...

Activate the next tab by clicking a button in ReactJS

I currently have a web page with 4 tabs, each containing different sets of data. Within the first tab, I have a button that should activate the next tab's content when clicked by the user. render(){ return ( <MuiThemeProvider> ...

What is the process for updating a particular index in a list?

Currently, I am delving into React by working on a task master app. The concept is simple - each user input becomes a new task in an array of tasks. The app features Add, Delete, and Update buttons for managing these tasks. Everything is functioning smoot ...

Updating multiple values in MongoDB with varying data points

I need to update multiple documents in mongodb. Each document must be updated with a different value, which is provided in a JSON array. {_id :1 ,name :'A','place':'London'}, {_id :2 ,name :'B','place':&ap ...

HTML page embedded with JSON data obtained through AJAX technology

Greetings! As a newcomer to the world of AJAX, I ask for your patience with any errors I may make. Let's dive in... I am currently working on coding an autocomplete text box and retrieving data from MySQL. Below is the snippet of code: functio ...

Exclusive pair of vertices within a network

I am working with a diagram that includes nodes A, B, C and several edges connecting these nodes. How can I extract the distinct pairs (A, B), (A, C), (B, C)? One potential method is: visited = []; for item1 in nodes: for item2 in nodes: if (item ...

The variable $http request is not defined in this context

When I perform a GET request on my backend to fetch JSON data, I am encountering an issue with storing a portion of the data in a variable for later use. Despite following similar steps in another controller where it worked fine, the variable always ends u ...

JavaScript - What is the best way to add the same object value into an array?

After spending a few hours trying to figure out how to manage JSON data structured like this: [ { "value": "Osteonecrosis", "Diagnosis_Code": "DIAG002", "NamaCategory": "Primary Category", "FK_Diagnosis_Content_ID": 2 }, { "value ...

Verify whether the included file is being utilized by ajax or php

I have developed a unique system in which PHP or AJAX is used to build the HTML dynamically. Since the structure of the generated HTML remains consistent, I decided to create an include file that can be accessed by both PHP and JavaScript functions. My que ...

Preventing zooming on iOS webpages

I need assistance in preventing the automatic zoom when a user clicks on an input field on iOS. I have already attempted various solutions, such as setting the font size to 16px and modifying the viewport with user-scalable=no. Unfortunately, none of thes ...

The code "Grunt server" was not recognized as a valid command in the

I recently set up Grunt in my project directory with the following command: npm install grunt However, when I tried to run Grunt server in my project directory, it returned a "command not found" error. Raj$ grunt server -bash: grunt: command not found ...

What is the best way to eliminate an event listener from a DOM element?

Looking for help with toggling add/remove event listeners on click. Can anyone provide suggestions to improve my code? I've searched through various solutions on Stackoverflow without success. This educational tool involves rotating the center cube ...

Navigating through JavaScript objects challenge

Having trouble with my JavaScript iteration, why am I not getting the correct result? (I'm new to JS) var data = "data":{ "unknown_name":{ "0":{ "price":"23432", "name":"one" }, ...

Making a synchronous call to a web API using JQuery

Understanding JQuery promises and deferred objects has been a bit of a challenge for me, so please bear with me. I should also mention that my application is built using React, Typescript, and ES6. Let's imagine we have an array of objects: [{ Objec ...

Unable to update state in my React app when clicking on a button

There is a requirement for a button click to filter the job-card array by one specific category. For example, clicking on the button "Marketing" should only show jobs from the array that have the property "jobstags: Marketing". I followed a similar procedu ...

When implementing ReplaySubject in Angular for a PUT request, the issue of data loss arises

I seem to be encountering a problem with the ReplaySubject. I can't quite pinpoint what I've done wrong, but the issue is that whenever I make a change and save it in the backend, the ReplaySubject fetches new data but fails to display it on the ...