Export/import github labels

index.js

// go on you labels pages
// eg https://github.com/cssnext/cssnext/labels
// paste this script in your console
// copy the output and now you can import it using https://github.com/popomore/github-labels !

var labels = [];
[].slice.call(document.querySelectorAll(".label-link"))
.forEach(function(element) {
  labels.push({
    name: element.textContent.trim(),
    // using style.backgroundColor might returns "rgb(...)"
    color: element.getAttribute("style")
      .replace("background-color:", "")
      .replace(/color:.*/,"")
      .trim()
      // github wants hex code only without # or ;
      .replace(/^#/, "")
      .replace(/;$/, "")
      .trim(),
  })
})
console.log(JSON.stringify(labels, null, 2))

Useful! Thank you.

Awesome! Saved me a lot of time :)

Another approach to import github labels via console command

https://gist.github.com/Isaddo/7efebcb673a0957b9c6f07cd14826ea4

@MoOx: Thank you so much mate! ❤️

This script doesn't work on Safari

Great, thank you !

I just used the following which was quick and easy https://github.com/jvandemo/copy-github-labels-cli

(I was linked to this after the fact)

Hi, you can add one line and also get the description:

var labels = [];
[].slice.call(document.querySelectorAll(".label-link"))
.forEach(function(element) {
  labels.push({
    name: element.textContent.trim(),
    description: element.getAttribute("aria-label"),
    // using style.backgroundColor might returns "rgb(...)"
    color: element.getAttribute("style")
      .replace("background-color:", "")
      .replace(/color:.*/,"")
      .trim()
      // github wants hex code only without # or ;
      .replace(/^#/, "")
      .replace(/;$/, "")
      .trim(),
  })
})
console.log(JSON.stringify(labels, null, 2))

and this function to download labels as file directly

function saveJSON(data, filename) {
  const blob = new Blob([JSON.stringify(data, undefined, 4)], { type: 'text/json' });
  const e = document.createEvent('MouseEvents');
  const a = document.createElement('a');

  a.download = filename;
  a.href = window.URL.createObjectURL(blob);
  a.dataset.downloadurl = ['text/json', a.download, a.href].join(':');
  e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
  a.dispatchEvent(e);
}

example

saveJSON(labels, 'labels.json')

Thanks for this! Very helpful

Adding support for description (aria-label does not work for me):

description: element.parentElement.nextElementSibling.textContent.trim()

Support for settings.yml:

function saveYML(text, filename) {
  const blob = new Blob([text], { type: 'text/plain' });
  const e = document.createEvent('MouseEvents');
  const a = document.createElement('a');

  a.download = filename;
  a.href = window.URL.createObjectURL(blob);
  a.dataset.downloadurl = ['text/json', a.download, a.href].join(':');
  e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
  a.dispatchEvent(e);
}

let out = "labels:\n";
for (const l of labels){
    out += `  - name: ${l.name}\n    color: ${l.color}\n    description: ${l.description || '""'}\n`;
}
console.log(out) // or saveYML(out, "labels.yml")

The HTML of the /labels site changed and the querySelector in the code of the gist doesn't find any elements.
To fix it, edit the script and replace:

[].slice.call(document.querySelectorAll(".label-link"))

with:

[].slice.call(document.querySelectorAll(".js-label-link")) (e.g.: .js- label-link)

Here my code example that includes changes to CSS classname and captures the label's description.

var labels = [];
[].slice.call(document.querySelectorAll(".js-label-link"))
.forEach(function(element) {
  labels.push({
    name: element.textContent.trim(),
    description: element.getAttribute("title"),
    // using style.backgroundColor might returns "rgb(...)"
    color: element.getAttribute("style")
      .replace("background-color:", "")
      .replace(/color:.*/,"")
      .trim()
      // github wants hex code only without # or ;
      .replace(/^#/, "")
      .replace(/;$/, "")
      .trim(),
  })
})

console.log(JSON.stringify(labels, null, 2))

Thanks for the original script and thanks @jamesperrin for the update!!

Thanks, very helpful!

Unfortunately seems that GitHub (recently?) changed the color output in style:

<a href="bug" title="Something isn't working" data-name="bug" style="--label-r:215;--label-g:58;--label-b:74;--label-h:353;--label-s:66;--label-l:53;" class="IssueLabel hx_IssueLabel IssueLabel--big lh-condensed js-label-link d-inline-block v-align-top">
<span>bug</span>
</a>

so in JSON you get:

{
    "name": "bug",
    "description": "Something isn't working",
    "color": "--label-r:215;--label-g:58;--label-b:74;--label-h:353;--label-s:66;--label-l:53"
  }

and import fails throwing:
An invalid form control with name='label[color]' is not focusable.
with an error on color input required format.

Hi all,
I updated the code, to solve the color output problem (RGBA to Hex). (@dademaru)
I also changed the attribute from which the description will be pulled.

var labels = [];
function hex(x) {
    return ("0" + parseInt(x).toString(16)).slice(-2);
}
function rgba2hex(rgba) {
    rgba = rgba.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(,\s*\d+\.*\d+)?\)$/);
    return hex(rgba[1]) + hex(rgba[2]) + hex(rgba[3]);
}
[].slice.call(document.querySelectorAll(".js-label-link"))
    .forEach(function (element) {
        labels.push({
            name: element.textContent.trim(),
            description: element.getAttribute("title"),
            color: rgba2hex(window.getComputedStyle(element).getPropertyValue("background-color")),
        })
    })
console.log(JSON.stringify(labels, null, 2))

One can also use: gh api /repos/elastic/$repo/labels to list a repo's label data, e.g.:

% gh api /repos/elastic/apm-agent-nodejs/labels
[
  {
    "id": 2510059555,
    "node_id": "MDU6TGFiZWwyNTEwMDU5NTU1",
    "url": "https://api.github.com/repos/elastic/apm-agent-nodejs/labels/agent-nodejs",
    "name": "agent-nodejs",
    "color": "2c4bba",
    "default": false,
    "description": "Make available for APM Agents project planning."
  },
  {
    "id": 2411255376,
    "node_id": "MDU6TGFiZWwyNDExMjU1Mzc2",
    "url": "https://api.github.com/repos/elastic/apm-agent-nodejs/labels/agent-spec",
    "name": "agent-spec",
    "color": "d8136f",
    "default": false,
    "description": "Related to a cross agent functionality spec."
  },
  {
    "id": 1151180629,
    "node_id": "MDU6TGFiZWwxMTUxMTgwNjI5",
    "url": "https://api.github.com/repos/elastic/apm-agent-nodejs/labels/automation",
    "name": "automation",
    "color": "81a2ef",
    "default": false,
    "description": null
  },
  {
    "id": 1322034517,
    "node_id": "MDU6TGFiZWwxMzIyMDM0NTE3",
    "url": "https://api.github.com/repos/elastic/apm-agent-nodejs/labels/awaiting%20reply",
    "name": "awaiting reply",
    "color": "f3a0f7",
    "default": false,
    "description": ""
  },
...