包含CSS和Chrome扩展程序? (程序注射扩展)

时间:2017-08-23 18:03:01

标签: javascript jquery html css twitter-bootstrap

希望在我的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();


}

0 个答案:

没有答案