- Find out the VID/PID (vendorID & productID) of the thermal printer and make changes accordingly in
main.js
andmanifest.json
. - In
manifest.json
, make changes toexternally_connectable
(currently set to localhost:3000). - Open chrome://extensions in Chrome.
- Enable "Developer mode" and click "Load unpacked extension..."
- Select the 'extension' folder
Create a simple AngularJS app:
angular.module('thermalPrintApp', []).controller('thermalPrintController', function ($scope) {
var stuff = {
stuffToPrint: "Printing this!"
};
$scope.printStuff = function () {
// add chrome extension id here
chrome.runtime.sendMessage(<chrome extension id>, stuff);
};
});
Create a simple HTML file:
<!DOCTYPE html>
<html ng-app="thermalPrintApp">
<head>
<script data-require="angular.js.1.3@*" data-semver="1.5.2" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.js"></script>
<script src="printreceipt.js"></script>
</head>
<body>
<div ng-controller="thermalPrintController">
<div>
<button type="button" ng-click="printStuff()">
Print
</button>
</div>
</div>
</body>
</html>
Use http-server to host:
Starting up http-server, serving ./
Available on:
http://127.0.0.1:8080
http://192.168.1.7:8080
Hit CTRL-c to stop the server
Add both links to externally_connectable
in manifest.json (and reload).
Click "print".
- David Kelly for his concise and informative posts on how to communicate with a device connected via USB.
- Site Point for teaching me how to create a Chrome extension in 10 minutes (literally).