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

Cái này là skin mình tự mod cho nó trong suốt gần như tất cả nút ở thanh công cụ, phù hợp khi chơi giao diện nền.

Tiện đây chia sẻ luôn giao diện trường phái Tab hạt lựu, bật userChrome.css trước nhé:

Code:
/* Example userChrome.css file */

/* Import your desired components first */

/*** Container Indicator To Bottom Of Tab ***/
/* Active tab color for container tabs will use container color */
#tabbrowser-tabs .tab-context-line {display: none;}

/* 1px container line */
#tabbrowser-tabs .tab-background {border-bottom: solid 2px var(--identity-icon-color) !important;}

/* 2px highlight line for active tab*/
#tabbrowser-tabs .tab-background[selected="true"]  {border-top: solid 2px var(--identity-icon-color, white) !important;}

/*  Clean and tight extensions menu */
#unified-extensions-panel #unified-extensions-view {
    width: 100% !important; /*  For firefox v115.x */
}

#unified-extensions-view{
    --uei-icon-size: 22px; /*  Change icon size */
    --firefoxcss-number-of-extensions-in-a-row: 3; /*  Increase to the number of icons you want in one row */
}

#unified-extensions-view .panel-header,
#unified-extensions-view .panel-header + toolbarseparator,
#unified-extensions-view .panel-subview-body + toolbarseparator,
#unified-extensions-view #unified-extensions-manage-extensions,
#unified-extensions-view .unified-extensions-item-menu-button.subviewbutton,
#unified-extensions-view .unified-extensions-item-action-button .unified-extensions-item-contents{
    display:none !important;
}

#unified-extensions-view .panel-subview-body {
    padding:4px !important;
}

#unified-extensions-view .unified-extensions-item .unified-extensions-item-icon,
#unified-extensions-view .unified-extensions-item .toolbarbutton-badge-stack {
    margin-inline-end: 0px !important;
}

#unified-extensions-view #overflowed-extensions-list,
#unified-extensions-view #unified-extensions-area,
#unified-extensions-view .unified-extensions-list {
    display: grid !important;
    grid-template-columns: repeat(var(--firefoxcss-number-of-extensions-in-a-row),auto);
    justify-items:left !important;
    align-items:left !important;
}

#unified-extensions-view .unified-extensions-list .unified-extensions-item,
#unified-extensions-view .unified-extensions-list{
     max-width: max-content;
}

#unified-extensions-view #unified-extensions-area {
    padding-bottom: 3px !important;
    border-bottom: 1px solid #aeaeae33 !important;
}

#unified-extensions-view .unified-extensions-list {
/*     border-top: 1px solid #aeaeae33 !important; */
}

#wrapper-edit-controls:is([place="palette"],
[place="panel"]) > #edit-controls, #wrapper-zoom-controls:is([place="palette"],
[place="panel"]) > #zoom-controls, :is(panelview, #widget-overflow-fixed-list) .toolbaritem-combined-buttons {
  margin: 0px !important;
}

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

/* This style makes findbar appear as floating box at the top-left of the content area.
 * If you want the findbar on right side instead then create a new pref
 * userchrome.floating-findbar-on-right.enabled and set it to true and restart Firefox
 *
 * Note that privacy.resistFingerprinting.letterboxing prevents this from working properly
 */

findbar{
  -moz-box-ordinal-group: 0; /* Fx <112 compatibility */
  order: -1;
  margin-bottom: -33px;
  position: relative;
  border-top: none !important;
  padding: 0 !important;
  transition: transform 82ms linear, opacity 82ms linear 32ms !important;
  background: none !important;
  pointer-events: none;
  z-index: 1;
  white-space: nowrap;
}

.findbar-container > .findbar-find-fast{
  padding: var(--toolbarbutton-inner-padding) 1px;
  margin: 0 !important;
}

findbar[hidden]{ transform: translateY(-30px);}

findbar > .findbar-container,
findbar > .close-icon{
  border: 1px solid var(--chrome-content-separator-color);
  border-width: 0 0 1px 0px;
  background-color: var(--lwt-accent-color) !important;
  background-image: linear-gradient(var(--toolbar-bgcolor),var(--toolbar-bgcolor)),var(--lwt-header-image,none);
  pointer-events: auto;
}

findbar > .findbar-container{
  border-bottom-right-radius: 4px;
  border-right-width: 1px;
  height: initial !important;
  margin-inline: 0px !important;
  overflow-inline: visible !important;
}

.findbar-find-status{
  display: flex;
  overflow: hidden;
  text-overflow: ellipsis;
  -moz-box-flex: 1; /* Fx <112 compatibility */
  flex-grow: 1;
}
 
.findbar-closebutton{
  margin: 0 !important;
  border-radius: 0 !important;
  padding: 5px !important;
  width: initial !important;
  -moz-box-ordinal-group: 0; /* Fx <112 compatibility */
  order: -1;
}
.findbar-closebutton > image{ padding: 3px }
.findbar-closebutton:hover > image{
  background: var(--toolbarbutton-hover-background) !important;
  border-radius: 4px
}
findbar > .findbar-container > hbox{ margin: 0 5px }
 
findbar::after{
  content:"";
  display: flex;
  -moz-box-flex: 100; /* Fx <112 compatibility */
  flex-grow: 100;
}

@supports -moz-bool-pref("userchrome.floating-findbar-on-right.enabled"){
  findbar{
    -moz-box-direction: reverse; /* Fx <112 compatibility */
    flex-direction: row-reverse;
  }
  findbar > .findbar-container{
    -moz-box-direction: reverse;
    flex-direction: row-reverse;
    border-inline-width: 1px 0px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 4px;
  }
  /*
  Move findbar so it isn't over the scrollbar
  Delete if you want findbar to begin from right window edge
  */
  findbar{
    margin-right: 16px;
    border-right: 1px solid var(--chrome-content-separator-color);
  }
}

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

.tab-content > :not(.tab-icon-stack){
  display: none
}
.tab-icon-image:not([src]){
  display: block !important;
}
.tab-icon-stack{
  margin-left: -1px!important;
}
.tab-icon-stack > *{ margin-inline: 0 !important; }
.tabbrowser-tab{
  flex-grow: 0 !important;
}

.tabbrowser-tab[fadein]{ min-width: calc(16px + 2 * 10px + 4px) !important; }
:root[uidensity="compact"] .tabbrowser-tab[fadein]{
  min-width: calc(16px + 2 * var(--inline-tab-padding,0px) + 4px) !important;
}
:root:not([uidensity="compact"]) .tab-content{ padding-inline: 10px !important; }

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

/* Show tab close button when cursor is over the tab icon */

/* inline_tab_audio_icons.css is recommended because otherwise you cannot mute the tab using the mute button */

.tab-content{
  pointer-events: none
}
.tab-icon-image:not([busy]){ display: block !important; }
:where(.tab-content:hover) .tab-icon-image,
:where(.tab-content:hover) > .tab-icon-stack{
  visibility: hidden;
}
.tab-close-button{
  -moz-box-ordinal-group: 0; /* Firefox <112 compatibility */
  order: -1;
  display: flex !important;
  position: relative;
  margin-inline: -4px -20px !important;
  padding-inline-start: 7px !important;
  opacity: 0;
  width: unset !important;
  pointer-events: auto;
}
.tab-close-button:hover{ opacity: 1 }
.tabbrowser-tab[pinned] .tab-close-button{ display: none !important; }

/*TITLEBAR BUTTONS */

.titlebar-button {
  padding: 0px!important;
}

:root {
    --ext-theme-background-transition: unset!important;
}

/* Screen Flashing Fix */
#appcontent, #tabbrowser-tabbox, #browser {
  background: darkgray!important;
    opacity: 1!important;
}

/* Unloaded Tab Color */
.tabbrowser-tab:not([pending=true]):not([selected=true]) .tab-background {
    background: lightgreen!important;
    opacity: 0.4!important;
}

/* Unloaded Tab Color */
.tabbrowser-tab[selected=true] .tab-background {
    background: darkgreen!important;
    opacity: 0.4!important;
}

/* MISC */

#unified-extensions-button {
    color: red!important;
}

/* Center Bookmark Items */
#PlacesToolbarItems {
  display: flex !important;
  justify-content: center !important;
}
/* Hide Bookmark Labels */
#personal-bookmarks .bookmark-item > .toolbarbutton-text {
  display: none !important;
}

/*
:root{
  --toolbar-bgcolor: rgba(200,200,200,0.1) !important;
  --lwt-selected-tab-background-color: rgba(200,200,200,0.1) !important;
}
#TabsToolbar{ --toolbar-bgcolor: transparent }
*/


:root * {
    box-shadow: unset!important;
    border-radius: unset!important;
}

#TabsToolbar {
    margin-top: -6px!important;
    margin-bottom: -6px!important;
}

#TabsToolbar #firefox-view-button[open]:not(:focus-visible) > .toolbarbutton-icon:-moz-lwtheme, .tab-background[selected]:not([multiselected="true"]):-moz-lwtheme {
  outline: 0!important;
  outline-offset: 0!important;
}

/*
:root {
 --tab-min-height: 20px !important;
 --tab-max-height: 20px !important;
}
*/
/*
.tab-background:not([selected="true"]) {
  background: darkgrey!important;
}
*/
.titlebar-spacer {
  display: none!important;
}

.tab-throbber, .tab-icon-pending, .tab-icon-image:not([src]) {
  display: none!important;
}

#contentAreaContextMenu {
    margin-left: 2px!important;
}

/* ---Menu Bar height--- */
#toolbar-menubar {
  margin-top: 0px !important;
  margin-bottom: 0px !important;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  line-height: 22px !important;
  max-height: 22px !important;
}
/* Fixing toolbar buttons (close/min/max) due to shoretened Menu Bar height */
#toolbar-menubar .titlebar-button{ padding-block: 0px !important; }

#toolbox-notificationbox {
    display: none !important;
}

Tính năng:
Thanks fen nhé :love:
 
Làm cách nào để có dấu + tab ở vị trí như của bác vậy
1697531318970.png
 
Tác giả Floorp vừa cập nhập một tính năng cho thanh tab dọc (Vertical Tab) mà theo mình là đột phá, đó là khả năng dùng Customize... để di chuyển các nút, thanh địa chỉ, thanh tìm kiếm vào tab dọc.

Video không che:

1697532926783.png

1697532967615.png

Điều này giúp:
  • Nhái lại được Arc, một trình duyệt mà hiện tại rất khó nhái lại vì thanh tab dọc của họ quả mạnh và có thể đặt nút bấm
  • Chuyển tất cả mọi thứ sang đặt ở tab dọc, tắt sạch luôn thanh công cụ đi
  • Thay đổi vị trí nút New Tab lên trên, vì là tab dọc nên nhiều khi để nút New Tab bên trên mới tiện
 
Last edited:
Có ai bị vào voz nó cứ chậm chậm mãi mới load xong trang không, chỉ riêng voz, các trang khác vẫn bình thường :shame:
tắt ipv6 là vào nhanh lại nhé, không có chuyện voz bị lag :adore:
Same, chắc do tủ lạnh
Xác nhận giờ mới là nhanh lại nhé, tốc độ tế lên bàn thờ rồi :p

 
@toi la gay :sosad: ad chỉ e dùng HE để fake UA cho ff cũ(ver 80.x) dc k, e chưa biết làm sao với cái HE này để bypass cloudflare
Không nên dùng HE cho trường hợp này. Nếu là Firefox cũ fake thành Firefox mới thì about:config mới là lựa chọn số 1 vì:
  • Nó fake cả trình duyệt dùng API xịn chứ không như addon API phải tự code lấy
  • Nó bao được navigation object
  • Vì không fake thành Chrome/Edge không lo bị lỗi tương thích lớn

Cụ thể là sửa thành:
  • general.useragent.override => Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/115.0
Firefox ESR 105 Windows 10, sửa tùy ý.
 
@thienchien1306 Để hiểu sâu về fake UA, thì đây chính là ví dụ lõa lồ ra khi fake UA bằng HE chay.

Trang test:

Nhìn ảnh dưới nhận ra điều gì ?
  • UA là Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36 Edge/18.19582
  • appName là Netscape
  • appCodeName là Mozilla ?
  • product là Gecko ??

Vì kiểu fake nửa vời này nên sẽ 100% bị phía Cloudflare tụi nó chém.
Nếu muốn fake bằng HE phải kết hợp thêm Userscript có khả năng fake navigator object hay thêm vào trong tính năng Change response body mới đủ được.

1697539669104.png


Thiết lập:
1697539848316.png
 
Web với adblock chơi mèo bắt chuột thôi thằng google thay đổi thì bọn làm filter cũng update theo giờ ublock hay adguard vẫn bth mà
 
Đợi dev build bản beta là quất luôn cho nóng. Nhưng có vẻ chưa collapse được vertical tab bản mới thì phải, thấy dev bảo thế.
Ông dev buộc phải lược bỏ tính năng đi cho dễ sửa lỗi không đóng được tab lần trước, collapse dùng css được dễ thôi.
 
ts3qqN7.png

Ông dev ngày mai sẽ public bản beta có vertical tab mới
q67Gd9d.png
Đang háo hức xem thử có thể bỏ sạch thanh toolbar bên trên được không, kế hoạch hiện tại:
  • Di chuyển thanh địa chỉ, nút back, forward, reload sang Vertical tab
  • Nút addon các kiểu để autohide cho gọn
  • Bỏ hoàn toàn phần bên trên đi nghĩa là giao diện chuyển sang dọc hết kiểu này

1697549822573.png
 
Đang háo hức xem thử có thể bỏ sạch thanh toolbar bên trên được không, kế hoạch hiện tại:
  • Di chuyển thanh địa chỉ, nút back, forward, reload sang Vertical tab
  • Nút addon các kiểu để autohide cho gọn
  • Bỏ hoàn toàn phần bên trên đi nghĩa là giao diện chuyển sang dọc hết kiểu này

View attachment 2132347
Em cũng nghĩ để này nó bờ dồ, dễ dùng hơn.
 
Back
Top