Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 23 additions & 7 deletions native-messaging/README.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,24 @@
This is a very simple example of how to use [native messaging](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Native_messaging) to exchange messages between a WebExtension and a native application.
# native-messaging

The WebExtension, which can be found under "add-on", connects to the native application and listens to messages from it. It then sends a message to the native application when the user clicks on the WebExtension's browser action. The message payload is just "ping".
This example demonstrates how to use [native messaging](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Native_messaging) to exchange messages between an extension and a native application.

The native application, which can be found under "app", listens for messages from the WebExtension. When it receives a message, the native application sends a response message whose payload is just "pong". The native application is written in Python.
## What it does

The extension, located in the "add-on" folder, connects to the native application and listens for messages from it. It then sends a message to the native application when the user clicks the extension's browser action. The message payload is just "ping".

The native application, located in the "app" folder, listens for messages from the extension. When it receives a message, the native application sends a response message with a payload of just "pong". The native application is written in Python.

## What it shows

This extension example shows how to:

* Add a background script to an extension.
* Set up an action button.
* Request permissions to use native messaging.
* Create a manifest file to define the location of a native application.
* Connect to a native application.
* Send messages to a native application when the user clicks the extension's action button.
* Receive messages from a native application.

## Setup

Expand Down Expand Up @@ -31,15 +47,15 @@ To get this working, there's a little setup to do.
"path": "/Users/MDN/webextensions-examples/native-messaging/app/ping_pong.py"
```

4. Copy `app/ping_pong.json` to the correct location on your computer. There are too many options to list here; see the [Linux](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Native_manifests#linux) and [macOS](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Native_manifests#macos) secitons of [App manifest location ](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Native_manifests#Manifest_location) to find the correct location for your OS and personal preference.
4. Copy `app/ping_pong.json` to the correct location on your computer. There are too many options to list here; see the [Linux](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Native_manifests#linux) and [macOS](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Native_manifests#macos) sections of [App manifest location ](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Native_manifests#Manifest_location) to find the correct location for your OS and personal preference.

### Windows setup

1. Make sure that you have Python 3 installed and that your system's PATH environment variable includes the path to Python. See [Using Python on Windows](https://docs.python.org/3/using/windows.html). After making this change, restart Firefox so it picks up the new PATH environment variable.

2. Update the `"path"` field in `app\ping_pong.json` to use the full path of `app\ping_pong_win.bat` on your computer. Be aware that you must escape the Windows directory separator (`\`).

For example, if you cloned this repository into `C:\Users\MDN\webextensions-examples\`, you update the JSON file like this:
For example, if you cloned this repository into `C:\Users\MDN\webextensions-examples\`, you updaate the JSON file like this:

```json
"path": "C:\\Users\\MDN\\webextensions-examples\\native-messaging\\app\\ping_pong_win.bat"
Expand All @@ -49,13 +65,13 @@ To get this working, there's a little setup to do.

4. Add a registry key containing the full path of `app\ping_pong.json` on your computer. See [App manifest location](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Native_manifests#Manifest_location) to find details of the registry key to add.

To assist in troubleshooting on Windows, there is a script next to this README file named `check_config_win.py`. Running this in a command shell should help you discover of any problems.
To assist with troubleshooting on Windows, the example includes the `check_config_win.py` script. Running this in a command shell should help you discover any problems.

## Testing the example

First, install the add-on. Visit `about:debugging#/runtime/this-firefox` or, from `about:debugging` click "This Firefox" (or "This Nightly" in the Nightly version of Firefox), click "Load Temporary Add-on", and open the add-on's `manifest.json`.

Now, open the extension's console using the "Inspect" button. This is where you see communication between the browser and native app.
Now, open the extension's console using the "Inspect" button. This button opens Developer Tools, where you see communication between the browser and native app.

You should see a new browser action icon in the toolbar. Click it. You should see output like this in the console:

Expand Down
2 changes: 1 addition & 1 deletion native-messaging/add-on/background.js
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ port.onDisconnect.addListener((port) => {
/*
When the extension's action icon is clicked, send the app a message.
*/
browser.browserAction.onClicked.addListener(() => {
browser.action.onClicked.addListener(() => {
console.log("Sending: ping");
port.postMessage("ping");
});
9 changes: 6 additions & 3 deletions native-messaging/add-on/manifest.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{

"description": "Native messaging example add-on",
"manifest_version": 2,
"manifest_version": 3,
"name": "Native messaging example",
"version": "1.0",
"icons": {
Expand All @@ -10,7 +10,10 @@

"browser_specific_settings": {
"gecko": {
"id": "ping_pong@example.org",
"id": "native-messaging@mozilla.org",
"data_collection_permissions": {
"required": ["none"]
},
"strict_min_version": "50.0"
}
},
Expand All @@ -19,7 +22,7 @@
"scripts": ["background.js"]
},

"browser_action": {
"action": {
"default_icon": "icons/message.svg"
},

Expand Down
2 changes: 1 addition & 1 deletion native-messaging/app/ping_pong.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,5 +3,5 @@
"description": "Example host for native messaging",
"path": "/path/to/native-messaging/app/ping_pong.py",
"type": "stdio",
"allowed_extensions": [ "ping_pong@example.org" ]
"allowed_extensions": [ "native-messaging@mozilla.org" ]
}
Loading