A new tab made with Svelte
選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。
 
 
 
 
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

dark preview light preview

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

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

Firefox-based browsers

  1. Download the source code by cloning this repository or download and extract the .zip file above.
  2. Go to the debugging page. Example: about:debugging#/runtime/this-firefox
  3. Click the Load tempotary add-on button.
  4. Select a random file from the source code folder you justs downloaded from step 1.
  5. That's it! Blur will not work tho.
  6. 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.