Getting started with chrome.printing API

Printers and printer information

Task 3

30 minutes

To get printer information, there are two methods provided by the chrome.printing API:

  • getPrinters returns a list of available printers with their ID, name, and description.
  • getPrinterInfo takes the printer ID and returns the capabilities of that printer.

We will use both of these methods when we build printers.html.

Copy the following code into printers.html to show all the available printers:

html
<!doctype html>
<html>
  <head>
    <title>Printers</title>
    <script src="printers.js"></script>
    <link href="printers.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
  <h2>Printers:</h2>
    <div id="printers">
      <table id="printersTable">
        <thead>
          <tr>
            <th>Print</th>
            <th>Id</th>
            <th>Name</th>
            <th>Description</th>
            <th>URI</th>
            <th>Source</th>
            <th>Default</th>
            <th>Recently used</th>
            <th>Capabilities</th>
            <th>Supports trim</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody id="tbody" />
      </table>
    </div>
  </body>
</html>

Create a file named printers.css. This CSS file will provide styling. Copy the following code:

css
table, th, td, tr {
  border: 1px solid black;
}

table {
  width: 100%;
  border-collapse: collapse;
}

div {
  overflow: auto;
}

Now, add functions to retrieve available printers in printers.js.

The following code will:

  • Call chrome.printing.getPrinters() to get all available printers.
  • Call chrome.printing.getPrinterInfo() with the printer.id from the getPrinters() response to get more detailed information, including capabilities.

You can see an example of the capabilities returned here:

json
"vendor_capability": [
  {
    "display_name": "finishings/11",
    "id": "finishings/11",
    "type": "TYPED_VALUE",
    "typed_value_cap": {
      "value_type": "BOOLEAN"
    }
  },
  ...
]

Update your printers.js file to the below:

let listOfPrinters = [];

function createButton(label, onClicked) {
  const button = document.createElement('button');
  button.innerHTML = label;
  button.onclick = onClicked;
  return button;
}

function createPrintersTable() {
  let tbody = document.getElementById('tbody');
  while (tbody.firstChild) {
    tbody.removeChild(tbody.firstChild);
  }

  listOfPrinters.forEach((printer) => {
    const supportsTrim =
      printer.info.capabilities.printer.vendor_capability.some(
        (capability) => capability.display_name == 'finishings/11'
      );
    const columnValues = [
      printer.data.id,
      printer.data.name,
      printer.data.description,
      printer.data.uri,
      printer.data.source,
      printer.data.isDefault,
      printer.data.recentlyUsedRank,
      JSON.stringify(printer.info.capabilities),
      supportsTrim,
      printer.info.status
    ];

    let tr = document.createElement('tr');
    const printTd = document.createElement('td');
    printTd.appendChild(
      createButton('Print', () => {
        onPrintButtonClicked(
          printer.data.id,
          printer.info.capabilities.printer.dpi.option[0],
          supportsTrim
        );
      })
    );

    tr.appendChild(printTd);

    for (const columnValue of columnValues) {
      const td = document.createElement('td');
      td.appendChild(document.createTextNode(columnValue));
      td.setAttribute('align', 'center');
      tr.appendChild(td);
    }

    tbody.appendChild(tr);
  });
}
    
document.addEventListener('DOMContentLoaded', () => {
  chrome.printing.getPrinters().then((printers) => {
    printers.forEach((printer) => {
      chrome.printing.getPrinterInfo(printer.id).then((printerInfo) => {
        listOfPrinters.push({ data: printer, info: printerInfo });
        createPrintersTable();
      });
    });
  });
});

Now, you have a page that will display a table of printers, including their capabilities.

Your turn

    •