Display a badge on favicon with a number of users streaming from the server
目前为
// ==UserScript==
// @name Plex now playing badge
// @namespace V@no
// @description Display a badge on favicon with a number of users streaming from the server
// @author V@no
// @include http://localhost:32400/web/*
// @include http://127.0.0.1:32400/web/*
// @include https://app.plex.tv/desktop
// @include https://app.plex.tv/desktop/*
// @icon data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAADi0lEQVRYhc2XXYgbVRTH/8bFdrex2+5Xdppmbyg+2OJaLL5IG1DEh74p4ka0gj4UpEh8rLDtth1dadQurYMW+6DSIH6sInlRhAgiSqDdtZt2W5dZlJZYEYlgLSMqyM8HJ9nJmEiTNOiFCwMzc8/vnHvO/54rYwz/5dT/HuDk7g3M7bMaztOTFndsHusuQGrrGKcmGwPM7bN4b8+G7gIYYzjw4MamAPNTo0ykEt0FuPUWw+lQFOb3W5w5FKP03AjFqRjJZJeTcHoiXuf1gh3j3PMjnM8O8/VLQ2R3Wd0FSCYNn++1mNtvsXDob+MXXhhiaWYQ99gA7tEBtm1pPSFbKsOHdiQ4c3CUs9MjnPeNL788wLevruPia/18NDncXQBjDO9nLBYPD7N0ZMX4pRP9lF9fy+U3b+aRe+PdBdi2eYzF7BDu0QG+eWU9F33j35+M8sNba1g6vralhGxLCbO7LJad9Vya6efqfTfxx1gEpGua5Z4eZqNRtsfj7QMkk4azBwf5s++GusWvSkxL3C+xUWKVxJ0ST0iUQiBXIhG2x+PtnwWfja6pW7AkcbtEJpOhVCpRHZVKhXw+jzGGmRDEbDTaPkC5p6e20JcSUQnHcWg2yuUyxhiOh6LQNkDQk90Sxhg8z2sKAJDP5+mVuBz4t2OAXyV6JXK5XJ23qVQKY0zddniehyTevZ4Ab0jID7/rulQqFRzHYZXEoJ8TwSGJvdcT4CkfIDwTfhXYtl0XGUm83SlAMrkC8JvEVxI5iWck7g5ApFIpyuVyDcC2bSTxS6cA2cespkLzoW/cdd26vXccB0k8EPq+LSm+8OJQU4AjPkDQcwDXdUmn02yScDsB+OBp618B9gTCr1ASep6HMYbH2wWY2JGg9GyMxcPDDY3/KHGXDxCRiPnPhUKhBlEoFJDET60CVBuSaj9QNbpTYouvhMEqeEfiO/85n8/XbYV89WwJoNaS+R1RFSAdSLrqvtu2zZMSC/67YrH4D4AvWgEIN6XzU6M1gGMNkq6qhNGQQgLkcjnkK+g1AzRqy6sASz5AUHCajWoSjreShM0uJr+vu7G2yMMNQt3IeDqdRhKfqoXTsNnVrLK1twbgSdwWiES4HygWi7WynAp4/0lfX/tnwXgiUVeCyxKPqvG5IAnLl+tgL7DTsjq7HY8nEsxGo1yJrPSEH0sckJiQuEciI3FC4ueA4eLq1bWe8C/6ASv5oJETowAAAABJRU5ErkJggg==
// @version 1.1
// @grant none
// ==/UserScript==
var links = document.getElementsByTagName("link"),
link = null,
head = document.getElementsByTagName('head')[0],
prev = null;
for(let i = 0; i < links.length; i++)
{
if (links[i].getAttribute("rel") == "shortcut icon")
{
link = links[i];
break;
}
}
if (!link)
{
link = document.createElement('link');
link.type = 'image/x-icon';
link.rel = 'shortcut icon';
link.href = "/web/favicon.ico";
head.appendChild(link);
/*
link = document.createElement('img');
document.body.appendChild(link);
let span = document.createElement("span");
span.className = "activity-badge badge badge-transparent";
span.innerText = "0";
document.body.appendChild(span);
*/
}
var src = link.href,
_coords = [
{// badge < 10
roundRect: [14, 11, 18, 21, 4],
lineWidth: 3,
text: [17, 30],
size: 23,
color: ["#F00", "#FFF", "#000"]
},
{// badge > 9
roundRect: [4, 11, 28, 21, 4],
lineWidth: 3,
text: [5, 30],
size: 23,
color: ["#F00", "#FFF", "#000"]
}
];
(function loop()
{
let badge = document.getElementsByClassName("activity-badge badge badge-transparent");
badge = badge.length ? badge[0].innerText : "";
let text = parseInt(badge);
if (isNaN(text))
text = 0;
if (badge && prev != text)
{
let canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d'),
img = new Image();
canvas.width = 32;
canvas.height = 32;
img.setAttribute('crossOrigin','anonymous');
img.src = src;
img.onload = function()
{
ctx.drawImage(img, 0, 0);
if (text)
{
let coords = _coords[text < 10 ? 0 : 1];
ctx.fillStyle = coords.color[0];
ctx.roundRect.apply(ctx, coords.roundRect).fill();
ctx.font = 'bold ' + coords.size + 'px sans-serif';
ctx.strokeStyle = coords.color[2];
ctx.lineWidth = coords.lineWidth;
ctx.strokeText(text, coords.text[0], coords.text[1]);
ctx.fillStyle = coords.color[1];
ctx.fillText(text, coords.text[0], coords.text[1]);
}
link.href = canvas.toDataURL("image/x-icon");
prev = text;
/*
link.src = canvas.toDataURL("image/x-icon");
badge[0].innerText++;
*/
};
}
setTimeout(loop, 3000);
})();
//https://stackoverflow.com/a/7838871/2930038
CanvasRenderingContext2D.prototype.roundRect = function (x, y, w, h, r)
{
if (w < 2 * r) r = w / 2;
if (h < 2 * r) r = h / 2;
this.beginPath();
this.moveTo(x+r, y);
this.arcTo(x+w, y, x+w, y+h, r);
this.arcTo(x+w, y+h, x, y+h, r);
this.arcTo(x, y+h, x, y, r);
this.arcTo(x, y, x+w, y, r);
this.closePath();
return this;
};