If github repo contains KiCad project file, add button to visit in KiCanvas

[CapnKernel]

There's no problem, no bug. Just want to let you know about a feature I added to make using KiCanvas easier.

This is a TamperMonkey script, which can be run in the Chrome browser. With this script, if you visit a project repo that has a KiCad project file in it, a new "KiCanvas" button is added to the github page. Clicking this button sends you to KiCanvas so you can view the project.

// ==UserScript==
// @name         GitHub KiCanvas Button
// @namespace    https://github.com/
// @version      1.0
// @description  Adds a KiCanvas button to GitHub repos that have a .kicad_pro file
// @match        https://github.com/*/*
// @grant        GM_xmlhttpRequest
// @connect      api.github.com
// @run-at       document-end
// ==/UserScript==

(function() {
    'use strict';

    // Detect owner/repo from URL
    const match = window.location.pathname.match(/^\/([^/]+)\/([^/]+)(\/|$)/);
    if (!match) return;

    const owner = match[1];
    const repo  = match[2];
    const repoUrl = `https://github.com/${owner}/${repo}`;

    // Query GitHub API for root directory contents
    const apiUrl = `https://api.github.com/repos/${owner}/${repo}/contents/`;

    GM_xmlhttpRequest({
        method: "GET",
        url: apiUrl,
        headers: { "Accept": "application/vnd.github.v3+json" },
        onload: function(response) {
            if (response.status !== 200) return;
            const files = JSON.parse(response.responseText);
            const hasKicadPro = files.some(f => f.name.endsWith(".kicad_pro"));
            if (hasKicadPro) addKiCanvasButton();
        }
    });

    function addKiCanvasButton() {
        const interval = setInterval(() => {
            const actionsList = document.querySelector('ul.pagehead-actions');
            if (!actionsList) return;

            clearInterval(interval);

            // Build a <li> that looks like GitHub’s action buttons
            const li = document.createElement("li");

            const a = document.createElement("a");
            a.className = "btn btn-sm"; // similar style to GitHub buttons
            a.textContent = "KiCanvas";
            a.href = `https://kicanvas.org/?github=${encodeURIComponent(repoUrl)}`;
            a.style.marginRight = "4px";

            li.appendChild(a);
            actionsList.insertBefore(li, actionsList.firstChild); // Insert to the left
        }, 300);
    }
})();

[theacodes]

This is awesome! Would you be up for sending a PR to add a link to it from the docs? Maybe on a new page titled "Related projects"?

[arturo182]

Very cool!

If you make it a Gist, name it <something>.user.js and then link to the raw file, TamperMonkey will automatically ask to install it when visiting! For example: https://gist.github.com/arturo182/e488bbb641c906143930a97c9438b696/raw/ad808a957e7583059069e68242960ccbf59f3163/twitter-favicon.user.js