Chrome Extension / Bootstrap Native Function undefined? (Javascript)
It looks like I can't access the .popover method inside my script. Unless I messed up, I should have been able to access this method from the included Bootstrap Native (JQuery Bootstrap) file.
All script is links for links and ideally a popover for that element.
Here is my code:
Manifesto:
{
"name": "foo",
"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": ["background.js"],
"persistent": false
},
"browser_action": {
"default_title": "Click me!"
}
}
Background: (starts when the icon is clicked)
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(tab.id, {file: "bootstrap-native.js" }, function() {
chrome.tabs.executeScript(tab.id, {file: "content_script.js"});
});
});
content_script.js:
// Handle page 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 == "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 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 page!)
if (ProfURL) {
// Link to the prof RMP page
addAnchor(element, ProfURL);
// Access the prof 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) {
profElement.popover({title: "Header", content: "Blabla", trigger: "click"});
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();
}
/**
* 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);
}
Native download link:
https://github.com/thednp/bootstrap.native
and
http://thednp.github.io/bootstrap.native/
Mistake:
content_script.js:75 Uncaught TypeError: profElement.popover is not a function
at addTooltip (content_script.js:75)
at XMLHttpRequest.xhr1.onreadystatechange (content_script.js:61)
bootstrap-native is a 68kb file from the boot boot boot / dist / folder. I think this might be a problem because when I attach a variable in this file, it is available inside the content of the script, but not for methods.
I am brand new to all of this, so maybe the file I have for bootstrap native is not even correct. Or am I calling the method incorrectly, but that shouldn't give me this error.
source to share
Based on this thread, make sure you add jQuery and Bootstrap dependencies to your manifest file.
When you call the method popover
, the bootstrap script may not have loaded yet.
You have 2 options:
- To call a method on
$(window).load
- http://output.jsbin.com/qoteqe- Include bootstrap and jQuery references in the DOM and don't load them in your script: http://output.jsbin.com/tamoda
Here are some related posts that might help:
source to share