I'm using a tampermonkey/Greasemonkey script to add my own userscripts to a webpage, and I am looking to add an extra tab to a settings page. The tabs are originally constructed using jQuery UI tabs (on pageload). The problem I'm having is that when I try and call the same tabs functions on my own to easily add tabs, they don't seem to work. In fact, they seem to do nothing at all, without throwing any errors.
This seems to be all of the relevant code to establish tabs (with the classes established in a separate CSS file.
<script>
$(function() {
$("#optionTabs").tabs();
$("#optionTabs").tabs('select', 0);
$("#optionTabs").css("display", "block");
});
</script>
<div id="optionTabs" style="display: block;" class="ui-tabs">
<ul class="ui-tabs-nav">
<li class="ui-state-default ui-tabs-selected">
<a href="#optionTabs-1">Gameplay</a>
</li>
<li class="ui-state-default">
<a href="#optionTabs-2">User Interface</a>
</li>
<li class="ui-state-default">
<a href="#optionTabs-3">NEW TAB</a>
</li>
</ul>
<div id= "optionTabs-1" class="ui-tabs-panel">
content
</div>
<div id= "optionTabs-2" class="ui-tabs-panel ui-tabs-hide">
some content
</div>
<div id= "optionTabs-3" class="ui-tabs-panel ui-tabs-hide">
MY CONTENT
</div>
</div>
I've tried to use the following code, to no success:
$('div #optionTabs ul').append('<li class="ui-state-default"><a href="#optionTabs-3">NEW TAB</a></li>')
$('div #optionTabs').append('<div id="optionTabs-3" class="ui-tabs-panel ui-tabs-hide">MY CONTENT</div>')
$('#optionTabs').tabs('refresh')
The first two lines work just fine; the div and ul adds properly, and I can see it in the HTML. However, I can't actually click on the tab and have it work. I have since come up with a workaround which works, but I feel that there are simpler and more efficient ways to do what I am doing (ignoring the obvious reduction of jquery selectors):
$('[href = "#optionTabs-3"]').parent().on('click', function(){
$('div [id*="optionTabs-"]').not('#optionTabs-3').attr('class', 'ui-tabs-panel ui-tabs-hide'); //hide current page
$('#optionTabs-3').attr('class', 'ui-tabs-panel'); //display my content
$('[class*="ui-state-default ui-tabs-selected"').attr('class','ui-state-default'); //make current active tab normal
$('[href="#optionTabs-3"]').parent().attr('class', 'ui-state-default ui-tabs-selected'); //make my tab look active
})
$('[href *="optionTabs-"').not('#optionTabs-3').on('click', function(){
$('#optionTabs-3').attr('class', 'ui-tabs-panel ui-tabs-hide');
$('[href="#optionTabs-3"]').parent().attr('class', 'ui-state-default'); //make my tab look INactive
})
Again, though this works, I don't know why the simpler methods that I've seen working (ie. appending some content and refreshing tabs instead of defining my own event handlers) don't work here. I think that it may have something to do with sandboxing from Tampermonkey/Greasemonkey, but I don't know for sure. Could someone please enlighten me?
EDIT: I think that if I try to use unsafeWindow, I might be able to get this to work, though I don't want to for a variety of reasons, first and foremost being security.
