To migrate a Jupyterlab frontend extension as a Chrome extension for Jupyterlab service

[MRYingLEE]

In companies, usually there are some existing Jupyterlab services, such as GCP Vertex AI workbench. End users are out of control of the services so that we cannot install any Jupyterlab extensions, even frontend ones, while we can install Chrome extension.

In theory, all Jupyterlab frontend extensions finally become as some Javascript files. So, I am wondering there should be a general way to migrate a Jupyterlab frontend extension as a Chrome extension for Jupyterlab service.

Any ideas?

[MRYingLEE]

Anthropic Claude.ai suggested:

This updated version uses Manifest V3 and includes some structural changes to comply with the new manifest version. Here are the key differences and explanations:

manifest.json:

Changed manifest_version to 3.
Replaced permissions with host_permissions for URL matching.
Added the scripting permission, which is required for programmatic injection.
Added web_accessible_resources to allow the injection of injected.js.

content.js:

This script now uses chrome.runtime.getURL() to get the URL of injected.js.
It injects injected.js as a separate file instead of inline script.

injected.js:

This is a new file containing the actual code to be injected into the JupyterLab page.
It contains the custom functionality that interacts with the JupyterLab interface.

The main changes in this Manifest V3 version are:

Improved security: By using a separate injected.js file, we avoid potential issues with Content Security Policy (CSP) restrictions.
Better organization: The injected code is now in its own file, making it easier to manage and update.
Use of host_permissions: This replaces the old permissions for specifying which URLs the extension can access.

To use this extension:

Create a new directory for your extension.
Save manifest.json, content.js, and injected.js in this directory.
In Chrome, go to chrome://extensions/, enable "Developer mode", and click "Load unpacked" to select your extension directory.

Remember to adjust the URL patterns in manifest.json to match your specific JupyterLab instance.
This structure provides a good starting point for adapting JupyterLab extension functionality to a Chrome extension. You would primarily modify the injected.js file to include the desired functionality from your JupyterLab extension.

// manifest.json
{
  "manifest_version": 3,
  "name": "JupyterLab Extension Injector",
  "version": "1.0",
  "description": "Injects custom JavaScript into JupyterLab pages",
  "permissions": [
    "scripting"
  ],
  "host_permissions": [
    "https://*.cloud.google.com/*"  // Adjust this URL pattern as needed
  ],
  "content_scripts": [
    {
      "matches": ["https://*.cloud.google.com/*"],  // Adjust this URL pattern as needed
      "js": ["content.js"],
      "run_at": "document_idle"
    }
  ],
  "web_accessible_resources": [
    {
      "resources": ["injected.js"],
      "matches": ["https://*.cloud.google.com/*"]  // Adjust this URL pattern as needed
    }
  ]
}

// content.js
(function() {
  function isJupyterLabPage() {
    return document.querySelector('#jupyterlab-main') !== null;
  }

  function injectCustomScript() {
    const script = document.createElement('script');
    script.src = chrome.runtime.getURL('injected.js');
    (document.head || document.documentElement).appendChild(script);
  }

  if (isJupyterLabPage()) {
    injectCustomScript();
  }
})();

// injected.js
(function() {
  console.log('Custom JupyterLab script injected!');

  function addCustomButton() {
    const toolbar = document.querySelector('.jp-Toolbar-item');
    if (toolbar) {
      const button = document.createElement('button');
      button.textContent = 'Custom Action';
      button.onclick = () => alert('Custom action performed!');
      toolbar.appendChild(button);
    }
  }

  const checkInterval = setInterval(() => {
    if (document.querySelector('.jp-Toolbar-item')) {
      clearInterval(checkInterval);
      addCustomButton();
    }
  }, 1000);
})();```

[jtpio]

@MRYingLEE there isn't a way to do this at the moment in JupyterLab.

However I think there is an issue in the JupyterLab repo tracking this, so extensions could more easily be added dynamically. Maybe something along the lines of https://github.com/jupyterlab/jupyterlab-plugin-playground could be a good starting point.

[MRYingLEE]

@jtpio Thanks for the sharing.

This topic is worth being discussed further.

In big companies no one really uses Jupyterlab extensions because real end users have no rights to install them while the IT department declines to provide customized Jupyterlab services.