Bilibili-Evolved/install-tutorial.en-US.md
2019-06-16 11:38:39 +08:00

72 lines
4.9 KiB
Markdown

# Install tutorial
This tutorial will help you install Bilibili-Evolved in your browser.
## 1. Before install
Please check the compatibility information below to make sure your browser is compatible with Bilibili-Evolved.
> In short, Chrome, Edge (Chromium), Firefox and Safari are supported well. Most of the attention listed below won't affect functionalities. Doesn't support Edge (UWP).
### Chrome
- To use background blur effect ([backdrop-filter](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter)), you need enable it manually in `chrome://flags/#enable-experimental-web-platform-features`. (For Edge, change `chrome` to `edge`)
- Background blur effect may cause frame drops in animation.
- If your Chrome version is ≥ 73, and screen DPI/page zoom is larger than 100%, the background blur effect will display incorrectly. See [Chromium Issue #942910](https://bugs.chromium.org/p/chromium/issues/detail?id=942910) for more information.
### Edge (Chromium)
- Slider (`input[type='range']`) has a strange black bar.
- Background blur effect seems not working with videos. So `Background blur for video controls` will have no effect.
### Firefox
- The background blur effect is not supported, see [Bugzilla #1178765](https://bugzilla.mozilla.org/show_bug.cgi?id=1178765) for more information.
- There are some animation issues when using touch gestures. (Caused by CSS `transition`. Property value always transits from its initial value rather than current value)
### Safari
- Not tested in Safari. (I don't own a Mac)
### Edge (UWP) [**Stopped supporting**]
- Please use the browsers listed above. Or you can try [Chromium-based Edge](https://microsoftedgeinsider.com/).
In this tutorial, I'll use Chrome as an example:
![Chrome](images/original/chrome.en-US.png)
## 2. Get a user script manager
> If you already have one, skip this step.
Bilibili-Evolved is delivered as JavaScript code snippets, a user script manager is required to help you execute the code every time you visit bilibili and keep your personal settings.
Supported managers: [Tampermonkey](https://tampermonkey.net/), [Violentmonkey](https://violentmonkey.github.io/).
Choose the one you like and click the link to visit its homepage, or get it in your browser's extension store.
> You may know another manager called Greasemonkey, unfortunately, it's not supported.
e.g. Install Tampermonkey from Chrome Web Store
![Install from Chrome Web Store](images/original/tampermonkey.en-US.png)
## 3. Install
Having at least one user script manager installed, you can now select a version of Bilibili-Evolved to install. (Click the name to install)
| [Stable](https://github.com/the1812/Bilibili-Evolved/raw/master/bilibili-evolved.user.js) | [Preview](https://github.com/the1812/Bilibili-Evolved/raw/preview/bilibili-evolved.preview.user.js) | [Offline](https://github.com/the1812/Bilibili-Evolved/raw/master/bilibili-evolved.offline.user.js) | [Preview Offline](https://github.com/the1812/Bilibili-Evolved/raw/preview/bilibili-evolved.preview-offline.user.js) |
| ----------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- |
| Provides stable features, but not frequently updated. | New features got tested here, updated more frequently. | Inlined all dependencies to avoid GitHub server problems. | As the name says, Preview + Offline. |
> ⚠ Sometimes the breaking changes will cause old version not work at all, please update the script in time.
e.g. Install the Offline version
![Install Offline version](images/original/install-script.zh-CN.png)
## 4. Change the display language (Optional)
> Language should be automatically set to your browser's default language. If not, you can follow this step to change the display language.
Visit bilibili, there should be 2 icons (Add-ons and settings) on the left side of the page. Open settings by clicking the icon.
Assuming the current language is Simplified Chinese (default fallback language), unfold `工具` (tools) category and find `界面翻译` (UI translation).
Enable it and select a target language you want to see, then refresh the page.
e.g. Select English as the target language
![Open settings](images/original/settings-icon.en-US.png)
![Change settings](images/original/settings.en-US.png)
## 5. Enjoy
You are all set! Explore settings and add-ons to discover interesting features, and feel free to suggest a new feature or report a bug on my GitHub repo.