Reader definition
apiVersion: v1
kind: reader
metadata:
id: github/profile
version: 0.0.1
name: Github Profile Reader
description: Read information from a Github user profile
definition:
isAvailable:
# Github profile URLs have the form: https://github.com/<username>/. So we have match on all Github URLs
# by including a glob '*' after the hostname
matchPatterns: "https://github.com/*"
# We can pick any element that will be available if we're on a user profile page
selectors: .vcard-details
reader:
type: jquery
selectors:
# alternatively could use ".vcard-fullname" or "[itemprop='name']" here
name: ".p-name"
# alternatively could use ".vcard-username" or "[itemprop='additionalName']" here
username: ".p-nickname"
Foundation
apiVersion: v1
kind: extensionPoint
metadata:
id: github/profile-menu
version: 0.0.1
name: Github user profile menu action
description: Add an item to the Github profile sidebar
definition:
type: menuItem
# The id of our reader we created
reader: github/profile
# We use the same isAvailable that we used for the reader, because they'll
# be available in the same context
isAvailable:
matchPatterns: https://github.com/*
selectors: .vcard-details
defaultOptions:
# Using a mustache template for the default caption. The name variable
# is provided by our reader
caption: Action for {{name}}
icon:
id: box
library: bootstrap
size: 16
# We want the the unordered list element (ul) that also has the class
# name vcard-details
containerSelector: ul.vcard-details
# Wrap the icon in a span octicon class because the Github page uses
# the octicon class to determine the margin on the icon. Try it without
# the span, and see how the page renders.
template: |
<li class="vcard-detail pt-1 css-truncate css-truncate-target "><span class="octicon">{{& icon }}</span>
<a class="link-gray-dark" href="#">{{ caption }}</a>
</li>
The easiest way to define a template is to copy one of the existing elements on the page, and then trim out any of the information that's specific to that element.
In the Chrome inspector, right click one of existing menu items, and click "Copy Element"
<li itemprop="url" data-test-selector="profile-website-url" class="vcard-detail pt-1 css-truncate css-truncate-target "><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg>
<a rel="nofollow me" class="link-gray-dark " href="https://toddschiller.com">https://toddschiller.com</a>
</li>