CODEWITHSUNDEEP
javascriptcssfirefoxfirefox-addonfirefox-addon-sdk
Max Heiber
Max Heiber

Reputation: 15502

Change style of tab using add-on SDK

I'm trying to dynamically change the style of a tab using the add-on SDK. How can I do this?

Here's what I have tried:

I can access tab objects like this:

var tabs=require('sdk/tabs');
tabs.on('ready',function(tab){
  console.log('url is: '+tab.url); //-> url is http://www.google.com
  console.log('stlye is: '+tab.url); //-> style is null
});

But the style attribute is null and none of the following work:

tab.setAttribute('style','background-color:blue'); // the method doesn't exist
tab.style.backgroundColor='blue'; // type error because style is null
tab.style='background-color:blue'; // has no effect

So how can I change the style of a tab dynamically? Another thing I have tried is converting the tab to a XUL object using code from the docs:

var { modelFor } = require("sdk/model/core");
var { viewFor } = require("sdk/view/core");

var tabs = require("sdk/tabs");
var tab_utils = require("sdk/tabs/utils");

function mapHighLevelToLowLevel(tab) {
  // get the XUL tab that corresponds to this high-level tab
  var lowLevelTab = viewFor(tab);
  // now we can, for example, access the tab's content directly
  var browser = tab_utils.getBrowserForTab(lowLevelTab);
  console.log(browser.contentDocument.body.innerHTML);
  // get the high-level tab back from the XUL tab
  var highLevelTab = modelFor(lowLevelTab);
  console.log(highLevelTab.url);
}

tabs.on("ready", mapHighLevelToLowLevel);

But the code throws an error: Module 'sdk/model/core' is not found at resource://gre/modules/commonjs/sdk/model/core.js even though I followed the directions and created the core.js file. Also, I don't understand the what the curly braces are doing in the var { modelFor}= syntax.

Upvotes: 3

Views: 414

Answers (1)

Noitidart
Noitidart

Reputation: 37238

You need to access the xul tab element.

Try this:

var tabsLib = require("tabs/tab.js");
var tab = tabsLib.getTabForWindow(htmlWindow);
tab.style.color = 'red'; //makes the tab text red

pass htmlWindow as the topmost window of the html document. So like document.defaultView.top. document.defaultView is the window of the document

if that doesnt work then just get the browser window, this example gets the most recent browser window (keeep in mind there may be multiple browser windows open (browser window is a firefox window that has tabs, [and maybe popup windows- im not sure in sdk])

    const { getMostRecentBrowserWindow } = require('sdk/window/utils');
    var aDOMWindow = getMostRecentBrowserWindow();
    if (aDOMWindow.gBrowser && aDOMWindow.gBrowser.tabContainer) {
        var tabs = aDOMWindow.gBrowser.tabContainer.childNodes;
            for (var i=0; i<tabs.length; i++) {
                tabs[i].style.color = 'red'; //makes the tab text red;
           }
    }

Upvotes: 4

Related Questions