Chrome extension function from bootstrap library not defined? (Do I need to ‘inject’ it?)

Home / Uncategorized / Chrome extension function from bootstrap library not defined? (Do I need to ‘inject’ it?)

It seems like I can’t access the .popover method inside my script. Unless I screwed up, I should have access to that method from the Bootstrap Native (Jquery-free Bootstrap) file included.(?)

What the script does is add links and ideally a popover on that element.

Here is my code:

"name": "foo",
"description": "Work in Progress",
"manifest_version": 2,
"version": "0.8",
"icons": {
"16": "icon16.png",
"48": "icon48.png",
"128": "icon128.png"
"permissions": [
"background": {
"scripts": ["background.js"],
"persistent": false
"browser_action": {
"default_title": "Click me!"

Background: (runs on icon click)
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(, {file: "bootstrap-native.js" }, function() {
chrome.tabs.executeScript(, {file: "content_script.js"});


// 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 == "Staff") {

// For every professor found, search for RMP page


* 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) {


// Search RMP using CSUF + Prof Name‘GET’, ‘’ + professorEl.textContent +’&_action_search=Search’);
xhr.responseType = ‘document’;

* 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) {
}‘GET’, ProfURL);
xhr1.responseType = ‘document’;



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);

Link to bootstrap native:


Error :
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 the 68kb file from their bootstrap native/dist/ folder you download. This could be the issue, because when I stick a variable in this file it is accessible inside the content script, but not the methods.

Brand new to all of this, so maybe the file I have for bootstrap native isn’t even the correct one. Or I’m not calling the method correctly, but that shouldn’t give me this error.


Read more

Leave a Reply

Your email address will not be published. Required fields are marked *