0

I am trying to write a firefox extension that will inject html and js next to the thumbs up button on a youtube video. However, my current way of doing it isn't reliable. Here is my code

manifest.json

{
  "manifest_version": 2,
  "name": "test",
  "version": "1.0.0",
  "description": "A notetaking tool for YouTube videos",
  "icons": {
    "48": "icons/border-48.png"
  },
  "background": {
    "scripts": ["background.js"]
  },
  "permissions": [
    "tabs"
  ],
  "content_scripts": [
    {
      "matches": ["*://*.youtube.com/watch*"],
      "js": ["watchingVideo.js"],
      "run_at": "document_start"
    }
  ],
  "web_accessible_resources":[
    "icons/my_icon.svg"
  ]
}

background.js

browser.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
  let isYoutubeVid = tab.url.includes('https://www.youtube.com/watch?');

  if (isYoutubeVid){
    browser.tabs.sendMessage(tabId, {message: 'hello from background.js'});
  }
});

watchingVideo.js

browser.runtime.onMessage.addListener((message) => {
  alert(message.message);
});

If you follow these steps:

  1. Open a tab
  2. go to youtube
  3. watch a video

The alert message won't pop up. It will only work if you refresh the page while watching a video.

What is a more reliable way to determine if a user is watching a youtube video?

Diehardwalnut
  • 198
  • 2
  • 8
  • I think your question isn't clear, if you only want to inject HTML/CSS to the page, why do you need to use `background.js`? I mean you could just add the alert at the start of the `watchingVideo.js` file, because that file is run when the page is opened. Or is it that you need to use `background.js` because you need to know if from multiple tabs opened, there is a video that's being played? – Damzaky Apr 28 '23 at 11:15
  • I am making a firefox extension. The use of manifest.json, background.js, and watchingVideo.js are a paradigm I am seeing used in the [anatomy of an extension docs](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension). manifest.json declares the resources/files the extension will use. background.js will wait for for the user to navigate to a new url (tabs.onUpdated) and will send a message to watchingVideo.js. watchingVideo.js will then perform the action of injecting html/css into a youtube page. – Diehardwalnut Apr 29 '23 at 00:37
  • I know that much about extension, what i'm saying is that you probably don't need `background.js` at all to achieve this. As for your specific problem (youtube), it probably uses history API so that the content script is not injected when navigating from homepage. You might wanna check this SO post instead: https://stackoverflow.com/a/17584559/7552340 – Damzaky Apr 29 '23 at 03:12

2 Answers2

0

After some more testing, I found that changing the "matches" line in manifest.json from

"matches": ["*://*.youtube.com/watch*"],

to

"matches": ["*://*.youtube.com/"],

worked. The content script is running as expected.

Diehardwalnut
  • 198
  • 2
  • 8
0

Try integrating. Using background.is because it’s recommended. Can use earlier version

Dean Freer
  • 1
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community May 04 '23 at 11:47