kiến thức Tổng hợp những addon chất cho Firefox / Chromium

Để ẩn hoàn toàn tab ngang (hợp lý vì tab dọc là đủ) thì dùng code này:
Code:
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/hide_tabs_toolbar.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

/* Hides tabs toolbar */
/* For OSX use hide_tabs_toolbar_osx.css instead */

/* Note, if you have either native titlebar or menubar enabled, then you don't really need this style.
 * In those cases you can just use: #TabsToolbar{ visibility: collapse !important }
 */

/* IMPORTANT */
/*
Get window_control_placeholder_support.css
Window controls will be all wrong without it
*/

:root[tabsintitlebar]{ --uc-toolbar-height: 40px; }
:root[tabsintitlebar][uidensity="compact"]{ --uc-toolbar-height: 32px }

#TabsToolbar{ visibility: collapse !important }

:root[sizemode="fullscreen"] #TabsToolbar > :is(#window-controls,.titlebar-buttonbox-container){
  visibility: visible !important;
  z-index: 2;
}

:root:not([inFullscreen]) #nav-bar{
  margin-top: calc(0px - var(--uc-toolbar-height,0px));
}

:root[tabsintitlebar] #toolbar-menubar[autohide="true"]{
  min-height: unset !important;
  height: var(--uc-toolbar-height,0px) !important;
  position: relative;
}

#toolbar-menubar[autohide="false"]{
  margin-bottom: var(--uc-toolbar-height,0px)
}

:root[tabsintitlebar] #toolbar-menubar[autohide="true"] #main-menubar{
  -moz-box-flex: 1; /* Fx < 112 compatibility */
  flex-grow: 1;
  -moz-box-align: stretch; /* Fx < 112 compatibility */
  align-items: stretch;
  background-color: var(--toolbar-bgcolor,--toolbar-non-lwt-bgcolor);
  background-clip: padding-box;
  border-right: 30px solid transparent;
  border-image: linear-gradient(to left, transparent, var(--toolbar-bgcolor,--toolbar-non-lwt-bgcolor) 30px) 20 / 30px
}

#toolbar-menubar:not([inactive]){ z-index: 2 }
#toolbar-menubar[autohide="true"][inactive] > #menubar-items {
  opacity: 0;
  pointer-events: none;
  margin-left: var(--uc-window-drag-space-pre,0px)
}

#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] #sidebar-header {
  visibility: collapse;
}
 
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/autohide_sidebar.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */
 
/* Show sidebar only when the cursor is over it  */
/* The border controlling sidebar width will be removed so you'll need to modify these values to change width */
 
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] {
  --uc-sidebar-width: 48px !important;
  --uc-sidebar-hover-width: 250px;
  --uc-autohide-sidebar-delay: 300ms; /* Wait 0.3s before hiding sidebar */
  position: relative;
  min-width: var(--uc-sidebar-width) !important;
  width: var(--uc-sidebar-width) !important;
  max-width: var(--uc-sidebar-width) !important;
  z-index:1;
}
 
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] > #sidebar-splitter {
  display: none
}
 
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] > #sidebar {
  transition: min-width 115ms linear var(--uc-autohide-sidebar-delay) !important;
  min-width: var(--uc-sidebar-width) !important;
  will-change: min-width;
}
 
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:hover > #sidebar{
  min-width: var(--uc-sidebar-hover-width) !important;
  transition-delay: 0ms !important
}
 
/* Add sidebar divider and give it background */
 
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] > #sidebar,
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] > #sidebar-header {
  background-color: var(--toolbar-bgcolor) !important;
/*  border-inline: 1px solid var(--sidebar-border-color) !important;*/
  border-inline: 1px solid var(--chrome-content-separator-color) !important;
  border-inline-width: 0px 1px;
}
#sidebar-box[positionend]{
  direction: rtl
}
#sidebar-box[positionend] > *{
  direction: ltr
}
 
#sidebar-box[positionend]:-moz-locale-dir(rtl){
  direction: ltr
}
#sidebar-box[positionend]:-moz-locale-dir(rtl) > *{
  direction: rtl
}
.
 
1685598397279.png

nhưng mà lại bị 1 vấn đề, 3 cái nút này xuất hiện ở đây, không nhấn cái menu 3 gạch được :(
 
View attachment 1869442
nhưng mà lại bị 1 vấn đề, 3 cái nút này xuất hiện ở đây, không nhấn cái menu 3 gạch được :(
Custom toolbar - bật title bar lên đỡ :doubt:
Chuẩn rồi đó, cái ẩn này để dùng khi bật Title Bar, còn nếu muốn không dùng Title Bar thì để mình code thử xem sao ? Khi nào ngâm cứu xong mình sẽ ping.

1685599453564.png

1685599431904.png
 
View attachment 1869442
nhưng mà lại bị 1 vấn đề, 3 cái nút này xuất hiện ở đây, không nhấn cái menu 3 gạch được :(
Code mới không bị che mất 3 gạch, hàng ngon bá xờ cháy :love:

Đã cập nhập lại bài Biến giao diện Sidebery thành ẩn/hiện giữ lại icon trang web y như Vertical Tab của Edge

userChrome.css

JavaScript:
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/hide_tabs_toolbar.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

/* Hides tabs toolbar */
/* For OSX use hide_tabs_toolbar_osx.css instead */

/* Note, if you have either native titlebar or menubar enabled, then you don't really need this style.
 * In those cases you can just use: #TabsToolbar{ visibility: collapse !important }
 */

/* IMPORTANT */
/*
Get window_control_placeholder_support.css
Window controls will be all wrong without it
*/

:root[tabsintitlebar]{ --uc-toolbar-height: 40px; }
:root[tabsintitlebar][uidensity="compact"]{ --uc-toolbar-height: 32px }

#TabsToolbar{ visibility: collapse !important }

:root[tabsintitlebar="true"] #nav-bar{
  padding-right: calc(138px + var(--window-drag-space-width,0px));
  padding-left: var(--window-drag-space-width,0px)
}

:root[sizemode="fullscreen"] #TabsToolbar > :is(#window-controls,.titlebar-buttonbox-container){
  visibility: visible !important;
  z-index: 2;
}

:root:not([inFullscreen]) #nav-bar{
  margin-top: calc(0px - var(--uc-toolbar-height,0px));
}

:root[tabsintitlebar] #toolbar-menubar[autohide="true"]{
  min-height: unset !important;
  height: var(--uc-toolbar-height,0px) !important;
  position: relative;
}

#toolbar-menubar[autohide="false"]{
  margin-bottom: var(--uc-toolbar-height,0px)
}

:root[tabsintitlebar] #toolbar-menubar[autohide="true"] #main-menubar{
  -moz-box-flex: 1; /* Fx < 112 compatibility */
  flex-grow: 1;
  -moz-box-align: stretch; /* Fx < 112 compatibility */
  align-items: stretch;
  background-color: var(--toolbar-bgcolor,--toolbar-non-lwt-bgcolor);
  background-clip: padding-box;
  border-right: 30px solid transparent;
  border-image: linear-gradient(to left, transparent, var(--toolbar-bgcolor,--toolbar-non-lwt-bgcolor) 30px) 20 / 30px
}

#toolbar-menubar:not([inactive]){ z-index: 2 }
#toolbar-menubar[autohide="true"][inactive] > #menubar-items {
  opacity: 0;
  pointer-events: none;
  margin-left: var(--uc-window-drag-space-pre,0px)
}

#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] #sidebar-header {
  visibility: collapse;
}
 
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/autohide_sidebar.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */
 
/* Show sidebar only when the cursor is over it  */
/* The border controlling sidebar width will be removed so you'll need to modify these values to change width */
 
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] {
  --uc-sidebar-width: 48px !important;
  --uc-sidebar-hover-width: 250px;
  --uc-autohide-sidebar-delay: 300ms; /* Wait 0.3s before hiding sidebar */
  position: relative;
  min-width: var(--uc-sidebar-width) !important;
  width: var(--uc-sidebar-width) !important;
  max-width: var(--uc-sidebar-width) !important;
  z-index:1;
}
 
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] > #sidebar-splitter {
  display: none
}
 
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] > #sidebar {
  transition: min-width 115ms linear var(--uc-autohide-sidebar-delay) !important;
  min-width: var(--uc-sidebar-width) !important;
  will-change: min-width;
}
 
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:hover > #sidebar{
  min-width: var(--uc-sidebar-hover-width) !important;
  transition-delay: 0ms !important
}
 
/* Add sidebar divider and give it background */
 
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] > #sidebar,
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] > #sidebar-header {
  background-color: var(--toolbar-bgcolor) !important;
/*  border-inline: 1px solid var(--sidebar-border-color) !important;*/
  border-inline: 1px solid var(--chrome-content-separator-color) !important;
  border-inline-width: 0px 1px;
}
#sidebar-box[positionend]{
  direction: rtl
}
#sidebar-box[positionend] > *{
  direction: ltr
}
 
#sidebar-box[positionend]:-moz-locale-dir(rtl){
  direction: ltr
}
#sidebar-box[positionend]:-moz-locale-dir(rtl) > *{
  direction: rtl
}

1685599909022.png
 
Last edited:
Code mới không bị che mất 3 gạch, hàng ngon bá xờ cháy :love:

Đã cập nhập lại bài Biến giao diện Sidebery thành ẩn/hiện giữ lại icon trang web y như Vertical Tab của Edge

userChrome.css

JavaScript:
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/hide_tabs_toolbar.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

/* Hides tabs toolbar */
/* For OSX use hide_tabs_toolbar_osx.css instead */

/* Note, if you have either native titlebar or menubar enabled, then you don't really need this style.
 * In those cases you can just use: #TabsToolbar{ visibility: collapse !important }
 */

/* IMPORTANT */
/*
Get window_control_placeholder_support.css
Window controls will be all wrong without it
*/

:root[tabsintitlebar]{ --uc-toolbar-height: 40px; }
:root[tabsintitlebar][uidensity="compact"]{ --uc-toolbar-height: 32px }

#TabsToolbar{ visibility: collapse !important }

:root[tabsintitlebar="true"] #nav-bar{
  padding-right: calc(138px + var(--window-drag-space-width,0px));
  padding-left: var(--window-drag-space-width,0px)
}

:root[sizemode="fullscreen"] #TabsToolbar > :is(#window-controls,.titlebar-buttonbox-container){
  visibility: visible !important;
  z-index: 2;
}

:root:not([inFullscreen]) #nav-bar{
  margin-top: calc(0px - var(--uc-toolbar-height,0px));
}

:root[tabsintitlebar] #toolbar-menubar[autohide="true"]{
  min-height: unset !important;
  height: var(--uc-toolbar-height,0px) !important;
  position: relative;
}

#toolbar-menubar[autohide="false"]{
  margin-bottom: var(--uc-toolbar-height,0px)
}

:root[tabsintitlebar] #toolbar-menubar[autohide="true"] #main-menubar{
  -moz-box-flex: 1; /* Fx < 112 compatibility */
  flex-grow: 1;
  -moz-box-align: stretch; /* Fx < 112 compatibility */
  align-items: stretch;
  background-color: var(--toolbar-bgcolor,--toolbar-non-lwt-bgcolor);
  background-clip: padding-box;
  border-right: 30px solid transparent;
  border-image: linear-gradient(to left, transparent, var(--toolbar-bgcolor,--toolbar-non-lwt-bgcolor) 30px) 20 / 30px
}

#toolbar-menubar:not([inactive]){ z-index: 2 }
#toolbar-menubar[autohide="true"][inactive] > #menubar-items {
  opacity: 0;
  pointer-events: none;
  margin-left: var(--uc-window-drag-space-pre,0px)
}

#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] #sidebar-header {
  visibility: collapse;
}
 
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/autohide_sidebar.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */
 
/* Show sidebar only when the cursor is over it  */
/* The border controlling sidebar width will be removed so you'll need to modify these values to change width */
 
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] {
  --uc-sidebar-width: 48px !important;
  --uc-sidebar-hover-width: 250px;
  --uc-autohide-sidebar-delay: 300ms; /* Wait 0.3s before hiding sidebar */
  position: relative;
  min-width: var(--uc-sidebar-width) !important;
  width: var(--uc-sidebar-width) !important;
  max-width: var(--uc-sidebar-width) !important;
  z-index:1;
}
 
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] > #sidebar-splitter {
  display: none
}
 
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] > #sidebar {
  transition: min-width 115ms linear var(--uc-autohide-sidebar-delay) !important;
  min-width: var(--uc-sidebar-width) !important;
  will-change: min-width;
}
 
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:hover > #sidebar{
  min-width: var(--uc-sidebar-hover-width) !important;
  transition-delay: 0ms !important
}
 
/* Add sidebar divider and give it background */
 
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] > #sidebar,
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] > #sidebar-header {
  background-color: var(--toolbar-bgcolor) !important;
/*  border-inline: 1px solid var(--sidebar-border-color) !important;*/
  border-inline: 1px solid var(--chrome-content-separator-color) !important;
  border-inline-width: 0px 1px;
}
#sidebar-box[positionend]{
  direction: rtl
}
#sidebar-box[positionend] > *{
  direction: ltr
}
 
#sidebar-box[positionend]:-moz-locale-dir(rtl){
  direction: ltr
}
#sidebar-box[positionend]:-moz-locale-dir(rtl) > *{
  direction: rtl
}

View attachment 1869469

Mình thì ẩn luôn 3 cái nút đó đi cho đỡ tốn chỗ. Minimize, Close bằng phím tắt. Maximize bằng phím tắt hoặc double click vào toolbar. Resize cửa sổ dùng FancyZones.

Sent from Nubia NX702J using vozFApp
 
Code mới không bị che mất 3 gạch, hàng ngon bá xờ cháy :love:

Đã cập nhập lại bài Biến giao diện Sidebery thành ẩn/hiện giữ lại icon trang web y như Vertical Tab của Edge

userChrome.css

JavaScript:
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/hide_tabs_toolbar.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

/* Hides tabs toolbar */
/* For OSX use hide_tabs_toolbar_osx.css instead */

/* Note, if you have either native titlebar or menubar enabled, then you don't really need this style.
 * In those cases you can just use: #TabsToolbar{ visibility: collapse !important }
 */

/* IMPORTANT */
/*
Get window_control_placeholder_support.css
Window controls will be all wrong without it
*/

:root[tabsintitlebar]{ --uc-toolbar-height: 40px; }
:root[tabsintitlebar][uidensity="compact"]{ --uc-toolbar-height: 32px }

#TabsToolbar{ visibility: collapse !important }

:root[tabsintitlebar="true"] #nav-bar{
  padding-right: calc(138px + var(--window-drag-space-width,0px));
  padding-left: var(--window-drag-space-width,0px)
}

:root[sizemode="fullscreen"] #TabsToolbar > :is(#window-controls,.titlebar-buttonbox-container){
  visibility: visible !important;
  z-index: 2;
}

:root:not([inFullscreen]) #nav-bar{
  margin-top: calc(0px - var(--uc-toolbar-height,0px));
}

:root[tabsintitlebar] #toolbar-menubar[autohide="true"]{
  min-height: unset !important;
  height: var(--uc-toolbar-height,0px) !important;
  position: relative;
}

#toolbar-menubar[autohide="false"]{
  margin-bottom: var(--uc-toolbar-height,0px)
}

:root[tabsintitlebar] #toolbar-menubar[autohide="true"] #main-menubar{
  -moz-box-flex: 1; /* Fx < 112 compatibility */
  flex-grow: 1;
  -moz-box-align: stretch; /* Fx < 112 compatibility */
  align-items: stretch;
  background-color: var(--toolbar-bgcolor,--toolbar-non-lwt-bgcolor);
  background-clip: padding-box;
  border-right: 30px solid transparent;
  border-image: linear-gradient(to left, transparent, var(--toolbar-bgcolor,--toolbar-non-lwt-bgcolor) 30px) 20 / 30px
}

#toolbar-menubar:not([inactive]){ z-index: 2 }
#toolbar-menubar[autohide="true"][inactive] > #menubar-items {
  opacity: 0;
  pointer-events: none;
  margin-left: var(--uc-window-drag-space-pre,0px)
}

#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] #sidebar-header {
  visibility: collapse;
}
 
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/autohide_sidebar.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */
 
/* Show sidebar only when the cursor is over it  */
/* The border controlling sidebar width will be removed so you'll need to modify these values to change width */
 
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] {
  --uc-sidebar-width: 48px !important;
  --uc-sidebar-hover-width: 250px;
  --uc-autohide-sidebar-delay: 300ms; /* Wait 0.3s before hiding sidebar */
  position: relative;
  min-width: var(--uc-sidebar-width) !important;
  width: var(--uc-sidebar-width) !important;
  max-width: var(--uc-sidebar-width) !important;
  z-index:1;
}
 
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] > #sidebar-splitter {
  display: none
}
 
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] > #sidebar {
  transition: min-width 115ms linear var(--uc-autohide-sidebar-delay) !important;
  min-width: var(--uc-sidebar-width) !important;
  will-change: min-width;
}
 
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:hover > #sidebar{
  min-width: var(--uc-sidebar-hover-width) !important;
  transition-delay: 0ms !important
}
 
/* Add sidebar divider and give it background */
 
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] > #sidebar,
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] > #sidebar-header {
  background-color: var(--toolbar-bgcolor) !important;
/*  border-inline: 1px solid var(--sidebar-border-color) !important;*/
  border-inline: 1px solid var(--chrome-content-separator-color) !important;
  border-inline-width: 0px 1px;
}
#sidebar-box[positionend]{
  direction: rtl
}
#sidebar-box[positionend] > *{
  direction: ltr
}
 
#sidebar-box[positionend]:-moz-locale-dir(rtl){
  direction: ltr
}
#sidebar-box[positionend]:-moz-locale-dir(rtl) > *{
  direction: rtl
}

View attachment 1869469
sao bác để bên trái được vậy, chỉ e với
AsBPJOY.png
 
Update tình hình là Twitch nó mới sửa cái gì đó nên ai xài phần mềm khác mà nó bắt được thì sẽ auto màn hình đen khi coi trên web, còn trên MPV xài streamlink hay MPV xài chay cũng chính thức tạch https://github.com/streamlink/streamlink/issues/5370. Hèn gì hôm qua còn coi được nay lại tạch giờ đợi tình hình xem sao =((
Cứ dùng đi bác, có hướng dẫn tải sub hết rồi, mở ra là thấy
Mình chỉ vào vai người đưa tin là khả năng lớn tác giả streamlink sẽ tìm ra cách vượt cạn nhé, mình thêm API header của Twitch lấy từ https://gql.twitch.tv/gql#origin=twilight trong Network của F12 và hậu quả tràn trề, mấy hôm nữa tác giả tìm ra cách tự động hóa thì không cần làm thủ công nữa, túng quá mình code EA cho nó tự lấy rồi điền vào là ok, tác giả EA vừa thêm tính năng dùng array cho Pre-Javascript nên có gì tận dụng, cơ mà cứ quan sát xem tình hình thế nào đã :love:

Phần này nhé: --twitch-api-header="Client-Integrity=v4.public.eyJjbxxxxxxxxxxxxxxxxxxxx" --twitch-api-header="X-Device-Id=C6Oxxxxxxxxxxxxxxxxxx"

Phải tự lấy bằng tay hoặc dùng EA lấy.

streamlink.exe "https://www.twitch.tv/okcode" 480p,best --title "{author} - {category} - {title}" --mux-subtitles --twitch-disable-ads --http-header Referer=https://www.twitch.tv --stream-segment-threads=5 --http-no-ssl-verify --twitch-api-header="Client-Integrity=v4.public.eyJjbxxxxxxxxxxxxxxxxxxxx" --twitch-api-header="X-Device-Id=C6Oxxxxxxxxxxxxxxxxxx" --player-no-close --player="D:\mpv\mpv.exe --ontop --keep-open --no-cache "

Video uncensored nà: https://streamable.com/wrvtiq

1685605267989.png
 
Last edited:
Có cách nào xem toàn màn hình, bỏ 2 cái dải trống 2 bên trên FF, Chrome, Edge không các bác? Nếu áp dụng được tự động cho 1 số trang nhất định thì càng tốt. Thanks.

1685609143617.png
 
Back
Top