MDN may have intermittent access issues April 18 13:00 - April 19 01:00 UTC. See whistlepig.mozilla.org for all notifications.

mozilla
Your Search Results

    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>

    Document Tags and Contributors

    Tags: 
    Last updated by: wbamberg,
    Hide Sidebar