Databases
StackOverflow2013
Postsdbo
POUse jScrollPane in a Chrome extension from within content script
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POUse jScrollPane in a Chrome extension from within content script
    primarykey
    data
    text
    <p>I'm writing a chrome extension - using content script.</p> <p>Basically, I'm inserting a <code>div</code> inside another web page's <code>DOM</code> and inserting custom content in that. Need to make this <code>div</code> scrollable and am trying to make the scroll bars look better than the default.</p> <p>After having inserted the <code>div</code>, running the following code to add <code>jScrollPane</code>.</p> <pre><code>$('#someFrame').contents().find('[class="my-scroll-pane"]').jScrollPane(); </code></pre> <p><code>someFrame</code> is the <code>ID</code> of an <code>iframe</code> already existent on the web page &amp; <code>my-scroll-pane</code> is a CSS class I've applied to the <code>div</code> I inserted in the <code>iframe</code>.</p> <p>In the <code>manifest.json</code> file, I've included the following:</p> <pre><code>"css": ["css/jscrollpane.css"], "js": [ "plugins/jquery.min.js", "plugins/jquery.mousewheel.js", "plugins/jquery.jscrollpane.js", "js/my_script.js" ] </code></pre> <p>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.</p> <pre><code>$('#someFrame').contents().find('head').append("&lt;link id='my_css_jscrollpane' href='" + chrome.extension.getURL("css/jscrollpane.css") + "' type='text/css' rel='stylesheet' /&gt;"); </code></pre> <p>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.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USSameet
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COIn which script are you inserting this div and which script are you executing `jScrollPane()`? Is this the same content script? I don't think you can manipulate iframe content like that. You would need to inject content script to that iframe.
      singulars
      1. POUse jScrollPane in a Chrome extension from within content script
      1. USserg
    2. COBoth operations - inserting my div and calling jScrollPane - in the same content script - my_script.js. The div gets inserted, I can manipulate any content in the iframe from within this same content script.
      singulars
      1. POUse jScrollPane in a Chrome extension from within content script
      1. USSameet
    3. COJust for reference this is how I insert my div - $('#someFrame').contents().find('div[id="someExistingDiv"]').after('<div id="myNewDiv">My Content - that I need to make scrollable</div>');
      singulars
      1. POUse jScrollPane in a Chrome extension from within content script
      1. USSameet
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload