Comments (4)
davidhs0
commented on August 16, 2024
1
Thanks for the link.
Done! I write here my solution.
The CSS style of your button is
#_54fa1e34-a0ad-4526-a81b-b06139adf332_-BAP {
--webextension-menupanel-image: url("moz-extension://96703920-ffc9-4688-ae58-704fcae7c631/icons/fork.svg");
--webextension-menupanel-image-light: url("moz-extension://96703920-ffc9-4688-ae58-704fcae7c631/icons/fork-dark.svg");
--webextension-menupanel-image-dark: url("moz-extension://96703920-ffc9-4688-ae58-704fcae7c631/icons/fork.svg");
--webextension-menupanel-image-2x: url("moz-extension://96703920-ffc9-4688-ae58-704fcae7c631/icons/fork.svg");
--webextension-menupanel-image-2x-light: url("moz-extension://96703920-ffc9-4688-ae58-704fcae7c631/icons/fork-dark.svg");
--webextension-menupanel-image-2x-dark: url("moz-extension://96703920-ffc9-4688-ae58-704fcae7c631/icons/fork.svg");
--webextension-toolbar-image: url("moz-extension://96703920-ffc9-4688-ae58-704fcae7c631/icons/fork.svg");
--webextension-toolbar-image-light: url("moz-extension://96703920-ffc9-4688-ae58-704fcae7c631/icons/fork-dark.svg");
--webextension-toolbar-image-dark: url("moz-extension://96703920-ffc9-4688-ae58-704fcae7c631/icons/fork.svg");
--webextension-toolbar-image-2x: url("moz-extension://96703920-ffc9-4688-ae58-704fcae7c631/icons/fork.svg");
--webextension-toolbar-image-2x-light: url("moz-extension://96703920-ffc9-4688-ae58-704fcae7c631/icons/fork-dark.svg");
--webextension-toolbar-image-2x-dark: url("moz-extension://96703920-ffc9-4688-ae58-704fcae7c631/icons/fork.svg");
}
Notes:
- I do not know if the id 54fa1e34-a0ad-4526-a81b-b06139adf332-BAP is always this or only in my case.
- --webextension-menupanel-image* set the icons show in list of extensions. These must be not modify.
- --webextension-toolbar-image* set the icons show in toolbar.
I add the code in userChrome.css (path: C:/Users/my-user/AppData/Roaming/Mozilla/Firefox/Profiles/my-profile/chrome/) and my_icon.png in the folder chrome. I do not know why, but if I write relative path this do not work: url("my_icon.png"), or url("./my_icon.png"), so I must write the absolute path: url("file:///C:/Users/my-user/AppData/Roaming/Mozilla/Firefox/Profiles/my-profile/chrome/my_icon.png").
The code is
#_54fa1e34-a0ad-4526-a81b-b06139adf332_-BAP {
--webextension-toolbar-image: url("file:///C:/Users/my-user/AppData/Roaming/Mozilla/Firefox/Profiles/my-profile/chrome/my_icon.png") !important;
--webextension-toolbar-image-light: url("file:///C:/Users/my-user/AppData/Roaming/Mozilla/Firefox/Profiles/my-profile/chrome/my_icon.png") !important;
--webextension-toolbar-image-dark: url("file:///C:/Users/my-user/AppData/Roaming/Mozilla/Firefox/Profiles/my-profile/chrome/my_icon.png") !important;
--webextension-toolbar-image-2x: url("file:///C:/Users/my-user/AppData/Roaming/Mozilla/Firefox/Profiles/my-profile/chrome/my_icon.png") !important;
--webextension-toolbar-image-2x-light: url("file:///C:/Users/my-user/AppData/Roaming/Mozilla/Firefox/Profiles/my-profile/chrome/my_icon.png") !important;
--webextension-toolbar-image-2x-dark: url("file:///C:/Users/my-user/AppData/Roaming/Mozilla/Firefox/Profiles/my-profile/chrome/my_icon.png") !important;
}
from duplicate-tab.
Skeletonxf
commented on August 16, 2024
Hi, can you share a screenshot of what you mean? I'm not sure where "Firefox Home (Default)" and "Black Page" refers to.
from duplicate-tab.
davidhs0
commented on August 16, 2024
This is the basic interface of Firefox. In red square I mark the standard button ("+" icon) for add a new tab.
In this image, I moved the "new tab" button to toolbar (red square) and in settings I can modify the function of this button (green square), but I can not open a duplicate of current tab.
In my Firefox I installed some extensions and I used https://github.com/Aris-t2/CustomCSSforFx and https://github.com/B00ze64/FF-Menu-Icon-Plus-CSS in order to customize the theme. Now I have two "new tab" buttons (red square), the standard (with the icon of my theme) and the your (with your icon).
I want change the icon of your button by the "new tab" icon of my theme. Perhaps this is possible with files userChrome.css and userContent.css (how?) or you need modify your code.
from duplicate-tab.
Skeletonxf
commented on August 16, 2024
Hi, thanks for giving more detail. I think this is best suited to userChrome.css - I've had a quick look and I'm fairly confident it is possible to override browser extension icons (e.g https://www.reddit.com/r/FirefoxCSS/comments/ny6w3n/replacing_extension_icon/).
from duplicate-tab.
Related Issues (20)
- Default shortcut doesn't seem to work on Windows HOT 1
- Duplicate in container tabs HOT 1
- Keyboard shortcuts do not work in Firefox ESR (52.7.4) HOT 2
- Duplicate tab should follow the "browser.tabs.insertRelatedAfterCurrent" config setting HOT 9
- Can "Switch focus on duplicate" happen immediately? HOT 1
- [Feature] Duplicate & back? HOT 2
- Keyboard shortcuts overhaul plans for 2019 HOT 1
- Feature request HOT 4
- [Feature] Key to duplicate as private HOT 5
- [Feature] Move tab to new window HOT 3
- Firefox 77+ supports setting the `active` property when duplicating the tab HOT 1
- Keyboard shortcut overhaul plans for 2020 HOT 1
- Duplicate Tab no longer working HOT 5
- Feature request: dark mode icon HOT 2
- Manifest version 3 update checklist HOT 3
- YouTube embedded videos not loading on duplicated tab HOT 2
- unable to reviewe perms HOT 5
- Unable to Place duplicated tabs directly after the original HOT 2
- Feature Suggestion - Duplicate Multiple Tabs HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from duplicate-tab.