A new tab made with Svelte

VnPower 4d4acac072 iconW and iconH is now deprecated		4週間前
preview	[ImgBot] Optimize images	1ヶ月前
public	iconW and iconH is now deprecated	4週間前
scripts	svelte stuff	2ヶ月前
src	iconW and iconH is now deprecated	4週間前
.gitignore	create "Services" component	2ヶ月前
LICENSE	Create LICENSE	1ヶ月前
README.md	READMe update	1ヶ月前
manifest.json	firefox support	2ヶ月前
package-lock.json	drag and drop stuff	1ヶ月前
package.json	drag and drop stuff	1ヶ月前
rollup.config.js	moved compiled javascript down to `public`	2ヶ月前

README.md

BNT - Better New Tab

Preface

This is an add-on that was inspired by nightly (GitHub). The only purpose of this project is to make my new tab looks better.

Installation

This add-on should work on every Chrome-based browser. Firefox-based browsers also works but the blur.

Chrome-based browsers

Download the source code by cloning this repository or download and extract the .zip file above.
Go to your browser's extension page. Example: chrome://extensions/
Enable Developer Mode by toggling the switch on the top right.
Click the "Load unpacked" button on the top left.
Select the source code folder you just downloaded from step 1. (errors about manifest version are safe)
Enable the extension and disable any extension that may conflict with it.
That's it! Now try to open a new tab.

Firefox-based browsers

Download the source code by cloning this repository or download and extract the .zip file above.
Go to the debugging page. Example: about:debugging#/runtime/this-firefox
Click the Load tempotary add-on button.
Select a random file from the source code folder you justs downloaded from step 1.
That's it! Blur will not work tho.
You can try this guide to enable blur, although it does not work for me.

Configuration

Background images

If you are using local paths, then it could only be accessed if it is inside of this extension code directory/repository.

Example:

\ bnt
 \ public
  \ assets
  | dark.png # This is accessible (/public/assets/dark.png or ./assets/dark.png)
  | discord.png # This one too (/public/assets/discord.png or ./assets/light.png)
  | ...
  /
 | bundle.css # This file will try to access the image.
 | global.css
 | ...
 /
| example.png (/example.png or ../example.png)

This might be hard to understand :(

How it works

Newer versions of Svelte couldn't compile the code into pure Javascript (i guess), so I used the older version of Svelte.

here

I tried to use a JSON file as the configuration file, but the CORS policy seems not to like it (fetching only works for HTTP servers?), so I used local storage for storing your configurations.

Compiled code could be found at public/ directory.