Resource Loader API

By Opera Software

From Opera 15 onward, Opera 11 & 12’s extension format is no longer supported, and instead, we’ve switched to Chromium’s extension model. Check out our new documentation for developing extensions for Opera 15 and higher and start building your own extensions.

opera.extension.getFile()

Gets a file within an extension package.

Overview

Because of the security model that Opera extensions use, simply grabbing a local file from some parts of an extension has not been possible. For example, an injected script could not access an image file, even if it was within the same extension package. A workaround has been to use XMLHttpRequest (AJAX) from the background script but this is cumbersome and still restricted to non-binary data. The Resource Loader API aims to solve this problem by making it easy to access any file within an extension package, from any part of the extension.

There are two parts to reading a particular file within an extension:

1. Use this API's getFile() method to get a file object.
2. Use the W3C File API to read the contents of the file object.

The API is available to all extension contexts, such as injected script, background script, popup page and options page. Some examples of when it could be used are displaying the extension's logo within an options page, or reading a CSS file to apply styles to a web page. It's also possible to read the extension's metadata from the config.xml file.

Notes

• Similar to web URIs, only forward slashes (/) can be used in file paths.
• Both relative and absolute paths are allowed. An absolute path is one that begins with a forward slash (/), referring to the extension's root directory.
• The API's getFile() method will automatically retrieve localised versions of files if available. For more information on localisation, see our article on Creating Multilingual Extensions.

Example

The following example has an image of a padlock within the extension's images directory. It displays this within each page that has https:// within its URL.

<!--
  The configuration file ('config.xml').
-->
<?xml version='1.0' encoding='utf-8'?>
<widget xmlns="http://www.w3.org/ns/widgets" id="http://example.com/amisecure" version="1.0" defaultlocale="en">
  <name>Am I secure?</name>
  <description>Displays a padlock icon when a page uses SSL (https in the URL).</description>
  <icon src="images/icon_64.png"/> <!-- Source: http://openclipart.org/detail/58957/lock-by-jhnri4 -->
</widget>

//
// An injected script (e.g. includes/injected.js)
//

window.addEventListener('DOMContentLoaded', function() {
  if (window.location.href.indexOf('https://') > -1) {
    function displayImage() {
          // Create an image element from the FileReader object
          var badge = document.createElement("img");
          badge.src = fr.result;

          // Apply styles to the image
          badge.style.position = 'fixed';
          badge.style.top = '2px';
          badge.style.right = '2px';
          badge.style.zIndex = '1001';
          badge.title = "Secured with SSL";

          // Append the image to the current page
          document.body.appendChild(badge);
    }

    // Get the image resource
    var imgFile = opera.extension.getFile("/images/icon_16.png");

    if (imgFile) {
      // Read out the File object as a Data URI
      var fr = new FileReader();
      fr.onload = displayImage;
      fr.readAsDataURL(imgFile);
    }
  }
}, false);

This article is licensed under a Creative Commons Attribution 3.0 Unported license.