Please turn off console logging on production version about website-dark-mode-switcher

[vnctdj]

@rugk
Now that I think of it, I believe you're right that some logging should be enabled by default.
A message like "extension_name has enabled dark mode on this page" is a very valuable information to have as a web developer.

[rugk]

Why?

in the website you mean?

[vnctdj]

On any site I visit, for every page loaded, your add-on is writing to the browser console.
While this can be useful for debugging, the production version of your add-on should not expose this behavior.

[rugk]

Yep, that's a good point. I guess I could try to integrate my Logger module, which I can use to expose a "debug mode" setting in add-on settings. (used e.g. in the Offline QR Code Generator add-on).
Or I may just remove the debugging console logs… (at least the one not triggered by the website)

Would you be fine to still receive logs if the add-on actually does something on the site, such as injecting CSS to get everything black? (because that may be good to know for devs, so they know when this add-on e.g. breaks it)

[vnctdj]

Sorry for the late reply...

The "debug mode" (or "dev mode" ?) setting approach seems the best one to me.
It would be really nice to hide all console logs by default and still being able to enable them at will in add-on settings :)

[Juraj-Masiar]

I was just about to file the same issue :). Please don't print anything into console unless user enables some debugging.
I mean, imagine if every add-on you have installed would print something about what it's doing into the console... it's already pretty bad now when every web-page spams console with all kinds of stuff.
I'm trying to develop my content scripts on some "clean" pages, but add-ons can print even there.

Thank you in advance :)

[rugk]

Okay, that said, I think I am not going the "using a debug mode setting" way, because it's easier to implement just a reduction of the console messages.

E.g. if the add-on changes the style of your website, as a web-dev you may want to know that, because that influences how your website is displayed. And you may be confused, otherwise. (Also if the JS .matchMedia is faked. This can lead to bugs in your website, so it's good if you know where to report these. That's also why the URL is included in these console messages.)

[Juraj-Masiar]

For notifying user that your add-on did something, you can use badges.
Regarding debugging - you can still collect your logs in memory on each tab and when user click some "show logs" button, it can print them in the text area. Let's face it, how many of users will check the browser console to see why their page looks different :).

Please think about other fellow developers with their own problems that needs to dig into their own logs...

This is what my console now looks like on spotify when I play song:

13:57:48.575 updated fakedColorStatus via background script injection to Symbol(prefers-color-scheme: dark) 662efc2b-5d2e-47ae-a469-a4b02c0c1847:4:29
13:57:48.567 Content Security Policy: Ignoring ‘x-frame-options’ because of ‘frame-ancestors’ directive.
13:57:48.595 set fakedColorStatus via content script to: Symbol(prefers-color-scheme: dark) common.js:16:13
13:57:48.596 Content Security Policy: The page’s settings blocked the loading of a resource at inline (“script-src”). 11 6DEjYFkNZh67HP7R9PSZvv:1:1
13:57:48.764 updated fakedColorStatus via background script injection to Symbol(prefers-color-scheme: dark) 662efc2b-5d2e-47ae-a469-a4b02c0c1847:4:29
13:57:48.758 Content Security Policy: Ignoring ‘x-frame-options’ because of ‘frame-ancestors’ directive.
13:57:48.791 set fakedColorStatus via content script to: Symbol(prefers-color-scheme: dark) common.js:16:13
13:57:48.792 Content Security Policy: The page’s settings blocked the loading of a resource at inline (“script-src”). 11 6DEjYFkNZh67HP7R9PSZvv:1:1
13:57:49.163 updated fakedColorStatus via background script injection to Symbol(prefers-color-scheme: dark) 662efc2b-5d2e-47ae-a469-a4b02c0c1847:4:29
13:57:49.154 Content Security Policy: Ignoring ‘x-frame-options’ because of ‘frame-ancestors’ directive.
13:57:49.187 set fakedColorStatus via content script to: Symbol(prefers-color-scheme: dark) common.js:16:13
13:57:49.187 Content Security Policy: The page’s settings blocked the loading of a resource at inline (“script-src”). 11 6DEjYFkNZh67HP7R9PSZvv:1:1
13:57:55.016 updated fakedColorStatus via background script injection to Symbol(prefers-color-scheme: dark) 662efc2b-5d2e-47ae-a469-a4b02c0c1847:4:29
13:57:55.009 Content Security Policy: Ignoring ‘x-frame-options’ because of ‘frame-ancestors’ directive.
13:57:55.031 set fakedColorStatus via content script to: Symbol(prefers-color-scheme: dark) common.js:16:13
13:57:55.031 Content Security Policy: The page’s settings blocked the loading of a resource at inline (“script-src”). 11 6DEjYFkNZh67HP7R9PSZvv:1:1
13:58:09.472 updated fakedColorStatus via background script injection to Symbol(prefers-color-scheme: dark) 662efc2b-5d2e-47ae-a469-a4b02c0c1847:4:29
13:58:09.464 Content Security Policy: Ignoring ‘x-frame-options’ because of ‘frame-ancestors’ directive.
13:58:09.486 set fakedColorStatus via content script to: Symbol(prefers-color-scheme: dark) common.js:16:13
13:58:09.487 Content Security Policy: The page’s settings blocked the loading of a resource at inline (“script-src”). 11 6DEjYFkNZh67HP7R9PSZvv:1:1
13:58:31.180 updated fakedColorStatus via background script injection to Symbol(prefers-color-scheme: dark) 662efc2b-5d2e-47ae-a469-a4b02c0c1847:4:29
13:58:31.168 Content Security Policy: Ignoring ‘x-frame-options’ because of ‘frame-ancestors’ directive.
13:58:31.198 set fakedColorStatus via content script to: Symbol(prefers-color-scheme: dark) common.js:16:13
13:58:31.200 Content Security Policy: The page’s settings blocked the loading of a resource at inline (“script-src”). 11 6DEjYFkNZh67HP7R9PSZvv:1:1
13:59:02.121 updated fakedColorStatus via background script injection to Symbol(prefers-color-scheme: dark) 662efc2b-5d2e-47ae-a469-a4b02c0c1847:4:29
13:59:02.106 Content Security Policy: Ignoring ‘x-frame-options’ because of ‘frame-ancestors’ directive.
13:59:02.138 set fakedColorStatus via content script to: Symbol(prefers-color-scheme: dark) common.js:16:13
13:59:02.138 Content Security Policy: The page’s settings blocked the loading of a resource at inline (“script-src”). 11 6DEjYFkNZh67HP7R9PSZvv:1:1
13:59:32.535 updated fakedColorStatus via background script injection to Symbol(prefers-color-scheme: dark) 662efc2b-5d2e-47ae-a469-a4b02c0c1847:4:29
13:59:32.528 Content Security Policy: Ignoring ‘x-frame-options’ because of ‘frame-ancestors’ directive.
13:59:32.551 set fakedColorStatus via content script to: Symbol(prefers-color-scheme: dark) common.js:16:13
13:59:32.552 Content Security Policy: The page’s settings blocked the loading of a resource at inline (“script-src”). 11 6DEjYFkNZh67HP7R9PSZvv:1:1
14:00:14.903 updated fakedColorStatus via background script injection to Symbol(prefers-color-scheme: dark) 662efc2b-5d2e-47ae-a469-a4b02c0c1847:4:29
14:00:14.897 Content Security Policy: Ignoring ‘x-frame-options’ because of ‘frame-ancestors’ directive.
14:00:14.916 set fakedColorStatus via content script to: Symbol(prefers-color-scheme: dark) common.js:16:13
14:00:14.917 Content Security Policy: The page’s settings blocked the loading of a resource at inline (“script-src”). 11 6DEjYFkNZh67HP7R9PSZvv:1:1
14:01:06.309 updated fakedColorStatus via background script injection to Symbol(prefers-color-scheme: dark) 662efc2b-5d2e-47ae-a469-a4b02c0c1847:4:29
14:01:06.298 Content Security Policy: Ignoring ‘x-frame-options’ because of ‘frame-ancestors’ directive.
14:01:06.321 set fakedColorStatus via content script to: Symbol(prefers-color-scheme: dark) common.js:16:13
14:01:06.322 Content Security Policy: The page’s settings blocked the loading of a resource at inline (“script-src”). 11 6DEjYFkNZh67HP7R9PSZvv:1:1
14:01:47.665 updated fakedColorStatus via background script injection to Symbol(prefers-color-scheme: dark) 662efc2b-5d2e-47ae-a469-a4b02c0c1847:4:29
14:01:47.655 Content Security Policy: Ignoring ‘x-frame-options’ because of ‘frame-ancestors’ directive.
14:01:47.680 set fakedColorStatus via content script to: Symbol(prefers-color-scheme: dark) common.js:16:13
14:01:47.680 Content Security Policy: The page’s settings blocked the loading of a resource at inline (“script-src”). 11 6DEjYFkNZh67HP7R9PSZvv:1:1
14:03:06.851 updated fakedColorStatus via background script injection to Symbol(prefers-color-scheme: dark) 662efc2b-5d2e-47ae-a469-a4b02c0c1847:4:29
14:03:06.841 Content Security Policy: Ignoring ‘x-frame-options’ because of ‘frame-ancestors’ directive.
14:03:06.872 set fakedColorStatus via content script to: Symbol(prefers-color-scheme: dark) common.js:16:13
14:03:06.873 Content Security Policy: The page’s settings blocked the loading of a resource at inline (“script-src”). 11 6DEjYFkNZh67HP7R9PSZvv:1:1

[rugk]

I don't want to notify users, but web-devs. (and they look into the console)

Uhm, that spotify example looks indeed excessive…

[rugk]

Okay, on sites where it does not do anything, it also does not log anything now…

It only logs some details, if it either injects CSS:

…or if it fakes the result of a JS checkMedia:

[vnctdj]

Nice!
And thanks for your fast reaction!