Closed Bug 1380276 Opened 7 years ago Closed 7 years ago

webextension css file

Categories

(WebExtensions :: Frontend, defect)

Product:
WebExtensions
Component:
Frontend
Version:
56 Branch
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

(Not tracked)

Status:
RESOLVED DUPLICATE of bug 1380156

People

(Reporter: mail, Unassigned)

Details

User Agent: Mozilla/5.0 (Windows NT 6.3; Win64; x64; rv:56.0) Gecko/20100101 Firefox/56.0
Build ID: 20170711030203

Steps to reproduce:

I was developing WebExtension. Everything was working fine the day before yesterday. I was loading style sheets in the head section of popup.html:

<head>
  <link rel="stylesheet" href="reset.css" />
  <link rel="stylesheet" href="popup.css" />
  <script src="jquery-2.1.1.min.js"></script>
</head>


Actual results:

Today, seems like Nightly updated itself to 56.0a1 and CSS is no longer applied to popup (html). IMPORTANT: I have not made any changes to code since the day before yesterday when everything was working fine. When I tried to copy styles from css directly to popup.html and everything worked.


Expected results:

Seems like the recent update affected how webextensions are loading CSS file. I am not sure is that a bug or there is a new way, we have to load or declare css files which should be available for webextension.

p.s. I also tried to play with relative paths but neither ./popup.css worked nor /popup.css. Thanks
p.p.s. I tried to continue working on extension by temporarily moving css to popup.html. However, any manipulation with DOM causes popup to be closed. For example:

file: popup.js
jQuery('.selector').on('click', function() {
  alert('selector clicked');
})

even more interesting

jQuery('.selector').show(); - popup up remains open
jQuery('.selector').hide(); - pupup is closed

for experiment purposes, I moved the same code directly to popup.html() but NOTHING happens on click:

file: popup.html
<script>
jQuery('.selector').on('click', function()
  alert('selector clicked');
})
</script>

jQuery('.selector').hide(); - nothing
jQuery('.selector').show(); - nothing
Component: Untriaged → WebExtensions: Frontend
Product: Firefox → Toolkit
Hey Yehuda!

Thanks for the bug report, I ran into this, too.  We're tracking the work to fix it in bug 1380156, but in the meantime, if you package up the extension[0] and load it from `about:addons` > Gear menu > Install Add-on from File, it should work.

[0] Make sure to add an id in the `applications` section as described in https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/applications !  :)
Status: UNCONFIRMED → RESOLVED
Closed: 7 years ago
Resolution: --- → DUPLICATE
Kohei, thanks for your reply. I zip the extension and tried to load as you instructed. However, I got security warning that extension cannot be installed because it's not verified. Any suggestion? Currently I switched to Chrome browser to continue development process. As Firefox and Chrome extensions are compatible, that should work.

Waiting for your suggestion Kohei, what I did wrong and why I cannot load packed WebExtension?

Thanks in advance!
For security reasons, Firefox requires extensions to be signed before we load them.  But, if you're running a Nightly release, you can go to `about:config` and change the `xpinstall.signatures.required` preference to `false`, and then you should be able to load it.

Good luck, and let me know how it works!
Product: Toolkit → WebExtensions
You need to log in before you can comment on or make changes to this bug.