Usage Notes with ClickToPlugin

Note: these notes do not apply to the Safari 5 extension or the internet plug-in

Features:

Blocking Flash: ClickToPlugin can replace every <embed>, <object>, and <applet> element on a web page by a placeholder element (fig. 1) during page-loading. The user can load the embedded content manually by clicking on this placeholder. Right-clicking on the placeholder reveals the usual contextual menu with two added items: 'Load Plugin', which is equivalent to clicking directly on the placeholder, and 'Remove Element', which effectively removes the HTML element from the webpage. The latter is useful for getting rid of embedded ads that block access to page content. Right-clicking outside of any placeholder reveals the contextual menu item 'Load All Plugins' that loads all blocked content on the active page. The type of content that ClickToPlugin blocks can be specified in the extension's settings.

Flash placeholder Silverlight placeholder Java placeholder QuickTime placeholder Windows Media placeholder
Figure 1: Examples of placeholder elements

Note on Java applets: <embed> and <object> elements fire a 'beforeload' event before their content is fetched by the browser, and they can be replaced by placeholder elements at that time. HTML4's deprecated <applet> elements, however, fire no such event. Although those elements are also replaced by placeholders eventually, ClickToPlugin is unable to prevent the Java plugin from launching when a page contains <applet> elements. A bug report has been filed.

Replacing blocked content by HTML5 videos: ClickToPlugin is able to replace certain blocked elements by HTML5 <video> tags. The label of the placeholder is then changed accordingly, and an 'HD' prefix is added if ClickToPlugin knows that the video has resolution 720p or 1080p (fig. 2). Clicking on such a placeholder loads Safari's video player. In Snow Leopard this video player features a fullscreen button (fig. 3) and uses hardware acceleration on supported Macs.

Video placeholder HD Video placeholder
Figure 2: Video placeholder elements


Safari video player
Figure 3: Safari's video player in Snow Leopard

The original element can still be loaded by right-clicking on the placeholder and choosing 'Load Plugin', or by right-clicking the video and choosing 'Reload in Plugin'.

By default, ClickToPlugin will first try to replace an element by a video playable natively (i.e. without any plugin) by QuickTime. It should succeed with the following elements:

With the help of third-party QuickTime components, ClickToPlugin can further replace the following elements:

Note: Playback of nonnative codecs in Safari uses much more CPU than native playback. Moreover, if autoplay is enabled, Safari usually starts playing the video too early for smooth playback. For these reasons the feature can be disabled completely. In my casual testing, playback of 480p YouTube videos using Perian uses on average half as much CPU as YouTube's Flash player, while playback of Windows Media videos using Flip4Mac uses on average 60% as much CPU as the Silverlight Video Player.

MIME Settings:

MIME settings screenshot

Block all MIME types: To block all embedded content. An exception is made for natively supported MIME types, such as common image types, PDF documents, and SVG drawings.

MIME types are strings of the form 'type/subtype[;parameters]' specifying the nature of the embedded content. Common types are:

Here is a useful list of more specific matches:

Allow QuickTime plugin: Instead of manually greenlisting the numerous MIME types handled by the QuickTime web plugin, tick this to allow all QuickTime content.

To see the full list of active plugins and which MIME types they control, go to 'Help' > 'Installed Plug-ins' in Safari's toolbar.

Note: If you only want to block Flash content, the more lightweight ClickToFlash extension is recommended.

Video Settings:

Video settings screenshot Video settings screenshot 2 Video settings screenshot 3 Video settings screenshot 4

Look for video replacements: If ticked, ClickToPlugin looks for video files to replace blocked elements by HTML5 <video> elements. If unticked, all the following options are without effect.

Use playlists: If ticked, ClickToPlugin can load whole playlists from YouTube (on-site and embedded) and the JW player into the HTML5 video player.

Load the video player automatically: If ticked, ClickToPlugin automatically replaces Flash elements by <video> tags when possible, without waiting for the user to click on a placeholder.

Once loaded: Choose whether ClickToPlugin creates <video> tags with the 'preload' attribute set to 'none', to 'auto', or with the 'autoplay' attribute. With the 'Do not buffer' option, the video will only start buffering when the 'Play' button is clicked.

Nonnative codecs: Prescribe whether ClickToPlugin considers video files that will use third-party QuickTime components to play. If 'Use only as a last resort' is selected, ClickToPlugin will not load such videos unless there are no natively playable videos available. If 'Use freely' is selected, ClickToPlugin will load the highest-quality video regardless of its format.

Max resolution: An upper bound on the resolutions of the videos loaded by ClickToPlugin. (Because YouTube's videos are of average quality, it's worth choosing the 1080p option even on a 720p screen.)

Sound volume: Sets the initial volume of videos created by ClickToPlugin. Videos on the active page will also respond to this slider while playing.

Whitelist Settings:

Whitelist settings screenshot

Location matches: Embedded content on pages whose URL contains one of these strings is loaded automatically.

Source matches: Embedded content whose source URL contains one of these strings is loaded automatically.

If a string is enclosed in parenthesis, it will be interpreted as a regular expression.

Enable Whitelist contextual menu item: If ticked, a new contextual menu item appears that reads 'Add Source to Whitelist' on placeholder elements and 'Add Location to Whitelist' elsewhere. When selected, a JavaScript pop-up box appears with the URL of the source or location that the user can trim before adding to the respective Whitelist. The page must be reloaded for the updated Whitelist to be applied.

Invisible Element Settings:

Invisible elements settings screenshot Invisible elements settings screenshot 2

Invisible elements are not truly invisible but their small dimensions make it difficult for the user to locate and click their placeholders. Because they are not meant to be seen, such objects usually have important behind-the-scene functions, and not allowing them to load may cripple the functionality of some pages. A common effect of invisible elements is the message Please install [insert plugin name] being displayed instead of the expected content: this happens because an invisible element whose function is to replace this message by the expected content failed to load. In such cases, allowing invisible elements (or adding their source to the whitelist) is required to even have the possibility to access the main content. The size of these control elements is usually 1x1 px, but some websites use control elements up to 8x8 px in size.

Other Settings:

Other settings screenshot Other settings screenshot 2

sIFR Text: sIFR is a pre-CSS3 technology for displaying advanced typography on the web. It uses JavaScript to replace some text elements on the page by text-mimicking Flash elements. Choose 'Show text only' to disable this process and display the original HTML text.