希望在我的Chrome扩展程序中的某个位置插入CSS for Bootstrap的Popover。这就是我需要做的全部。包括库的CSS,以便设置我的popover(工具提示)样式。
到目前为止,我已经在后台页面尝试了 InsertCSS(),并在头部添加了一个样式表元素,该元素不断抛出一个错误,要求它在“web_accessible_resources”上列出。拼写也是正确的。
我的代码:
注意包含后代的content_script文件。我不认为这里有价值,但是ymmv。太长了,但它就在那里。是的,我正在编辑的页面上有一个框架。
Manifest.json
{
"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!"
}
}
background.js,其中包括已注释掉的尝试。
// On Extension Icon click, inject script
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.insertCSS(tab.id, {file: "bootstrap.min.css", allFrames: "true"});
chrome.tabs.executeScript(tab.id, {file: "content_script.js"});
});
});
});
我的Content_Script文件(问题不需要缩小代码。可以根据要求或我的旧帖发布。)
// Handle page's frame (to allow DOM access)
var page = top.frames["TargetContent"].document;
**STUFF HAPPENS HERE.................**
function addPopover(profPage,profElement) {
// Retrieve & Format Professor Data
var name = profElement.textContent;
var quality = 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();
// Concatenate into 1 string
var content = "Overall Quality: " + quality + "<br />" + "Difficulty: " + difficulty + "<br />" + ratings;
// Set attributes for popover
profElement.setAttribute("data-toggle","popover");
profElement.setAttribute("data-trigger","hover");
profElement.setAttribute("title",name);
profElement.setAttribute("data-content",content);
profElement.setAttribute("data-html",true);
$(profElement).popover();
}