javascript - Bootstrap Popover not working in Chrome Extension (Days debugging) -

no matter have tried, can't seem popover work in chrome extension.

the extension intended go through school's registration page, pull info on professors through professor rating website, , show in popover. (and link pages works fine).

here school page. hit subject = art less = 200

some results pop up, click extension icon, , bam script runs.

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 --- aware have 2-3 different attempts @ getting popover work. can't @ work unfortunately.

// handle page's frame (to allow dom access) var page = top.frames["targetcontent"].document;  // reference every professor listed , modify registration page array.from(page.queryselectorall("[id^='mtg_instr$']") ).foreach( el => {     if (el.textcontent == "## heading ##staff") {         return;     }      // every professor found, search rmp page     searchprofessor(el)  });    /**  * search professor on rmp, pass along pagecheck  *   * @param {reference 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 , modify registration page  *   * @param {dom obj} page   * @param {reference prof} element   */ function pagecheck(page,element){     var profurl = page.getelementsbyclassname('listing professor')[0].childnodes[1].href      // if element exists, have hit (and prof's page!)     if (profurl) {         // link prof's rmp page         addanchor(element, profurl);              // access prof's specific rmp page         var xhr1 = new xmlhttprequest();          // create box 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 element   *   * @param {element} wrapper   * @param {string} url   */ function addanchor (wrapper, url) {      var = 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();