https://github.com/jonaskuske/fluent-tab

💻 A New Tab page styled following Microsoft's Fluent Design
https://github.com/jonaskuske/fluent-tab

edge fluent fluent-design fluentdesign microsoft reveal uwp windows windows10

Last synced: 3 months ago
JSON representation

💻 A New Tab page styled following Microsoft's Fluent Design

• Host: GitHub
• URL: https://github.com/jonaskuske/fluent-tab
• Owner: jonaskuske
• License: mit
• Created: 2018-11-22T17:30:44.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2023-11-30T16:35:35.000Z (about 1 year ago)
• Last Synced: 2024-10-03T12:19:00.457Z (4 months ago)
• Topics: edge, fluent, fluent-design, fluentdesign, microsoft, reveal, uwp, windows, windows10
• Language: JavaScript
• Homepage: https://jonaskuske.github.io/fluent-tab
• Size: 3.29 MB
• Stars: 19
• Watchers: 2
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Fluent New Tab

A New Tab page designed following Microsoft's Fluent Design, with Reveal Effects and more.

![image](https://user-images.githubusercontent.com/30421456/157072440-8a84a472-1a02-41c1-aec7-174fe0e98dd0.png)

Meant as a replacement for the default "New Tab" experience in Microsoft Edge, for all the Fluent Design afiocionados out there 🎨







## Configuration

Configuration is currently handled through a CLI interface. To use it, open the DevTools and enter one of the following commands in the Tab "Console", then confirm by pressing Enter:

### `backgroundImage.choose()`:

Open a file picker, there you can select a custom image to be used as the background. Mustn't be larger than 2MB.

### `backgroundImage.reset()`:

Delete your custom image and use the default background image again.

### `siteConfig.addSite()`:

Add a new thumbnail for a given URL, which you can insert between the two parentheses. Needs to be quoted and a full valid URL including the protocol.  

E.g. `siteConfig.addSite("https://jonaskuske.com")` 🌐

### `siteConfig.removeSiteAtPosition()`:

Remove the site(s) at the given position(s), which you can insert between the parentheses, separated by commas.  

E.g. `siteConfig.removeSiteAtPosition(1)` will delete the first thumbnail and `siteConfig.removeSiteAtPosition(2,5,8)` will delete the 2nd, 5th and 8th site.

### `siteConfig.reset()`:

Undo thumbnail customizations and use the 8 default sites.



**A more robust configuration with an actual UI will follow once I have the time for it.**

   

 

### `_reset()`:

⚠ Clear all caches and reset everything. Only use this if you run into issues.