Chrome extensions with gif in canvas

Hi,

I'm follow Shiffman incredible lessons on using P5js with chrome extensions.

In the example of the Canvas sketch with chrome extensions I followed, I wanted to do some more. Add gifs in the canvas overlaying the top layer of the browser viewing.

My attempt was unsuccessful.. The gif doesn't play..

So what did I do. I used this example to import gif in to p5js put it in my sketch.js as this:

console.log('sketch blah');

var s = function(sketch) {
var img; //declare image

sketch.setup = function() {
  document.body.style['userSelect'] = 'none';
  let h = document.body.clientHeight;
  let c = sketch.createCanvas(sketch.windowWidth, h);
  img = sketch.loadImage("https://" + "media.giphy.com/media/xUOxfnlpG1tsYGFI40/giphy.gif");
  c.position(0,0);
  c.style('pointer-events', 'none');
  sketch.clear();
}

sketch.draw = function() {
  console.log('sketch Looping');
  sketch.image(img, 0, 0);
  //sketch.background(0);
  }
};

var myp5 = new p5(s);

My manifest.json looks like this.

  {
    "manifest_version": 2,
    "name": "Agent Extension",
    "version": "0.0002",
    "web_accessible_resources": [
      "gif/*.gif"
    ],
    "content_scripts": [
      {
        "matches": [
            "<all_urls>"
        ],
        "js": ["p5.js","p5.dom.js","p5.gif.js","p5.gif.min.js", "sketch.js"]

      }
    ],
    "background": {
      "scripts": ["background.js"]
    },
    "browser_action": {
      "default_icon": "img.png"
    }
  }

all the files are in the wright place.

I get this error in the browsers console

sketch.js:18 Uncaught ReferenceError: image is not defined
    at sketch.draw (sketch.js:18)
    at p5.redraw (p5.js:50266)
    at p5.<anonymous> (p5.js:44917)
    at p5.<anonymous> (p5.js:44812)
sketch.draw @ sketch.js:18
p5.redraw @ p5.js:50266
(anonymous) @ p5.js:44917
(anonymous) @ p5.js:44812

I did define it, my guess it is not defined for the browsers standards

I want to have a few 'objects' on the canvas and other types of code taking over the content as end goal.

Answers

Sign In or Register to comment.