javascript - Chrome 扩展/Bootstrap native 函数未定义？ (Javascript)

Question

似乎我无法访问脚本中的 .popover 方法。除非我搞砸了，否则我应该可以从包含的 Bootstrap Native(无 Jquery Bootstrap)文件访问该方法。 ？

脚本所做的只是添加链接，最好在该元素上添加一个弹出窗口。

这是我的代码:

list :

{
  "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!"
  }
}

背景:(单击图标时运行)

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'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") {
        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) {

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

链接到 Bootstrap 原生:

https://github.com/thednp/bootstrap.native

和

http://thednp.github.io/bootstrap.native/

错误:

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 是您下载的 bootstrap native/dist/文件夹中的 68kb 文件。我认为这可能是问题所在，因为当我将变量粘贴到该文件中时，它可以在内容脚本中访问，但不能在方法中访问。

我对这一切都很陌生，所以也许我的 Bootstrap 原生文件甚至不是正确的文件。或者我没有正确调用该方法，但这不应该给我这个错误。

Answer 1

基于此thread ，请确保将 jQuery 和 Bootstrap 依赖项添加到 list 文件中。

当您调用方法popover时，可能 Bootstrap 脚本尚未加载。

You have 2 options:

1. To call the method on $(window).load - http://output.jsbin.com/qoteqe
2. Include the bootstrap and jQuery references in the DOM and not load them in the script: http://output.jsbin.com/tamoda

以下是一些可能有帮助的相关帖子:

• popover is not a function error
• How to handle Uncaught TypeError: $(...).popover is not a function when two jquery files got loaded?
• jQuery Tooltip script error TypeError: JQuery(...).tooltip is not a function