Red warning message in Opera console

Question

^{Based on answer by @SesameTastelikecheese. This guide is much simpler.
Fixes bug: Extension would only work if console panel was opened first. Always works now.}

CREATE AN EXTENSION TO KILL OPERA CONSOLE WARNING

This will allow Opera to continue to be updated (good for security) and allow you to use the latest programming language features released in the coming months.

Bookmark this question for future updates.

Create a folder anywhere on your hard drive: kill_opera_console_warning

Create the following files directly inside the folder.

manifest.json

{
  "manifest_version"    :  3

, "name"                :  "AAA: Kill Opera Console Warning"
, "version"             :  "1.1"

, "devtools_page"       :  "devtools_page.html"

, "content_scripts"     :
    [
        {
          "js"          :  [ "inject_into_devtools.js" ]
        , "matches"     :  [ "<all_urls>" ]
        , "run_at"      :   "document_start"
        }
    ]

// Same key as kgejglhpjiefppelpmljglcjbhoiplfn (ChromeVox)
// see : https://stackoverflow.com/questions/17042547/how-to-inject-javascript-into-chrome-devtools-itself/17044405#17044405
, "key"                 :   "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDEGBi/oD7Yl/Y16w3+gee/95/EUpRZ2U6c+8orV5ei+3CRsBsoXI/DPGBauZ3rWQ47aQnfoG00sXigFdJA2NhNK9OgmRA2evnsRRbjYm2BG1twpaLsgQPPus3PyczbDCvhFu8k24wzFyEtxLrfxAGBseBPb9QrCz7B4k2QgxD/CwIDAQAB"
}

devtools_page.html

<html>
<head></head>
<body><script src="devtools_page_helper.js"></script></body>
</html>

devtools_page_helper.js

function apply_style_sheet_for_current_panel_only( )
    {
    const devtools_custom_css = `.console-view > div[class^="console-warning-" i] { display : none !important ; }` ;

    chrome.devtools.panels.applyStyleSheet( devtools_custom_css ) ;
    }

// run for whatever panel opens by default
apply_style_sheet_for_current_panel_only( ) ;

// fallback if Console panel was not opened by default (most likely due to Elements panel opening first)
chrome.devtools.panels.elements.onSelectionChanged.addListener( apply_style_sheet_for_current_panel_only ) ;

inject_into_devtools.js

// necessary for DevTools in private windows
if  (  /^(?:chrome-|opera-)?devtools:$/gi.test( window.location.protocol ) === true  )
    {
    const devtools_custom_css = `.console-view > div[class^="console-warning-" i] { display : none !important ; }` ;

    const add_css_rules = ( css_rules ) => { ( document.head || document.documentElement ).appendChild( document.createElement("style") ).innerHTML = css_rules ; } ;

    // applies to all panels
    add_css_rules( devtools_custom_css ) ;
    }

You should now have the following file structure:

+ kill_opera_console_warning
|-- manifest.json
|-- devtools_page.html
|-- devtools_page_helper.js
|-- inject_into_devtools.js

ADD EXTENSION TO OPERA

Go to extensions page: Ctrl+Shift+E
- Enable “Developer mode” ^{(top right)}
Install the extension:
- Click Load unpacked button ^{(top left)}
- Find your “kill_opera_console_warning” folder
- Go inside the folder, click Select Folder
- Extension you created should load.
Update extension settings:
- Find extension: “AAA: Kill Opera Console Warning”
- Tick the “Allow in Incognito” checkbox
- Tick the “Allow access to search page results” checkbox

NOW CHANGE ONE SETTING IN DEVTOOLS, RESTART OPERA AND TEST EXTENSION

Extension will be working now but to cover an edge case, you need to update a setting.

Close all instances of DevTools.
Open a new normal window ^{(not an incognito window)}
- Go to “about:blank”, open DevTools Ctrl+Shift+I
Open the DevTools settings F1
- There should be lots of settings with checkboxes
- Go to “Experiments” tab ^{(top left)}
Set Allow extensions to load custom stylesheets to enabled.
- Probably the first checkbox at the start of the list.
- Otherwise use filter to search for “stylesheets”.
Close everything and restart:
- Close DevTools settings, close DevTools.
- Exit Opera, wait 5 seconds and restart Opera.
- Repeat steps 2-3 to check setting is still enabled.
Test extension is working:
- On a random webpage, right click “Inspect Element”
- Switch to console panel to test extension works.
Problem solved for the next few months.

Come back to this question if the extension stops working.

Opera may have updated the classes on the warning messages. An editor will hopefully update the extension in this answer. Should that happen, completely remove the extension. Then follow the instructions again.

CREATE AN EXTENSION TO KILL OPERA CONSOLE WARNING

Leave a Comment Cancel reply