Build extensions

[ComputerBread]

Explanation

Goal for extension is to do something like:

// on youtube
if (!watching_a_video) {
  return;
}
const channel_ID = grab_channel_ID() // if possible ( or channel Name?)
const permissions = fetch("yt-react-db", channel_ID)
if (!permissions) {
  show_question_grey_mark_icon();
} else if (permissions === "yes") {
  show_green_check_mark();
} else if (permissions === "no") {
  show_red_cross();
} else { // permissions === "yes_with_delay"
  const isDelayPassed = delay_processing(permissions.delay, now());
  if (isDelayPassed) show_green_check_mark();
  else show_red_cross();
}

figure out code color & icons for different cases: Nah, I am just going to make my own, it will be composed of 2 parts: left: live reaction, right: upload. Values:

• yes => 🟢
• yes_with_delay & delay passed => 🟢
• yes_with_delay & delay didn't passed => 🟠
• no => 🔴

Tool: https://www.pixilart.com/draw?ref=home-page

From https://developer.chrome.com/docs/extensions/mv3/manifest/icons/

• 16x16 favicon
• 48x48 for chrome://extensions
• 128x128 required
• PNG

Problems

• ❓ can I get the channel ID while watching a video?
  • I don't think so no 😢
  • ✔ We can grab the handle channel URL
    • with document.getElementById("text").querySelector("a").href ("more direct" or faster, but id "text" is kind of weird) or with document.getElementById("channel-name").querySelector("a").href (I think it's better)
    • [ ] I need to store it when yt sets permissions
    • ❗problem: handle URL can be changed, so there's a non-zero risk to have outdated data
      • ~~ ✔ solution 1: don't store handle URL~~
        • use video url, fetch GET https://www.googleapis.com/youtube/v3/videos?part=snippet&id=<video_id>, then get response.items[0].snippet.channelId
        • pros
          • fix problem
          • never out of date
          • don't mess with the DOM to find handle URL
          • don't need to modify existing code
        • cons:
          • require API call (to do in backend, unless ready to share API key (bad idea) OR ask extension user to sign in with Google)
          • ❗api call limitation (10,000/day)
      • ✔ solution 2: store handle URL & have a cron that verify URL didn't change (I don't like this)
  • ✅ WELL NEVERMIND I was wrong, we can find it with document.querySelector("yt-button-shape > a").href bruh, just open your 👀 moron
    • so it's safe, it returns the good ID. document.querySelectorAll("yt-button-shape > a") returns 6 values with the same ChannelID.
• L?

useful stuff

• youtube channel's URLs
• https://developer.chrome.com/docs/extensions/mv3/getstarted/ useful code (ChatGPT generated), to grab video ID

const videoIDRegex = /youtube\.com\/watch.*?v=([^&]+)/;
const match = window.location.href.match(videoIDRegex);

if (match) { // could also be used to verify that we are watching a video
  const videoID = match[1];
  console.log('Video ID:', videoID);
} else {
  console.log('Not a YouTube video URL');
}

Todo

• [x] figure out what needs to be done
• [x] learn how to build cross-platform extension (if possible, otherwise go to specific)
  • [x] try with google chrome
  • [x] then check if it works the same with firefox
• [x] add necessary endpoints (back) get permission for 1 users (filter: ID)
• [x] build extension
  • [x] create manifest.json
  • [x] create content script
  • [x] modify icon (loading)
  • [x] find channel ID (had to use a bunch of setTimeout, because the information is loaded in the background)
  • check if channelID is in the cache
  • if not, fetch permissions
  • and store information in a LRU cache (using localstorage or indexedDB?) (could be an opportunity to learn about indexedDB)
  • [x] send it to popup.js
  • [x] modify icon
  • [x] create popup.html
  • [x] create popup.js
  • [x] receive permissions from content script
  • [x] display info in popup
  • [x] builds icons (don't forget question mark + loading, check above)
  • [x] be careful to show a loading icon, or an AFK icon
• [x] make sure that the 404 are cached (add header), if impossible switch to 200 with a message!
• [x] remove hours option when selecting yes_with_delay (couldn't find the publication time in the DOM)
• [x] try it on firefox (adapt it if needed)

---

youtube is a single-page application, so the content script is injected only once, and doesn't reload when changing to a different video, and because there are some loading delays I need to be a bit careful with timing

• [x] first load
  • [x] need to be careful if there are multiple fetch at the same time, to display icon in the correct tab
• [x] changing video, same tab
  • [ ] detect url change
  • [ ] make sure to wait for the right time to start looking for channelID & publication date maybe I can listen to a specific network request? maybe I can use a good event?
  • => no actually I need to do the following:
  • [x] change manifest to match the whole site. if I only match url with video, if you go on youtube.com then click a video, the content script isn't injected
  • [x] use MutationObserver helpful links:
  • https://stackoverflow.com/a/68348069
  • https://stackoverflow.com/a/67660030
• [x] what happens when you click to a different page that isn't a video? is content script there? (I am pretty sure it is)
• [x] popup
  • [x] in case it's opened, need to listen to event to update it if permissions were just fetched
  • [x] if not watching a video => show default screen (maybe instructions or whatever)
  • [x] need to be able to find info and display it (need to store info, I read somewhere that popup can't use localstorage, you can use chrome.storage which is actually better (could use it for caching in the future if I need to)) OR just wait for info
  • shouldn't do much (don't touch the icon, let the service worker do it, don't fetch data, don't interact with the page)
  • [x] can it access the current tab's url? YES using chrome.tab.query({ active: true, currentWindow: true}, ...) https://developer.chrome.com/docs/extensions/reference/tabs/#get-the-current-tab
• [x] switch tab
  • [x] tab isn't a youtube video => set icon to default
  • [x] tab is a video already known => look for info in storage, change icon
  • [x] tab is a new video (video opened in new tab) => wait for content script to send info
  • [x] ok maybe I need to have a common approach for all these events, maybe content script can store info in chrome.storage and then worker listen to chrome.events?
  • [x] what if user switch tab before receiving info => gonna bug out icon?
• [x] closing tab
  • [x] service worker should listen to it, and delete info stored in storage for this specific url
• [ ] closing window
  • [ ] service worker should delete info about all videos of window don't need to, I am using sessionStorage
• [x] verify that content script doesn't die (stop listening to events) after a while => normally no, it runs as long as the tab is opened (like a regular js script)
• [x] verify it works fine when going backward or forward
• [x] verify it works on autoplay

Def needs my attention rn

[ComputerBread]

Let's talk about caching. To minimize the server's load, I need to cache requests. I first thought about implementing a LRU cache in JavaScript and store the data in the localstorage or indexedDB, but got lazy. I started looking at the Cache Web API, but you still need to do a lot of work:

Items in a Cache do not get updated unless explicitly requested; they don't expire unless deleted. You are also responsible for periodically purging cache entries.)

So instead, I will use the "default HTTP cache" (which you can't really access directly (unless I am wrong)). By default fetch use the cache, the browser looks for a matching request in its HTTP cache:

• If there is a match and it is fresh, it will be returned from the cache.
• If there is a match but it is stale, the browser will make a conditional request to the remote server. If the server indicates that the resource has not changed, it will be returned from the cache. Otherwise the resource will be downloaded from the server and the cache will be updated.
• If there is no match, the browser will make a normal request, and will update the cache with the downloaded resource.

The good thing is that I don't really need to do anything (except making sure I am sending the HTTP header, Cache-control: max-age=<value>). But it also means that I have almost no control, the browser does everything, and the browser can delete the whole cache (even if it does, I guess it's not that bad).

No control mean: no size limit, will it slow down the user's browser?

I don't really want to think about it too much, I think using the default cache should be good enough. If it becomes a problem I will implement my own. Now the question is about how long should the data be cached, I am pretty sure, 99% of users will never update their permissions, so in practice, the data will never expires but still, what's a good value? 1 day, 2 days, 1 week? Should I make a difference between present and absent youtubers?

fresh and stale

Fresh state usually indicates that the response is still valid and can be reused. Stale state means that the cached response has already expired. The criterion used is age. In HTTP, age is the time elapsed since the response was generated. In HTTP/1.1, server can specify the header Cache-control: max-age=<value_in_seconds> to specify when the response should expire. When a response is stored in a shared cache, it’s necessary to inform the client of the response’s age, to do that, the cache can add the HTTP header Age: nb_secs indicating how long the response has been cached.

In HTTP/1.0, freshness used to be specified by the Expires header. (Obsolete, cause uses an explicit time (like Tue, 28 Feb 2022 22:22:22 GMT ) which is harder to parse).

validation

stale responses are not immediately discarded. HTTP has a mechanism to transform a stale response into a fresh one by asking the origin server. This is called validation (or revalidation). Validation is done by using a conditional request that includes an If-Modified-Since or If-None-Match request header.

I didn't know about conditional request before, it could definitely be useful for the full list, but to get a single permissions I think it could be worse. To implement conditional requests, the server needs to return at least one of Last-Modified or ETag HTTP headers.

:warning: note on cache being disabled

There's an option to disable the cache in the DevTools > Network. In firefox it was disable for some reason, and I lost a bit of time because of it ^^

[ComputerBread]

Content scripts don't have access to the chrome.action API (source), so I need to take care of modifying the icon in the background.

1. content script is injected
2. (optional) send message to background worker to change icon to loading icon
3. fetch permissions
4. send permission to background worker
5. background worker takes care of the logic

So, I need to learn about background worker. I also need to figure out:

• how to modify the icon when switching tab
• how to modify the icon when closing tab or window

intuitively I would say:

• in content script, get url, associate url to permission (store it in localstorage)
• in background js, listen to tab events, find data in localstorage, or delete it
• in popup.js, load data from localstorage

[ComputerBread]

Known issues

meta tag containing convenient publication date isn't always present on youtube

When the first page you load isn't a video, the meta tag, found using document.querySelector('meta[itemprop="datePublished"]'), isn't present on any pages afterward. If you start with a video it's present on every pages!

This tag is useful because it has a nice "yyyy-mm-dd" format (like "2022-07-31").

We can find the publication date using document.querySelector("#info-strings > yt-formatted-string").innerText but it returns a localeDateString (ex: Jul 31, 2022 or 7 avr. 2023 in french)

const event = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
const options = { year: 'numeric', month: 'short', day: 'numeric' };
console.log(event.toLocaleDateString('de-DE', options)); //"20. Dez. 2012"
console.log(event.toLocaleDateString('ar-EG', options)); // "٢٠ ديسمبر ٢٠١٢"
console.log(event.toLocaleDateString("fr-FR", options)); // "20 déc. 2012"
console.log(event.toLocaleDateString('en', options)); // "Dec 20, 2012"

But these strings are annoying to parse, I will need to use something like date-fns to help me:

import { parse } from "date-fns";

function parseDate(dateString, locale) {
      return parse(dateString, 'd LLL y', new Date(), { locale  });
}

const frenchDateStr = '7 avr. 2023';
const parsedDate = parseDate(frenchDateStr, require('date-fns/locale/fr'));
console.log(parsedDate); // Output: 2014-04-07T00:00:00.000Z

I found the list of country code used by google using the API:

"af", "am", "ar", "as", "az", "be", "bg", "bn", "bs", "ca", "cs", "da", "de", "el", "en-GB", "en-IN", "en", "es", "es-419", "es-US", "et", "eu", "fa", "fi", "fil", "fr-CA", "fr", "gl", "gu", "hi", "hr", "hu", "hy", "id", "is", "it", "iw", "ja", "ka", "kk", "km", "kn", "ko", "ky", "lo", "lt", "lv", "mk", "ml", "mn", "mr", "ms", "my", "no", "ne", "nl", "or", "pa", "pl", "pt", "pt-PT", "ro", "ru", "si", "sk", "sl", "sq", "sr-Latn", "sr", "sv", "sw", "ta", "te", "th", "tr", "uk", "ur", "uz", "vi", "zh-CN"

For now, I just set a condition to use "0000-00-00" when we can't find the meta tag, because I don't want to waste too much time, I don't want to deal with a build step right now, I want to be done with the overall logic before! But once I am done, here what I can do:

prerequisites:

• [ ] find list of all possible locale (https://www.localeplanet.com/icu/ or https://stackoverflow.com/a/3191729 or something else) (put them in excel sheet, or program array)

• [ ] compare them to the one supported by youtube

  // source: https://developers.google.com/youtube/v3/docs/i18nLanguages/list
  "af", "am", "ar", "as", "az", "be", "bg", "bn", "bs", "ca", "cs", "da", "de", "el", "en-GB", "en-IN", "en", "es", "es-419", "es-US", "et", "eu", "fa", "fi", "fil", "fr-CA", "fr", "gl", "gu", "hi", "hr", "hu", "hy", "id", "is", "it", "iw", "ja", "ka", "kk", "km", "kn", "ko", "ky", "lo", "lt", "lv", "mk", "ml", "mn", "mr", "ms", "my", "no", "ne", "nl", "or", "pa", "pl", "pt", "pt-PT", "ro", "ru", "si", "sk", "sl", "sq", "sr-Latn", "sr", "sv", "sw", "ta", "te", "th", "tr", "uk", "ur", "uz", "vi", "zh-CN"

  (for the one not supported by youtube → delete them? associate them to english?)

• [ ] get list of locale supported by date-fns https://github.com/date-fns/date-fns/blob/main/src/locale/index.ts

• [ ] associate locale from navigator.language with existing date-fns locales.

• [ ] what to do when locale is missing?

• [ ] set up the thing

  • [ ] bun init
  • [ ] bun add date-fns

algo:

1. if meta tag exists: return it’s content attribute
2. otherwise, get user’s locale using const userLocale = navigator.language;
3. compare it to the one supported by date-fns
   1. if there’s a match “return locale”
   2. if there’s no match return “0000-00-00”
4. extract date from document.querySelector("#info-strings > yt-formatted-string").innerText
5. parse it into the wanted format “yyyy-MM-dd” and return it
6. (don’t forget to deal with the timeout and shit)

build:

• [ ] set up build step using something like bun build ./index.ts --outdir ./out --minify

[ComputerBread]

For firefox, the manifest needs to be a bit different, for now I just have 2 manifest.json files. I will deal with it later! It seems to work alright in firefox

[ComputerBread]

Ok, I think I am done building the alpha version! probably a lot of bugs, surely it's not entirely done (like shouldn't the extension ask for permission to access a website?) but I really want to close this issue ^^, just press the button