### Build webextension-polyfill Library and Run Tests

Source: https://github.com/mozilla/webextension-polyfill/blob/master/CONTRIBUTING.md

This snippet outlines the process to clone the webextension-polyfill repository, install its npm dependencies, and build the library. It generates both non-minified and minified versions in the dist/ directory and then executes the unit tests.

```sh
git clone https://github.com/mozilla/webextension-polyfill.git

cd webextension-polyfill

npm install

npm run test
```

--------------------------------

### Install WebExtension Polyfill with npm

Source: https://github.com/mozilla/webextension-polyfill/blob/master/README.md

This command installs the 'webextension-polyfill' library as a development dependency using npm. It's suitable for projects with an existing 'package.json' file, ensuring the polyfill is available during development.

```Shell
npm install --save-dev webextension-polyfill
```

--------------------------------

### Install copy-webpack-plugin for Webpack Polyfill Setup

Source: https://github.com/mozilla/webextension-polyfill/blob/master/README.md

This shell command installs `copy-webpack-plugin` as a development dependency. This plugin is essential for copying the `browser-polyfill.js` file directly into the webpack output directory without bundling it into other scripts.

```shell
npm install --save-dev copy-webpack-plugin
```

--------------------------------

### JavaScript: Handle Message in Content Script (Async/Await)

Source: https://github.com/mozilla/webextension-polyfill/blob/master/README.md

Similar to the previous example, this content script handles incoming messages but uses `async` and `await` for a cleaner asynchronous flow. It retrieves data from local storage and returns it as a reply.

```javascript
browser.runtime.onMessage.addListener(async function(msg) {
  if (msg == "get-ids") {
    let {idPattern} = await browser.storage.local.get("idPattern");

    return Array.from(document.querySelectorAll(idPattern),
                      elem => elem.textContent);
  }
});
```

--------------------------------

### JavaScript: Reload Tabs using Async/Await

Source: https://github.com/mozilla/webextension-polyfill/blob/master/README.md

This example shows the same tab reloading functionality as the Promise chaining version, but implemented using `async` and `await` for more synchronous-looking code. Error handling is done with a `try...catch` block.

```javascript
async function reloadTabs() {
  try {
    let {urls} = await browser.storage.local.get("urls");

    let tabs = await browser.tabs.query({url: urls});

    await Promise.all(
      Array.from(tabs, tab => browser.tabs.reload(tab.id))
    );

    await browser.notifications.create({
      type: "basic",
      iconUrl: "icon.png",
      title: "Tabs reloaded",
      message: "Your tabs have been reloaded",
    });
  } catch (error) {
    console.error(`An error occurred while reloading tabs: ${error.message}`);
  }
}
```

--------------------------------

### WebExtension Polyfill: MSEdge Compatibility

Source: https://github.com/mozilla/webextension-polyfill/blob/master/README.md

This section outlines the support for MSEdge. Versions 79.0.309 and newer are unofficially supported as a Chrome-compatible target. Older MSEdge versions are unsupported; for these, developers can use the `--ms-preload` manifest key and the Microsoft Edge Extension Toolkit's Chrome API bridge to load the polyfill. An example repository is provided for this strategy.

```APIDOC
MSEdge Support:
  - Versions >= 79.0.309: Unofficially supported (Chrome-compatible).
  - Versions < 79.0.309: Unsupported.
    - Workaround: Use `--ms-preload` manifest key and Microsoft Edge Extension Toolkit's Chrome API bridge.
    - Example: https://github.com/rpl/example-msedge-extension-with-webextension-polyfill
```

--------------------------------

### Execute webextension-polyfill Unit Tests

Source: https://github.com/mozilla/webextension-polyfill/blob/master/CONTRIBUTING.md

These commands run the project's unit tests, which use Node.js, Mocha, JSDOM, and Sinon to simulate a browser environment. Tests can be run on the non-minified or minified library versions, and code coverage can be collected.

```sh
npm run test
```

```sh
npm run test-minified
```

```sh
npm run test-coverage
```

--------------------------------

### Contributing to WebExtension Polyfill Project

Source: https://github.com/mozilla/webextension-polyfill/blob/master/README.md

This section directs interested individuals to the 'CONTRIBUTING.md' file for detailed information on how to build the library from the repository, as well as how to contribute changes and test them effectively.

```APIDOC
Contribution Guidelines:
  - Refer to: CONTRIBUTING.md
  - Topics: Building the library, contributing changes, testing procedures.
```

--------------------------------

### Verify Module Bundler Compatibility for webextension-polyfill

Source: https://github.com/mozilla/webextension-polyfill/blob/master/CONTRIBUTING.md

This command runs smoke tests using Browserify and Webpack to ensure that the webextension-polyfill library integrates correctly with popular module bundlers without unexpected errors. It validates bundling compatibility.

```sh
npm run test-module-bundlers-smoketests
```

--------------------------------

### Configure WebExtension Polyfill in manifest.json for Background and Content Scripts

Source: https://github.com/mozilla/webextension-polyfill/blob/master/README.md

This snippet demonstrates how to include the `browser-polyfill.js` script in `manifest.json` for background and content scripts. It ensures the polyfill is loaded before any other scripts that utilize the `browser` APIs, providing promise-based access to WebExtension APIs.

```json
{
  // ...

  "background": {
    "scripts": [
      "browser-polyfill.js",
      "background.js"
    ]
  },

  "content_scripts": [{
    // ...
    "js": [
      "browser-polyfill.js",
      "content.js"
    ]
  }]
}
```

--------------------------------

### Execute webextension-polyfill Integration Tests on Chrome

Source: https://github.com/mozilla/webextension-polyfill/blob/master/CONTRIBUTING.md

This command runs the integration test suite on the Chrome browser using selenium-webdriver. It executes test extensions to compare polyfilled APIs with Chrome's native browser APIs, ensuring cross-browser compatibility.

```sh
TEST_BROWSER_TYPE=chrome npm run test-integration
```

--------------------------------

### Execute webextension-polyfill Integration Tests on Firefox

Source: https://github.com/mozilla/webextension-polyfill/blob/master/CONTRIBUTING.md

This command runs the integration test suite on the Firefox browser using selenium-webdriver. It executes test extensions to compare polyfilled APIs with Firefox's native browser APIs, ensuring cross-browser compatibility.

```sh
TEST_BROWSER_TYPE=firefox npm run test-integration
```

--------------------------------

### Load WebExtension Polyfill as ES6 Module in HTML

Source: https://github.com/mozilla/webextension-polyfill/blob/master/README.md

This HTML snippet demonstrates loading the `browser-polyfill.js` polyfill using the native ES6 module loader. It ensures the `browser` API object is defined globally (`window`) for subsequent module scripts, providing promise-based WebExtension APIs.

```html
<!DOCTYPE html>
<html>
  <head>
    <script type="module" src="browser-polyfill.js"></script>
    <script type="module" src="background.js"></script>
  </head>
  <!-- ... -->
</html>
```

--------------------------------

### Configure Webpack to Copy WebExtension Polyfill without Bundling

Source: https://github.com/mozilla/webextension-polyfill/blob/master/README.md

This JavaScript snippet demonstrates how to configure `webpack.config.js` to copy the `browser-polyfill.js` file directly to the output directory using `CopyWebpackPlugin`. This approach allows the polyfill to be loaded separately via `manifest.json` or HTML, rather than being bundled into other JavaScript files.

```javascript
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  /* Your regular webpack config, probably including something like this:
  output: {
    path: path.join(__dirname, 'distribution'),
    filename: '[name].js'
  },
  */
  plugins: [
    new CopyWebpackPlugin({
      patterns: [{
        from: 'node_modules/webextension-polyfill/dist/browser-polyfill.js',
      }],
    })
  ]
}
```

--------------------------------

### Use WebExtension Polyfill with Module Bundlers in Background Script

Source: https://github.com/mozilla/webextension-polyfill/blob/master/README.md

This JavaScript snippet demonstrates how to integrate `webextension-polyfill` into a background script using a module bundler like webpack or browserify. It shows how to `require` the polyfill and then use the promise-based `browser` API for message listeners and storage operations.

```javascript
var browser = require("webextension-polyfill");

browser.runtime.onMessage.addListener(async (msg, sender) => {
  console.log("BG page received message", msg, "from", sender);
  console.log("Stored data", await browser.storage.local.get());
});

browser.browserAction.onClicked.addListener(() => {
  browser.tabs.executeScript({file: "content.js"});
});
```

--------------------------------

### JavaScript: Reload Tabs using Promise Chaining

Source: https://github.com/mozilla/webextension-polyfill/blob/master/README.md

This snippet demonstrates how to retrieve URLs from local storage, query matching tabs, reload them, and notify the user using Promise chaining. It handles potential errors with a `.catch()` block.

```javascript
browser.storage.local.get("urls").then(({urls}) => {
  return browser.tabs.query({url: urls});
}).then(tabs => {
  return Promise.all(
    Array.from(tabs, tab => browser.tabs.reload(tab.id))
  );
}).then(() => {
  return browser.notifications.create({
    type: "basic",
    iconUrl: "icon.png",
    title: "Tabs reloaded",
    message: "Your tabs have been reloaded",
  });
}).catch(error => {
  console.error(`An error occurred while reloading tabs: ${error.message}`);
});
```

--------------------------------

### Include WebExtension Polyfill in HTML Documents for Browser Actions

Source: https://github.com/mozilla/webextension-polyfill/blob/master/README.md

This HTML snippet shows how to explicitly load `browser-polyfill.js` in HTML documents, such as `browserAction` popups or tab pages. The script should be included in the `<head>` section before other scripts that depend on the `browser` object.

```html
<!DOCTYPE html>
<html>
  <head>
    <script type="application/javascript" src="browser-polyfill.js"></script>
    <script type="application/javascript" src="popup.js"></script>
  </head>
  <!-- ... -->
</html>
```

--------------------------------

### Dynamically Inject WebExtension Polyfill using tabs.executeScript

Source: https://github.com/mozilla/webextension-polyfill/blob/master/README.md

This JavaScript snippet illustrates how to dynamically inject the `browser-polyfill.js` into a content script using `browser.tabs.executeScript`. It's necessary when the polyfill hasn't been loaded via `content_scripts` in `manifest.json`, ensuring the `browser` API is available for subsequent script execution.

```javascript
browser.tabs.executeScript({file: "browser-polyfill.js"});
browser.tabs.executeScript({file: "content.js"}).then(result => {
  // ...
});
```

--------------------------------

### Use WebExtension Polyfill with Module Bundlers in Content Script

Source: https://github.com/mozilla/webextension-polyfill/blob/master/README.md

This JavaScript snippet illustrates how to use `webextension-polyfill` within a content script when using a module bundler. It shows how to `require` the polyfill to access the `browser` API for local storage and sending messages.

```javascript
var browser = require("webextension-polyfill");

browser.storage.local.set({
  [window.location.hostname]: document.title,
}).then(() => {
  browser.runtime.sendMessage(`Saved document title for ${window.location.hostname}`);
});
```

--------------------------------

### JavaScript: Handle Message in Content Script (Promise)

Source: https://github.com/mozilla/webextension-polyfill/blob/master/README.md

This snippet shows a content script listening for messages from the background page using `browser.runtime.onMessage.addListener`. It returns a Promise whose resolution value is used as a reply, retrieving data from local storage.

```javascript
browser.runtime.onMessage.addListener(msg => {
  if (msg == "get-ids") {
    return browser.storage.local.get("idPattern").then(({idPattern}) => {
      return Array.from(document.querySelectorAll(idPattern),
                        elem => elem.textContent);
    });
  }
});
```

--------------------------------

### APIDOC: TypeScript Type Definitions for WebExtension Polyfill

Source: https://github.com/mozilla/webextension-polyfill/blob/master/README.md

This section provides information on available TypeScript type definition packages for web-extension projects using the polyfill. It lists `@types/webextension-polyfill` and `@types/chrome` with their descriptions and links.

```APIDOC
Project: @types/webextension-polyfill
Description: Types and JS-Doc are automatically generated from the mozilla schema files, so it is always up-to-date with the latest APIs. Formerly known as webextension-polyfill-ts.
Link: https://www.npmjs.com/package/@types/webextension-polyfill

Project: @types/chrome
Description: Manually maintained types and JS-Doc. Only contains types for chrome extensions though!
Link: https://www.npmjs.com/package/@types/chrome
```

--------------------------------

### WebExtension Polyfill: Chrome API Promise Limitations

Source: https://github.com/mozilla/webextension-polyfill/blob/master/README.md

This section explains that the polyfill's promise support is based on the 'api-metadata.json' file. API methods not listed in this file will not return promises, requiring the use of callbacks instead. Additionally, Chrome-only APIs do not have promise versions to maintain compatibility with Firefox.

```APIDOC
API methods not included in 'api-metadata.json' do not support Promises.
Chrome-only APIs do not provide Promise versions to ensure Firefox compatibility.
Callbacks must be used for unrecognized or Chrome-only API methods.
```

--------------------------------

### Require Minified WebExtension Polyfill Version with Bundlers

Source: https://github.com/mozilla/webextension-polyfill/blob/master/README.md

This JavaScript snippet shows how to explicitly instruct a module bundler to use the minified version of `webextension-polyfill`. This is useful if the extension does not perform its own minification steps, ensuring a smaller bundle size.

```javascript
var browser = require("webextension-polyfill/dist/browser-polyfill.min");

...
```

--------------------------------

### Access WebExtension Polyfill API in ES6 Modules

Source: https://github.com/mozilla/webextension-polyfill/blob/master/README.md

This JavaScript snippet shows how to access the `browser` API object in an ES6 module after the `browser-polyfill.js` has been loaded. The `browser` object is globally available and provides promise-based WebExtension APIs for event listeners and other operations.

```javascript
// In background.js (loaded after browser-polyfill.js) the `browser`
// API object is already defined and provides the promise-based APIs.
browser.runtime.onMessage.addListener(...);
```

--------------------------------

### WebExtension Polyfill: tabs.executeScript Behavior

Source: https://github.com/mozilla/webextension-polyfill/blob/master/README.md

This section details the differing return behaviors of `browser.tabs.executeScript` between Firefox and Chrome when using the polyfill. On Firefox, the promise resolves to the content script's result, which can be an immediate value or another Promise. On Chrome, while the polyfilled method also returns a promise, it only supports immediate values; if the content script returns a Promise, the polyfilled promise will resolve to `undefined`.

```APIDOC
Method: browser.tabs.executeScript

Firefox Behavior:
  - Returns: Promise<any>
  - Resolution: Resolves to the result of the content script code (immediate value or Promise).

Chrome Behavior (Polyfilled):
  - Returns: Promise<any>
  - Resolution: Resolves to the result of the content script code.
  - Limitation: Only immediate values are supported. If content script returns a Promise, the polyfilled promise resolves to `undefined`.
```

--------------------------------

### Firefox-Exclusive WebExtension APIs: Polyfill Scope

Source: https://github.com/mozilla/webextension-polyfill/blob/master/README.md

This library does not provide polyfill support for API methods or options that are exclusively available in Firefox. These Firefox-specific functionalities are considered outside the scope of this polyfill.

```APIDOC
Polyfill Scope:
  - Excluded: API methods and options available only in Firefox.
  - Reason: Out of scope for this library.
```

--------------------------------

### Troubleshooting Firefox-Specific WebExtension Issues

Source: https://github.com/mozilla/webextension-polyfill/blob/master/README.md

When an extension using this library exhibits unexpected behavior exclusively on Firefox, it is typically an issue with Firefox's native WebExtensions implementation, not the polyfill itself. Such 'Firefox only' issues should be reported directly to Bugzilla.

```APIDOC
Issue Reporting:
  - Browser: Firefox
  - Cause: Native Firefox implementation issue (not polyfill)
  - Report To: Bugzilla (https://bugzilla.mozilla.org/enter_bug.cgi?product=WebExtensions&component=Untriaged)
```

--------------------------------

### JavaScript: Send Message from Background Page

Source: https://github.com/mozilla/webextension-polyfill/blob/master/README.md

This code illustrates how a background page can send a message to a content script in a tab and process the results using Promises. It uses `browser.tabs.sendMessage`.

```javascript
browser.tabs.sendMessage(tabId, "get-ids").then(results => {
  processResults(results);
});
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.