Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/antonlydike/new-tab
A simple but feature-rich new tab replacement for chrome(ium).
https://github.com/antonlydike/new-tab
Last synced: about 1 month ago
JSON representation
A simple but feature-rich new tab replacement for chrome(ium).
- Host: GitHub
- URL: https://github.com/antonlydike/new-tab
- Owner: AntonLydike
- License: mit
- Created: 2018-04-10T20:58:09.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2018-04-12T09:07:46.000Z (almost 7 years ago)
- Last Synced: 2024-10-30T11:49:37.565Z (3 months ago)
- Language: JavaScript
- Size: 1.09 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# New-Tab
A simple but feature-rich new tab replacement for chrome(ium).
## features
A quick overview over features that I plan on adding to this extension.
- [x] Clock
- [x] Search bar
- [x] Favorites
- [x] Weather
- [ ] Settings
- [ ] Bookmarks
- [ ] Notepad
- [ ] Wallpaper
## Explanation of requirements
- `Favorites`: I want to display your favorite sites (their root urls get leaked to Googles favicon service ([heres a tutorial on that](https://www.labnol.org/internet/get-favicon-image-of-websites-with-google/4404/))
- `Bookmarks`: I want to display bookmarks. Their root urls get leaked too (hopefully I'll find a fix for that, PR's welcome)
- `Geolocation`: Used for the weather api, leaked to [OpenWeatherMap.org](https://openweathermap.org)
- `Storage`: Because I want to store your settings in chromes synced storage (across devices)
## Dependencies
This Package uses the [Materializecss](https://materializecss.com) Library, which in turn depends on jQuery (sadly).
Other than that, I embedded the Roboto font and Googles Icon font.
I use the following APIs
- [OpenWeatherMap.org](https://openweathermap.org) for weather
- Googles Icon service (https://www.google.com/s2/favicons?domain=www.domain.com)
## Project Design
I separated each "widget" into a separate, stand-alone file, only exposing a ES6 Class Interface outward.
My stiling can be found in the style.css [starting at this line](/src/css/style.css#L40).
### DigitalClock
[Code](/src/js/clock.js)
Usage:
````js
const node = document.querySelector('.clock-container');
const clock = new DigitalClock(node, {
interval: 1000, // update every second
enabled: true
})
````
Where `node` points to a HTML structure like this:
````html
````
### SearchBar
[Code](/src/js/search-bar.js)
Usage:
````js
const node = document.querySelector('.search-bar');
const searchbar = new SearchBar(node, {
enabled: true,
engine: "DuckDuckGo",
query: "https://duckduckgo.com/?q=%s",
logo: "https://duckduckgo.com/assets/logo_homepage.normal.v107.svg"
})
````
Where `node` points to a HTML structure like this:
````html
![]()
Search the web!
````
Settings:
- `enabled: `: if false, `node` will be hidden.
- `engine: `: A String identifying the search engine, may be displayed.
- `query: `: The URL which will be opened, `%s` will be replaced by the search term.
- `logo: `: URL to the logo of the search engine.
### FavoriteSites
[Code](/src/js/favorite-sites.js)
Usage:
````js
const node = document.querySelector('.favorites-list');
const favorites = new FavoriteSites(node, {
enabled: true,
list: [{title: "Amazon", url: "https://amazon.com"}]
})
````
Where `node` points to an (empty) HTML node.
Settings:
- `enabled: `: if false, `node` will be hidden.
- `list: [{title: , url: }]`: A list containing the favorite sites (`title` and `url`).
Each item in the list will have this structure:
````html
{{title}}
````
### OpenWeatherWidget
[Code](/src/js/weather.js)
Usage:
````js
const node = document.querySelector('.weather-container');
const weather = new OpenWeatherWidget(node, {
apikey: '',
enabled: true,
interval: 60 * 10, // every ten minutes
location: {
lat: '48.363722',
lon: '10.886076'
}
})
````
Where `node` points to an (empty) HTML node.
Settings:
- `enabled: `: if false, `node` will be hidden.
- `apikey: `: Your OpenWeatherMap API-Key.
- `interval: `: How often (minutes) the API will be polled for new data.
- `location: {lat: , lon: }`: Latitude and longitude of desired location.