Why is window.open not working with Looker's Extension Framework?

Question

I am trying to use window.open in a javascript onclick function for a clickable embedded image. For some reason it is not working. I am trying to embed this into a Google Looker extension framework.

Edit: When I open the webpage on Looker Extension framework, nothing happens when the image is clicked. Ideally, I would like a page to be opened in a new tab when the image is clicked.

var img = new Image()
img.src =
'https://marketplace-api.looker.com/visualization-screenshots/report_table_icon.png'
img.onclick = function () {
   window.open('https://looker.com/', '_blank')
}
document.body.appendChild(img)

@ManasKhandelwal is that a question? or are you telling them it works fine? — evolutionxbox, Mar 24 '21 at 20:32
Please help us help you. _"The question should be updated to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem."_ — evolutionxbox, Mar 24 '21 at 20:34
I am assuming that it is a Looker issue then? And not a javascript issue? @ManasKhandelwal — Renee R, Mar 24 '21 at 20:35

score 1 · Answer 1 · answered Mar 25 '21 at 05:13

I'll preface this by saying that we are actively working on improved documentation for the extension framework, so sorry it's a bit opaque at the moment!

The extension framework is sandboxed, so it does not have access to some of the standard javascript APIs like window.open. To launch a new window, you instead use

extensionSDK.openBrowserWindow('https://looker.com/', '_blank')

Full example if it is helpful:


import React, { useContext } from 'react'
import { Space, ComponentsProvider, Text, Button } from '@looker/components'
import { ExtensionContext } from '@looker/extension-sdk-react'

export const HelloWorld = () => {

  const extensionContext = useContext(
    ExtensionContext
  )
  const { extensionSDK } = extensionContext

  const buttonClick = () => {
    extensionSDK.openBrowserWindow('https://google.com', '_blank')
  }

  return (
    <>
      <ComponentsProvider>
        <Space p="xxxxxlarge" width="100%" height="50vh" around>
          <Text p="xxxxxlarge" fontSize="xxxxxlarge">
            openBrowserWindow example
          </Text>
          <Button onClick={buttonClick}> click me </Button>
        </Space>
      </ComponentsProvider>
    </>
  )
}

Why is window.open not working with Looker's Extension Framework?

1 Answers1