在firefox webextension中从Chrome移植的选项弹出窗口中没有滚动条

时间:2016-08-20 12:25:33

标签: firefox-webextensions

我将Chrome扩展程序移植到Firefox,并且我正在测试Nightly 51a ..版本。

当我点击弹出选项图标时,它会打开并显示滚动条,半秒后它们就会消失。

如何解决这个问题?

目前我已经在optins弹出窗口的顶部给出了一个超链接,这个代码在点击时会在新选项卡中打开全视图html,这很好用:

<a style="font-size:1.5em;" href="options.html" target="_blank">Open Full Window</a>

enter image description here

1 个答案:

答案 0 :(得分:0)

目前,为browser_action显示的弹出窗口设置为最大800x600像素(至少在我的测试中)。但是,您的内容将以更大的尺寸呈现,同时滚动条未向用户显示(根本不会呈现,或者位于视图外部的面板中提供的文档)。

有多种方法可以解决这个问题。但是,我找不到一个没有为height指定明确的width<body>,或者找不到所有的<div>的子元素内容)。有几种方法显示了滚动条,但是它们被禁用了。

让滚动条显示的最简单方法是从以下位置更改HTML:

<body>

为:

<body style="height:580px;width:800px;">

显然,您也可以在CSS( banks / options.css )中更改此设置。从:

body{
    min-width:500px;
    min-height: 500px;
}

要:

body{
    height: 580px;
    width: 800px;
    min-width: 500px;
    min-height: 500px;
}

但是,这些都不允许面板显示不同的尺寸(例如,在其他尺寸的屏幕上,或者如果Firefox改变它正在做的事情)。

因此,我首选的解决方案是使用JavaScript。在 options.js 中添加如下内容:

function setBodyHeightWidth(){
    let width=window.innerWidth;
    let height=window.innerHeight;
    height -= 20; //Adjust for Save button and horizontal scroll bar
    //document.body.style.width=width; //Does not work
    //document.body.style.height=height; //Does not work
    document.body.setAttribute('style','height:' + height + 'px;width:' + width + 'px;');
}

function onDOMLoaded(){
    setBodyHeightWidth();
    //Anything else you need to do here.
}

document.addEventListener('DOMContentLoaded', onDOMLoaded);

使用扩展程序代码的显着修剪版本(即我删除了所有JavaScript,以及大多数不可见的HTML),上面的代码如下所示:

Scrolling panel