mdn / webextensions-examples

Example Firefox add-ons created using the WebExtensions API
https://developer.mozilla.org/en-US/Add-ons/WebExtensions
Mozilla Public License 2.0
4.13k stars 2.63k forks source link

Broken root-cert-stats due to var -> let change #536

Closed MabryTyson closed 1 year ago

MabryTyson commented 1 year ago

What information was incorrect, unhelpful, or incomplete?

The current root-cert-stats extension throws a "TypeError: can't convert undefined to object" at popup.js 8:22 The popup window always shows "No data to display yet"

About a year ago, someone changed var to let at line 3 of background.js for the variable rootCertStats. As a result, backgroundWindow.rootCertStats is undefined.

Changing the let back to var makes things work again.

What did you expect to see?

No error should be thrown. The popup window should show the stats.

Do you have any supporting links, references, or citations?

No response

Do you have anything more you want to share?

It appears the var -> let change was done without testing. I wonder how many other extensions were broken.

github-actions[bot] commented 1 year ago

It looks like this is your first issue. Welcome! 👋 One of the project maintainers will be with you as soon as possible. We appreciate your patience. To safeguard the health of the project, please take a moment to read our code of conduct.

Rob--W commented 1 year ago

This was done in https://github.com/mdn/webextensions-examples/pull/484

A difference between var and let is that let is block-scoped, whereas var is hoisted (https://developer.mozilla.org/en-US/docs/Glossary/Hoisting).

if (false) {
  var y = 5;
}
console.log(y); // prints undefined

if (false) {
  let z = 5;
}
console.log(z); // TypeError: z is not defined

@rebloor Could you audit all examples and see if this issue happens more than just the one pointed out here?

rebloor commented 1 year ago

@Rob--W I'll take a look at that

rebloor commented 1 year ago

Tested and found the following:

Checked, tested, and OK

  1. annotate-page
  2. apply-css
  3. bookmark-it
  4. chill-out
  5. content-script-register
  6. contextual-identities
  7. cookie-bg-picker
  8. dynamic-theme
  9. eslint-example (only checked the extension)
  10. export-helpers
  11. favourite-colour
  12. forget-it
  13. history-deleter
  14. latest-download
  15. list-cookies
  16. menu-accesskey-visible (doesn't seem to behave as expected, but unrelated to change – change reverted and retested – will investigate further separately)
  17. menu-demo
  18. mocha-client-tests/addon
  19. native-messaging (doesn't seem to behave as expected, but unrelated to change – change reverted and retested – will investigate further separately)
  20. navigation-stats
  21. notify-link-clicks-i18n
  22. page-to-extension-messaging
  23. quicknote
  24. menu-remove-element (doesn't seem to behave as expected, but unrelated to change – change reverted and retested – will investigate further separately)
  25. selection-to-clipboard
  26. stored-credentials
  27. tabs-tabs-tabs
  28. theme-switcher
  29. top-sites
  30. user-agent-rewriter
  31. webpack-modules/addon
  32. window-manipulator

Checked issues found and confirmed with test:

  1. root-cert-stats – confirmed error and the change from let to var the fixes
rebloor commented 1 year ago

@Rob--W I've completed a review of the changed files. The only one that has the issue appears to be root-cert-stats. Would you like me to revert the change or should we do something else? I did find three extension that I couldn't get to work as expected, but I reverted the change and confirmed that made no difference:

I'll review these further later.

Rob--W commented 1 year ago

@Rob--W I've completed a review of the changed files. The only one that has the issue appears to be root-cert-stats. Would you like me to revert the change or should we do something else?

Yes please revert to var. And prepend a comment that it's referenced from popup.js.

Ideally the example wouldn't use getBackgroundPage(), but instead use runtime.sendMessage from popup.js + runtime.onMessage in the background page to send the data back. It's bad practice to use getBackgroundPage(), e.g. in a private browsing window that logic breaks. If you can fix the example to use what I just described, it would be great.

I did find fourextension that I couldn't get to work as expected, but I reverted the change and confirmed that made no difference:

  • menu-accesskey-visible - the access key did not work
  • native-messaging - failed to get the "pong" with message that the port was closed
  • menu-remove-element - the panel doesn't display.

I confirmed by code review that these aren't affected by the var/let change.