# Communicating With Other Scripts #
This section of the guide explains how content scripts can
communicate with:
* [your `main.js` file](dev-guide/guides/content-scripts/communicating-with-other-scripts.html#main.js),
or any other modules in your add-on
* [other content scripts loaded by your add-on](dev-guide/guides/content-scripts/communicating-with-other-scripts.html#Content Scripts)
* [page scripts](dev-guide/guides/content-scripts/communicating-with-other-scripts.html#Page Scripts) (that is, scripts embedded in the web page or
included using `
#### Messaging From Page Script To Content Script ####
Sending messages from the page script to the content script is just
the same, but in reverse.
Here "main.js" creates a [`page-mod`](modules/sdk/page-mod.html)
that attaches "listen.js" to the web page:
var data = require("sdk/self").data;
var pageMod = require("sdk/page-mod");
pageMod.PageMod({
include: "http://my-domain.org/talk.html",
contentScriptFile: data.url("listen.js")
});
The web page "talk.html" embeds a script that uses `window.postMessage()`
to send the content script a message when the user clicks a button:
Finally, the content script "listen.js" uses
`document.defaultView.addEventListener()` to listen for messages from the page
script:
document.defaultView.addEventListener('message', function(event) {
console.log(event.data);
console.log(event.origin);
}, false);
### Using Custom DOM Events ###
As an alternative to using `postMessage()` you can use
[custom DOM events](https://developer.mozilla.org/en/DOM/CustomEvent)
to communicate between page scripts and content scripts.
#### Messaging From Content Script To Page Script ####
Here's an example showing how to use custom DOM events to send a message
from a content script to a page script.
First, "main.js" will create a [`page-mod`](modules/sdk/page-mod.html)
that will attach "talk.js" to the target web page:
var data = require("sdk/self").data;
var pageMod = require("sdk/page-mod");
pageMod.PageMod({
include: "http://my-domain.org/listen.html",
contentScriptFile: data.url("talk.js")
});
Next, "talk.js" creates and dispatches a custom event, passing the payload
in the `detail` parameter to `initCustomEvent()`:
var event = document.createEvent('CustomEvent');
event.initCustomEvent("addon-message", true, true, { hello: 'world' });
document.documentElement.dispatchEvent(event);
Finally "listen.html" listens for the new event and examines its
`detail` attribute to retrieve the payload:
#### Messaging From Page Script to Content Script ####
Sending messages using custom DOM events from the page script
to the content script is just the same, but in reverse.
Again, "main.js" creates a [`page-mod`](modules/sdk/page-mod.html)
to target the page we are interested in:
var data = require("sdk/self").data;
var pageMod = require("sdk/page-mod");
pageMod.PageMod({
include: "http://my-domain.org/talk.html",
contentScriptFile: data.url("listen.js")
});
The web page "talk.html" creates and dispatches a custom DOM event,
using `initCustomEvent()`'s `detail` parameter to supply the payload:
Finally, the content script "listen.js" listens for the new event
and retrieves the payload from its `detail` attribute:
document.documentElement.addEventListener("addon-message", function(event) {
console.log(JSON.stringify(event.detail));
}, false);