### Build and start Firefox with the add-on

Source: https://github.com/mdn/webextensions-examples/blob/main/store-collected-images/webextension-with-webpack/README.md

Builds the sources and starts a new Firefox instance with the add-on installed in one command.

```bash
npm run start
```

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

### Install Dependencies

Source: https://github.com/mdn/webextensions-examples/blob/main/eslint-example/README.md

Installs all project dependencies using npm.

```bash
npm install
```

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

### Build Commands

Source: https://github.com/mdn/webextensions-examples/blob/main/webpack-modules/README.md

Commands to install dependencies and build the extension using npm.

```bash
npm install
npm run build
```

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

### Watch for changes and rebuild automatically

Source: https://github.com/mdn/webextensions-examples/blob/main/store-collected-images/webextension-with-webpack/README.md

Starts a webpack instance that automatically rebuilds the add-on when sources are changed.

```bash
npm run build:watch
```

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

### Install Dependencies for Addon

Source: https://github.com/mdn/webextensions-examples/blob/main/mocha-client-tests/README.md

Installs dependencies specifically for the addon.

```bash
cd addon
npm install
```

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

### Host Permissions Example

Source: https://github.com/mdn/webextensions-examples/blob/main/dnr-dynamic-with-options/README.md

Example of host permissions to be used on the options page.

```json
[
  "*://example.com/"
]
```

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

### Check Python 3 installation

Source: https://github.com/mdn/webextensions-examples/blob/main/native-messaging/README.md

Verifies if Python 3 is installed and accessible in the system's PATH.

```bash
> which python3
/usr/local/bin/python3
```

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

### Build the extension

Source: https://github.com/mdn/webextensions-examples/blob/main/store-collected-images/webextension-with-webpack/README.md

Builds the extension using npm.

```bash
npm run build
```

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

### Running with web-ext

Source: https://github.com/mdn/webextensions-examples/blob/main/quicknote/README.md

Command to run the Quicknote extension using web-ext, preserving profile changes.

```bash
web-ext run --firefox-profile [A PATH TO A FIREFOX PROFILE] --keep-profile-changes
```

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

### Manifest Permissions

Source: https://github.com/mdn/webextensions-examples/blob/main/selection-to-clipboard/README.md

Example of how to declare clipboardWrite permissions in the manifest.json file.

```json
{
  "permissions": ["clipboardWrite"]
}
```

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

### Run Linter

Source: https://github.com/mdn/webextensions-examples/blob/main/eslint-example/README.md

Executes ESLint to report coding errors.

```bash
npm run lint
```

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

### Example JSON path for Linux/macOS

Source: https://github.com/mdn/webextensions-examples/blob/main/native-messaging/README.md

Shows how to update the 'path' field in ping_pong.json for Linux/macOS.

```json
"path": "/Users/MDN/webextensions-examples/native-messaging/app/ping_pong.py"
```

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

### manifest.json

Source: https://github.com/mdn/webextensions-examples/blob/main/context-menu-copy-link-with-types/preview.html

The manifest.json file for the extension.

```json
{
  "manifest_version": 3,
  "name": "Copy link with type",
  "version": "1.0",
  "description": "Copies a link to the clipboard, including its type.",
  "icons": {
    "48": "icons/border-48.png"
  },
  "permissions": [
    "contextMenus",
    "scripting",
    "activeTab"
  ],
  "background": {
    "scripts": ["background.js"]
  }
}
```

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

### Example JSON path for Windows

Source: https://github.com/mdn/webextensions-examples/blob/main/native-messaging/README.md

Shows how to update the 'path' field in ping_pong.json for Windows, including escaping backslashes.

```json
"path": "C:\\Users\\MDN\\webextensions-examples\\native-messaging\\app\\ping_pong_win.bat"
```

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

### background.js

Source: https://github.com/mdn/webextensions-examples/blob/main/context-menu-copy-link-with-types/preview.html

The background script for the extension.

```javascript
function copyLinkWithTypes(info) {
  // Copy the link text to the clipboard.
  navigator.clipboard.writeText(info.linkUrl);
}

const contexts = [
  "page",
  "selection",
  "link",
  "editable",
  "image",
  "video",
  "audio",
  "browser_action"
];

browser.contextMenus.create({
  id: "copyLinkWithTypes",
  title: "Copy link with types",
  contexts: contexts
});

browser.contextMenus.onClicked.addListener((info, tab) => {
  if (info.menuItemId === "copyLinkWithTypes" && info.linkUrl) {
    copyLinkWithTypes(info);
  }
});
```

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

### DNR Rules Example

Source: https://github.com/mdn/webextensions-examples/blob/main/dnr-dynamic-with-options/README.md

Example of declarativeNetRequest rules to be used on the options page.

```json
[
  {
    "id": 1,
    "priority": 1,
    "condition": {
      "urlFilter": "|https://example.com/",
      "resourceTypes": [
        "main_frame"
      ]
    },
    "action": {
      "type": "block"
    }
  }
]
```

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

### Options Page HTML

Source: https://github.com/mdn/webextensions-examples/blob/main/proxy-blocker/README.md

The HTML for the options page, allowing users to manage the blocked hosts list.

```html
<!DOCTYPE html>
<html>
<head>
  <title>Proxy Blocker Options</title>
  <meta charset="UTF-8">
  <style>
    body { font-family: sans-serif; }
    textarea { width: 300px; height: 150px; }
  </style>
</head>
<body>
  <h1>Proxy Blocker Options</h1>
  <p>Enter hostnames to block, one per line:</p>
  <textarea id="blockedHosts"></textarea><br>
  <button id="save">Save</button>
  <div id="status"></div>
  <script src="options.js"></script>
</body>
</html>
```

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

### Options Page JavaScript

Source: https://github.com/mdn/webextensions-examples/blob/main/proxy-blocker/README.md

The JavaScript for the options page, handling saving and loading the blocked hosts list.

```javascript
const blockedHostsTextarea = document.getElementById("blockedHosts");
const saveButton = document.getElementById("save");
const statusDiv = document.getElementById("status");
const BLOCKED_HOSTS_KEY = "blockedHosts";

// Load blocked hosts from storage
function loadOptions() {
  browser.storage.local.get(BLOCKED_HOSTS_KEY, (data) => {
    if (data.hasOwnProperty(BLOCKED_HOSTS_KEY)) {
      blockedHostsTextarea.value = data.blockedHosts.join("\n");
    }
  });
}

// Save blocked hosts to storage
function saveOptions() {
  const hosts = blockedHostsTextarea.value.split(/\r?\n/).filter(host => host.trim() !== "");
  browser.storage.local.set({
    blockedHosts: hosts
  }, () => {
    // Update status to let user know options were saved.
    statusDiv.textContent = "Options saved.";
    setTimeout(() => {
      statusDiv.textContent = "";
    }, 1500);
  });
}

// Add event listeners
document.addEventListener("DOMContentLoaded", loadOptions);
saveButton.addEventListener("click", saveOptions);

```

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

### Proxy Blocker Manifest

Source: https://github.com/mdn/webextensions-examples/blob/main/proxy-blocker/README.md

The manifest file for the proxy blocker extension, defining its permissions and background script.

```json
{
  "manifest_version": 2,
  "name": "Proxy Blocker",
  "version": "1.0",

  "description": "Blocks access to specified websites.",

  "icons": {
    "48": "icons/border-48.png"
  },

  "permissions": [
    "proxy",
    "storage"
  ],

  "background": {
    "scripts": ["background.js"]
  }
}
```

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

### storage.managed configuration

Source: https://github.com/mdn/webextensions-examples/blob/main/favourite-colour/README.md

To have Firefox read data from storage.managed, create a file with this content.

```json
{
  "name":  "favourite-colour-examples@mozilla.org",
  "description": "ignored",
  "type": "storage",
  "data": {
    "colour": "management thinks it should be blue!"
  }
}
```

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

### Running web-ext with a preference

Source: https://github.com/mdn/webextensions-examples/blob/main/contextual-identities/README.md

You can enable contextual identities by running web-ext with the --pref privacy.userContext.enabled=true flag.

```bash
web-ext run --pref privacy.userContext.enabled=true
```

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

### Background Script

Source: https://github.com/mdn/webextensions-examples/blob/main/proxy-blocker/README.md

The background script for the proxy blocker extension, handling proxy requests and storage.

```javascript
const BLOCKED_HOSTS_KEY = "blockedHosts";

// Initialize blockedHosts with default values if not already set
browser.runtime.onInstalled.addListener(() => {
  browser.storage.local.get(BLOCKED_HOSTS_KEY, (data) => {
    if (!data.hasOwnProperty(BLOCKED_HOSTS_KEY)) {
      browser.storage.local.set({
        blockedHosts: ["example.com", "example.org"]
      });
    }
  });
});

// Function to check if a host is blocked
async function isBlocked(host) {
  const result = await browser.storage.local.get(BLOCKED_HOSTS_KEY);
  const blockedHosts = result.blockedHosts || [];
  return blockedHosts.some(blockedHost => host === blockedHost);
}

// Listener for proxy requests
browser.proxy.onRequest.addListener(async (requestInfo) => {
  const url = new URL(requestInfo.url);
  const host = url.hostname;

  if (await isBlocked(host)) {
    console.log(`Blocking request to ${host}`);
    return {
      proxyFor: url.href,
      proxy: {
        proxyType: "manual",
        properties: {
          // Proxy to localhost
          // Note: This will likely fail unless you have a server running on localhost:80
          // It's primarily for demonstration purposes.
          host: "127.0.0.1",
          port: 80
        }
      }
    };
  } else {
    // No proxy needed
    return {};
  }
}, {
  urls: ["<all_urls>"]
});

console.log("Proxy blocker background script loaded.");
```

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

### Content Script Exporting Functions

Source: https://github.com/mdn/webextensions-examples/blob/main/export-helpers/README.md

The content script defines a function 'notify()' and uses 'exportFunction()' to export it to the page as a property of the global 'window' object.

```javascript
exportFunction(notify, window, {
  defineAs: "notify"
});
```

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

### Page Script Calling Exported Object Method

Source: https://github.com/mdn/webextensions-examples/blob/main/export-helpers/README.md

The web page script listens for clicks on another button and calls the 'notify()' method of the exported 'messenger' object.

```javascript
window.messenger.notify("Message from the page script!");
```

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

### Page Script Calling Exported Function

Source: https://github.com/mdn/webextensions-examples/blob/main/export-helpers/README.md

The web page script listens for clicks on a button and calls the exported 'notify()' function.

```javascript
window.notify("Message from the page script!");
```

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

### React Component without JSX

Source: https://github.com/mdn/webextensions-examples/blob/main/store-collected-images/webextension-plain/README.md

This code snippet shows how to define a React component using plain JavaScript and `React.createElement` calls, as opposed to JSX syntax.

```javascript
// Shortcut for React components render methods.
const el = React.createElement;

class Popup extends React.Component {
  render() {
    return el("div", {className: "important"}, [
      el("h3", {}, "A title"),
      el("p", {}, "A text paragraph"),
    ]);
  }
}
```

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

### Content Script Exporting Objects

Source: https://github.com/mdn/webextensions-examples/blob/main/export-helpers/README.md

The content script defines an object 'messenger', that has a member function 'notify()', and uses 'cloneInto()' to export that to the page as a property of the global 'window' object.

```javascript
let messenger = {
  notify: function(msg) {
    // Send a message to the background script
    browser.runtime.sendMessage(msg);
  }
};

window.messenger = cloneInto(messenger, window, {
  // clone_functions: true is the default, so we don't need to specify it
});
```

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

### DNR Rule Example

Source: https://github.com/mdn/webextensions-examples/blob/main/dnr-redirect-url/redirectTarget.html

An example of a declarativeNetRequest rule that redirects requests matching a specific URL pattern to an extension path.

```json
{
    "id": 1,
    "priority": 4,
    "condition": {
      "urlFilter": "||example.com/|",
      "resourceTypes": ["main_frame"]
    },
    "action": {
      "type": "redirect",
      "redirect": {
        "extensionPath": "/redirectTarget.html"
      }
    }
  }
```

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

### Run with web-ext cli

Source: https://github.com/mdn/webextensions-examples/blob/main/mocha-client-tests/README.md

Runs the web-ext command to test the addon, potentially requiring a path to the Firefox binary.

```bash
npm run web-ext -- --firefox-binary /path/to/firefox-bin
```