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?

Can I update a file in a GitHub repo using JavaScript?

I built a Chrome extension that collects information from a web page. I want the information to appear on my GitHub pages project site for easy access. Is there a way that I can use JavaScript inside the Chrome extension to update the default.html within the repository?

CSS – Failed to load resource: the server responded with a status of 404 ()

I’m just trying to load my simple website online hosted by Github.io. However, after countless and frustrating efforts of troubleshooting and debugging the HTML & CSS script, my web still couldn’t get the CSS file loaded as desired for some really mysterious and extremely annoying reason.

Don’t get me wrong:

  1. I swear my CSS file is put in the absolute path rather than the relative path as I firstly put it, so I will smash myself if it’s the cause of the error.
  2. After a while couldn’t figure out, I looked over similar or related issues posted on stackoverflow as well, some suggest that the access permission is maybe the reason, but I followed them with the command inside my directory of CSS file

chmod -R 777

But I don’t see it resolves as well cuz the command has no effect, and I didnt run it at the root level
the file is not at the root level

  1. I inspected this web on both Chrome and Safari, and the style.css is blank as it couldn’t be loaded!!! enter image description here

Now, I keep hold on this to wait for any of your “magic” helps. I deeply appreciate the help, as I tried my best fixing it already, but didnt work.
Here is the just HTML link tag line where the file is not loaded.


....