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();
精彩评论