Problem loading css in WebExtension

RESOLVED DUPLICATE of bug 1292369

Status

RESOLVED DUPLICATE of bug 1292369
2 years ago
5 months ago

People

(Reporter: karsten.strunk, Unassigned)

Tracking

(Blocks: 1 bug)

50 Branch
x86_64
Windows 10

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
(Reporter)

Description

2 years ago
Created attachment 8790685 [details]
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.
(Reporter)

Updated

2 years ago
Blocks: 1161828
Component: Untriaged → Extension Compatibility
OS: Unspecified → Windows 10
Priority: -- → P1
Hardware: Unspecified → x86_64
(Reporter)

Comment 1

2 years ago
Created attachment 8790690 [details]
See bug on video

Comment 2

2 years ago
Created attachment 8790709 [details]
See bug on video
Attachment #8790690 - Attachment is obsolete: true

Comment 3

2 years ago
Created attachment 8790712 [details]
step2.html

Comment 4

2 years ago
Created attachment 8790715 [details]
step1.html

Comment 5

2 years ago
Created attachment 8790719 [details]
extension.xpi

Comment 6

2 years ago
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)

Updated

2 years ago
Component: Extension Compatibility → WebExtensions: General
Priority: P1 → --
Product: Firefox → Toolkit
(Reporter)

Comment 7

2 years ago
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).

Comment 8

2 years ago
Fixing range:
https://hg.mozilla.org/integration/mozilla-inbound/pushloghtml?fromchange=e84e72b0a967bcbc362e1a66685d87f49e850bdd&tochange=4c4fcb84ee3930af35eb6cb83c044d6ab8a08abb
Status: UNCONFIRMED → RESOLVED
Last Resolved: 2 years ago
Flags: needinfo?(karsten.strunk)
Resolution: --- → DUPLICATE
Duplicate of bug: 1292369

Updated

5 months ago
Product: Toolkit → WebExtensions
You need to log in before you can comment on or make changes to this bug.