2

I need to insert a sidebar to the left, inside the current page, to show output. Insertion should not hide the main page,

enter image description here

rather, it should squeeze or adjust, showing all content.

Problem is, the solution I got does not apply to all type of webpage, is there a way to insert sidebar the way I described?

Thanks.

Consider Non-Trivial Cases
  • 49
  • 2
  • 12
  • Plz see the following comment to understand the problem: https://stackoverflow.com/questions/72649340/how-to-insert-sidebar-inside-the-current-page-to-show-output/72677798#comment128378907_72677798 – Consider Non-Trivial Cases Jul 12 '22 at 18:57
  • 1
    It's unlikely you'll be able to make this work for all pages without comprehensively updating the page's CSS and tracking all style changes to the page. – Ouroborus Jul 12 '22 at 18:57
  • @Ouroborus Is the number of variation large? I am not experienced, so I don't know, but if there are a few number of ways, then we can check, and take necessary step programmatically. – Consider Non-Trivial Cases Jul 12 '22 at 19:00
  • Instead of doing it that way, you could always have a BUTTON float to the left of the screen that when pressed it will slide the panel out above the website. Then the button can be pressed and the panel will slide back in. – imvain2 Jul 12 '22 at 19:16
  • @imvain2 The sidebar will contain some text which will be compared with the text of current tab, if some part is hidden (of the current tab) when the sidebar is on by clicking button, the extension becomes pointless :( – Consider Non-Trivial Cases Jul 12 '22 at 19:23
  • Hope this link will help your constraint https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_sidebar_shift. – y051 Jul 15 '22 at 04:02
  • 1
    can the main page load in an iframe? – David Jul 15 '22 at 14:48
  • @David not educated enough in JavaScript to understand what you said, kindly elaborate. – Consider Non-Trivial Cases Jul 16 '22 at 05:35
  • Iframe is an html-element and explained here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe – David Jul 16 '22 at 08:08
  • @David the link is not required, one can google, your question is not concrete, if you're asking whether we can inject/insert iframe in to current page, then answer is, probably no, possible issue is, inserting local HTML as iframe to a webpage, which is not on same server – Consider Non-Trivial Cases Jul 16 '22 at 08:44
  • No actually it would be the sidebar on the same server and the foreign page would load in an iframe. – David Jul 16 '22 at 08:58
  • @David something like that... but note the question is regarding a Chrome extension, the HTML inside iframe will local file.... – Consider Non-Trivial Cases Jul 16 '22 at 10:31
  • @David unfortunately the iFrame idea would also not work for the OP, as a lot of websites have a Cross-Origin Security Policy that prohibits them being displayed in an iFrame – Aaron Meese Jul 16 '22 at 20:07
  • 1
    @AaronMeese yes, I realized it, and that wouldn't be the only problem. – David Jul 17 '22 at 00:32
  • I think you can use devtools extension as a work around – raoof Jul 19 '22 at 11:49

1 Answers1

0

I don't believe there could be a truly universal solution, but I hope I can support as much cases as possible with my createDockedSidebar function.

It takes the following parameters :

  • parentElement is the one in which the sidebar will be mounted (body by default) ;
  • element is the sidebar itself (a newly created div by default) ;
  • size is the width/height of the sidebar (required number) ;
  • placement is either left, top, right or bottom (left by default) ;
  • strategy is the approach used to make space for the sidebar :
    • margin & padding apply either to parentElement
    • children-margin & children-padding apply either to all children of parentElement
    • children-transform applies translateX/translateY to all children of parentElement
    • container moves all children of parentElement another element ;
  • container is the element in which all children of parentElement are moved when using the container strategy.

children-transform & container are the only strategies that may support top & bottom values for placement.

On Wikipedia, container is the only strategy that will work properly. Luckily, it's a server-side rendered website.

Indeed, client-side rendered websites have higher chances of breaking this mode, as they might move elements back to their original position, especially during navigation. Although MutationObserver might help overcoming this on PWAs, they would probably become unstable.

More tests :

  • on StackOverflow, all strategies but container work, although children-margin is the only one that will handle the header ;
  • on MDN, all strategies will work except top/bottom placements ;
  • on Google, all strategies except container will work for left placement and none will work for top/right/bottom placements ;
  • on GitHub and Reddit (old), all strategies except top/bottom placements and right placement for children-transform will work.
KaKi87
  • 915
  • 7
  • 15
  • Thank you very much for your effort, to test your code, plz adjust it according to the `content.js` from this link (the source of the problem): https://stackoverflow.com/q/72649340/11974735 thank you. – Consider Non-Trivial Cases Jul 21 '22 at 08:48
  • I don't understand what adjustment do you need – KaKi87 Jul 21 '22 at 09:00
  • I'm guessing you'd replace `view.document.body.appendChild(edit)` with `createDockedSidebar({ parentElement: view.document.body, element: edit })`. – KaKi87 Jul 21 '22 at 13:08
  • Please share a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of your extension that I could run on my browser. – KaKi87 Jul 22 '22 at 12:28
  • I misunderstood your code : the `parentElement` parameter should not be specified, and the `view` variable can be removed. – KaKi87 Jul 24 '22 at 18:49
  • Please share a reproducible demonstration using the `content.js` given in the above link. – Consider Non-Trivial Cases Jul 25 '22 at 13:50
  • 1
    Unfortunately, your code could not be awarded the bounty as you failed to demonstrate... suggestion is, delete this answer, post with proper demonstration in the original post linked by OP, according to that context, and ping me, I might award bounty declaring exclusively for you, provided that it is working. – Michael Jul 31 '22 at 09:02