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

Folders and files

NameName
Last commit message
Last commit date

Latest commit

6d30a44 · Jul 24, 2024

History

92 Commits
Jul 27, 2022
Dec 8, 2019
Jul 24, 2024
Dec 8, 2019
Oct 21, 2021
Apr 25, 2019
Jul 27, 2022
Apr 18, 2019
Apr 18, 2019
Dec 16, 2019
Oct 26, 2022
Apr 16, 2019
Jul 27, 2022
Jul 27, 2022

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://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('http://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 http://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,
});