Supercharge fbref.com player pages with football radar charts

Latest Version

Version
1.1.11
Update
July 13, 2024
Size
379KiB
Developer
Category
Users
6,000+
Rating
5 ★
Manifest Version
3
Web Store Status
Languages Support
English (UK)
See more
Permissions
Storage
See more

FBCharts Extension

This extension transforms FBref.com's scouting reports into football radar and comparison charts, improving the site's viewing experience for football fans and enthusiasts.

[Basics]

⚽️ Once installed, navigate to a scouting report on fbref.com (e.g. https://fbref.com/en/players/aded8e6f/scout/12229/Riccardo-Calafiori-Scouting-Report) and a radar chart will be rendered next to the player's stats.

⚽️ To view a player's radar chart in a different season or competition, simply go to the player's complete scouting report (e.g. https://fbref.com/en/players/d70ce98e/scout/365_m2/Lionel-Messi-Scouting-Report), where you can select different seasons or competitions that the player has been a part of, and the radar chart will be rendered accordingly.

[Chart comparisons]

⚽️ To compare against a similar player, click on “Compare” in the “FBcharts” column under FBref's \"Similar Players\".

⚽️ To compare against any other players, simply navigate to their profiles. As you browse through their profiles, they will appear under the \"recently browsed\" section and can be selected for comparison.

⚽️ You can also compare players against themselves by navigating to their scouting reports from prior seasons.

[Select player template]

⚽️ You can select a template best suited to the player by clicking onto a positional pin in the football pitch UI, and the stats will update automatically.

Latest UPDATE:

1.1.11
- Increase resolution of generated PNG images to ensure high-quality renders

1.1.9
- Fix minor bug with rating colour
- Per-90 toggle now available for all users

1.1.8
- Aesthetic refresh! New standard colours + visual upgrades for a cleaner, fresher look

1.1.7
- Improve Spanish (shorter names for better visibility) and Portuguese translations (credit: @gusfop)

1.1.6
- Remove border for downloaded image
- Improve usability for mobile use (Orion browser)

1.1.5

New premium features!

- 3-player comparisons
- New dark-mode toggle
- New per-90 stats toggle

And for all users:

- Minor bug fixes
- Styling improvements
- Improved Spanish translation

---------------

Previous:

1.1.4

- Minor styling changes and ability to display dynamic premium info

1.1.3

- Updated translations (based on fbref's) for all supported languages
- Fix a bug where unintended styling on minutes played could cause a bad render

1.1.2

- Fix a bug where unintended styling on player or season name could cause a bad render

1.1.1

- Fix a bug that prevents comparison between two FBref scouting reports with non-identical sets of stats
- Add better image download prompt
- Other minor fixes and styling improvements

1.1.0

- Positional templates have arrived!
- This update includes a total of 24 templates (15 premium, 9 free), covering all positions on the field (GK, CD, FB, DM, CM, AM, W, CF).
- The templates are showcased on a brand-new 2D football pitch UI, allowing easy selection of templates that best suit a player's profile.
- Existing comparison features automatically work with the the new templates - simply choose a template and the player to compare against.

- A custom template engine (premium feature) is also here!
- This is designed for advanced users who crave the flexibility to choose from over 150 stats from FBref and to customise their own charts to suit their analysis or storytelling needs.
- Besides choosing stats, the slice colours, the number of categories and their names are also completely customisable
- With a built-in search and drag-and-drop mechanism, drafting a new radar template is intuitive and fun
- All templates created from the engine are automatically synced to the cloud, accessible on any device/browser running FBCharts.

We are thrilled about this update and hope that users (premium or not), will enjoy using these new features for player analysis or simply for pure fun. As always, we value and consider all your feedback to enhance the tool so do connect with us via twitter @fbcharts or email.

1.0.4

- Add one-click download button
- Re-add stat type legends
- Minor aesthetic improvements

1.0.3

- Add better language support (for stat name colours) for all languages available on FBref

1.0.2

- Add chart comparison features for supporting browsers
- Fix issue where mobile chart view is obstructed

PRIVACY

This extension creates graphical charts on the fly. No user information is collected. This extension also uses minimal local storage for player comparisons and auto-deletes old data to keep the storage as small as possible.
Read more

Source Manifest.json

{"update_url": "https://clients2.google.com/service/update2/crx", "name": "FBCharts", "description": "Supercharge fbref.com player pages with football radar charts", "version": "1.1.11", "manifest_version": 3, "action": { "default_popup": "popup.html", "default_title": "Football Radar Charts" }, "icons": { "16": "icon16.png", "32": "icon32.png", "48": "icon48.png", "128": "icon128.png" }, "background": { "service_worker": "background.js" }, "content_scripts": [ { "run_at" : "document_idle", "css": ["after.css"], "js": ["ExtPay.js", "after.js"], "matches": [ "http://*.fbref.com/*", "https://*.fbref.com/*" ] } ], "content_security_policy": { "extension_pages": "script-src 'self'; object-src 'self'; connect-src https://extensionpay.com" }, "permissions": [ "storage" ]}
Read more

How to download and manually install FBCharts extension for Chrome

Looking for a way to install FBCharts extensions for Chrome, you can search for them in the Chrome Web Store, clicking the "Add to Chrome" button, and following the straightforward process.

However, you may need to install FBCharts extensions manually, this article outlines two simple methods to effortlessly install FBCharts extensions, whether they come as unpacked folders in compressed formats like .zip or as .crx files.

Method 1: Download FBCharts extension and manually install through Drag &Drop

If you ever need to manually install a FBCharts extension for Chrome, don't worry, it's a simple process. Just follow these easy steps, and you will have your extension ready to use in no time.

Step 1: Download the FBCharts Extension by clicking the "Download CRX" button on the website.

Look for the FBCharts extension you wish to install. Go to the website and download the FBCharts extension package, which is usually a .CRX file and comes in a zipped file. Here ".crx" file is the format for FBCharts extension that contains all the data.

Step 2: Extract &Arrange Files

Once the file is downloaded, extract that file into its own folder. Similarly, give that extension files a permanent home. In other words, keep it in a folder that you don't accidentally delete it because these files will be needed to make that extension work.

Step 3: Go to the Chrome Extensions Page

Open Google Chrome and in the address bar, type chrome://extensions; it will open the Google Chrome extensions page. Make sure that "My extensions" is selected in the sidebar.

Step 4: Drag and Drop the Extension

Now, go to the folder where you extracted the FBCharts extension and drag &drop the extension file from there anywhere onto the extension page within Google Chrome.

Step 5: Complete the Installation

Once you drag and drop the extension file, follow the steps that Google Chrome takes you through. Similarly, if the extension file is of .crx file format, you will be required to review the permissions and then add the extension.

Now, you can manage that added extension as you would like to with any other Chrome extension that you added through Chrome Webstore. Its icon will also appear in the Google Chrome Menu on the right side of the address bar once you activate it.

Method 2: Download FBCharts extension for Chrome and install in Developer Mode

This is another method to install FBCharts extension manually, but the twist is that here, you install by enabling the developer mode option provided in Google Chrome. This mode is commonly used for testing extensions or running unpublished tools.

Step 1: Download the FBCharts extension file

Select and download the FBCharts extension by clicking the 'Download CRX' button on the website.

Step 2: Extract the downloaded contents

Convert the file to a ZIP file if it is in CRX format then extract the FBCharts extension zip file or folder that you downloaded. Make sure you extract it using the same folder name and keep it safely in another folder, so you don't delete it by mistake. The extracted folder will be needed to keep your FBCharts extension running.

Step 3: Open Chrome Extension Setting Page

In the address bar of Google Chrome, type chrome://extensions and open the Chrome Extension Page.

Step 4: Enable Developer Mode

After opening the Chrome Extension page, look at the top right side, and you will find the toggle option of "Developer mode."Simply enable that developer mode option.

Step 5: Load the Unpacked Extension

Once you enable the developer mode option, you will see the menu of Load Unpacked, Pack Extensions and Update. From that, select the option "Load unpacked."

Step 6: Select the Extension Folder

Once the pop-up opens upon clicking Load unpacked, select the FBCharts extension directory and click on the "Select Folder "button.

Step 7: Confirm and Install

After you select an extension folder of a Google Chrome extension you're installing manually, confirm its installation for the final time and let the installation complete.

Conclusion

Here we've made a step-by-step guide on How to manually install FBCharts extension in 2 ways. We hope this guide proves helpful.

Similar Extensions