如何修复 Firefox 扩展弹出窗口中显示的滚动条
Posted
技术标签:
【中文标题】如何修复 Firefox 扩展弹出窗口中显示的滚动条【英文标题】：How to fix scrollbars showing in Firefox extension popup 【发布时间】：2019-08-25 03:45:43 【问题描述】：我正在尝试将 Adblocker Genesis Plus 扩展从 Google Chrome 移植到 Firefox，但 popup.html 显示大滚动条（我通过 about:debugging 将其用作临时扩展）。如何让它看起来像在 Chrome 中的样子？
我尝试用 css 定义宽度和高度，但滚动条仍然存在。
这是popup.html（不是我的代码，这是从Chrome版本复制的）
<!DOCTYPE html>
<html id="uBO-popup-panel">
<head>
<meta name="viewport" content="width=470"> <meta charset="UTF-8"><!-- When showing as a tab in fennec, scale to full size (150px + 320px) -->
<meta charset="utf-8">
<link rel="stylesheet" href="css/common.css" type="text/css">
<link rel="stylesheet" href="css/popup.css" type="text/css">
<title>uBlock</title>
</head>
<body>
<a href="dashboard.html" target="_blank" id="gotoPrefs" data-i18n-tip="popupTipDashboard" data-tip-position="under"><span id="appname"> </span> <span id="version"> </span><span class="fa"></span></a>
<div id="panes">
<div class="tooltipContainer">
<p id="switch" data-i18n-tip="popupPowerSwitchInfo" data-tip-position="under"><span class="fa"></span></p>
<h2 id="dfToggler" data-i18n="popupBlockedRequestPrompt"> </h2>
<p class="statName">
<span data-i18n="popupBlockedOnThisPagePrompt"> </span> 
<span id="gotoPick" class="fa tool" data-i18n-tip="popupTipPicker"></span> 
<a href="logger-ui.html" class="fa tool enabled" data-i18n-tip="popupTipLog"></a>
</p>
<p class="statValue" id="page-blocked">?</p>
<div id="refresh" class="fa"></div>
<p class="statName">
<span data-i18n="popupBlockedSinceInstallPrompt"> </span>
</p>
<p class="statValue" id="total-blocked">?</p>
<h2 data-i18n="popupHitDomainCountPrompt"> </h2>
<p class="statValue" id="popupHitDomainCount"> </p>
<div id="extraTools">
<span id="no-popups" class="hnSwitch fa" data-i18n-tip="popupTipNoPopups"><span class="badge"></span><span></span></span>
<span id="no-large-media" class="hnSwitch fa" data-i18n-tip="popupTipNoLargeMedia"><span class="badge"></span><span></span></span>
<span id="no-cosmetic-filtering" class="hnSwitch fa" data-i18n-tip="popupTipNoCosmeticFiltering"><span class="badge"></span><span></span></span>
<span id="no-remote-fonts" class="hnSwitch fa" data-i18n-tip="popupTipNoRemoteFonts"><span class="badge"></span><span></span></span>
</div>
</div><!-- DO NOT REMOVE --><div class="tooltipContainer">
<div id="firewallContainer" class="minimized">
<div><span data-i18n="popupAnyRulePrompt"></span><span data-src="/" data-des="*" data-type="*" data-i18n-tip="popupTipGlobalRules" data-tip-position="under"> </span><span data-src="." data-des="*" data-type="*" data-i18n-tip="popupTipLocalRules" data-tip-position="under"> </span></div>
<div><span data-i18n="popupImageRulePrompt"></span><span data-src="/" data-des="*" data-type="image"> </span><span data-src="." data-des="*" data-type="image"> </span></div>
<div><span data-i18n="popup3pAnyRulePrompt"></span><span data-src="/" data-des="*" data-type="3p"> </span><span data-src="." data-des="*" data-type="3p"> </span></div>
<div><span data-i18n="popupInlineScriptRulePrompt"></span><span data-src="/" data-des="*" data-type="inline-script"> </span><span data-src="." data-des="*" data-type="inline-script"> </span></div>
<div><span data-i18n="popup1pScriptRulePrompt"></span><span data-src="/" data-des="*" data-type="1p-script"> </span><span data-src="." data-des="*" data-type="1p-script"> </span></div>
<div><span data-i18n="popup3pScriptRulePrompt"></span><span data-src="/" data-des="*" data-type="3p-script"> </span><span data-src="." data-des="*" data-type="3p-script"> </span></div>
<div><span data-i18n="popup3pFrameRulePrompt"></span><span data-src="/" data-des="*" data-type="3p-frame"> </span><span data-src="." data-des="*" data-type="3p-frame"> </span></div>
</div><div id="rulesetTools"><span id="saveRules" class="fa" data-i18n-tip="popupTipSaveRules" data-tip-position="under"></span><span id="revertRules" class="fa" data-i18n-tip="popupTipRevertRules" data-tip-position="under"></span></div>
</div>
</div>
<div id="templates" style="display: none">
<div><span></span><span data-src="/" data-des="" data-type="*"></span><span data-src="." data-des="" data-type="*"></span><span data-src="." data-des="" data-type="*"></span></div>
<div id="actionSelector"><span id="dynaAllow"></span><span id="dynaNoop"></span><span id="dynaBlock"></span></div>
<div id="hotspotTip"></div>
<div id="tooltip"></div>
</div>
<script src="lib/punycode.js"></script>
<script src="js/vapi-common.js"></script>
<script src="js/vapi-client.js"></script>
<script src="js/udom.js"></script>
<script src="js/i18n.js"></script>
<script src="js/popup.js"></script>
</body>
</html>
popup.css
body
background-color: white;
border: 0;
float: left;
margin: 0;
opacity: 1;
overflow: hidden;
padding: 0;
white-space: nowrap;
body.fullsize
overflow: auto;
body.mobile
overflow-y: auto;
/**
https://github.com/gorhill/uBlock/issues/83
.portrait = portrait mode = width is constrained = optimize layout accordingly.
*/
body.portrait
width: 100%;
h2
background-color: #eee;
border: 0;
color: #666;
cursor: pointer;
font-size: 100%;
font-weight: normal;
margin: 1em 0 0.8em 0;
padding: 0.2em;
text-align: center;
h2:nth-of-type(1)
margin-top: 0;
a
color: inherit;
text-decoration: none;
:focus
outline: 0;
#gotoPrefs
background-color: #444;
border: 0;
color: #bbb;
cursor: pointer;
display: block;
font-size: 85%;
line-height: 1.2;
margin: 0;
padding: calc(0.1em + 1px) 0;
position: relative;
text-align: center;
#version
font-size: 90%;
font-weight: normal;
#gotoPrefs > span:nth-of-type(3)
opacity: 0.5;
position: absolute;
top: 50%;
transform: translate(0, -50%);
body[dir="ltr"] #gotoPrefs > span:nth-of-type(3)
left: 3px;
body[dir="rtl"] #gotoPrefs > span:nth-of-type(3)
right: 3px;
body[dir="ltr"] #panes
direction: rtl;
body[dir="rtl"] #panes
direction: ltr;
body, #panes
text-align: right; /* this helps the popup render better at "intermediate" widths */
#panes > div
display: inline-block;
position: relative;
vertical-align: top;
body.portrait #panes > div
display: block;
width: 100%;
body[dir="ltr"] #panes > div
direction: ltr;
body[dir="rtl"] #panes > div
direction: rtl;
#panes > div:nth-of-type(2)
font-family: "Noto Sans", sans-serif;
overflow-y: auto;
overflow-x: hidden;
width: 24em;
/**
Scroll bar to the left.
*/
body[dir="ltr"] #panes > div:nth-of-type(2)
direction: rtl;
margin-right: 1px;
/**
Scroll bar to the right.
Firefox bug: when popup is rendered inside hamburger menu panel, Firefox is
unable to render the scroll bar to the left.
Maybe <https://bugzilla.mozilla.org/show_bug.cgi?id=1139306>?
*/
body[dir="rtl"] #panes > div:nth-of-type(2),
body.portrait[dir="ltr"] #panes > div:nth-of-type(2)
direction: ltr;
margin-left: 1px;
#panes:not(.dfEnabled) > div:nth-of-type(2)
display: none;
#panes > div:nth-of-type(1)
min-width: 11em;
padding: 0;
p
text-align: center;
white-space: nowrap;
.fa
font-size: 120%;
#switch
margin: 8px 0;
#switch .fa
color: #0046ff;
cursor: pointer;
font-size: 700%;
margin: 0;
#switch .fa:hover
opacity: 0.9;
body.off #switch .fa
color: #ccc;
#page-blocked
font-size: 1.25em;
.statName
color: #888;
font-size: 85%;
margin: 0.8em 0.2em 0.4em 0.2em;
text-align: center;
.statValue
margin: 0;
text-align: center;
.tool
color: #aaa;
cursor: pointer;
display: none;
unicode-bidi: embed;
.tool.enabled
display: inline;
.tool:hover
color: #444;
#extraTools
background-color: #eee;
border: 0;
color: #aaa;
margin: 0.8em 0 0 0;
padding: 4px 0;
text-align: center;
#extraTools > span
cursor: pointer;
font-size: 1.2em;
margin: 0 0.4em;
position: relative;
#extraTools > span > span.badge
color: #222;
bottom: -1px;
font: x-small sans-serif;
position: absolute;
body[dir="ltr"] #extraTools > span > span.badge
left: 100%;
body[dir="rtl"] #extraTools > span > span.badge
right: 100%;
#extraTools > span.on > span:last-of-type
color: #e00;
font-size: 1.1em;
left: 0;
position: absolute;
text-align: center;
top: 0;
width: 100%;
#extraTools > span.on > span:last-of-type:after
content: '\2715';
#extraTools > span:hover
color: #444;
#refresh
background-color: #ffe;
border: 1px solid #ddc;
border-radius: 4px;
color: #888;
cursor: pointer;
display: none;
font-size: 3.5em;
left: 4px;
line-height: 1;
padding: 4px 8px;
position: absolute;
right: 4px;
text-align: center;
body.dirty #refresh
display: block;
body.dirty #refresh:hover
color: black;
#tooltip
background-color: #ffffee;
border: 1px solid gray;
border-radius: 3px;
box-shadow: 1px 1px 3px gray;
box-sizing: border-box;
color: black;
cursor: pointer;
direction: ltr;
font: 12px sans-serif;
left: 5%;
line-height: 130%;
margin: 0.5em 0;
opacity: 0;
padding: 4px 6px;
pointer-events: none;
position: absolute;
text-align: center;
visibility: hidden;
white-space: pre-line;
width: 90%;
z-index: 100;
body[dir="rtl"] #tooltip
direction: rtl;
#tooltip.show
transition: opacity 0.15s 0.5s;
-webkit-transition: opacity 0.15s 0.5s;
visibility: visible;
opacity: 1;
#firewallContainer
border: 0;
font-size: 85%;
margin: 0;
padding: 0;
text-align: right;
#firewallContainer > div
background-color: #e6e6e6;
border: 0;
direction: ltr;
margin: 0;
padding: 0;
#firewallContainer > div:hover
background-color: #f0f0f0;
#firewallContainer > div:first-child ~ div:not([class])
display: none;
#firewallContainer.minimized > div.isSubDomain
display: none;
#firewallContainer > div > span
background-color: transparent;
border: none;
border-bottom: 1px solid white;
box-sizing: border-box;
-moz-box-sizing: border-box;
color: #000;
display: inline-block;
height: 1.9em;
line-height: 1.9em;
overflow: hidden;
position: relative;
vertical-align: top;
#firewallContainer > div:nth-of-type(1) > span:nth-of-type(1)
cursor: pointer;
#firewallContainer > div > span:nth-of-type(1)
padding-right: 2px;
position: relative;
text-overflow: ellipsis;
width: calc(100% - 4em);
#firewallContainer > div > span:nth-of-type(2)
display: none;
#firewallContainer > div > span:nth-of-type(1) ~ span
border-left: 1px solid white;
width: 4em;
#firewallContainer > div > span:nth-of-type(3),
#firewallContainer > div > span:nth-of-type(4)
color: #444;
text-align: center;
#firewallContainer > div > span:nth-of-type(4)
display: none;
#firewallContainer > div.isDomain > span:nth-of-type(1)
font-weight: bold;
#firewallContainer > div:nth-of-type(1) > span:nth-of-type(1):before
color: #aaa;
content: '\2012';
padding-right: 0.25em;
#firewallContainer.minimized > div:nth-of-type(1) > span:nth-of-type(1):before
content: '+';
#firewallContainer.minimized > div.isDomain > span:nth-of-type(3)
display: none;
#firewallContainer.minimized > div.isDomain > span:nth-of-type(4)
display: inline-block;
#firewallContainer > div > span[data-acount]:before,
#firewallContainer > div > span[data-bcount]:after
position: absolute;
#firewallContainer > div > span[data-acount]:before
left: 0.1em;
#firewallContainer > div > span[data-acount="1"]:before
content: '+';
#firewallContainer > div > span[data-acount="2"]:before
content: '++';
#firewallContainer > div > span[data-acount="3"]:before
content: '+++';
#firewallContainer > div > span[data-bcount]:after
right: 0.1em;
#firewallContainer > div > span[data-bcount="1"]:after
content: '\2212';
#firewallContainer > div > span[data-bcount="2"]:after
content: '\2212\2212';
#firewallContainer > div > span[data-bcount="3"]:after
content: '\2212\2212\2212';
body.advancedUser #firewallContainer > div > span:nth-of-type(1)
width: calc(100% - 8em);
body.advancedUser #firewallContainer > div > span:nth-of-type(2)
display: inline-block;
body.advancedUser #firewallContainer > div:first-child ~ div:not([class])
display: block;
body.advancedUser #firewallContainer > div > span:nth-of-type(1) ~ span
cursor: pointer;
/**
Small coloured label at the left of a row
*/
#firewallContainer > div.allowed > span:nth-of-type(1):before,
#firewallContainer > div.blocked > span:nth-of-type(1):before,
#firewallContainer.minimized > div.isDomain.totalAllowed > span:nth-of-type(1):before,
#firewallContainer.minimized > div.isDomain.totalBlocked > span:nth-of-type(1):before
box-sizing: border-box;
content: '';
display: inline-block;
height: 100%;
left: 0;
opacity: 0.4;
position: absolute;
width: 7px;
/**
Source for color-blind color scheme from https://github.com/WyohKnott:
https://github.com/chrisaljoudi/uBlock/issues/467#issuecomment-95177219
*/
#firewallContainer > div.allowed > span:nth-of-type(1):before,
#firewallContainer.minimized > div.isDomain.totalAllowed > span:nth-of-type(1):before
background-color: rgb(0, 160, 0);
#firewallContainer.colorBlind > div.allowed > span:nth-of-type(1):before,
#firewallContainer.colorBlind.minimized > div.isDomain.totalAllowed > span:nth-of-type(1):before
background-color: rgb(255, 194, 57);
#firewallContainer > div.blocked > span:nth-of-type(1):before,
#firewallContainer.minimized > div.isDomain.totalBlocked > span:nth-of-type(1):before
background-color: rgb(192, 0, 0);
#firewallContainer.colorBlind > div.blocked > span:nth-of-type(1):before,
#firewallContainer.colorBlind.minimized > div.isDomain.totalBlocked > span:nth-of-type(1):before
background-color: rgb(0, 19, 110);
#firewallContainer > div.allowed.blocked > span:nth-of-type(1):before,
#firewallContainer.minimized > div.isDomain.totalAllowed.totalBlocked > span:nth-of-type(1):before
background-color: rgb(192, 160, 0);
/* Rule cells */
body.advancedUser #firewallContainer > div > span.aRule
background-color: rgba(0, 160, 0, 0.3);
body.advancedUser #firewallContainer.colorBlind > div > span.aRule
background-color: rgba(255, 194, 57, 0.4);
body.advancedUser #firewallContainer > div > span.bRule
background-color: rgba(192, 0, 0, 0.3);
body.advancedUser #firewallContainer.colorBlind > div > span.bRule
background-color: rgba(0, 19, 110, 0.4);
body.advancedUser #firewallContainer > div > span.nRule
background-color: rgba(108, 108, 108, 0.3);
body.advancedUser #firewallContainer.colorBlind > div > span.nRule
background-color: rgba(96, 96, 96, 0.4);
body.advancedUser #firewallContainer > div > span.ownRule
color: white;
body.advancedUser #firewallContainer > div > span.aRule.ownRule
background-color: rgba(0, 160, 0, 1);
body.advancedUser #firewallContainer.colorBlind > div > span.aRule.ownRule
background-color: rgba(255, 194, 57, 1);
body.advancedUser #firewallContainer > div > span.bRule.ownRule
background-color: rgba(192, 0, 0, 1);
body.advancedUser #firewallContainer.colorBlind > div > span.bRule.ownRule
background-color: rgba(0, 19, 110, 1);
body.advancedUser #firewallContainer > div > span.nRule.ownRule
background-color: rgba(108, 108, 108, 1);
#actionSelector
bottom: 0;
left: 0;
position: absolute;
top: 0;
width: 4em;
z-index: 1;
#actionSelector > span
display: inline-block;
height: 100%;
opacity: 0.2;
#actionSelector > span:nth-of-type(1)
width: 33%;
#actionSelector > span:nth-of-type(2)
width: 33.5%;
#actionSelector > span:nth-of-type(3)
width: 33.5%;
#actionSelector > span:hover
opacity: 0.75;
#actionSelector > span:nth-of-type(1)
background-color: rgb(0, 160, 0);
#actionSelector.colorBlind > span:nth-of-type(1)
background-color: rgb(255, 194, 57);
#actionSelector > span:nth-of-type(2)
background-color: rgb(108, 108, 108);
#actionSelector > span:nth-of-type(3)
background-color: rgb(192, 0, 0);
#actionSelector.colorBlind > span:nth-of-type(3)
background-color: rgb(0, 19, 110);
#rulesetTools
background-color: transparent;
border: 0;
color: #888;
display: none;
left: 4px;
padding: 0;
position: fixed;
top: 4px;
#rulesetTools > span
background-color: #ffe;
border: 1px solid #ddc;
border-radius: 4px;
cursor: pointer;
display: inline-block;
font-size: 1.8em;
line-height: 1.0;
margin: 0;
margin-right: 0.1em;
padding: 0.2em 0.4em;
text-align: center;
width: 1em;
#firewallContainer.dirty ~ #rulesetTools
display: block;
#firewallContainer.dirty ~ #rulesetTools > span:hover
color: black;
这里是一些屏幕截图的链接（如果问题出在 popup.js 等其他地方，则为整个扩展）： https://drive.google.com/drive/folders/1R3niphX6HxgT-MdbhzsRswGXMEV2VSRl?usp=sharing 我希望 Firefox 弹出窗口看起来像 Chrome 弹出窗口。
【问题讨论】：
How to hide scrollbar in Firefox?的可能重复 【参考方案1】：我编辑了错误的 css 文件。隐藏滚动条的常规方法现在可以使用了！
【讨论】：
以上是关于如何修复 Firefox 扩展弹出窗口中显示的滚动条的主要内容，如果未能解决你的问题，请参考以下文章
YouTube iFrame 的 Fancybox/Fancyapp 滚动条——在 Firefox 中显示
使用 iframe 标签在 firefox 中显示 PDF 会导致弹出窗口