CSS rules, applied using chrome.tabs.insertCSS not getting applied to the <div> elements whereas, they are applied to the <p> elements

593 views
Skip to first unread message

Apurva Jalit

unread,
Mar 14, 2015, 12:44:23 PM3/14/15
to chromium-...@chromium.org
I trying pretty hard since 2 days to get my chrome extension working. My background script triggers a content script that add few elements to the DOM of the host page. These elements are actually my extension's UI and I want to make it appear like a popup. To do that I am appying a CSS using chrome.tabs.insertCSS but it just does not work. Following are some snippets of the code:

backgroud.js:
chrome.browserAction.onClicked.addListener(function (tab) {
    //Called when the user clicks on the browser action icon.    
    chrome.tabs.insertCSS(null, { file: "Style/abc.css" });

    console.log("Executing content scripts");
    //TODO Change the following. It is not scalable to introduce more content scripts
    chrome.tabs.executeScript(tab.id, { file: "Scripts/External/jquery-2.1.3.min.js" }, function () {
        chrome.tabs.executeScript(tab.id, { file: "Scripts/Content/loadExtUI.js" }, function () {
            chrome.tabs.executeScript(tab.id, { file: "Scripts/Content/sendDetails.js" });
        });
    });
});

loadExtUI.js
 $.get(chrome.extension.getURL("HTML/popup.html"), function (data) {
        
        $($.parseHTML(data)).appendTo('body');
}

popup.html
<!doctype html>
<html>
  <head>
    <title></title>
  </head>
    
  <body>
      <div> <p>Hello world</p></div>
      <p>check para</p>
  </body>
</html>

abc.css
div {
    border: 2px solid;
    border-radius: 25px;
}
    

p {
    background-color: brown;
}

h1{
    background-color:aqua; 
}

Just for reference: The host page on which I am testing this is a very simple page with the following code:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Chrome Extension test page</title>
</head>
<body>        
    
    <p>Use this page to test your Chrome extension</p>

    <div class="divcheck">
        The /app/ folder is where the Chrome extension is located
    </div>


    <h1>Hellllooodskkdsfsldfs</h1>

</body>
</html>


Thanks,
Apurva Jalit
Reply all
Reply to author
Forward
0 new messages