Google Chrome Extension serial port on website

Question

I use chrome.serial to communicate with device on COM port and i need provide basic api for javascript on my web-site. First try was with content_script + messaging, but i c

Answer 1

You can solve this by a chrome extension to support Content Scripts and packaged app for serial port communication with External Message Communication

Fetch your Extension Id's using management API and establish connection for single message communication.

On Message External is fired when a message is sent from another extension.

References

• Content Scripts
• Serial API
• Packaged APP
• Chrome Extensions
• Management API
• Extension API

Answer 2

index.html

<button>Connect</button>
<script src="main.js"></script>

main.js

var connectionId;

/* Converts a string to UTF-8 encoding in a Uint8Array; returns the array */

var str2ab = function(str) {
   var encodedString = unescape(encodeURIComponent(str));
   var bytes = new Uint8Array(encodedString.length);
   for (var i = 0; i < encodedString.length; ++i) {
      bytes[i] = encodedString.charCodeAt(i);
   }
   return bytes.buffer;
};

var options = {
  'bitrate': 115200,
  'dataBits': 'eight',
  'parityBit': 'no',
  'stopBits': 'one'
}

document.addEventListener('DOMContentLoaded', function () {
  document.querySelector('button').addEventListener('click', btnSend);
  chrome.serial.connect('COM3', options, function(info) {
    connectionId = info.connectionId;
    console.log("Connection established.");
  });
});

var btnSend = function() {
  var msg = "hello printer 123456\n";
  chrome.serial.send(connectionId, str2ab(msg), function() {} );
}

manifest.json

{
  "name": "Printer at COM3 test",
  "version": "1",
  "manifest_version": 2,
  "permissions": ["serial"],
  "minimum_chrome_version": "23",
  "icons": {
    "16": "icon_16.png",
    "128": "icon_128.png"
  },
  "app": {
    "background": {
      "scripts": ["launch.js"]
    }
  }
}

launch.js

chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create('index.html', {
    id: "mainwin",
    innerBounds: {
      width: 320,
      height: 240
    }
  });
});