Having difficulty gaining access to the GitHub API in JavaScript

My end goal is to be able to display information from a Chrome extension on a GitHub Pages site. After doing many hours of searching and trying to find some way to do this, it seems the only possible way is through GitHub’s API.

My extension uses two main JavaScript files and has no HTML involved. I’m pretty sure the extension needs an HTML file to reference the GitHub API with . Any attempts I’ve made to do that have been fruitless.

When I try to import the .js file for the API, I get Uncaught SyntaxError: Unexpected identifier. I suspect it’s because there’s no HTML file that points to the URL of the .js file.

Here’s what I have so far:

manifest.json:

{
  "name": "LunchBox",
  "version": "0.3",
  "description": "Collects lunch information from UltiPro",
  "permissions": ["declarativeContent", "activeTab", "storage"],
  "content_scripts": [
    {
      "matches": [""],
      "all_frames": true,
      "run_at": "document_idle",
      "js": ["content.js"]
    }
  ],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "page_action": {
    "default_icon": {
      "16": "images/favicon_16.png"
    }
  },
  "icons": {
    "16": "images/favicon_16.png"
  },
  "web_accessible_resources": [
    "main.html"
  ],
  "manifest_version": 2
}

As you can see, I allowed the extension to have access to main.html, which looks like this:

main.html:






    


Even though it has a script referencing the necessary JavaScript file, it still does not allow me to import without errors.

background.js:

// Enable extension if user is on the specified page
chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
      chrome.declarativeContent.onPageChanged.addRules([{
        conditions: [new chrome.declarativeContent.PageStateMatcher({
          pageUrl: {hostEquals: 'amastin-microcenter.github.io'}, // Testing page
          //css: ["span[id='???']"]
        })
        ],
            actions: [new chrome.declarativeContent.ShowPageAction()]
      }]);
    });

content.js:

    import GitHub from './GitHub.min.js';


// const gh = new GitHub({
//     token: '67cfcd62766fd764a23d'
// });
//
// const me = gh.getUser();
// me.listStarredRepos()
//     .then(function({data: reposJson}) {
//         console.log('You have ${reposJson.length} repos!');
//     });

function getTime(){
    let today = new Date();
    let currentTime = new Date();

    let currentHour = today.getHours();
    let currentMinute = today.getMinutes();

    let meridiem;
    currentHour < 12 ? meridiem = "AM" : meridiem = "PM"; // set meridiem to AM if currentHour is before noon, else PM

    // Converts 24-hour time to 12-hour time and sets current hour to that.
    currentTime.setHours(currentHour % 12);

    // Formats currentMinute so that its properly readable.
    // ex. currentMinute = 7 ---> 07
    if (currentMinute < 10){
        currentMinute = "0" + currentMinute;
    }

    currentTime.setMinutes(currentMinute);

    return currentTime.getHours() + ":" + currentTime.getMinutes() + ":" + today.getSeconds() + " " + meridiem;
}


// Wait for window to load
window.onload = function() {

    // if (window.location.hostname === "amastin-microcenter.github.io"){

    console.log("===== LUNCHBOX =====");
    console.log("Extension Loaded.");


    /* For some reason, UltiPro fires window.onload events numerous times.
     * This JavaScript will be executed every time an event fires.
     * The elements that we are looking for may not be loaded when the code is run,
     * so the if-statements are necessary to grab and store the desired information.
     */

    /* getElementsByTagName returns an array of the specified elements.
     * In order to choose a specific element, you have to specify it's index.
     */

    // The code below sets the user's name to a variable
    if (document.getElementById("loginUserName") != null){
        console.log("Found user's name.");
        var username = document.getElementById("loginUserName").innerText;
    }

    // The code below sets the 'Clock On' and 'Clock Off' buttons to variables    
    if (document.getElementsByTagName("button").length == 2){
        var clockOn = document.getElementsByTagName("button")[0];
        var clockOff = document.getElementsByTagName("button")[1];

    }     

    /* If the buttons are found, it is printed to the console. 
     * An event listener is added to the 'Clock On' and 'Clock Off' buttons.
     * The event listener listens for clicks. When clicked, it records the
     * time that the button was pressed. The information is then sent to the GitHub repository.
     */
    if (clockOn != null){
        console.log("First button found");
        // Add an EventListener to listen for clicks on each of the buttons
        clockOn.addEventListener('click', function() {
        console.log("Clocked on at " + getTime());
    }, false);

    }
    if (clockOff != null){
        console.log("Second button found");
        console.log("====================");
        clockOff.addEventListener('click', function() {
        console.log("Clocked off at " + getTime());
    }, false);
    }

    if (document.getElementsByClassName("today").length == 1){
        var today = document.getElementsByClassName("today");
        console.log(today);
    }


};



/* Figure out some way to access the GitHub API
 * Ultimately you will need to incorporate the API tokens from GitHub Apps (https://github.com/settings/applications/833784)
 * Updating a file on GitHub uses PUT (https://developer.github.com/v3/repos/contents/#update-a-file)
 */

So as you can see, I'm basically just collecting some basic information and then trying to push it over to GitHub with the API. I'm using this wrapper to access the API.

I tried downloading all of the files for the API and putting them in the same directory as the extension, but that didn't do anything either.

So what do I need to do to get this working, or am I completely off track here?

Custom GitHub tab with own extension

I am making an extension for github.
I already created extension for VSTS.

enter image description here

My goal – write extension that adds some custom tab with own functionality.

enter image description here

Github guide explains that I can create “github app” that will send to my webhook server all changes that I subscribed them. But nothing about new functionality on their site in difference that VSTS.

I installed extensions of other developers that add this custom tab. But they all required installation of chrome extension.

Do I need to develop chrome extension that adds this tab on github.com pages.
Or Is there other ways to implement this?

Authenticate Github app through chrome extension

I built a chrome extension which uses the Github API so I need an access token to avoid the rate limits. I don’t need the authentication for anything else. The examples I read always included the client secret (even a chrome extension example ) but I can’t included it for obvious reasons. What’s the default process to resolve this issue? I’m new to both Chrome extension and Github Auth so every resource on the topic is appreciated.

chrome extension – how does Zenhub sync data with other members in the same repo?

I am making an extension for github. And I want to sync data with other people at the same repo.

For example, in Zenhub, the pipelines of a board is synced automatically with other members. In other words, if I remove Back log, other members can’t see the Back log pipeline in their board.
enter image description here

How can I implement that? I can’t find any answers about this.

Can I authenticate a user from a Chrome Extension via their Github account without a backend server?

I am writing a Chrome extension^ and want allow users to authenticate via their Github account (targeting developers). I don’t want to setup a back-end server just for authentication, because all functionalities work perfectly offline within a browser.

I have done some research. It seems that there are two options to implement OAuth without your own backend server:

  1. Implicit grant (which github does not support?)
  2. Use some other services (e.g. Auth0)

My questions are:

  1. Can I authenticate a user via their Github account without any backend server?
  2. If I have to what does the authentication flow look like?

^ the tool without the authentication feature can be found here.

Github Oauth using Chrome Web apps issue

I’m trying to authenticate to github using my Chrome web app.

When I click on the button, I get the callback and I get this error in console.

Unchecked runtime.lastError while running identity.launchWebAuthFlow:
The user did not approve access.

popup.js

var githubButton = document.getElementById('github');
githubButton.addEventListener('click', function() {
    var CLIENT_ID = "da1d7c12a3ab20decba5";
    var CALLBACK_URL = chrome.identity.getRedirectURL("oauth2");
    var AUTH_URL = 'https://github.com/login/oauth/authorize/?client_id='+CLIENT_ID+'&redirect_uri='+CALLBACK_URL+'&scope=notifications';
    // Opens a window to initiate GitHub OAuth, fires callback
    // with token in the URL.
    chrome.identity.launchWebAuthFlow({
        url: AUTH_URL,
        interactive: true,
    }, function(redirectURL) {
        var q = redirectURL.substr(redirectURL.indexOf('#')+1);
        var parts = q.split('&');
        for (var i = 0; i < parts.length; i++) {
            var kv = parts[i].split('=');
            if (kv[0] == 'access_token') {
                token = kv[1];
                console.log('token is', token);
            }
        }
    });
}, false);

Manifest.json

  "permissions": [
    "cookies",
    "activeTab",
    "identity",
    "storage",
    "*://*.github.com/*"
   ],

index.html


Not really sure where I'm going wrong 🙁 Please kindly enlighten me!

I just want to get to access_token so that I can do some POST requests.