Skip to content

Chrome & Firefox Browser extension to aid gRPC-Web development

License

Notifications You must be signed in to change notification settings

SafetyCulture/grpc-web-devtools

Repository files navigation

gRPC-Web Dev Tools

PRs Welcome

gRPC-Web Dev Tools Now supports dark mode.

Installation

Chrome

Via the Chrome Web Store ( recommended)

or

  1. build it with make build
  2. open the Extension Management page by navigating to chrome:https://extensions.
  3. enable Developer Mode by clicking the toggle switch next to "Developer mode".
  4. Click the LOAD UNPACKED button and select the extension ./build directory.

Firefox

Via Firefox Browser Add-Ons (recommended)

or

  1. build and package with make package
  2. enter about:debugging in the URL bar of Firefox
  3. click This Firefox > Load Temporary Add-on...
  4. select the grpc-web-devtools.zip extention file

Usage

const enableDevTools = window.__GRPCWEB_DEVTOOLS__ || (() => {
});
const client = new EchoServiceClient('https://myapi.com');
enableDevTools([
  client,
]);

NOTE: Requires that your generated client(s) use protoc-gen-grpc-web >= 1.0.4

Example

The example uses docker-compose to start a simple gRPC server, JavaScript client and the Envoy proxy for gRPC-Web:

make example-up

Example will be running on https://localhost:8080

To stop the example:

make example-down

Connect-Web

grpc-web-devtools now also supports connect-web!

// __CONNECT_WEB_DEVTOOLS__ is loaded in as a script, so it is not guaranteed to be loaded before your code.
const interceptors: Interceptor[] = window.__CONNECT_WEB_DEVTOOLS__ !== "undefined" ?
  [window.__CONNECT_WEB_DEVTOOLS__]
  : [];
// To get around the fact that __CONNECT_WEB_DEVTOOLS__ might not be loaded, we can listen for a custom event,
// and then push the interceptor to our array once loaded.
window.addEventListener("connect-web-dev-tools-ready", () => {
  if (typeof window.__CONNECT_WEB_DEVTOOLS__ !== "undefined") {
    interceptors.push(window.__CONNECT_WEB_DEVTOOLS__);
  }
});
// Now we can use the interceptors in our transport
const transport: Transport = createGrpcWebTransport({
  baseUrl: getApiHostname(),
  interceptors,
});

This will also work for the connect protocol

const transport: Transport = ConnectTransportOptions({
  baseUrl: getApiHostname(),
  interceptors,
});