0

I have found this api http://code.google.com/chrome/extensions/tabs.html#method-insertCSS ,but this is api insert css file when the html file is loaded, and the whole page redraw cause the new css rule hide some areas of this page.Is there any idea for me to insert the css file before page rendering? I know the manifest.json can solve this problem ,but this solution is static, I can't change the style by programming.

All I want is that I can dynamic assign css rules(css file or css code fragment ) to some page that match my condition and doesn't blink the page. Manifest.json rules are static, and these rules do apply before DOM rendering(by using run_at option, I can gain fine grit control ).

Improve this question

1 Answer 1

Reset to default
0

You should try runt_at:"document_start" in your manifest's content_scripts field.

http://code.google.com/chrome/extensions/content_scripts.html

"run at document start" injects your code before the DOM is constructed, that's why I think this will work fine.

I recommend you try this way only as a test: inject your CSS by manifest, not by programatic injection. If you obtain the behavior you are looking for, you may tune your manifest to assure the programatic injection (.insertCSS(...)) takes place before the DOM is constructed.

Improve this answer
6
  • Yes,I already test My CSS by manifest,and it make the page rendering smooth.when I insert CSS by programatic,some areas in the page does flash(show and hide).
    – dddkkk
    Commented Mar 9, 2012 at 4:41
  • I try to append this rule {"matches":"http://*/*","run_at":"document_start"} to content_scripts in manifest.json,chrome warning me that this rule needs at less "js" or "css"
    – dddkkk
    Commented Mar 9, 2012 at 4:43
  • Yes, the rule needs the js o css you want to insert automatically. Programatically you have to code to tie your listeners, in order to insert your CSS before the DOM is constructed. You can't pause the construction, you have to start your code at document start. What event fires your code?
    – Alejandro Silvestri
    Commented Mar 9, 2012 at 5:12
  • this event listener "chrome.tabs.onUpdated.addListener", and my code if(changeInfo.status == 'loading' ){ if(tab.url.match(/http:\/\/www\.example\.com\/s/) && !tabs[tabId].insert){ //console.log("Yes this is example page"); chrome.tabs.insertCSS(tabId, {'file':"css/xxx_style.css"}, function(){ console.log("xxx_style.css inserted"); }); console.log("add xxx_style.css"); tabs[tabId].insert = 1; }else{ console.log("loading, url not match or css file already inserted") }
    – dddkkk
    Commented Mar 9, 2012 at 5:51
  • The code is right, it seems you can't get the event fired early enough. If this code is complete and ilustrate your final purpose, I think you should try to insert CSS automatically, matching the url. If you want to make more verifications on the page before inserting the CSS, I'd try injecting a content script automatically to decide & insert the CSS.
    – Alejandro Silvestri
    Commented Mar 9, 2012 at 11:33

Not the answer you're looking for? Browse other questions tagged or ask your own question.