New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 800070 link

Starred by 3 users

Issue metadata

Status: Assigned
Owner:
Last visit 28 days ago
Components:
EstimatedDays: ----
NextAction: ----
OS: Mac
Pri: 2
Type: Bug



Sign in to add a comment

Can't view the contents of injected stylesheets

Reported by kaycebas...@gmail.com, Jan 8 2018

Issue description

UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3315.0 Safari/537.36

Steps to reproduce the problem:
See https://stackoverflow.com/a/48157780/1669860

What is the expected behavior?
When you inspect the CSS, there should be some way to easily view the source of the injected stylesheet.

What went wrong?
In the Styles pane, the injected properties show correctly, for example, you can see that the background-image of the body tag has been set by an "injected stylesheet", but there's no way to view the contents of that injected stylesheet.

I would expect to be able to see the injected stylesheet as a request in the Network panel, or listed under "Content Scripts" although we need to rephrase that section to be more generic, since we're dealing with "Content Styles" in this case.

Did this work before? No 

Chrome version: 65.0.3315.0  Channel: canary
OS Version: OS X 10.12.6
Flash Version: 

This is the second most popular unanswered question on Stack Overflow: 14 votes and 6K views.

https://stackoverflow.com/q/28402524/1669860
 
Here's step to reproduce: 

1. Go to https://blog.lateral.io/2016/04/create-chrome-extension-modify-websites-html-css/
2. Note the white background.
3. Download https://github.com/lateral/chrome-extension-blogpost/archive/master.zip
4. Unzip the file
5. Open `chrome://extensions` and drag-and-drop the folder to add the extension
6. Now reload https://blog.lateral.io/2016/04/create-chrome-extension-modify-websites-html-css/
7. Note the background is now black. This means that the extension is now successfully injecting CSS into the page

Try finding a way to view the source code for the injected CSS. There's no way to access it.

The request in the Stack Overflow answer is to have one central location where you can view ALL injected CSS. Not just for the currently selected element.
Irish provided a code pattern workaround: https://stackoverflow.com/a/48157780/1669860

But if you inject the CSS via content_scripts, it doesn't seem possible to view the source code of the injected CSS stylesheet.
Owner: dgozman@chromium.org
Status: Assigned (was: Unconfirmed)
Owner: lushnikov@chromium.org

Sign in to add a comment