recursal/MDN huggingface dataset:
devtools.network.onNavigated
============================

Fired when the user navigates the inspected window to a new page.

Syntax
------


```js
browser.devtools.network.onNavigated.addListener(listener)
browser.devtools.network.onNavigated.removeListener(listener)
browser.devtools.network.onNavigated.hasListener(listener)
```


Events have three functions:

`addListener(listener)`

Adds a listener to this event.

`removeListener(listener)`

Stop listening to this event. The `listener` argument is the listener to remove.

`hasListener(listener)`

Check whether `listener` is registered for this event. Returns `true` if it is listening, `false` otherwise.

addListener syntax
------------------

### Parameters

`listener`

The function called when this event occurs. The function is passed this argument:

`url`

`string`. The new URL for the window.


Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Examples
--------


```js
function handleNavigated(url) {
  console.log(url);
}

browser.devtools.network.onNavigated.addListener(handleNavigated);
```


**Note:** This API is based on Chromium's `chrome.devtools` API.
devtools.network.getHAR()
=========================

Get a HAR log for the page loaded in the current tab.

This is an asynchronous function that returns a `Promise`.

Syntax
------


```js
let getting = browser.devtools.network.getHAR()
```

### Parameters

None.

### Return value

A `Promise` that will be fulfilled with an object containing the HAR log for the current tab. For details of what the log object contains, refer to the HAR specification.

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Examples
--------

Log the URLs of requests contained in the HAR log:


```js
async function logRequests() {
  let harLog = await browser.devtools.network.getHAR();
  console.log(`HAR version: ${harLog.version}`);
  for (const entry of harLog.entries) {
    console.log(entry.request.url);
  }
}

logRequestsButton.addEventListener("click", logRequests);
```


**Note:** This API is based on Chromium's `chrome.devtools.network` API.
devtools.network.onRequestFinished
==================================

Fired when a network request has finished and its details are available to the extension.

The request is given as a HAR entry object, which is also given an asynchronous `getContent()` method that gets the response body content.

Note that although your extension can add a listener at any time, it will only start firing after the user has activated the browser's network panel at least once.

Syntax
------


```js
browser.devtools.network.onRequestFinished.addListener(listener)
browser.devtools.network.onRequestFinished.removeListener(listener)
browser.devtools.network.onRequestFinished.hasListener(listener)
```


Events have three functions:

`addListener(listener)`

Adds a listener to this event.

`removeListener(listener)`

Stop listening to this event. The `listener` argument is the listener to remove.

`hasListener(listener)`

Check whether `listener` is registered for this event. Returns `true` if it is listening, `false` otherwise.

addListener syntax
------------------

### Parameters

`listener`

The function called when this event occurs. The function is passed this argument:

`request`

`object`. An object representing the request. This object is a single HAR entry object. It also defines an asynchronous `getContent()` method, which returns a `Promise` that resolves with an array of two elements. The first element is the HTTP response body as a string, while the second element is the MIME type of the HTTP response also as a string.


Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Examples
--------

Add a listener that logs the server IP address and response body for every network request.


```js
function handleRequestFinished(request) {
  console.log("Server IP: ", request.serverIPAddress);
  request.getContent().then(([content, mimeType]) => {
    console.log("Content: ", content);
    console.log("MIME type: ", mimeType);
  });
}

browser.devtools.network.onRequestFinished.addListener(handleRequestFinished);
```


**Note:** This API is based on Chromium's `chrome.devtools` API.
devtools.inspectedWindow.tabId
==============================

The ID of the `tab` that this instance of the devtools is attached to, represented as a number.

This can be sent to the extension's background page, so that background page can use the `tabs` API to interact with the tab:


```js
// devtools-panel.js

const scriptToAttach = "document.body.innerHTML = 'Hi from the devtools';";

attachContentScriptButton.addEventListener("click", () => {
  browser.runtime.sendMessage({
    tabId: browser.devtools.inspectedWindow.tabId,
    script: scriptToAttach,
  });
});
```



```js
// background.js

function handleMessage(request, sender, sendResponse) {
  browser.tabs.executeScript(request.tabId, {
    code: request.script,
  });
}

browser.runtime.onMessage.addListener(handleMessage);
```

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

**Note:** This API is based on Chromium's `chrome.devtools` API.
devtools.inspectedWindow.reload()
=================================

Reloads the window that the devtools are attached to.

Syntax
------


```js
browser.devtools.inspectedWindow.reload(
  reloadOptions       // object
)
```

### Parameters

`reloadOptions` Optional

`object`. Options for the function, as follows:

`ignoreCache` Optional

`boolean`. If true, this makes the reload ignore the browser cache (as if the user had pressed Shift+Ctrl+R).

`userAgent` Optional

`string`. Set a custom user agent for the page. The string supplied here will be sent in the browser's User-Agent header, and will be returned by calls to `navigator.userAgent` made by scripts running in the page.

`injectedScript` Optional

`string`. Inject the given JavaScript expression into all frames in the page, before any other scripts.


Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Examples
--------

Reload the inspected window, setting the user agent and injecting a script:


```js
const reloadButton = document.querySelector("#reload-button");

reloadButton.addEventListener("click", () => {
  browser.devtools.inspectedWindow.reload({
    injectedScript: "alert(navigator.userAgent);",
    userAgent: "Not a real UA",
  });
});
```


**Note:** This API is based on Chromium's `chrome.devtools` API.
devtools.panels.ElementsPanel
=============================

An `ElementsPanel` represents the HTML/CSS inspector in the browser's devtools. This is called the Page Inspector in Firefox and the Elements panel in Chrome.

Functions
---------

`devtools.panels.ElementsPanel.createSidebarPane()`

Creates a pane in the inspector's sidebar.

Events
------

`devtools.panels.ElementsPanel.onSelectionChanged`

Fired when the user selects a different element in the page, for example using the "Inspect element" context menu item.

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

**Note:** This API is based on Chromium's `chrome.devtools` API.
devtools.panels.elements
========================

An `ElementsPanel` object, which represents the browser's HTML/CSS inspector.

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

**Note:** This API is based on Chromium's `chrome.devtools.panels` API.
devtools.panels.onThemeChanged
==============================

Fired when the devtools theme changes.

Syntax
------


```js
browser.devtools.panels.onThemeChanged.addListener(listener)
browser.devtools.panels.onThemeChanged.removeListener(listener)
browser.devtools.panels.onThemeChanged.hasListener(listener)
```


Events have three functions:

`addListener(listener)`

Adds a listener to this event.

`removeListener(listener)`

Stop listening to this event. The `listener` argument is the listener to remove.

`hasListener(listener)`

Check whether `listener` is registered for this event. Returns `true` if it is listening, `false` otherwise.

addListener syntax
------------------

### Parameters

`listener`

The function called when this event occurs. The function is passed this argument:

`themeName`

`string`. Name of the new theme: this will be one of the permitted values for `devtools.panels.themeName`.


Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Examples
--------


```js
browser.devtools.panels.onThemeChanged.addListener((newThemeName) => {
  console.log(`New theme: ${newThemeName}`);
});
```


**Note:** This API is based on Chromium's `chrome.devtools.panels` API.
devtools.panels.ExtensionSidebarPane
====================================

The `ExtensionSidebarPane` object represents a pane that an extension has added to the sidebar in the browser's HTML/CSS inspector.

![new pane titled "My pane" that displays a JSON object](/en-US/docs/Mozilla/Add-ons/WebExtensions/API/devtools/panels/ExtensionSidebarPane/inspector-sidebar.png)

To create an `ExtensionSidebarPane`, call the `browser.devtools.panels.elements.createSidebarPane()` function.

Functions
---------

`devtools.panels.ExtensionSidebarPane.setExpression()`

Evaluate a JavaScript expression in the web page that the inspector is inspecting. The result is displayed in the sidebar pane.

`devtools.panels.ExtensionSidebarPane.setObject()`

Sets a JSON object that will be displayed in the sidebar pane.

`devtools.panels.ExtensionSidebarPane.setPage()`

Loads the page pointed to by the supplied URL.

Events
------

`devtools.panels.ExtensionSidebarPane.onShown`

Fired when the sidebar pane is shown.

`devtools.panels.ExtensionSidebarPane.onHidden`

Fired when the sidebar pane is hidden.

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

**Note:** This API is based on Chromium's `chrome.devtools.panels` API.
devtools.panels.themeName
=========================

The name of the currently selected devtools theme.

This is a string whose possible values are:

* "light"
* "dark"
* "firebug"
Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

**Note:** This API is based on Chromium's `chrome.devtools.panels` API.
devtools.panels.ExtensionPanel
==============================

An `ExtensionPanel` represents a panel added to the devtools. It's the resolution of the `Promise` returned by `browser.devtools.panels.create()`.

Type
----

Values of this type are objects. The define two events, `onShown` and `onHidden`.

* `onShown` is emitted when the panel is shown in the devtools (for example, because the user clicked on the panel's tab in the devtools window).
* `onHidden` is emitted when the panel is hidden (for example, because the user switched to a different tab in the devtools window).
Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Examples
--------

This code creates a new panel, then adds handlers for its `onShown` and `onHidden` events.


```js
function handleShown(e) {
  console.log(e);
  console.log("panel is being shown");
}

function handleHidden(e) {
  console.log(e);
  console.log("panel is being hidden");
}

browser.devtools.panels
  .create(
    "My Panel", // title
    "icons/star.png", // icon
    "devtools/panel/panel.html", // content
  )
  .then((newPanel) => {
    newPanel.onShown.addListener(handleShown);
    newPanel.onHidden.addListener(handleHidden);
  });
```


**Note:** This API is based on Chromium's `chrome.devtools.panels` API.
devtools.panels.create()
========================

Adds a new panel to the devtools.

This function takes: a title, a URL to an icon file, and a URL to an HTML file. It creates a new panel in the devtools, whose content is specified by the HTML file. It returns a `Promise` that resolves to an `ExtensionPanel` object representing the new panel.

Syntax
------


```js
let creating = browser.devtools.panels.create(
  title,       // string
  iconPath,    // string
  pagePath     // string
)
```

### Parameters

`title`

`string`. The panel's title. This will appear in the row of tabs along the top of the devtools window, and is the main way the user will be able to identify your panel.

`iconPath`

`string`. Specifies an icon which will be shown next to the title. It's provided as a URL to an image file that's been bundled with your extension. Chromium-based browsers and Safari resolve this URL as absolute, while Firefox resolves this URL as relative to the current extension page (unless expressed as an absolute URL, e.g. "/icons/panel.png").

`pagePath`

string. Specifies an HTML file that defines the content of the panel. It's provided as a URL to an HTML file bundled with your extension. The URL may be resolved as an absolute URL or relative to the current extension page. See the browser compatibility data for more information. The HTML file can include CSS and JavaScript files, just like a normal web page. The JavaScript running in the panel can use the devtools APIs. See Extending the developer tools.

### Return value

A `Promise` that will be fulfilled with an `ExtensionPanel` object representing the new panel.

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Examples
--------

Create a new panel, and add listeners to its onShown and onHidden events:


```js
function handleShown() {
  console.log("panel is being shown");
}

function handleHidden() {
  console.log("panel is being hidden");
}

browser.devtools.panels
  .create(
    "My Panel", // title
    "/icons/star.png", // icon
    "/devtools/panel/panel.html", // content
  )
  .then((newPanel) => {
    newPanel.onShown.addListener(handleShown);
    newPanel.onHidden.addListener(handleHidden);
  });
```


**Note:** This API is based on Chromium's `chrome.devtools.panels` API.
devtools.panels.ExtensionSidebarPane.onHidden
=============================================

Called when the sidebar pane becomes hidden, as a result of the user switching away from it.

Syntax
------


```js
browser.devtools.panels.onHidden.addListener(listener)
browser.devtools.panels.onHidden.removeListener(listener)
browser.devtools.panels.onHidden.hasListener(listener)
```


Events have three functions:

`addListener(listener)`

Adds a listener to this event.

`removeListener(listener)`

Stops listening to this event. The `listener` argument is the listener to remove.

`hasListener(listener)`

Checks whether `listener` is registered for this event. Returns `true` if it is listening, and `false` otherwise.

addListener syntax
------------------

### Parameters

`listener`

Function called when this event occurs. This function will be passed no arguments.

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Examples
--------

Create a sidebar pane, and log show and hide events.


```js
function onCreated(sidebarPane) {
  sidebarPane.onShown.addListener(() => {
    console.log("Shown");
  });

  sidebarPane.onHidden.addListener(() => {
    console.log("Hidden");
  });
}

browser.devtools.panels.elements.createSidebarPane("My pane").then(onCreated);
```


**Note:** This API is based on Chromium's `chrome.devtools.panels` API.
devtools.panels.ElementsPanel.setExpression()
=============================================

Evaluates an expression in the context of the inspected page, and displays the result in the extension sidebar pane.

The expression's execution context is the same as that for `inspectedWindow.eval()`.

JSON objects and DOM nodes are displayed as an expandable tree, as in the JSON viewer in Firefox. You can optionally specify a `rootTitle` string: this will be displayed as the title of the tree's root.

This is an asynchronous function that returns a `Promise`.

Syntax
------


```js
let evaluating = browser.devtools.panels.setExpression(
  expression,       // string
  rootTitle         // string
)
```

### Parameters

`expression`

`string`. The expression to evaluate.

`rootTitle` Optional

string. The title of the root of the tree in which results are displayed.

### Return value

A `Promise` that will be fulfilled with no arguments, once the expression has been evaluated.

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Examples
--------

This code creates a sidebar pane that displays the `tagName` of the currently selected element:


```js
function onCreated(sidebarPane) {
  browser.devtools.panels.elements.onSelectionChanged.addListener(() => {
    const exp = "$0 && $0.tagName";
    const title = "Selected Element tagName";
    sidebarPane.setExpression(exp, title);
  });
}

browser.devtools.panels.elements.createSidebarPane("My pane").then(onCreated);
```


**Note:** This API is based on Chromium's `chrome.devtools.panels` API.
devtools.panels.ExtensionSidebarPane.onShown
============================================

Fired when the sidebar pane becomes visible as a result of the user switching to it.

Syntax
------


```js
browser.devtools.panels.onShown.addListener(listener)
browser.devtools.panels.onShown.removeListener(listener)
browser.devtools.panels.onShown.hasListener(listener)
```


Events have three functions:

`addListener(listener)`

Adds a listener to this event.

`removeListener(listener)`

Stop listening to this event. The `listener` argument is the listener to remove.

`hasListener(listener)`

Check whether `listener` is registered for this event. Returns `true` if it is listening, `false` otherwise.

addListener syntax
------------------

### Parameters

`listener`

The function called when this event occurs. The function is passed this argument:

`window`

`object`. The `window` object of the sidebar page, if a page was set with `setPage()`.


Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Examples
--------

Create a sidebar pane, and log show and hide events.


```js
function onCreated(sidebarPane) {
  sidebarPane.onShown.addListener(() => {
    console.log("Shown");
  });

  sidebarPane.onHidden.addListener(() => {
    console.log("Hidden");
  });
}

browser.devtools.panels.elements.createSidebarPane("My pane").then(onCreated);
```


**Note:** This API is based on Chromium's `chrome.devtools.panels` API.
devtools.panels.ExtensionSidebarPane.setPage()
==============================================

Sets an HTML page to be displayed in the sidebar pane.

This is an asynchronous function that returns a `Promise`.

Syntax
------


```js
browser.devtools.panels.setPage(
  path // string containing relative path to page
)
```

### Parameters

extensionPageURL

`string`. The relative path of an HTML page to display within the sidebar.

### Return value

A `Promise` that will be fulfilled with no arguments, once the URL has been set.

The selected page will not be loaded until the user selects the devtools sidebar.

Examples
--------

Create a new pane, and populate it with an HTML page. You could run this code in a script loaded by your extension's devtools page.


```js
function onCreated(sidebarPane) {
  sidebarPane.setPage("sidebar/sidebar.html");
}
```

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

**Note:** This API is based on Chromium's `chrome.devtools.panels` API.
devtools.panels.ExtensionSidebarPane.setObject()
================================================

Displays a JSON object in the extension's sidebar pane.

The object is displayed as an expandable tree, as in the JSON viewer in Firefox. You can optionally specify a `rootTitle` string: this will be displayed as the title of the tree's root.

This is an asynchronous function that returns a `Promise`.

Syntax
------


```js
let setting = browser.devtools.panels.setObject(
  jsonObject,       // string, array, or JSON object
  rootTitle         // string
)
```

### Parameters

`jsonObject`

`String` or `Array` or `Object`. The object to display. If this is an object it is JSON-serialized, so properties like functions will be omitted.

`rootTitle` Optional

`String`. The title of the root of the tree in which the object is displayed.

### Return value

A `Promise` that will be fulfilled with no arguments, once the object has been set.

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Examples
--------

Create a new pane, and populate it with a JSON object. You could run this code in a script loaded by your extension's devtools page.


```js
function onCreated(sidebarPane) {
  sidebarPane.setObject({
    someBool: true,
    someString: "hello there",
    someObject: {
      someNumber: 42,
      someOtherString: "this is my pane's content",
    },
  });
}

browser.devtools.panels.elements.createSidebarPane("My pane").then(onCreated);
```


**Note:** This API is based on Chromium's `chrome.devtools.panels` API.
onSelectionChanged
==================

Fires when the user selects a different page element for inspection with the browser's developer tools, for example by selecting the "Inspect Element" context menu item in Firefox.

Syntax
------


```js
browser.devtools.panels.elements.onSelectionChanged.addListener(listener)
browser.devtools.panels.elements.onSelectionChanged.removeListener(listener)
browser.devtools.panels.elements.onSelectionChanged.hasListener(listener)
```


Events have three functions:

`addListener(listener)`

Adds a listener to this event.

`removeListener(listener)`

Stop listening to this event. The `listener` argument is the listener to remove.

`hasListener(listener)`

Check whether `listener` is registered for this event. Returns `true` if it is listening, `false` otherwise.

addListener syntax
------------------

### Parameters

`listener`

The function called when this event occurs. The function is passed no arguments.

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Examples
--------

Listen for selection changed events, and log the text content of the newly selected element:


```js
function handleSelectedElement() {
  browser.devtools.inspectedWindow.eval("$0.textContent").then((result) => {
    console.log(result[0]);
  });
}

browser.devtools.panels.elements.onSelectionChanged.addListener(
  handleSelectedElement,
);
```


**Note:** This API is based on Chromium's `chrome.devtools` API.