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本地文件甚至不是正確的。或者我沒有正確地調用方法,但是這不應該給我這個錯誤。
嗨。你有測試頁嗎?在此之前,請確保將'bootstrap.native.js'和/或腳本加載到body/app容器的末尾。 – thednp
@thednp嘿!測試頁面是我學校的註冊頁面。這很長,所以我會把它作爲一個新的評論。在那裏,我只是選擇任何類別的標準來顯示(我使用人類學部門+正好101),一旦你有結果,點擊擴展圖標,腳本運行。 (其他評論繼續回覆) – Kevin
爲了確保在我的cody/app容器的末尾加載了bootstrap.native.js,就像你看到的頁面不是我的。我對此很新,所以我可能不會正確地理解你。擴展應該是將頁面注入內容腳本運行的「孤立的世界」(在後臺。js)據我所知。我知道一些代碼我見過嵌入/注入?