Chrome Extension CSS problem with injected code
3,204 views
Skip to first unread message
kesar
Sep 12, 2011, 4:06:11 AM9/12/11
to Chromium-extensions, venkat....@gmail.com
Hi,
I build a extension when ever user visited some specific sites, i
injected my script on the top of there web pages[ i used
document.body.insertBefore(wrapperDiv, document.body.firstChild)]
Now problem : CSS of injected script messed up for each and every
site(differ from one site to another ).
How should i maintain single css structure for all sites. please help
me.
Thank you
kesar
I build a extension when ever user visited some specific sites, i
injected my script on the top of there web pages[ i used
document.body.insertBefore(wrapperDiv, document.body.firstChild)]
Now problem : CSS of injected script messed up for each and every
site(differ from one site to another ).
How should i maintain single css structure for all sites. please help
me.
Thank you
kesar
Hubert Boma Manilla
Sep 12, 2011, 4:38:23 AM9/12/11
to kesar, Chromium-extensions
hi,
--
Hubert Boma Manilla
I think the issue is that your injected div inherits the css of the parent element which it is injected into (in this case the body element).I think you can inject your css page seperately using insertCSS.
hope that helps
cheers
--
You received this message because you are subscribed to the Google Groups "Chromium-extensions" group.
To post to this group, send email to chromium-...@chromium.org.
To unsubscribe from this group, send email to chromium-extens...@chromium.org.
For more options, visit this group at http://groups.google.com/a/chromium.org/group/chromium-extensions/?hl=en.
Hubert Boma Manilla
Tel: +447510329943
timo
Sep 12, 2011, 11:47:56 AM9/12/11
to Chromium-extensions
Hi Kesar,
injecting CSS inside the body is not legal (even though I think that
chrome can handle it) so your script should inject your CSS like:
document.getElementsByTagName('head')[0].appendChild(newCSS)
where as newCSS is your new styleSheet you created useing
document.createElement('style') ...
Whatelse should be considered: inline style is stronger than
stylesheets
Your description is not detailed enough to find you a satisfying
solution... this way it's just guessing:
You say, you inject a script on top of the page and come up with a div
you inject??? Second, the name 'wrapperDiv' lets me think it should be
wrapped around the whole rest of the page (as first and only child of
body, with all other elements inside)???
If you want to inject a CSS in every single page then put a statement
inside content_scripts in your manifest file: see
http://code.google.com/chrome/extensions/content_scripts.html#registration
injecting CSS inside the body is not legal (even though I think that
chrome can handle it) so your script should inject your CSS like:
document.getElementsByTagName('head')[0].appendChild(newCSS)
where as newCSS is your new styleSheet you created useing
document.createElement('style') ...
Whatelse should be considered: inline style is stronger than
stylesheets
Your description is not detailed enough to find you a satisfying
solution... this way it's just guessing:
You say, you inject a script on top of the page and come up with a div
you inject??? Second, the name 'wrapperDiv' lets me think it should be
wrapped around the whole rest of the page (as first and only child of
body, with all other elements inside)???
If you want to inject a CSS in every single page then put a statement
inside content_scripts in your manifest file: see
http://code.google.com/chrome/extensions/content_scripts.html#registration
Hubert Boma Manilla
Sep 12, 2011, 12:16:08 PM9/12/11
to timo, Chromium-extensions
Hi timo,
Please can i know where it is illegal to inject CSS?
According to the link below the method exist for it.
Cheers
--
You received this message because you are subscribed to the Google Groups "Chromium-extensions" group.
To post to this group, send email to chromium-...@chromium.org.
To unsubscribe from this group, send email to chromium-extens...@chromium.org.
For more options, visit this group at http://groups.google.com/a/chromium.org/group/chromium-extensions/?hl=en.
timo
Sep 12, 2011, 1:27:00 PM9/12/11
to Chromium-extensions
Hi Hubert,
I guess you missunderstood me.
I ment that injecting a 'style sheet' inside the <BODY> is usually not
allowed (W3C).
it's only valide inside the <HEAD> tag with <style> or <link> (other
than 'inline styles').
Sometimes (on some pages I inspect once in a while) I see a <style>
tag inside the <BODY> tag... which most of the times works (because
some/most/all?? (I don't know) browsers can handle it), but browsers
are not obliged to support that and 'not legal' by W3C.
If you inject CSS like described on
http://code.google.com/chrome/extensions/content_scripts.html#registration
you'll find it in your <HEAD> of your document (see chrome DOM
inspector)
With document.getElementsByTagName('head')[0].appendChild(newCSS); you
also put it inside your header, not inside the body...
Cheers
On Sep 12, 6:16 pm, Hubert Boma Manilla <b4bo...@gmail.com> wrote:
> Hi timo,
> Please can i know where it is illegal to inject CSS?
> According to the link below the method exist for it.http://code.google.com/chrome/extensions/content_scripts.html#Program...
I guess you missunderstood me.
I ment that injecting a 'style sheet' inside the <BODY> is usually not
allowed (W3C).
it's only valide inside the <HEAD> tag with <style> or <link> (other
than 'inline styles').
Sometimes (on some pages I inspect once in a while) I see a <style>
tag inside the <BODY> tag... which most of the times works (because
some/most/all?? (I don't know) browsers can handle it), but browsers
are not obliged to support that and 'not legal' by W3C.
If you inject CSS like described on
http://code.google.com/chrome/extensions/content_scripts.html#registration
you'll find it in your <HEAD> of your document (see chrome DOM
inspector)
With document.getElementsByTagName('head')[0].appendChild(newCSS); you
also put it inside your header, not inside the body...
Cheers
On Sep 12, 6:16 pm, Hubert Boma Manilla <b4bo...@gmail.com> wrote:
> Hi timo,
> Please can i know where it is illegal to inject CSS?
> injection
> Cheers
>
>
>
>
>
>
>
>
>
> On Mon, Sep 12, 2011 at 4:47 PM, timo <peter.dema...@gmail.com> wrote:
> > Hi Kesar,
>
> > injecting CSS inside the body is not legal (even though I think that
> > chrome can handle it) so your script should inject your CSS like:
> > document.getElementsByTagName('head')[0].appendChild(newCSS)
> > where as newCSS is your new styleSheet you created useing
> > document.createElement('style') ...
>
> > Whatelse should be considered: inline style is stronger than
> > stylesheets
>
> > Your description is not detailed enough to find you a satisfying
> > solution... this way it's just guessing:
> > You say, you inject a script on top of the page and come up with a div
> > you inject??? Second, the name 'wrapperDiv' lets me think it should be
> > wrapped around the whole rest of the page (as first and only child of
> > body, with all other elements inside)???
>
> > If you want to inject a CSS in every single page then put a statement
> > inside content_scripts in your manifest file: see
> >http://code.google.com/chrome/extensions/content_scripts.html#registr...
> Cheers
>
>
>
>
>
>
>
>
>
> On Mon, Sep 12, 2011 at 4:47 PM, timo <peter.dema...@gmail.com> wrote:
> > Hi Kesar,
>
> > injecting CSS inside the body is not legal (even though I think that
> > chrome can handle it) so your script should inject your CSS like:
> > document.getElementsByTagName('head')[0].appendChild(newCSS)
> > where as newCSS is your new styleSheet you created useing
> > document.createElement('style') ...
>
> > Whatelse should be considered: inline style is stronger than
> > stylesheets
>
> > Your description is not detailed enough to find you a satisfying
> > solution... this way it's just guessing:
> > You say, you inject a script on top of the page and come up with a div
> > you inject??? Second, the name 'wrapperDiv' lets me think it should be
> > wrapped around the whole rest of the page (as first and only child of
> > body, with all other elements inside)???
>
> > If you want to inject a CSS in every single page then put a statement
> > inside content_scripts in your manifest file: see
>
> > On Sep 12, 10:06 am, kesar <venkat.bavan...@gmail.com> wrote:
> > > Hi,
> > > I build a extension when ever user visited some specific sites, i
> > > injected my script on the top of there web pages[ i used
> > > document.body.insertBefore(wrapperDiv, document.body.firstChild)]
>
> > > Now problem : CSS of injected script messed up for each and every
> > > site(differ from one site to another ).
> > > How should i maintain single css structure for all sites. please help
> > > me.
>
> > > Thank you
> > > kesar
>
> > --
> > You received this message because you are subscribed to the Google Groups
> > "Chromium-extensions" group.
> > To post to this group, send email to chromium-extensi...@chromium.org.
> > On Sep 12, 10:06 am, kesar <venkat.bavan...@gmail.com> wrote:
> > > Hi,
> > > I build a extension when ever user visited some specific sites, i
> > > injected my script on the top of there web pages[ i used
> > > document.body.insertBefore(wrapperDiv, document.body.firstChild)]
>
> > > Now problem : CSS of injected script messed up for each and every
> > > site(differ from one site to another ).
> > > How should i maintain single css structure for all sites. please help
> > > me.
>
> > > Thank you
> > > kesar
>
> > --
> > You received this message because you are subscribed to the Google Groups
> > "Chromium-extensions" group.
> > To unsubscribe from this group, send email to
> > chromium-extensions+unsubscr...@chromium.org.
timo
Sep 12, 2011, 1:32:49 PM9/12/11
to Chromium-extensions
By the way, some additional information:
document.getElementsByTagName('head')[0].appendChild(newCSS);
appendChild puts the element to the end of getElementsByTagName('head')
[0] (other than insertBefore()) so it's the last in the row, which
means that the new added style sheet and its rules are stronger than
all the onces before (also a reason why it's called 'cascading' style
sheets)
document.getElementsByTagName('head')[0].appendChild(newCSS);
appendChild puts the element to the end of getElementsByTagName('head')
[0] (other than insertBefore()) so it's the last in the row, which
means that the new added style sheet and its rules are stronger than
all the onces before (also a reason why it's called 'cascading' style
sheets)
> Hi timo,
> Please can i know where it is illegal to inject CSS?
> According to the link below the method exist for it.http://code.google.com/chrome/extensions/content_scripts.html#Program...
> Please can i know where it is illegal to inject CSS?
> injection
> Cheers
>
>
>
>
>
>
>
>
>
> On Mon, Sep 12, 2011 at 4:47 PM, timo <peter.dema...@gmail.com> wrote:
> > Hi Kesar,
>
> > injecting CSS inside the body is not legal (even though I think that
> > chrome can handle it) so your script should inject your CSS like:
> > document.getElementsByTagName('head')[0].appendChild(newCSS)
> > where as newCSS is your new styleSheet you created useing
> > document.createElement('style') ...
>
> > Whatelse should be considered: inline style is stronger than
> > stylesheets
>
> > Your description is not detailed enough to find you a satisfying
> > solution... this way it's just guessing:
> > You say, you inject a script on top of the page and come up with a div
> > you inject??? Second, the name 'wrapperDiv' lets me think it should be
> > wrapped around the whole rest of the page (as first and only child of
> > body, with all other elements inside)???
>
> > If you want to inject a CSS in every single page then put a statement
> > inside content_scripts in your manifest file: see
> >http://code.google.com/chrome/extensions/content_scripts.html#registr...
> Cheers
>
>
>
>
>
>
>
>
>
> On Mon, Sep 12, 2011 at 4:47 PM, timo <peter.dema...@gmail.com> wrote:
> > Hi Kesar,
>
> > injecting CSS inside the body is not legal (even though I think that
> > chrome can handle it) so your script should inject your CSS like:
> > document.getElementsByTagName('head')[0].appendChild(newCSS)
> > where as newCSS is your new styleSheet you created useing
> > document.createElement('style') ...
>
> > Whatelse should be considered: inline style is stronger than
> > stylesheets
>
> > Your description is not detailed enough to find you a satisfying
> > solution... this way it's just guessing:
> > You say, you inject a script on top of the page and come up with a div
> > you inject??? Second, the name 'wrapperDiv' lets me think it should be
> > wrapped around the whole rest of the page (as first and only child of
> > body, with all other elements inside)???
>
> > If you want to inject a CSS in every single page then put a statement
> > inside content_scripts in your manifest file: see
>
> > On Sep 12, 10:06 am, kesar <venkat.bavan...@gmail.com> wrote:
> > > Hi,
> > > I build a extension when ever user visited some specific sites, i
> > > injected my script on the top of there web pages[ i used
> > > document.body.insertBefore(wrapperDiv, document.body.firstChild)]
>
> > > Now problem : CSS of injected script messed up for each and every
> > > site(differ from one site to another ).
> > > How should i maintain single css structure for all sites. please help
> > > me.
>
> > > Thank you
> > > kesar
>
> > --
> > You received this message because you are subscribed to the Google Groups
> > "Chromium-extensions" group.
> > To post to this group, send email to chromium-extensi...@chromium.org.
> > On Sep 12, 10:06 am, kesar <venkat.bavan...@gmail.com> wrote:
> > > Hi,
> > > I build a extension when ever user visited some specific sites, i
> > > injected my script on the top of there web pages[ i used
> > > document.body.insertBefore(wrapperDiv, document.body.firstChild)]
>
> > > Now problem : CSS of injected script messed up for each and every
> > > site(differ from one site to another ).
> > > How should i maintain single css structure for all sites. please help
> > > me.
>
> > > Thank you
> > > kesar
>
> > --
> > You received this message because you are subscribed to the Google Groups
> > "Chromium-extensions" group.
> > To unsubscribe from this group, send email to
> > chromium-extensions+unsubscr...@chromium.org.
Reply all
Reply to author
Forward
0 new messages