我将Chrome扩展程序移植到Firefox,并且我正在测试Nightly 51a ..版本。
当我点击弹出选项图标时,它会打开并显示滚动条,半秒后它们就会消失。
如何解决这个问题?
目前我已经在optins弹出窗口的顶部给出了一个超链接,这个代码在点击时会在新选项卡中打开全视图html,这很好用:
<a style="font-size:1.5em;" href="options.html" target="_blank">Open Full Window</a>
答案 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),上面的代码如下所示: