chobitsu

Install the chobitsu package using npm to use the JavaScript implementation of the Chrome DevTools Protocol.

npm install chobitsu --save

The Runtime domain emits several events that can be intercepted via the connector. These events include:

• Runtime.executionContextCreated: Emitted when the execution context is initialized.
• Runtime.consoleAPICalled: Emitted when any console method (e.g., log, warn, error, info, dir, table, group, debug) is called. Includes type, args, stackTrace, executionContextId, and timestamp.
• Runtime.exceptionThrown: Emitted when an uncaught exception occurs. Includes exceptionDetails (wrapped exception and stack trace) and timestamp.

Note: Console methods are automatically wrapped to intercept calls and provide enriched data (like stack traces for errors/warnings) to the connector.

When enable() is called, the domain monkey-patches localStorage and sessionStorage to trigger events through the connector. This allows you to react to storage mutations.

Available Events

• DOMStorage.domStorageItemUpdated: Fired when an existing key's value is changed.
  • Payload: { key, newValue, oldValue, storageId }
• DOMStorage.domStorageItemAdded: Fired when a new key is created.
  • Payload: { key, newValue, storageId }
• DOMStorage.domStorageItemRemoved: Fired when a key is deleted.
  • Payload: { key, storageId }
• DOMStorage.domStorageItemsCleared: Fired when the entire store is cleared.
  • Payload: { storageId }

The chobitsu instance is the primary entrypoint for interacting with the browser's internal domains. It is pre-configured with several registered domains that allow you to control and inspect various aspects of the browser environment, such as Network, Page, DOM, CSS, Debugger, and Storage.

To use the library, import the default export. The client uses a registration pattern where different functional domains are mapped to the chobitsu instance.

import chobitsu from 'chobitsu';

// The chobitsu instance is ready to use with registered domains
// Example: accessing a domain (actual methods depend on the domain implementation)
// chobitsu.Network.someMethod();

To use chobitsu, require the module and use setOnMessage to listen for incoming messages. To send commands to the Chrome DevTools Protocol, use sendRawMessage with a JSON-stringified payload containing the id, method, and params.

const chobitsu = require('chobitsu');

chobitsu.setOnMessage(message => {
  console.log(message);
});

chobitsu.sendRawMessage(JSON.stringify({
  id: 1,  
  method: 'DOMStorage.clear',
  params: {
    storageId: {
      isLocalStorage: true,
      securityOrigin: 'http://example.com'
    }
  }
}));

The chobitsu project uses Prettier for code formatting. If you are contributing to or building upon this project, the following formatting rules are applied via prettier.config.js:

• singleQuote: true: Uses single quotes instead of double quotes.
• arrowParens: 'avoid': Omits parentheses around a sole arrow function parameter when possible.
• semi: false: Removes semicolons at the end of statements.

module.exports = {
  singleQuote: true,
  arrowParens: 'avoid',
  semi: false,
}

Sets the proxy used for fetching stylesheet text. This is typically used when the stylesheet content needs to be fetched via a specific network proxy or middleware.

CSS.setProxy({ proxy: 'your-proxy-string' });

The DOMStorage domain provides functions to interact with localStorage and sessionStorage. These functions allow you to manipulate storage items and retrieve the entire contents of a storage bucket. All operations require a storageId object to specify the target store.

Storage ID Format

To target a specific store, provide a storageId object with the following structure:

• securityOrigin: The origin of the storage (e.g., location.origin).
• isLocalStorage: A boolean indicating whether to use localStorage (true) or sessionStorage (false).

Use requestDatabaseNames to retrieve a list of all available IndexedDB database names on the current origin. This function also internally tracks the versions of the databases found.

const { databaseNames } = await requestDatabaseNames();
console.log(databaseNames); // string[]

Use clearObjectStore to remove all data from a specific object store without deleting the store itself.

await clearObjectStore({
  databaseName: 'my-db',
  objectStoreName: 'temp_cache'
});

The getUsageAndQuota function returns information regarding the current storage quota and usage for the origin. It returns an object conforming to Storage.GetUsageAndQuotaResponse containing:

• quota: The total quota available.
• usage: The amount of storage currently used.
• overrideActive: A boolean indicating if a quota override is active.
• usageBreakdown: An array providing detailed usage statistics.

const info = getUsageAndQuota();
console.log(`Usage: ${info.usage} / Quota: ${info.quota}`);