使用附加SDK更改选项卡的样式

Question

我正在尝试使用附加SDK来动态更改标签的样式。我该怎么办？

这是我尝试过的：

我可以访问这样的标签对象：

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
});

但是样式属性是null，并且没有以下工作：

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

因此，如何动态更改标签的样式？我尝试过的另一件事是使用code from the docs：

将选项卡转换为XUL对象。

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);

但是代码抛出错误：在资源：//gre/modules/commonjs/sdk/model/core.js上找不到模块'sdk / model / core'即使我按照指示创建了core.js文件。另外，我不理解var { modelFor}=语法中花括号的作用。

Answer 1

您需要访问xul选项卡元素。

尝试一下：

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

通过htmlWindow作为html文档的最上面的窗口。就像document.defaultView.top。 document.defaultView是window的document

如果不起作用，则仅获取浏览器窗口，此示例获取最新的浏览器窗口（请注意，可能会打开多个浏览器窗口（浏览器窗口是具有选项卡的Firefox窗口，[还有弹出窗口-im不确定是否在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;
           }
    }