使用用户脚本嵌入网站图标答案

【问题标题】：Embed favicon using a userscript使用用户脚本嵌入网站图标
【发布时间】：2013-05-25 02:09:24
【问题描述】：

我有一个小脚本，旨在将 Google 音乐上的图标从 Play 商店图标更改为实际可识别为音乐相关的图标：

// ==UserScript==
// @name           Update Google Music Favicon
// @version        1.0
// @description    Replaces Google Music icon with something almost like the old one but much uglier.
// @include        http://play.google.com/music/*
// @include        https://play.google.com/music/*
// ==/UserScript==

window.addEventListener('load', function() {
    a=document.createElement("link");
    a.setAttribute("type", "image/jpeg");
    a.setAttribute("rel", "icon");
    a.setAttribute("href","data:image/jpeg;base64,AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAAAQAABILAAASCwAAAAAAAAAAAAAAAAAAAAAAAEEzUgBwUwAAQjo+EHlnZnF7aWhzWlBQEkE8Owx/c3JrinZ1d1hPVRb/rkAALjhpAAAAAAAAAAAAAAAAADoABwBnwP8AXKD/IkxytqZqYVn1dGRj9k9GRkM2NDMzcGZl74Rwb/lRf6uwRqz5LHTy/wAlDxgAAAAAAAAAAABzuuYAdKGpDEqX/6coY8L/YVpN/2RbWvtBOztNLy8vP2ZfXvd6Z1z/MnSt/zif/7U4X6gSQonhAAAAAAAAAAAAac//AFmn30kqp//0EWG4/2pcT/9hWlr7PTg4TS8vL0BjXl73e2dc/x5fpP8Vf/r5LHTHWTGF+QAAAAAAAgAAABvJ/wAWl+R3AaH3/xl7uP+EcGn/YVxb+zQwME0xMTFAY2Bf93pnXf8cVp7/AHv5/w1/44wJrv8AAgUAAAN+4wADZbkSAJv8twCU+f8ccrX/kHx7/2toaPs1MjJNMzMzQGZjaPd1Zlz/HU+U/wCG9P8Brf7JA4XQHQCn/wAA//8AGZntcg6X/vwMkfr/HH6+/4l6c/90bm77Q0FBTTQzM0BqaGj3gXFp/x51pf8Jm/n/D6P8/wWx/4hBAAACU1CUB0uy9bIacLvlS6/0lymLve6CeHP/dXV0+zc3Nks7Ozs+gICA9ot8e/8hiKj1O8T8niSAueAbsPTDE3nPDw+M/wAmf91oDFOwaa3//wxakrV3Z2hj1W1oaNk8PDwwXV1dJIiIiNFwcGvbVYicgpP//xMWZaJfGI7XeAjn/wAAsf8AI4Tnbxpr02gTo/8AJgoAAl5aUyBqamohY2NjA4WFhQKIiIgecGxqIjkZCQMQs/8AHonLWhOx+YG/AAABJV+4DiiZ/8Ilk/zLElS8GBR5+wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAWlNwAF2KYEBq1970gyv/SEZHVGDcAAAIMeP+PGor//xeC9YcELHYIDGbeAAAAAAAAAAAAAAAAAAAAAAALpMgAADUxBBLK9XQTxP/8Dqb8ohVIjwYReP8AGGTbJg1w99MKdf/4DJL2lhCz0CwJb3QH/wAAAAD//wA0WEMFEq3MJArH+IYIzP/yCbv63wuK5jIKr/8AP0iaAACq/wAhWuRBEYr62Qmx/v8KsP/kDL7/sQfK/5AZuuuNE8P7rAq9/98IwP7/C8T/4Q64/k8A//8AEYfBAAAAAABQeNcAAP//ACqn7y8grPunFav+7wiq//8FrP//Ba7//wey//8Rt//yFrr7sBjC/zgiAAAAIK/9AAAAAAAAAAAAAAAAAK2BxAA/uf8AUqzwCjy0+UA1tfyBMLb8pSy2/KYruPuFLbr5Ri+w7g0q3v8AYUuiAAAAAAAAAAAA8A8AAOAHAADAAwAAwAMAAMADAACAAQAAgAAAAAAAAACAAQAAkAgAAA/wAAAH4AAAgIEAAMADAADgAwAA8A8AAA==");
    document.documentElement.firstChild.appendChild(a);
}, false);

不幸的是，这似乎不起作用，即使我在 JS 控制台中输入它也是如此。我尝试用 Stack Overflow 网站图标 URL 替换它，但也没有用，但将其切换到 google.com/favicon.ico 有效 - 我猜问题是网站图标不是来自同一个域?有没有解决的办法？我在调试控制台中看不到任何有用的东西。

我要连接的 URL 是： https://play.google.com/music/listen?u=0#/now

【问题讨论】：

尝试添加属性type=image/jpeg
似乎没有帮助:(
这在 FF 和 Chrome 上都可以正常工作，尽管你应该使用 a.setAttribute("rel", "shortcut icon");。您的所有相关规格是什么？下载并安装this script。安装该脚本后，您是否在控制台中看到“***”消息？如果不是，在哪个确切 URL上？
我要连接的 URL 是：play.google.com/music/listen?u=0#/now。我正在 OS X 上的 Chrome 27.0.1453.93 中进行测试。我的处理程序肯定会触发（如果我添加它们，我会看到控制台打印输出），图标只是没有改变。
我删除了窗口事件监听器，只是在执行前做了 15 秒的超时，而 still 不起作用。

标签： javascript google-chrome userscripts

【解决方案1】：

一个老问题，但我希望能帮助别人

// ==UserScript==
// @name           Update Google Music Favicon
// @version        1.0
// @description    Replaces Google Music icon with something almost like the old one but much uglier.
// @include        http://play.google.com/music/*
// @include        https://play.google.com/music/*
// ==/UserScript==
window.addEventListener('load', function() {
    var favicon = document.querySelector('link[rel~="icon"]');
    var clone = favicon.cloneNode(!0);
    clone.href = "data:image/jpeg;base64,AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAAAQAABILAAASCwAAAAAAAAAAAAAAAAAAAAAAAEEzUgBwUwAAQjo+EHlnZnF7aWhzWlBQEkE8Owx/c3JrinZ1d1hPVRb/rkAALjhpAAAAAAAAAAAAAAAAADoABwBnwP8AXKD/IkxytqZqYVn1dGRj9k9GRkM2NDMzcGZl74Rwb/lRf6uwRqz5LHTy/wAlDxgAAAAAAAAAAABzuuYAdKGpDEqX/6coY8L/YVpN/2RbWvtBOztNLy8vP2ZfXvd6Z1z/MnSt/zif/7U4X6gSQonhAAAAAAAAAAAAac//AFmn30kqp//0EWG4/2pcT/9hWlr7PTg4TS8vL0BjXl73e2dc/x5fpP8Vf/r5LHTHWTGF+QAAAAAAAgAAABvJ/wAWl+R3AaH3/xl7uP+EcGn/YVxb+zQwME0xMTFAY2Bf93pnXf8cVp7/AHv5/w1/44wJrv8AAgUAAAN+4wADZbkSAJv8twCU+f8ccrX/kHx7/2toaPs1MjJNMzMzQGZjaPd1Zlz/HU+U/wCG9P8Brf7JA4XQHQCn/wAA//8AGZntcg6X/vwMkfr/HH6+/4l6c/90bm77Q0FBTTQzM0BqaGj3gXFp/x51pf8Jm/n/D6P8/wWx/4hBAAACU1CUB0uy9bIacLvlS6/0lymLve6CeHP/dXV0+zc3Nks7Ozs+gICA9ot8e/8hiKj1O8T8niSAueAbsPTDE3nPDw+M/wAmf91oDFOwaa3//wxakrV3Z2hj1W1oaNk8PDwwXV1dJIiIiNFwcGvbVYicgpP//xMWZaJfGI7XeAjn/wAAsf8AI4Tnbxpr02gTo/8AJgoAAl5aUyBqamohY2NjA4WFhQKIiIgecGxqIjkZCQMQs/8AHonLWhOx+YG/AAABJV+4DiiZ/8Ilk/zLElS8GBR5+wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAWlNwAF2KYEBq1970gyv/SEZHVGDcAAAIMeP+PGor//xeC9YcELHYIDGbeAAAAAAAAAAAAAAAAAAAAAAALpMgAADUxBBLK9XQTxP/8Dqb8ohVIjwYReP8AGGTbJg1w99MKdf/4DJL2lhCz0CwJb3QH/wAAAAD//wA0WEMFEq3MJArH+IYIzP/yCbv63wuK5jIKr/8AP0iaAACq/wAhWuRBEYr62Qmx/v8KsP/kDL7/sQfK/5AZuuuNE8P7rAq9/98IwP7/C8T/4Q64/k8A//8AEYfBAAAAAABQeNcAAP//ACqn7y8grPunFav+7wiq//8FrP//Ba7//wey//8Rt//yFrr7sBjC/zgiAAAAIK/9AAAAAAAAAAAAAAAAAK2BxAA/uf8AUqzwCjy0+UA1tfyBMLb8pSy2/KYruPuFLbr5Ri+w7g0q3v8AYUuiAAAAAAAAAAAA8A8AAOAHAADAAwAAwAMAAMADAACAAQAAgAAAAAAAAACAAQAAkAgAAA/wAAAH4AAAgIEAAMADAADgAwAA8A8AAA==";
    favicon.parentNode.removeChild(favicon);
    document.head.appendChild(clone);
}, false);

代码很简单，我们获取元素，克隆它，更改克隆的 href 属性，然后删除原始元素并添加我们克隆的新元素

【讨论】：

我来这里是为了制作一个脚本来更改 Github 的 favicon，因为它在 Firefox 中我的深色主题的黑色背景上是不可见的。所以我直接使用了你的代码，当我意识到 Google Music favicon 实际上与 GitHub favicon 非常匹配时，这真是令人惊讶，反正它看起来像耳机！ :-)