0

I can't seem to get popover to work in my chrome extension.

The extension is intended to go through my school's registration page, pull up info on my professors through a professor rating website, and show it in a popover. (And link to the pages which works fine).

Here is the school page. Just hit something like Subject = Art Less than = 200

Some results pop up, you click the extension icon, and bam the script runs. With all that, maybe the error is in my code. I'm not sure.

My code:

Manifest:

{
  "name": "RMP",
  "description": "Work in Progress",
  "manifest_version": 2,
  "version": "0.8",
  "icons": { 
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png" 
  },
  "permissions": [
    "activeTab",
    "http://*/",
    "https://*/"
  ],
  "background": {
    "scripts": ["jquery-3.2.1.min.js","bootstrap.min.js","background.js"],
    "persistent": false
  },
  "browser_action": {
    "default_title": "Click me!"
  }//,
  //"web_accessible_resources": ["bootstrap-native.js"]
}

Background:

chrome.browserAction.onClicked.addListener(function(tab) {
    chrome.tabs.executeScript(tab.Id, {file: "jquery-3.2.1.min.js"}, function() {
        chrome.tabs.executeScript(tab.Id, {file: "bootstrap.min.js"}, function(){
            chrome.tabs.executeScript(tab.Id, {file: "content_script.js"})
        });
    });
});

Content_script.js:

NOTE --- I am aware I have like 2-3 different attempts at getting popover to work. Can't get anything at all to work unfortunately.

// Handle page's frame (to allow DOM access)
var page = top.frames["TargetContent"].document;

// Reference every professor listed and modify the registration page
Array.from(page.querySelectorAll("[id^='MTG_INSTR$']") ).forEach( el => {
    if (el.textContent == "## Heading ##Staff") {
        return;
    }

    // For every professor found, search for RMP page
    searchProfessor(el)

});



/**
 * Search for professor on RMP, then pass along to pageCheck
 * 
 * @param {Reference to prof} professorEl 
 */
function searchProfessor(professorEl) {
    var xhr = new XMLHttpRequest();

    xhr.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            pageCheck(this.response,professorEl);

        }
    }

    // Search RMP using CSUF + Prof Name 
    xhr.open('GET', 'https://www.ratemyprofessors.com/search.jsp?queryoption=HEADER&queryBy=teacherName&schoolName=california+state+university+fullerton&schoolID=&query=' + professorEl.textContent +'&_action_search=Search');
    xhr.responseType = 'document';
    xhr.send();
}



/**
 * Verify prof's page exists and modify registration page
 * 
 * @param {DOM Obj} page 
 * @param {Reference to prof} element 
 */
function pageCheck(page,element){
    var ProfURL = page.getElementsByClassName('listing PROFESSOR')[0].childNodes[1].href

    // If the element exists, we have a hit (and the prof's page!)
    if (ProfURL) {
        // Link to the prof's RMP page
        addAnchor(element, ProfURL);    

        // Access the prof's specific RMP page
        var xhr1 = new XMLHttpRequest();

        // Create box to display prof info on hover
        xhr1.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                addTooltip(this.response,element);
            }
        }

        xhr1.open('GET', ProfURL);
        xhr1.responseType = 'document';
        xhr1.send();

    }

}

function addTooltip(profPage,profElement) {

    var name = profElement.textContent;
    var grade = profPage.getElementsByClassName('grade')[0].textContent;    
    var difficulty = profPage.getElementsByClassName('grade')[2].textContent;
    var ratings = profPage.getElementsByClassName('table-toggle rating-count active')[0].textContent;
    ratings = ratings.trim();
    var content = "Grade: " + grade;

    profElement.firstChild.setAttribute("data-toggle","popover");
    profElement.firstChild.setAttribute("data-trigger","hover");
    profElement.firstChild.setAttribute("title",name);
    profElement.firstChild.setAttribute("data-content",content);
    //profElement.popover();
    $("[data-toggle=popover]",top.frames["TargetContent"]).popover();

}






/**
 * Assign hyperlink to element 
 * 
 * @param {Element} wrapper 
 * @param {String} URL 
 */
function addAnchor (wrapper, URL) {

    var a = document.createElement('a');
    a.href = URL;
    a.textContent = wrapper.textContent;

    // Opens in new window/tab
    a.setAttribute('target', '_blank');
    wrapper.replaceChild(a, wrapper.firstChild);
}


$(document).ready(function()
{
  $('[data-toggle=popover]').popover(
  {
     trigger: 'hover',
     html: true,
     placement: 'right',
     content: 'hello world'
  });
});
 $("[data-toggle=popover]",top.frames["TargetContent"]).popover();
$(".PSLONGEDITBOX",top.frames["TargetContent"].document).popover();
Kevin
  • 129
  • 11
  • 1
    What *exactly* is shown in the [various appropriate consoles for your extension](https://stackoverflow.com/a/38920982/3773011) when you load and execute your extension? – Makyen Aug 21 '17 at 19:42
  • @Makyen I actually figured it out. When I write profElement.firstChild.setAttribute.... I was actually appending all of the attributes to the element's link anchor. So it wouldn't initalize it. Maybe if I tried to initialize it with profElement.firstChild.popover(); It'd work, but I didn't try it. Just cleaned it up. Now the popover is clear and has no styling. Not sure why that is (is it empty by default?) – Kevin Aug 23 '17 at 07:34
  • @Makyen so right now I need to add the CSS for the .popover I believe. Not sure how to do that with the programmatic injection. Any pointers, let me know!! – Kevin Aug 23 '17 at 07:36
  • 1
    You can add CSS from a content script by adding a ` – Makyen Aug 23 '17 at 07:52
  • @Makyen From what I understand, programatic injection is somewhat of both a background and a content script as it fires off like a background script, but has DOM access. So I could technically use both then I believe. The script has access to the page's DOM, so I could inject it with a – Kevin Aug 23 '17 at 10:19

0 Answers0