The Looker extension framework will soon use a new loading mechanism. The new loader may cause unexpected behaviors and possible errors when existing extensions are loaded. So that developers can test and update their extensions, this page describes how to test the new extension framework loader before it is officially turned on in Looker environments.

The date that this update will be released has not yet been determined. At that time, a toggle will be provided to allow customers to temporarily turn off the new loading method. However, at some point, the new loading technique will need to be turned on to fix Content Security Policy (CSP) violations and to use the <!DOCTYPE html> preamble.

Changes that may impact extensions

The following is a list of the extension framework changes that may potentially impact extensions:

To fix CSP violations, HTML is generated to load the extension on the server rather than in the browser. This change in itself should not impact existing extensions.
The base tag is removed, which potentially could impact custom code splitting. The base tag was removed because its use violated the CSP. However, some developers might have implemented their own code-splitting techniques that relied on the base tag. Please verify that your code splitting still works, or, if necessary, implement some other techniques that do not rely on the base tag.
The new loader uses a <!DOCTYPE html> preamble. This may impact components that use height: 100%;. You can mitigate this by using height: 100vh.

Testing extensions with the new loading method

The new loading technique requires that your Looker instance is running Looker 22.4 or later. It is turned on using a startup option. The startup option defines a URL that will be used to load the extension. The origin of this URL must be different from the origin of the Looker server. This is required so that the extension can be safely sandboxed.

The following procedure lets you test extensions with the new loading method for a single user, without impacting any other user of the system. It does this by writing the extension-loading URL to the browser's session storage. The new mechanism remains in place until the user's session finishes OR the user deletes the value from session storage. It is expected that this technique will be used by experienced developers.

Configuring an http proxy server

Before turning on the new extension-loading method, you will need to run a proxy server on your local machine that simulates the extension-loading service. Ensure that you have Node.js installed on your local machine, and run the following command:

npx http-server --port 4000 --proxy https://experiment.dev.looker.com --proxy-options.secure false

Replace https://experiment.dev.looker.com with the URL of your Looker instance. You may also change the port number, but make sure that it does not conflict with the port number that is being used by your extension-development server.

The first time you run this command, you will be asked for permission to install http-server.

Configuring an https proxy server

Some environments may prevent mixed http and https content. In this case, an https proxy server needs to be configured with a certificate. To configure an https proxy server, you will need to generate a self-signed certificate. A prerequisite is that openssl is installed on your system. In the directory where you plan to run the https proxy server, run the following command:

openssl req -newkey rsa:2048 -new -nodes -x509 -days 3650 -keyout key.pem -out cert.pem

This will generate two files, cert.pem and key.pem.

To run the https proxy server, ensure that you have Node.js installed on your local machine, and run the following command:

npx http-server --port 4000 -S -C cert.pem --proxy https://experiment.dev.looker.com --proxy-options.secure false

Before using the proxy server you will need to authorize the browser to use the self signed certificate. Open the browser and enter https://localhost:4000. In Chrome you may be presented with a link or button to proceed to the server, or you may need to type thisisunsafe while the browser window has focus. In the latter case, the text will not be shown but will allow you to proceed.

More information on configuring http-server to use https for can be found here: https://www.npmjs.com/package/http-server

Starting the test

If you set up an http proxy server, to configure your browser to use the proxy, use the following URL:
```
    https://experiment.dev.looker.com/extensions/kitchensink::kitchensink/?LOOKER_EXTENSION_LOAD_URL=http://localhost:4000
    
```
Where:
- https://experiment.dev.looker.com is the URL of your looker instance.
- /kitchensink::kitchensink is the ID of the extension that you want to test.
- http://localhost:4000 is the proxy server. Modify the port number if you changed it earlier in this procedure.
If you set up an https proxy server, to configure your browser to use the proxy, use the following URL:
```
    https://experiment.dev.looker.com/extensions/kitchensink::kitchensink/?LOOKER_EXTENSION_LOAD_URL=https://localhost:4000
    
```
Where:
- https://experiment.dev.looker.com is the URL of your looker instance.
- /kitchensink::kitchensink is the ID of the extension that you want to test.
- https://localhost:4000 is the proxy server. Modify the port number if you changed it earlier in this procedure.

The parameter LOOKER_EXTENSION_LOAD_URL will immediately be removed from the URL. As stated earlier, the proxy server URL is stored in session storage and will remain active for the duration of the session.

Stopping the test

To stop testing, enter the following URL:

https://experiment.dev.looker.com/extensions/kitchensink::kitchensink/?LOOKER_EXTENSION_LOAD_URL=

This will remove the URL from session storage. Again, the LOOKER_EXTENSION_LOAD_URL parameter will be removed from the URL.

Articles in this section

Testing the new extension framework loader