3

I'm trying to change the favicon on Google's Inbox 'pinned' page to a pin. so I know which tab is which at a glance.

I am aware that there are probably extensions to do this, but I'm learning Javascript and am trying to have a go myself. I manage to change other favicons using a 'url.indexOf' command, but the Inbox Pinned page does not change the URL. So I figured I would write Javascript to look for the word "Pinned", then action the Favicon change if it is found. This is what I have:

    favico = function() {

    this.is_changed = 0;
    this.retry = 1000;
    this.timerFindButtons = null;
    this.list = [
        "foo",
        "bar"
        ];
}

favico.prototype.init = function(){
    setTimeout(this.looping.bind(this), this.retry);
}
favico.prototype.looping  = function(){

    var head = document.getElementsByTagName('head')[0];
    var links = head.querySelectorAll('link');


    var eles = document.querySelectorAll("div");    


    for(var ii=0;ii<eles.length;ii++){
        var foo = eles[ii].getAttribute('jstcache');
        if(foo != null && foo.indexOf('1683') != -1){
            var bar = eles[ii].innerText;
            if(bar.indexOf('Pinned') != -1){
                links[0].setAttribute('href', 'data:image/x-icon;base64,...');
                this.is_changed = 1;}



             else {
                this.is_changed = 0;
                links[0].setAttribute('href', '//ssl.gstatic.com/bt/C3341AA7A1A076756462EE2E5CD71C11/ic_product_inbox_16dp_r2_2x.png');}
        }
    }

    setTimeout(this.looping.bind(this), this.retry);
}


  var oo = new favico()
  oo.init();

What am I doing wrong? Many thanks to anyone who can help!

Tom Odlin
  • 33
  • 1
  • 6
  • 1
    See also: http://stackoverflow.com/questions/260857/changing-website-favicon-dynamically – Raptor Jul 07 '15 at 06:06
  • What is going wrong? What are you seeing? Are there errors in the console? – Madara's Ghost Jul 07 '15 at 06:06
  • Also, if you're always looking for the first one, don't use `querySelectorAll()` use `querySelector`. – Madara's Ghost Jul 07 '15 at 06:07
  • Nothing is happening, the favicon does not change. That's what's going wrong :) I get this error message: Uncaught SyntaxError: Unexpected token } – Tom Odlin Jul 07 '15 at 07:00
  • I've got a bit closer with the code, (I think) (See edited original question). But it's still not working. Now the favicon is changed all of the time. I don't want that. Only when the word 'Pinned' is present. Can anyone help me out? – Tom Odlin Jul 17 '15 at 06:39

1 Answers1

1

use this method to change favicon dynamically

(function() {
    var link = document.createElement('link');
    link.type = 'image/x-icon';
    link.rel = 'shortcut icon';
    link.href = 'http://www.stackoverflow.com/favicon.ico';
    document.getElementsByTagName('head')[0].appendChild(link);
}());

Firefox should be cool with it.

droidev
  • 7,352
  • 11
  • 62
  • 94
  • I'm not sure this answers my question. I want to change the favicon only if the word "Pinned" appears in a div class. Apologies if I wasn't clear. – Tom Odlin Jul 07 '15 at 08:24
  • oh.. I thought you wanted to change by parsing the url. apologies from my side also – droidev Jul 07 '15 at 08:25