Site Author Guide for Click-To-Activate Plugins

Starting in Firefox 26, most plugins will not be activated automatically in Firefox. This is also true of insecure versions of Java and Flash in earlier versions of Firefox. Website authors should not rely on plugins starting immediately after they have been inserted into the page. This guide contains some best practices for site authors so that their sites do not break when using plugins, including ways to control plugin usage via JavaScript.

Note: This article is intended for developers and website administrators. If you need help using a plugin in Firefox, please visit Why do I have to click to activate plugins? on support.mozilla.org.

Using a script to determine if a plugin is installed

To detect if a plugin is actually installed, query navigator.mimeTypes for the plugin MIME type you intend to use. This allows you to differentiate between plugins that are not installed and those that are click-to-activate. Do not iterate through navigator.mimeTypes or navigator.plugins: enumeration may be removed as a privacy measure in a future version of Firefox.

<script>
  function isJavaAvailable() {
    return 'application/x-java-applet' in navigator.mimeTypes;
  }
</script>

Using a script callback to determine when a plugin is activated

Sites should not attempt to script a plugin immediately after it is created. Instead, the plugin should make a call into JavaScript when it is created, using NPRuntime scripting:

<script>
  function pluginCreated() {
    document.getElementById('myPlugin').callPluginMethod();
  }
</script>

<object type="application/x-my-plugin" data="somedata.mytype" id="myPlugin">
  <param name="callback" value="pluginCreated()">
</object>

The "callback" parameter (or something equivalent) must be implemented by your plugin. This can be done in Flash using the flash.external.ExternalInterface API. In Java the netscape.javascript package can do the same thing.

Using properties on the plugin to determine when it activated

When you are using a plugin that doesn't allow you to specify callbacks and you can't modify it, an alternative technique is to test for properties that the plugin should have:

<body onload="checkPlugin()">
<script>
function checkPlugin() {
  if (document.getElementById('myPlugin').myProperty !== undefined) {
    document.getElementById('myNotification').style.display = 'none';
    document.getElementById('myPlugin').callPluginMethod();  
  } else {
    console.log("Plugin not activated yet.");
    setTimeout(checkPlugin, 500);
  }
}
</script>

<p id="myNotification">Waiting for the plugin to activate!</p>
<object id="myPlugin" type="application/x-my-plugin"></object>

Making plugins visible on the page

When a site wants the user to enable a plugin, the primary indicator is that the plugin is visible on the page:

Screenshot of the silverlight plugin activation on the Netflix website.

If a page creates a plugin that is very small or completely hidden, the only visual indication to the user is the small icon in the Firefox location bar. Even if the plugin element will eventually be hidden, pages should create the plugin element visible on the page, and should resize or hide it only after the user has activated the plugin. This can be done in a similar fashion to the callback technique we showed above:

<script>
function pluginCreated() {
  // We don't need to see the plugin, so hide it by resizing
  var plugin = document.getElementById('myPlugin');
  plugin.height = 0;
  plugin.width = 0;
  plugin.callPluginMethod();
}
</script>

<!-- Give the plugin an initial size so it is visible -->
<object type="application/x-my-plugin" data="somedata.mytype" id="myPlugin" width="300" height="300">
  <param name="callback" value="pluginCreated()">
</object>

Attachments

File Size Date Attached by
Silverlight activation screenshot
Screenshot of the silverlight plugin activation on the Netflix website.
37350 bytes 2013-10-22 08:29:55 Benjamin Smedberg

Document Tags and Contributors

Tags:
Last updated by: wbamberg,