HSR-Ext

HSR-Ext is a powerful and intuitive browser extension that captures detailed information from the official website displaying your beloved game characters. It seamlessly copies the data at the precise moment when you are viewing your character. Users can later view the character information through the extension and conveniently download the data as a single file for further use. The format of the saved files is identical to the format described in the repository HSR-Scanner (https://github.com/kel-z/HSR-Scanner).

Important Notice

Currently, HSR-Ext only functions if the interface language on the game website is set to English. We plan to add support for other languages and missing sets in future updates. Please stay tuned for improvements!

Code Quality Notice

Note: The current codebase was developed hastily and may not adhere to best practices or maintainability standards. However, it is fully functional. We have plans to refactor and improve the code quality in future updates to make it more elegant and maintainable. Thank you for your understanding and patience.

Features

• Effortless Data Capture: Automatically captures character information from the official game website.
• Easy Access: View your character's details directly through the extension.
• Downloadable Data: Download the captured data as a single JSON file for further use.
• Cross-Browser Compatibility: Works seamlessly in both Chrome and Firefox.
• Identical Format: The saved files are formatted identically to the repository HSR-Scanner.

Installation

HSR-Ext can be installed from the respective browser stores:

• Chrome Web Store: Install HSR-Ext for Chrome
• Firefox Add-ons: Install HSR-Ext for Firefox

Usage

• Open the Official Game Website: Navigate to the page where your game character is displayed.
• View Your Character: As you view your character, the extension will automatically capture the data.
• Access Data Through Extension: Click on the extension icon to view the captured character information.
• Download Data: Use the download button in the extension to save the data as a JSON file.

Development

Prerequisites

• Node.js
• npm

Building the Project

1. Clone the repository:

git clone https://github.com/Vestrond/hsr-ext
cd hsr-ext

2. Install the dependencies:

npm install

3. Build the project:

npm run build

Directory Structure

HSR-Ext/
│
├── build/                  # Compiled extension files
│   ├── chrome/
│   └── firefox/
│
├── src/                    # Source files
│   ├── icons/
│   ├── popup/
│   ├── hsr-ext.js
│   └── ...
│
├── manifest/               # Manifest files
│   ├── manifest-chrome.json
│   └── manifest-firefox.json
│
├── build.js                # Build script
├── package.json
└── README.md

Build Script

The build script (build.js) automates the process of copying source files and the appropriate manifest to the build directory for each browser.

node build.js

Relic Hash Collection

If you need to collect hashes of relics from the current page, you can use the following script in the browser's console:

1. After the page loads, declare the hash calculation function in the console:

   async function getImageHash(src) {
       return new Promise((resolve, reject) => {
           const img = new Image();
           img.crossOrigin = 'anonymous';
           img.src = src;
   
           img.onload = async function() {
               const canvas = document.createElement('canvas');
               const context = canvas.getContext('2d');
               canvas.width = img.width;
               canvas.height = img.height;
               context.drawImage(img, 0, 0);
   
               try {
                   const imageData = context.getImageData(0, 0, img.width, img.height).data;
                   let bs = 0;
                   let ws = 0;
                   let ts = 0;
   
                   for (let i = 0; i < imageData.length; i += 4) {
                       const r = imageData[i];
                       const g = imageData[i + 1];
                       const b = imageData[i + 2];
                       const a = imageData[i + 3];
                       if (r === 0 && g === 0 && b === 0 && a === 255) {
                           bs += 1;
                       } else if (r === 255 && g === 255 && b === 255 && a === 255) {
                           ws += 1;
                       } else if (a === 0) {
                           ts += 1;
                       }
                   }
                   resolve(`${ws}.${bs}.${ts}`);
               } catch (e) {
                   reject(e);
               } finally {
                   context.clearRect(0, 0, canvas.width, canvas.height);
                   canvas.remove();
               }
           };
   
           img.onerror = reject;
       });
   }

2. Gather information from the required characters by opening the character page and running the following code in the console:

   Promise.all([...document.querySelectorAll(".c-hrdrs-btm .c-hrd-dcp-ref img")].map(
           (img) => getImageHash(img.attributes.getNamedItem('src').value))
   ).then(r => console.log('"' + r.join('",\n"') + '",' ))

   Result's order: Head, Hands, Body, Feet, Sphere, Rope.

Contributing

Contributions are welcome! Feel free to submit a pull request or open an issue to discuss any changes.

License

This project is licensed under the MIT License.