Hi All,
Currently doing some browser testing for my extension video overlay, and am running into an issue with firefox, where certain functionality doesn’t work in firefox, only when the extension is run through twitch video player. Same for developer rig and firefox. Tested on firefox on win 7, win 10, maxos high sierra.
The extension works fine in Safari and Chrome. The extension also works fine when I run it locally from my computer by just opening the .html file in firefox. It’s only when it’s loaded in the twitch video player it doesn’t work. I’m testing this in hosted test.
The functionality in particular is a jquery $(id).click call that triggers parts of Tone.js audio library to create some sounds and trigger some animations on the extension ui. The click gets triggered, but the sound nor animations trigger, but if I add log statements within, those are triggered and displayed to console. No console errors during any of this either.
Has anyone experienced anything similar with firefox? Anyone have any suggestions on troubleshooting? I’ve tried numerous things short of rewriting some core functionality, just stripped down.
Thanks for your time!
So i’ve stripped down the code and the same issue remains:
const Tone = require('tone')
const $ = require('jquery');
Tone.Transport.start();
var synth = new Tone.Synth().toMaster();
var part = new Tone.Part(function(time, value){
//the value is an object which contains both the note and the velocity
synth.triggerAttackRelease(value.note, "8n", time, value.velocity);
}, [{"time" : 0, "note" : "C3", "velocity": 0.9},
{"time" : "0:2", "note" : "C4", "velocity": 0.5}
])
$(document).ready(function(){
part.loop = true;
part.start(0)
})
This code above will just continually play 2 notes over and over again.
To quickly use the code, I download jquery and Tone.js from npm, bundle the above js with browserify, add the bundle to an html file, load that onto twitch, load in chrome on live channel, the 2 notes play, load in firefox, no sound.
I though this might be caused by the iframe the extension is hosted in (don’t know much about iframes). I loaded the same code through an iframe on a local test and sound still played, so I don’t think its related to that.
Would anyone be able to try this code on their end and see if they have the same issues? I have no idea how to continue to troubleshoot.
You have checked for errors in the console of Firefox which might highlight the issue?
Yea no significant console messages. There are csp warnings, but based off research those are tied to the twitch js helper, I get similar warnings in chrome.
It seems to be tied to Tone.js callback functions (see tone.part above) or something. I’ve made a post on tone.js forums in case it’s related to that library, but it’s weird that this only happens in a live channel(or dev rig) on firefox.
You are loading everything using relative URLS and over https?
Check the network tab of console for http requests and/or response codes
Yea appears so, just checked, everything is https and urls, also no issues in network tab, all requests successful, no error codes. If you’re OK with it, I can add you to the tester list so you can take a look on a live channel, let me know!
Ok, one console csp message that may be relevant. Was comparing between chrome and firefox.
Firefox has a csp warning message related to iframes, which the extension is loaded in, thinking it is related, the message is:
Content Security Policy: Ignoring ‘x-frame-options’ because of ‘frame-ancestors’ directive.
I’m currently googling about csps and what not. Does anyone have any experience with content security policies interfering with their extensions, any troubleshooting tips or suggestions?
pogChamp breakthrough. I downloaded developer edition of firefox, disabled all content security policies, and it works! What the heck, lol.
Ok now to investigate csps and audio… ugh.