3

好像我無法訪問腳本中的.popover方法。除非我搞砸了,否則我應該可以從Bootstrap Native(包含Jquery-Bootstrap)文件中訪問該方法。 ?Chrome擴展/引導原生函數未定義? (Javascript)

所有的腳本都是在該元素上添加鏈接和理想的彈出窗口。

這裏是我的代碼:

清單:

{ 
    "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 native:

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) 

引導本地是從他們的引導本地/距離/文件夾中的文件68KB下載。我認爲這可能是問題,因爲當我在該文件中粘貼一個變量時,它可以在內容腳本中訪問,但不是方法。

我對所有這些都感到陌生,所以也許我的bootstrap本地文件甚至不是正確的。或者我沒有正確地調用方法,但是這不應該給我這個錯誤。

+0

嗨。你有測試頁嗎?在此之前,請確保將'bootstrap.native.js'和/或腳本加載到body/app容器的末尾。 – thednp

+0

@thednp嘿!測試頁面是我學校的註冊頁面。這很長,所以我會把它作爲一個新的評論。在那裏,我只是選擇任何類別的標準來顯示(我使用人類學部門+正好101),一旦你有結果,點擊擴展圖標,腳本運行。 (其他評論繼續回覆) – Kevin

+0

爲了確保在我的cody/app容器的末尾加載了bootstrap.native.js,就像你看到的頁面不是我的。我對此很新,所以我可能不會正確地理解你。擴展應該是將頁面注入內容腳本運行的「孤立的世界」(在後臺。js)據我所知。我知道一些代碼我見過嵌入/注入?