Clean up DOM after a Firefox add-on SDK extension Disable/Remove action is fired

Question

I am working on a add-on SDK extension which uses a pageMod object with a content script that adds a DIV tag to the DOM (this tag behaves like a button) when the action button is being clicked.

I am trying to find a solution where I can delete that newly added DOM element when the extension is being disabled or removed and I've had no luck so far.

The first thing that I've tried was to use the AddonManager.addAddonListener(listener) approach where I would listen for a onUninstalling or a onDisabling event and then communicate with the content script but I got nowhere.

What I've tried next was to make use of the exports.onUnload solution where I tried to send a message from the pageMod's worker to the content script and deal with the removal of the DIV from there but it seems that the content script is no longer responsive by the time the onUnload function is being triggered.

Is there really no way to clean up the modified DOM when the extension is being disabled/removed?

Answer 1

At your content script listen for the detach event.

self.on("detach", function(reason){
  //remove that div
});

Answer 2

In @paa's answer the "port" part is missing:

e.g., from the docs

var oldInnerHTML = window.document.body.innerHTML;

window.document.body.innerHTML = "eaten!";

self.port.on("detach", function() {
  window.document.body.innerHTML = oldInnerHTML;
});

I am not using PageMod nd this works for me.