javascript-使用附加SDK更改标签的样式

我正在尝试使用附加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
});

但是style属性为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);

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

谢谢你的帮助.

解决方法:

您需要访问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是文档的窗口

如果不起作用,则仅获取浏览器窗口,此示例将获取最新的浏览器窗口(请记住,可能会打开多个浏览器窗口(浏览器窗口是具有选项卡的Firefox窗口,[并且可能是弹出窗口,不确定在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;
           }
    }

标签：firefox,firefox-addon,firefox-addon-sdk,css,javascript
来源： https://codeday.me/bug/20191029/1959086.html