In my Google Chrome extension I load content script using manifest.json like this:
"content_scripts": [
{
"matches": ["https://stackoverflow.com/questions/tagged/*sort=newest*"],
"css": ["content.css"],
"js": ["content.js"]
}
]
When I now browse to https://stackoverflow.com/questions/tagged/sql?sort=newest&pageSize=15 the content.js
is successfully injected, but the content.css
is just ignored.
But when I change the matches pattern to just https://stackoverflow.com/questions/tagged/*
, both are loaded and applied correctly.
Is that a bug in Chrome or is using multiple asterisks in the URL not allowed? But why does it work for JS then? The matches pattern documentation explicitly allows "<any chars>" in the path part of the URL. Any idea how to make that work, except from injecting CSS styles into the page manually?
I also tried without success:
- Adding
"permissions":["tab", "https://stackoverflow.com/"]
to the manifest - Adding
"web_accessible_resources": ["content.css"]
to the manifest - Separating content script declaration into two objects for JS and CSS
Edit:
It's getting worse. I just found include_globs and tried this instead:
"content_scripts": [
{
"matches": ["https://stackoverflow.com/*"],
"include_globs": ["*/questions/tagged/*sort=newest*"]
"css": ["content.css"],
"js": ["content.js"]
}
]
JS is injected only into the newest questions page, as it should, but CSS gets now applied to the whole stackoverflow site. Is CSS pattern matching just broken?