javascript - How can I access a jQueryUI slider via a script injected by my chrome extension? -

javascript - How can I access a jQueryUI slider via a script injected by my chrome extension? -

i've made chrome extension adds keyboard controls earbits radio

i'm trying create mouse wheel alter volume. i've bound mouse wheel event, can't access .slider() property in volume slider selector (i undefined not function). weird part can access fine developer console on webpage.

here manifest.json:

{ "name": "earbits keyboard controls", "version": "0.1", "description": "adds basic keyboard controls earbits radio", "permissions": [ "http://www.earbits.com/*" ], "content_scripts": [{ "matches": ["http://www.earbits.com/*"], "js": ["jquery.js", "jquery.mousewheel.js", "jquery-ui-1.10.4.custom.min.js", "controls.js"] }], "manifest_version": 2 }

and relevant bits of main script (the reason set bind in interval thought can't access property because loaded lazily):

var options = { keys: { space: 32, left: 37, right: 39, f: 70 }, volumeincrement: 5 } function setvolume(value) { var volslider = $('.volume-slider'); volslider.slider('value', value); volslider.slider('option', 'slide')(null, {value: volslider.slider('value')}); } function adjustvolume(delta) { var volslider = $('.volume-slider'); console.log(volslider.slider('value')); var value = math.min(math.max(volslider.slider('value') + delta, 0), 100);; setvolume(value); } $(window).load(function() { var bindvolumeinterval = setinterval(function() { if(typeof $('.volume-slider').slider != 'undefined') { $('#menu, #audio-controls').on('mousewheel', function(e) { e.preventdefault(); // console.log(e); if(parseint(e.deltay) > 0) { adjustvolume(options.volumeincrement); } else { adjustvolume(-options.volumeincrement); } }); clearinterval(bindvolumeinterval); console.log('volume-bind ok'); } else { console.log('volume-bind fail'); } }, 1000); });

from chrome documentation:

content scripts execute in special environment called isolated world. have access dom of page injected into, not javascript variables or functions created page. looks each content script if there no other javascript executing on page running on. same true in reverse: javascript running on page cannot phone call functions or access variables defined content scripts.

this security feature, way javascript code of webpage cannot mess functionality of extension, e.g. redefining standard dom methods. content script doesn't see properties added/overridden javascript running in web page.

of course, makes calling function in page's javascript code more complicated. content script loads own re-create of jquery - re-create knows nil web page did , consequently doesn't know element in question slider. communicating embedding page doesn't help either because don't command webpage in case.

the robust way run javascript code can talk page's javascript appears adding <script> tag:

function setvolume(value) { // sanitize parameter, create sure doesn't need escaping value = parseint(value, 10); var script = document.createelement("script"); script.async = false; script.textcontent = "(function() {" + "var value = " + value + ";" + "var volslider = $('.volume-slider');" + "volslider.slider('value', value);" + "volslider.slider('option', 'slide')(null, {value: volslider.slider('value')});" + "})()"; document.documentelement.appendchild(script); document.documentelement.removechild(script); }

this rather ugly approach, lengthy scripts - have set entire script string. if logic inject web page gets more complicated might want consider adding script file extension. have add together file web_accessible_resources , utilize url script source. no longer able pass parameters in changing source, can post messages outlined under communication embedding page instead (this improve approach anyway).

note async script can added page , removed, executed then. note don't need jquery in content script - jquery calls happen in web page , 1 has jquery loaded.

javascript jquery jquery-ui google-chrome-extension