I am building a Chrome extensions which injects a decent amount of JavaScript, CSS, and HTML into the page DOM for the current webpage tab. It it does so to show a Modal window with my extensions functionality in that modal.
I cannot use the background or popup scripts to do what I need to do so I have to use a content script which injects into the actual page DOM.
My issue so far is I have to be super careful with CSS class names and JS as well as I have discovered if the page has a CSS class matching the name of any of my extensions CSS, my extensions ends up over-riding the pages CSS!
I have seen that some other extensions that have to do a lot of HTML, CSS, JS into the content end up injecting into there own Iframe in the page which helps prevent this name collision.
Is using an Iframe the standard best practice in this case?
One of the features in my extensions is to do full-page screeenshots which require my contnet.js script to send a message to my background.js script which is responsibble for calling the CHrome API and taking the screenshot of the current scroll position in the pages viewport.
user clicks button in DOM modal windows
content.js sends message to background.js with the coordinates of the viewport.
background.js takes the screenshot with those coordinates. THen sends a message back to content.js.
content.js then scrolls down the page to the next area of the viewport for the next screenshot and then sends those new coordinates back to background.js.
this cycle continues until a shot of the whole page is made and stiched together and then sends back the URL of the new image to content.js when done.
Because both the Chrome API needs to sends messages back and forth between my content.js and background.js and then also if there is an iframe the iframe has to send messages back and forth with the page and the iframe.
Because of this I am not sure if I could use an iframe or not even?
Also if I did use an iframe, it would not load the content from a remote server but instead would be loaded into the page as html.
So is there a best practice for doing this?
Use inline styles instead
You can wrap your css in content.js then apply it to your target elements, it won't interfer the original design of the webpage
Use Shadow DOM
It provides encapsulation for js/css and makes it easy to ensure your components separate from the DOM of the main document.
Related
i'm trying to improve speed of my website. i'm using PageSpeed Insights to check my site performance and it was telling me to remove render blocking java script and css. so i did it and know its causing problem in my website design. so what should i do to remove rendering blocking without causing problem in my website design.
Render Blocking CSS
Render blocking CSS will always show on Google Page Speed Insights if you are using external resources for your CSS.
What you need to do is to inline all of your 'above the fold' styles in <style></style> tags in the head of your web page.
I will warn you, this is NOT easy and plugins that claim to do this often do not work, it requires effort.
To explain what is happening:-
A user navigates to your site and the HTML starts downloading.
As the HTML downloads the browser is trying to work out how to render that HTML correctly and it expects styling on those elements.
Once the HTML has downloaded if it hasn't found styles for the elements that appear above the fold (the initial part of the visible page) then it cannot render anything yet.
The browser looks for your style sheets and once they have downloaded it can render the page.
Point 4. is the render blocking as those resources are stopping the page from rendering the initial view.
To achieve this you need to work out every element that displays without scrolling the page and then find all the styles associated with those elements and inline them.
Render Blocking JS
This one is simpler to fix.
If you are able to use the async attribute on your external JS then use that.
However be warned that in a lot of cases this will break your site if you have not designed for it in the first place.
This is because async will download and execute your JS files as fast as possible. If a script requires another script to function (i.e. you are using jQuery) then if it loads before the other script it will throw an error. (i.e. your main.js file uses jQuery but downloads before it. You call $('#element') and you get a $ is undefined error as jQuery is not downloaded yet.)
The better tag to use if you do not have the knowledge required to implement async without error is to use the defer attribute instead.
This will not start downloading the script until the HTML has finished parsing. However it will still download and execute scripts in the order specified in the HTML.
Add async in the script tag and put the css and js in the last of the page
I have a site that has multiple pages. The first page is just a listview with icons and links to the other pages. CSS stylesheets work fine on the first page, but when I go to one of the linked pages, my custom css stylesheet (and js for that matter), related to that page, is being ignored. If I look in the FF inspector I see that it has dropped the associated lines that tell it about my stylesheet. If I directly go to the desired page or if I hit refresh, the styles look fine, but whenever I come from a link off the first page, the styles are gone. I see no errors when loading the page. Is this a know issue? How can I force it to not ignore my stylesheets.
I am using jquery mobile 1.4.5 in addition to my own.
Looking further. It looks like hitting the link is appending the body of the 2nd page at the end of the first and not simply loading the 2nd page.
It turns out that by default links behave a little different than normal when using jQuery Mobile. The don't do a full page load, but instead only inject the part contained in a div marked with data-role="page". I did not know this.
http://demos.jquerymobile.com/1.1.1/docs/pages/page-links.html
I have a simple webpage (at least initially) that contains (in this order):
A single link to some CSS in the
An inline script in the (to set the dojoConfig settings for dojo)
A script tag linking to external javascript
The top 3 entries shown in the timeline here are for the HTML page itself, the CSS, and the external javascript. (The stuff below all comes after the "onload" event, and happens afterwards)
Why does Firefox appear to be blocking the request for the javascript until the request for the CSS has completed? My page only has two things to load at this stage, and I would expect the browser to load them in parallel.
I use an AJAX-Request to load a part of a Webpage, the request is handled by a framework, which delivers the content. After that, I use jquery to insert the delivered content into the DOM-Tree. So far, so good.
But I use background-images for links in the delivered content, which are generated while processing the AJAX-Request. Normally I would place the path to the background-image into a style-attribute in the link-tags, what works perfectly, until I want to use pseudo-classes for i.e. :hover (you know, to display an alternative image while the mouse hovers)
The solution would be to create a custom CSS-file, which will be inserted into the HTML-Head, but until it is an AJAX-Request, the HTML-Head is already sent.
Do you have any idea, how to attach CSS-properties to links, which will be generated on AJAX-Call-Time?
not possible with inline style.
as s jones says, you can have the style in your existing CSS and it should pick it up.
the other option is to do it using jquery..
$('div.ajax a').hover(function(){$(this).css('color','red')});
I have one jQuery plugin (colorbox) that loads a modal popup window (with an external html file). <-- works perfectly by itself. I have another jQuery plugin (jScrollPane) that loads custom scroll bars for divs. <-- it too works perfectly by itself. Both have a JS component and a CSS component.
My process thus far:
I tried to load and initialize the scroll bar jQuery and CSS from the eternal html (popup) and my div disappeared.
Then I tried to load the scroll bar jQuery in the parent window and initialize it in the colorbox callback...this time my div didn't disappear but the scroll bar and arrows (even OS standard arrows) did disappear.
Finally, I put the scroll bar CSS in <style> tags and shoved it inside the eternal html file's <body> tags. That works on all major browsers, however, now you can't exit the popup window. Arg!
So I think my question is: how do you get jQuery plugins and their CSS files to initialize on dynamically loaded content? What goes where (incl. the jQuery library itself)?
Thanks!
If you are using the "window.open" type of popup, then I would say make it a little simpler and bring it into your page as a JQueryUI Dialog box that pulls in your external html file are the content, loading it in the DIV and accessible within the general page context, inheriting the JQuery and CSS as well. The simple form of this should be like:
$("#id").load(url).dialog();
Where #id is the DIV that is hidden and will contain your dialog data, and URL is the external url to the html file in your popup.
Found the solution....
My question was specifically on integrating colorbox (a jQuery lightbox plugin) with jScrollPane (a jQuery custom scrollbar plugin). My ajax call to load content with the colorbox worked, however, the jScrollPane could not initiate because the required wasn't loaded (because the ajax call didn't pull any info from the head tags).
If other Stack Overflowers stumble across a similar issue this is what I did to solve it: used iframes instead of an ajax call. Ooops. duh.
I don't know if colorbox is the only plugin that pulls info only from body tags and not the head but I imagine many plugins work this way when working with external files. If this is your problem, use iframes to ensure that the data in your head tag is pulled.
Thanks Stack Overflow anyhoo! I still love you.