1. Guides
  2. Install Custom Chrome Extension

Overview

You can create a custom Chrome extension and install it on the virtual browser.

To load your extension in Hyperbeam, create an unpacked zip or crx file. Then, make a request and upload the file using a multipart form. For a full example, check out our Chrome extension example.

function buildForm(extPath, vmConfig) {
  const formData = new FormData();
  formData.append("ex", fs.createReadStream(extPath));
  formData.append("body", JSON.stringify(vmConfig));
  return formData;
}

const zipPath = path.resolve(\_\_dirname, "./path/to/my/ext.zip");
const formData = buildForm(zipPath, {
extension: {
field: "ex"
}
});

const headers = formData.getHeaders();
headers["Authorization"] = `Bearer ${process.env.HB_API_KEY}`;
const resp = axios.post('https://engine.hyperbeam.com/v0/vm', formData, {headers});

References

For more information on creating zip Chrome extensions, refer to the Publish your extension guide on the Chrome Developers website.

To learn more about the crx format, see Installing extensions on Linux. We recommend creating building crx extensions with an unofficial CLI on NPM.

Troubleshooting

Do not put the manifest.json file in a subfolder

If your extension is not loading in Hyperbeam, please double-check that:

  • The manifest.json file is a well-formed JSON
  • The manifest.json file is in the root directory

The contents of the zip file should look like this:

hello.html
hello_extensions.png
manifest.json
popup.js

The following file structure is invalid, do not do this:

extension/
├─ hello.html
├─ hello_extensions.png
├─ manifest.json
└─ popup.js