chrome.events

Description

Concepts and usage

An Event is an object that lets you be notified when something interesting happens. Here's an example of using the chrome.alarms.onAlarm event to be notified whenever an alarm has elapsed:

chrome.alarms.onAlarm.addListener((alarm) => {
  appendToLog(`alarms.onAlarm -- name: ${alarm.name}, scheduledTime: ${alarm.scheduledTime}`);
});

As the example shows, you register for notification using addListener(). The argument to addListener() is always a function that you define to handle the event, but the parameters to the function depend on which event you're handling. Checking the documentation for alarms.onAlarm, you can see that the function has a single parameter: an alarms.Alarm object that has details about the elapsed alarm.

Example APIs using Events: alarms, i18n, identity, runtime. Most chrome APIs do.

Declarative Event Handlers

The declarative event handlers provide a means to define rules consisting of declarative conditions and actions. Conditions are evaluated in the browser rather than the JavaScript engine which reduces roundtrip latencies and allows for very high efficiency.

Declarative event handlers are used for example in the Declarative Content API. This page describes the underlying concepts of all declarative event handlers.

Rules

The simplest possible rule consists of one or more conditions and one or more actions:

const rule = {
  conditions: [ /* my conditions */ ],
  actions: [ /* my actions */ ]
};

If any of the conditions is fulfilled, all actions are executed.

In addition to conditions and actions you may give each rule an identifier, which simplifies unregistering previously registered rules, and a priority to define precedences among rules. Priorities are only considered if rules conflict each other or need to be executed in a specific order. Actions are executed in descending order of the priority of their rules.

const rule = {
  id: "my rule",  // optional, will be generated if not set.
  priority: 100,  // optional, defaults to 100.
  conditions: [ /* my conditions */ ],
  actions: [ /* my actions */ ]
};

Event objects

Event objects may support rules. These event objects don't call a callback function when events happen but test whether any registered rule has at least one fulfilled condition and execute the actions associated with this rule. Event objects supporting the declarative API have three relevant methods: events.Event.addRules(), events.Event.removeRules(), and events.Event.getRules().

Add rules

To add rules call the addRules() function of the event object. It takes an array of rule instances as its first parameter and a callback function that is called on completion.

const rule_list = [rule1, rule2, ...];
addRules(rule_list, (details) => {...});

If the rules were inserted successfully, the details parameter contains an array of inserted rules appearing in the same order as in the passed rule_list where the optional parameters id and priority were filled with the generated values. If any rule is invalid, for example, because it contained an invalid condition or action, none of the rules are added and the runtime.lastError variable is set when the callback function is called. Each rule in rule_list must contain a unique identifier that is not already used by another rule or an empty identifier.

Remove rules

To remove rules call the removeRules() function. It accepts an optional array of rule identifiers as its first parameter and a callback function as its second parameter.

const rule_ids = ["id1", "id2", ...];
removeRules(rule_ids, () => {...});

If rule_ids is an array of identifiers, all rules having identifiers listed in the array are removed. If rule_ids lists an identifier, that is unknown, this identifier is silently ignored. If rule_ids is undefined, all registered rules of this extension are removed. The callback() function is called when the rules were removed.

Retrieve rules

To retrieve a list of registered rules, call the getRules() function. It accepts an optional array of rule identifiers with the same semantics as removeRules() and a callback function.

const rule_ids = ["id1", "id2", ...];
getRules(rule_ids, (details) => {...});

The details parameter passed to the callback() function refers to an array of rules including filled optional parameters.

Performance

To achieve maximum performance, you should keep the following guidelines in mind.

Register and unregister rules in bulk. After each registration or unregistration, Chrome needs to update internal data structures. This update is an expensive operation.

const rule1 = {...};
const rule2 = {...};
chrome.declarativeWebRequest.onRequest.addRules([rule1]);
chrome.declarativeWebRequest.onRequest.addRules([rule2]);

const rule1 = {...};
const rule2 = {...};
chrome.declarativeWebRequest.onRequest.addRules([rule1, rule2]);

Prefer substring matching over regular expressions in an events.UrlFilter. Substring based matching is extremely fast.

const match = new chrome.declarativeWebRequest.RequestMatcher({
  url: {urlMatches: "example.com/[^?]*foo" }
});

const match = new chrome.declarativeWebRequest.RequestMatcher({
  url: {hostSuffix: "example.com", pathContains: "foo"}
});

If there are many rules that share the same actions, merge the rules into one. Rules trigger their actions as soon as a single condition is fulfilled. This speeds up the matching and reduces memory consumption for duplicate action sets.

const condition1 = new chrome.declarativeWebRequest.RequestMatcher({
  url: { hostSuffix: 'example.com' }
});
const condition2 = new chrome.declarativeWebRequest.RequestMatcher({
  url: { hostSuffix: 'foobar.com' }
});
const rule1 = { conditions: [condition1],
                actions: [new chrome.declarativeWebRequest.CancelRequest()]
              };
const rule2 = { conditions: [condition2],
                actions: [new chrome.declarativeWebRequest.CancelRequest()]
              };
chrome.declarativeWebRequest.onRequest.addRules([rule1, rule2]);

const condition1 = new chrome.declarativeWebRequest.RequestMatcher({
  url: { hostSuffix: 'example.com' }
});
const condition2 = new chrome.declarativeWebRequest.RequestMatcher({
  url: { hostSuffix: 'foobar.com' }
});
const rule = { conditions: [condition1, condition2],
              actions: [new chrome.declarativeWebRequest.CancelRequest()]
             };
chrome.declarativeWebRequest.onRequest.addRules([rule]);

Filtered events

Filtered events are a mechanism that allows listeners to specify a subset of events that they are interested in. A listener that uses a filter won't be invoked for events that don't pass the filter, which makes the listening code more declarative and efficient. A service worker need not be woken up to handle events it doesn't care about.

Filtered events are intended to allow a transition from manual filtering code.

chrome.webNavigation.onCommitted.addListener((event) => {
  if (hasHostSuffix(event.url, 'google.com') ||
      hasHostSuffix(event.url, 'google.com.au')) {
    // ...
  }
});

chrome.webNavigation.onCommitted.addListener((event) => {
  // ...
}, {url: [{hostSuffix: 'google.com'},
          {hostSuffix: 'google.com.au'}]});

Events support specific filters that are meaningful to that event. The list of filters that an event supports will be listed in the documentation for that event in the "filters" section.

When matching URLs (as in the example above), event filters support the same URL matching capabilities as expressible with a events.UrlFilter, except for scheme and port matching.