Exclude domains in Chrome Extension without exclude_matches/globs or improve Javascript CSS performance?

Question

I've been trying to build a Chrome Extension and unfortunately when it came to finally getting it working I realised I had to make it only active on certain URLs, which was fine because Chrome has both exclude_matches and exclude_globs for this. However there's a bug in Chrome when using these two options in conjunction with CSS - it doesn't work.

I'd like to know if anybody knows any other way that I can inject my CSS only on certain domains (I want to exclude from a couple rather than allow on a lot)? I'm aware that I can use Javascript to write it onto the end of the existing CSS but unfortunately that is giving me a second lag on what the CSS displays (and it's very obvious too).

If anybody could come up with some alternatives I'd be grateful. Perhaps there's some way to use the CSS file via Javascript which doesn't affect performance (note that the domain exclusion isn't needed in the Javascript as exclude_matches works fine with JS files). Any and all ideas are helpful, just a shame Google hasn't fixed a bug which has been around for over a year!

EDIT: Since I figure I'll get a response or two about Programmatic Injection, I'm unclear on how this works so as an example we'll work with these links (with the latter being the one I didn't want to implement the CSS on) in case anybody wants to post an example.

http://example.com/
http://example.com/random/
http://example.com/random/example/

Oh, and I know that Google's example is using a button to start up the CSS, but I'd rather have it start on page load. Thanks again!

Answer 1

Until this bug is resolved either make a list of all matching URL's in manifest or use insertCSS API as a work around.

Code Sample #1

This sample injects css into the current tab whenever browser action icon is clicked, ensure you do not have a default_popup in your manifest or else onClicked event will not fire.

//This even fires when ever a browser action is clicked
chrome.browserAction.onClicked.addListener(function (tab) {
    // This injects content.css into the current tab
    chrome.tabs.insertCSS(null, {
        file: {
            file: "content.css"
        },
        "all_frames": true //for all frames
    });
});

Code Sample #2

Utilize any tab API's for filtering a matching set of pages to inject CSS

• tabs.onCreated.addListener (For injecting CSS when a tab is created)
• tabs.onUpdated.addListener (For injecting CSS when a tab is completely loaded)
• tabs.query (For injecting CSS into existing tabs)

Pick any API and inject CSS

//Use an API to filter pages for a matching List
chrome.tabs.(SOME API HERE).addListener(function (RELATED DEFINITION) {
    //Inject CSS for a tab
    chrome.tabs.insertCSS(tabId, {
        file: {
            file: "content.css"
        }, //Any file to inject
        "all_frames": true //Inject to all Frames
    });
});

For more information refer this.

References

• Tab API
• Manifest File
• Content Scripts