Use jScrollPane in a Chrome extension from within content script

I'm writing a chrome extension - using content script.

Basically, I'm inserting a div inside another web page's DOM and inserting custom content in that. Need to make this div scrollable and am trying to make the scroll bars look better than the default.

After having inserted the div, running the following code to add jScrollPane.

$('#someFrame').contents().find('[class="my-scroll-pane"]').jScrollPane();

someFrame is the ID of an iframe already existent on the web page & my-scroll-pane is a CSS class I've applied to the div I inserted in the iframe.

In the manifest.json file, I've included the following:

开发者_运维知识库

"css": ["css/jscrollpane.css"],
"js": [ "plugins/jquery.min.js", "plugins/jquery.mousewheel.js", "plugins/jquery.jscrollpane.js", "js/my_script.js" ]

Didn't work. There was no javascript error thrown either. I doubted if CSS not being a part of the main page's DOM was the problem. So, tried the following hack in the content script.

$('#someFrame').contents().find('head').append("<link id='my_css_jscrollpane' href='" + chrome.extension.getURL("css/jscrollpane.css") + "' type='text/css' rel='stylesheet' />");

Didn't work. Again, no errors thrown. I confirmed that the link tag was correctly inserted inside the head section. Please guide about the right way to go about this.

---

Responding to your last comment:

It didn't work because you are still do everything from a parent page. You need to inject all your content scripts into iframe and do everything inside iframe, not from parent page.

You can't access iframe js from parent page, so when you are calling .jScrollPane() on parent page it is still referencing to parent's page library, even though you are injecting it to both parent and iframe.

UPDATE

manifest.json:

"content_scripts": [
    {
      "matches": ["http://iframe.domain.com/*"],
      "css": ["css/jscrollpane.css"],
      "js": [ "plugins/jquery.min.js", "plugins/jquery.mousewheel.js", "plugins/jquery.jscrollpane.js", "js/my_script.js" ]
    }
  ],

my_script.js:

$(".my-scroll-pane").jScrollPane();