// ==UserScript==
// @name         Google Knowledge Graph ID
// @namespace    https://www.brandonfowler.me
// @version      1.0.1
// @description  View the ID of knowledge panels on Google search
// @author       Brandon Fowler
// @match        https://www.google.com/search*
// @grant        none
// @run-at       document-start
// @license      MIT
// @downloadURL none
// ==/UserScript==

window.addEventListener('load', async () => {
	let kpActionEl = document.querySelector('[class*="kp-"] > :first-child');

	if (!kpActionEl) return;

	let controller = await kpActionEl.__jscontroller,
		id = controller.data.toJSON()[1];

	if (!id) return;

	let el = document.createElement('div'),
		text = document.createElement('span'),
		copy = document.createElement('span'),
		link = document.createElement('a');

	text.innerText = 'Knowledge Graph ID: ' + id;
	text.style.marginRight = '8px';
	text.style.verticalAlign = 'middle';

	copy.title = 'Copy ID';
	copy.style.cursor = 'pointer';
	text.style.verticalAlign = 'middle';
	copy.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" style="width:16px;vertical-align:middle;" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2" /><rect x="9" y="3" width="6" height="4" rx="2" /></svg>';

	copy.addEventListener('click', async () => {
		await navigator.clipboard.writeText(id);

		copy.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" style="width:16px;vertical-align:middle;" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2" /><rect x="9" y="3" width="6" height="4" rx="2" /><path d="M9 14l2 2l4 -4" /></svg>';
	});

	link.title = 'Link';
    link.href = 'https://www.google.com/search?kgmid=' + id;
    link.style.color = 'inherit';
    text.style.verticalAlign = 'middle';
    link.innerText = 'link';
    link.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" style="width:16px;vertical-align:middle;" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5" /><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5" /></svg>';

    el.style.marginBottom = '6px';
    el.append(text, copy, link);

    kpActionEl.parentNode.before(el);
});