How to attach icons to youtube thumbnails inside a Chrome extension?

Question

I have a working skeleton of my Chrome extension. Which is to say I can load it in developer mode, and run js inside my document_start js and my document_end js. What I need to have happen is, whenever someone visits youtube with my extension installed, all youtube video thumbnail images are found, and my own little tiny icon is applied to the top right of the thumbnail, which is clickable. So that users who visit youtube will immediately see all loaded/visible youtube video thumbails with my custom little icon laying over the top right corner of the thumbail - and they can click my icon which will make an ajax call back to my server.

How can this be done?

Also: When I load my extension in developer mode, the extension icon always displays grayed out in the top right of Chrome -- never in color. What does this mean?

Thanks in advance.

To your second question, it's because you don't declare a Browser Action or a Page Action. Chrome has to render something there to remind the user that the extension is installed, but it's greyed out to indicate "clicking this is useless". If you want, you can declare a browser action that doesn't have a popup and does nothing, that'll make it display an icon in color. — Xan, Oct 17 '16 at 09:24
Page Actions need to be "shown" first for a particular page to become active/colored. They used to be completely hidden before, hence the term "show". — Xan, Oct 23 '16 at 22:53

score 1 · Answer 1 · edited May 23 '17 at 12:19

I created something a bit like this some time ago .I hope the below guidelines would help

manifest.json

{
  "manifest_version": 2,
  "content_scripts": [ {
    "all_frames": true,
    "css": [ "ol.css" ],
    "js": [ "jquery.js","ol.js"],
    "matches": [ "*://www.youtube.com/*"]
  } ],
  "name": "Thumbnail overlay",
  "version": "1.1",
  "permissions": [ "tabs", "*://www.youtube.com/*","https://yoursite.com/*" ,"webNavigation"],
  "web_accessible_resources": [ "ol.css" ,"ol.js" ,"jquery.js"],
  "background": {
    "scripts": ["background.js"]
  }
}

ol.css and ol.js are where you would write your code

Now every thumbs is in its container with class .yt-uix-simple-thumb-related also it holds the corresponding video id in its data attribute

ol.js

thmbColl = $('.yt-uix-simple-thumb-related>img') // collect all thmbs
thmbColl.each(function(){
             var url= $(this).parent().data("vid"); //thmb's parent holds video id
             //create and append a dynamic span with vid-id
             $(this).after('<span class="my-notifier" data-url="'+url+'">demo</span>');
         });

$('.my-notifier').click(function(e){
  e.preventDefault();
  e.stopPropagation();
  alert('clicked! sendin video ID to svr');
  $.ajax({
          url:'http://yoursite.com/andPath',
          data:$(this).data("url"),
          success: function(data){ 
            $(this).parent().parent().trigger('click');
          } //trigger a click on thmb's grandfather (wiz. anchor) to switch video
  });
});

background.js

chrome.webNavigation.onHistoryStateUpdated.addListener(function(details) {
  chrome.tabs.executeScript(null,{file:"ol.js"});
});

Since youtube used PJAX rather than actuall page refresh , above code fixes the problem of youtube navigation not firing script it hooks on chrome.webNavigation to execute your js everytime state is manipulated more here.Now comes the hardest part (at least for me) you need work out appropriate css to make the dynamic span appear on thumbnail put that in ol.css, don't look at me :p i don't know any css

This may work on `document.ready`.. Once. YT dynamically changes the document instead of reloading a page when you navigate, so any thumbnails added after the first time your code is run won't be processed. — Xan, Oct 17 '16 at 14:10
@Xan yes you are right that code won't work after initial run because youtube used PJAX , page is actually never refreshed but rather just pushing/poping states but there are a couple of workaround this on SO they work fine — Vinay, Oct 17 '16 at 15:11
You should at least mention that in the answer, ideally - link to those "couple of workarounds". — Xan, Oct 17 '16 at 15:16
Thanks much, it will be a few days before I can test this, but I'll come back and Accept the answer as soon as I do. — HerrimanCoder, Oct 17 '16 at 21:08
This doesn't work for me. Doesn't seem to match elements correctly, and doesn't append a clickable overlay. Also, the background js throws an error because it can't find jquery - so I changed it to this: `chrome.webNavigation.onHistoryStateUpdated.addListener(function(details) { chrome.tabs.executeScript(details, {file: "jquery-3.1.1.min.js"}, function(){ chrome.tabs.executeScript(details, {file: "myCustom.js"}); }); });` -- which makes the jquery error go away, but still no luck with the overall script. — HerrimanCoder, Oct 23 '16 at 23:45
In devtools go in *elements* tab and search for *my-notifier* , is it there? — Vinay, Oct 24 '16 at 03:58

score -1 · Answer 2 · answered Oct 17 '16 at 09:24

The general idea is to inject a content script whenever the user opens a page with a specific URL, in this case youtube.com. In your content script .js file you can then access the DOM of the page you injected the script into and modify it, placing the clickable icons in the top right corner of the thumbnails. To find the thumbnails, you would probably have to query them with jQuery.

To make an ajax request to your server, you would have to add it to the permissions section of the manifest file.

That is not to mention that the contents of YouTube are dynamic. It's going to be more involved than "query them with jQuery". — Xan, Oct 17 '16 at 09:25

How to attach icons to youtube thumbnails inside a Chrome extension?

2 Answers2