Skip to content

Commit

Permalink
Switch over to using Return YouTube Dislikes API
Browse files Browse the repository at this point in the history
  • Loading branch information
@elliotwaite
elliotwaite committed Dec 15, 2021
1 parent 43f24b2 commit d7f7dcb
Show file tree
Hide file tree
Showing 20 changed files with 238 additions and 608 deletions.
1 change: 1 addition & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,4 @@
/.history/
/.idea/
/build/
/local/
127 changes: 15 additions & 112 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,114 +15,25 @@ https://chrome.google.com/webstore/detail/thumbnail-rating-bar-for/cmlddjbnoehmi
Firefox Add-on:<br />
https://addons.mozilla.org/en-US/firefox/addon/youtube-thumbnail-rating-bar/

This extension requires you to set up a personal YouTube Data API key, as
described below in the [Set Up a YouTube Data API Key](https://github.com/elliotwaite/thumbnail-rating-bar-for-youtube#set-up-a-youtube-data-api-key)
section.
Edge Add-on:<br />
https://microsoftedge.microsoft.com/addons/detail/thumbnail-rating-bar-for-/mglepphnjnfcljjafdgafoipiakakbin

## Set Up a YouTube Data API Key
## API and Rate Limiting

This extension now requires users to provide their own personal YouTube Data
API key through the extension's settings page. This is because the quota for
the extension's shared API key is currently restricted (more details available
[here](https://github.com/elliotwaite/thumbnail-rating-bar-for-youtube/issues/17)).
This extension uses the [Return YouTube
Dislikes](https://returnyoutubedislike.com) API for likes/dislikes data. Their
API is rate limited by IP address, so if you notice that some thumbnails aren't
receiving rating bars, you may be getting temporarily rate limited.

Note: Alternatively, if you don't want to set up a personal API key, there is
now an alternative option, however this option is much less performant and you
will notice a significant lag between when a page loads and when the rating
bars are displayed. To try out this alternative, you can set the API key to
"invidious" on the extension's settings page. This will cause the extension
to use the public
[invidious API](https://github.com/omarroth/invidious/wiki/API), however this
API is much slower than the YouTube Data API, so it is highly recommended that
you set up a YouTube Data API key by following the instructions below.

#### Set up a free YouTube Data API key:

1. Create a new project.

* Go to: https://console.developers.google.com/projectcreate

* For "Project name" enter any name you want, for example
"YouTube Data API Key".

* For "Location" leave it as "No organization".

* Then click the "CREATE" button.

* This will start creating a project and you'll see a progress wheel around
the notification icon. Once the project has finished being created,
continue to the next step.

2. Enable the YouTube Data API v3.

* Go to: https://console.cloud.google.com/apis/library/youtube.googleapis.com

* Then click the "ENABLE" button.

* Note: This may end up navigating you to another page that displays a
"CREATE CREDENTIALS" button. But if that happens, just ignore that button
and follow the instructions in the next step.

3. Create an API Key.

* Go to: https://console.cloud.google.com/apis/credentials

* Click the "+ CREATE CREDENTIALS" dropdown button, then choose "API key".

* This will create your API key and display a dialog box. At the bottom
right of that dialog box, click the "RESTRICT KEY" button.

* Then under the "API restrictions" section, click the "Restrict key" radio
button, and then below it, open the "Select APIs" dropdown menu and check
the "YouTube Data API v3" checkbox (if you don't see this option, make
sure you successfully enabled the API in step 2 above).

* Then click the "SAVE" button at the bottom of that page.

* Then copy your listed API key to your clipboard (it should look something
like this: AIzaSyAylQ59uKlkZt2EgRPoygscGb_AHBQ5MEY).

Note: If you need to access your API key in the future, it will be
available here:
https://console.cloud.google.com/apis/credentials

4. Set your API key on the extension's settings page.

<img src="https://raw.githubusercontent.com/elliotwaite/thumbnail-rating-bar-for-youtube/master/images/screenshot-2.jpg?raw=true&v=2" width=400>

* Go to the extension's settings page, which is accessible by clicking the
extension's icon in your browser's toolbar.

* Paste your API key into the available text field.

* Then click the "SAVE" button.

You should now be all set. Refresh any previously opened YouTube tabs to
see the changes.

<img src="https://raw.githubusercontent.com/elliotwaite/thumbnail-rating-bar-for-youtube/master/images/screenshot-1.jpg?raw=true" width=400>

YouTube will allow you to use your API key to make a certain number of API
requests per day, this is called your quota. To view your daily quota usage,
go here and select your project from the dropdown menu at the top of the
page:
https://console.cloud.google.com/apis/api/youtube.googleapis.com/quotas

To keep your API key private, this extension only stores your API key
locally on your computer using local storage. This can be confirmed by
viewing the source code.

Enjoy.
You can also install [their extension](https://returnyoutubedislike.com/install)
to see the likes/dislikes and rating bar on the video page.

## Exponential Scaling Option Explained
Most videos on YouTube have very high ratings making it hard distinguish which
videos are higher rated than others just by looking at the rating bar. To help
with this, an option has been added to allow users to exponentially scale the
rating bar.

<img src="https://raw.githubusercontent.com/elliotwaite/thumbnail-rating-bar-for-youtube/master/images/exponential-scaling-option.png?raw=true" width=276>

Here you can see the difference between the default linear scaling and the exponential scaling:
In the extension's settings you can enable an option to exponentially scale the
rating bar. This makes it easier to distinguish between highly rated videos
(since most videos have a rating over 90%). You can see the difference between
the default linear scaling and the exponential scaling here:

<img src="https://raw.githubusercontent.com/elliotwaite/thumbnail-rating-bar-for-youtube/master/images/linear-vs-exponential-scaling.png?raw=true" width=367>

Expand All @@ -137,18 +48,10 @@ half the width of the likes bar:
| 70% | 12.5% |
| ... | etc. |


The equation for linear scaling:

<img src="https://raw.githubusercontent.com/elliotwaite/thumbnail-rating-bar-for-youtube/master/images/linear-scaling-equation.png?raw=true" width=145>

The equation for exponential scaling (where the rating and width values are in the range of 0 to 1):

<img src="https://raw.githubusercontent.com/elliotwaite/thumbnail-rating-bar-for-youtube/master/images/exponential-scaling-equation.png?raw=true" width=215>

Note: This option only affects the scaling of the rating bar that is added to the
thumbnails. It does not affect the scaling of the rating bar shown on the video
page.
page (if you have the [Return YouTube Dislikes extension](https://returnyoutubedislike.com/install)
installed).

Special thanks to [Qarthak](https://github.com/Qarthak) for
[requesting this feature](https://github.com/elliotwaite/thumbnail-rating-bar-for-youtube/issues/49).
Expand Down
45 changes: 9 additions & 36 deletions extension/background.js
View file
Original file line number Diff line number Diff line change
@@ -1,45 +1,18 @@
let youtubeApiKey = ''
// All AJAX requests are made from this background script to avoid CORB errors.

chrome.storage.sync.get({apiKey: ''}, function(settings) {
if (settings) {
youtubeApiKey = settings.apiKey
}
})

// Do the ajax request from this background script to avoid CORB.
chrome.runtime.onMessage.addListener(
function(message, sender, sendResponse) {
if (message.contentScriptQuery === 'videoStatistics') {
let combined_data = {'items': []}
let promises = []
if (youtubeApiKey === 'invidious') {
for (let videoId of message.videoIds) {
let promise = fetch(`https://ytprivate.com/api/v1/videos/${videoId}?fields=likeCount,dislikeCount`)
.then(response => response.json())
.then(data => {
combined_data.items.push({
'id': videoId,
'statistics': data})
})
promises.push(promise)
}
Promise.all(promises).then(() => {
sendResponse(combined_data)
})
return true // Will respond asynchronously with `sendResponse()`.
} else if (youtubeApiKey.length) {
let url = 'https://www.googleapis.com/youtube/v3/videos?id=' +
message.videoIds.join(',') + '&part=statistics&key=' + youtubeApiKey
if (message.query === 'videoApiRequest') {
let url = 'https://returnyoutubedislikeapi.com/Votes?videoId=' + message.videoId
fetch(url)
.then(response => response.json())
.then(data => sendResponse(data))
return true // Will respond asynchronously with `sendResponse()`.
} else {
return false
}
} else if (message.contentScriptQuery === 'apiKey') {
youtubeApiKey = message.apiKey
} else if (message.contentScriptQuery === 'insertCss') {

// Returning `true` signals to the browser that we will send our
// response asynchronously using `sendResponse()`.
return true

} else if (message.query === 'insertCss') {
chrome.tabs.insertCSS(sender.tab.id, {file: message.url})
}
}
Expand Down
Loading

0 comments on commit d7f7dcb

Please sign in to comment.