Я пытаюсь выбрать и изменить значок github на другой значок.

Когда я просматриваю Github, значок отображается как:

<link rel="icon" type="image/x-icon" class="js-site-favicon" href="https://assets-cdn.github.com/favicon.ico">

Затем я пытаюсь выбрать его и изменить, но это не работает.

var link = document.querySelector("link[rel*='icon']");
link.type = "image/x-icon";
link.rel = "shortcut icon";
link.href = chrome.runtime.getURL("img/sampleFavicon.png");

Я попытался сделать то же самое на w3schools.com, который имеет то же самое (<link rel="icon" href="/favicon.ico" type="image/x-icon">), и он успешно меняет значок.

Есть ли лучший селектор, который бы работал?

1
Marcus Martin 11 Сен 2018 в 21:14

1 ответ

Лучший ответ

Пара вопросов здесь:

  1. На страницах github.com есть несколько элементов, соответствующих запросу: link[rel*='icon']. Вы хотите обновить хотя бы последний (или все). Вы можете использовать метод: document.querySelectorAll, чтобы получить их все.
  2. Я пытался обновить значок не из расширения Chrome, а напрямую из инструментов разработчика Chrome. При попытке обновить значок с помощью внешнего изображения, например: link.href = 'https://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico?v=4f32ecc8f43d' это вызывает следующую ошибку:

    Refused to load the image 'https://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico?v=4f32ecc8f43d' 
    because it violates the following Content Security Policy directive:
    "img-src 'self' data: assets-cdn.github.com identicons.github.com collector.githubapp.com github-cloud.s3.amazonaws.com *.githubusercontent.com".
    

И здесь можно было бы преобразовать ваш значок в строку с базой 64, а затем сделать: link.href = 'data:image/x-icon;base64,AJHDFH....';

1
boertel 11 Сен 2018 в 18:59