Chrome Browser Action Set Icon With PixiJS Sprite

[Nashawnch]

I am attempting to set a PixiJS animated sprite as a chrome browser extension icon, but running into quite a few issues.

Setting the app.view or app.stage as image data returns this error:

Quote

The imageData property must contain an ImageData object or dictionary of ImageData objects

I attempted to use new PIXI.CanvasExtract and new PIXI.CanvasRenderer to extract the pixels but they are now deprecated?

Quote

'CanvasExtract' is not exported from 'pixi.js'

Is there any insight on how I can get this to work? I can get the sprite to render as a normal react component, but not as the browser extension icon.

Here is my code snippet

componentDidMount() {
  const app = new PIXI.Application({ backgroundColor: 0x1099bb, height: 16, width: 16})
  
  const logo = PIXI.Sprite.from('/logo_16.png');
  app.stage.addChild(logo);

  chrome.browserAction.setIcon({imageData: app.view});
 }

 

[ivan.popelyshev]

`renderer.extract.canvas(myContainer)` probably. Bear in mind that size of image is determined based on your container/sprite/whatever. If you want image taken from main canvas framebuffer - its tricky and there's no guarantee you'll get it. You'll get a canvas with pixels , you can call getImageData from it.  You can also debug how it works and remove one of last step - it actually computes ImageData that it puts into canvas, and then you can take getImageData from it again

This thing is really a shortcut for several huge function calls and any of them can break for your case. We are working on this for years and still didnt clean up all the bugs. Knowledge of Image,canvas2d and webgl (readPixels!) api's helps to debug it.

Edited December 19, 2020 by ivan.popelyshev

[Nashawnch]

I am relatively new to interacting with WebGL, so this is all a learning opportunity for me.

'Renderer' is a component of Pixi.Application correct? When I pass in 'myContainer' into the canvas function it still returns the same error

Quote

The imageData property must contain an ImageData object or dictionary of ImageData objects

Should I be looking to add a sprite as a child to its own pixi.app, then pass that app.view into a canvas function? Like so

const app = new PIXI.Application({ backgroundColor: 0x1099bb, height: 16, width: 16 });
const app2 = new PIXI.Application();
const logo = PIXI.Sprite.from('/logo_16.png');
app2.stage.addChild( logo )
chrome.browserAction.setIcon({imageData: app.renderer.plugins.extract.canvas(app2.view)});

This is also returning another error

Quote

TypeError: e.getLocalBounds is not a function

Which I've seen others are experiencing something similar.

https://github.com/tleunen/pixi-multistyle-text/issues/101

[ivan.popelyshev]

ok, now you really need someone to just make it work for you. I post it in slack

[Nashawnch]

I'm sorry, which slack ?

[ivan.popelyshev]

No one answered. Hm. There's pixijs slack by invites

Your issue is like 10 minutes for experienced pixi coder. I just dont want to answer on everything

Edited December 25, 2020 by ivan.popelyshev

[ivan.popelyshev]

Please make a minimal demo (jsfiddle, codesandbox, whatever) - then it'll be 5 minutes and that will increase probability that someone will help you.

[Nashawnch]

The 'chrome' namespace I've referenced in the code snippet is only visible to extension code, and I'm not sure I can access it to properly test some of its method functionality within an online environment like codesandbox. Here details the flow of getting extension code running:

https://developer.chrome.com/docs/extensions/mv3/getstarted/

Heres my attempt:

https://codesandbox.io/s/xenodochial-hugle-r5qo9?file=/src/App.js