Switch panes in APEX 5.0 Page designer – Part 3

It’s time for the third and final part of my hack-a-tronik series on switching panes in the APEX 5.0 Page Designer.

This is also the longest article so far. Please bear with me, I’ll try to make it interesting ๐Ÿ˜‰

Remember that in part 2 of the series I mentioned the goal was to build a real (Google Chrome) browser extension, which I named Xplug.


In todays article I’m going to show you how I accomplished just that, what steps were necessary and what challenges I had to tackle.

On a side note; I have more plans for Xplug, so I decided I’ll be spending an own webpage where I’ll be adding more stuff and ideas for Page Designer.

Creating a browser extension is quite easy nowadays; at least that’s the case when dealing with Google Chrome.
There’s no magic involved really, for the most part it’s just plain javascript dealing with a browser API.

I’ll be doing a Firefox -and perhaps an Apple Safari- version of the extension later on, so to keep things simple and manageable I’m not using any of the advanced extension stuff.
I basically just want the extension to kick-start my own javascript code and run it in the context of the Page Designer webpage.

Below are the steps I did:

1. Create boilerplate code for Google Chrome with extensionizr.
Basically extensionizr generates a ZIP file containing a pre-defined folder structure and a manifest file in JSON format.

2. Download and unpack the ZIP file to a local drive.
Here’s how the folder structure looks like:


3. Enable developer mode in Google Chrome.
That’s pretty straightforward.
In order to develop, install and activate my own extension (not originating from the Google Chrome Webstore), I had to enable this checkbox.


4. Include the javascript code I wrote in part 2 of the series and update the manifest.
I copied the xplug.js file into the /js subfolder and adjusted some properties in the manifest.json file:

  • web_accessible_resources
    I want to dynamically inject my javascript source code into the DOM after Page Designer has loaded. Chrome security mechanisms require that all resources injected into a webpage are whitelisted.

  • content_script -> “matches”
    Next thing up is to specify the browser URL pattern that triggers the extension. In our case we want the extension to be available when Page Designer is opened, so I specify “*://*/*f?p=4000:*”

  • content_script -> “js”
    Notice that I specify the “js” property to point to the file “src/inject/inject.js”
    You might ask, why not just point to the file “js/xplug.js” ?

    A Chrome extension always runs in a sandboxed environment. This means I have access to the DOM of the Page Designer webpage, but I do not have access to the javascript libraries and instantiated javascript objects that make up the front-end logic of Page Designer. Certainly not a viable solution as xplug.js acts on the APEX widget splitter object.

    I need a way to run in the “context” of the Page Designer page; That’s easy to do, in src/inject/inject.js I added some javascript code that generates a new script element, specifying that the javascript source is to be loaded from the extension and then finally inject the script element into the DOM.

5. Load the custom extension into Google Chrome
That’s the final to-do step for this article. For testing and debugging purposes I want to load the extension from my local drive (without packing it as CRX file first).


In this article I showed you how I built a custom google Chrome Extension that I’m using while working with the APEX 5.0 Page Designer.

For the sake of simplicity I mentioned I just copied the source code of part 2 of the series. Well, that’s not totally true. I’ve enhanced the Xplug javascript code for multi-language support and setting(s) are now locally stored (HTML 5 local storage) for each APEX 5 instance you connect to.

Details on the latest version of Xplug can be found here.


2 thoughts on “Switch panes in APEX 5.0 Page designer – Part 3

  1. John Snyders from the APEX Development Team has sent me a comment I’ll be more than happy to take a look at and make use of in my next Xplug update.
    (Somehow Johns’ comment didn’t get through in the blog):

    For local storage consider using the apex.storage APIs.
    See storage.js getScopedLocalStorage
    It could be important if your plugin is used in a hosted APEX environment.

    Thanks John ๐Ÿ™‚

Leave a Reply

Your email address will not be published. Required fields are marked *