Problem loading css in WebExtension

RESOLVED DUPLICATE of bug 1292369

Status

defect
RESOLVED DUPLICATE of bug 1292369
3 years ago
Last year

People

(Reporter: karsten.strunk, Unassigned)

Tracking

(Blocks 1 bug)

50 Branch
x86_64
Windows 10
Dependency tree / graph

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(5 attachments, 1 obsolete attachment)

112.05 KB, application/x-zip-compressed
Details
359.17 KB, video/mp4
Details
146 bytes, text/html
Details
219 bytes, text/html
Details
30.60 KB, application/x-xpinstall
Details
Posted file Firefox-Bug.zip
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.101 Safari/537.36

Steps to reproduce:

I have a WebExtension with a content script defined in manifest.json.

The extension loads a HTML fragment using JQuery 3.1.0 and replaces a div element in the current page.
But in sometimes the CSS gets loaded at first, but after a moment the css definition vanishes so that the loaded HTML appears only default style.

Here's the definition in manifest.json:

    "content_scripts":  [
        {
            "matches": ["http://*/*","https://*/*"],
            "js": ["jquery-3.1.0.min.js", "gui.js"],
            "css": ["style.css"],
            "run_at": "document_end",
            "all_frames": true
        }
    ]

And here's the complete Javascript code:

$(document).ready(function() {
	var guiUrl = chrome.extension.getURL("gui.html");
	$("#firefoxDemo").load(guiUrl, function(response, status, xhr) {
		console.log("GUI template loaded. - status: " + status);
	});
});


Steps to reproduce:
1. Install the extension.xpi
2. Put the example HTML files step1.html and step2.html on a webserver (don't load it using file:// !!)
3. Open step1.html and click the link to step2.html
4. The extension should replace a div with a coloured box.
5. Use back and forward to navigate between both pages. At some point you will see that the coloured box will loose its colour.

See also the attached video file.


Actual results:

The HTML fragment is loaded but the css defined in manifest.json is used only for a moment. After that the css definition vanishes so that the HTML fragment looses its style.


Expected results:

When the css has been loaded it must not be overriden later.
Component: Untriaged → Extension Compatibility
OS: Unspecified → Windows 10
Priority: -- → P1
Hardware: Unspecified → x86_64
Posted file See bug on video (obsolete) —
Posted video See bug on video
Attachment #8790690 - Attachment is obsolete: true
Posted file step2.html
Posted file step1.html
Posted file extension.xpi
Karsten, I tested with FF51 32bits, I can't reproduce the issue. The colored box is still here after back/clicking on the link 10 times.

Could you test with Nightly too?
https://nightly.mozilla.org/
Flags: needinfo?(karsten.strunk)
Component: Extension Compatibility → WebExtensions: General
Priority: P1 → --
Product: Firefox → Toolkit
I retested with FF 51.0a1 (2016-09-13) 32 Bit. I can't reproduce it there.

But with Firefox Developer Edition 50.0a2 (2016-09-13) 32 Bit the problem occurs after at least 3 attempts.

Small update to reproduce:

1. Open step1.html
2. Click the link to step2.html. The extension should replace a div with a coloured box. 
3. Wait 1-2 seconds.
4. Click the back button
5. Repeat with 1. After some attempts the coloured box will lose its colour after displaying it (see attached video).
Fixing range:
https://hg.mozilla.org/integration/mozilla-inbound/pushloghtml?fromchange=e84e72b0a967bcbc362e1a66685d87f49e850bdd&tochange=4c4fcb84ee3930af35eb6cb83c044d6ab8a08abb
Status: UNCONFIRMED → RESOLVED
Closed: 3 years ago
Flags: needinfo?(karsten.strunk)
Resolution: --- → DUPLICATE
Duplicate of bug: 1292369
Product: Toolkit → WebExtensions
You need to log in before you can comment on or make changes to this bug.