Untrusted Types for DevTools

[ThomasOrlita]

Hey, first of all, thanks for making this extension. While using it I found that on some websites the console gets cluttered and sometimes it's easy to get lost in the logs. I thought it'd nice if there was a panel in DevTools where you could filter or search the logs, just like the Network panel. I initially wanted to do a PR, but I kept adding more stuff and added Svelte+TypeScript for the UI, so I thought it might be better if I publish it into a separate repo, or let me know what you think...

The new features are: Panel in DevTools, where you can:

• filter by sink type
• filter by code in the input
• choose to preserve log after navigation/reload
• clear the log
• modify settings (which are saved in chrome.storage)
  • all the original settings (list of keywords, list of source/any call stack substrings to ignore, trace limit, only log highlighted) +
  • highlighting options (it uses Document.execCommand hiliteColor for highlighting, which is slow, but works)
  • group the console.trace/logs in console using console.group to keep the console a bit more tidy
• view found sinks
  • with syntax highlighted input code
  • or open the code in a popup window
  • the href url
  • the stack trace
  • The stack trace is a bit unfortunate since it can't be formatted nicely with clickable links (as console.trace does), but as an alternative I've given each stack trace a unique ID which you can copy by clicking it, and then just filter by the ID in console to find it. Obviously that won't work if you clear the console, but other than that is should work fine.

Injected script Since the chrome.storage are all asynchronous I thought it wouldn't be possible to fetch the settings in the injected script, but it's actually possible to intercept the settings.json XMLHttpRequest, and redirect the request to data:application/json,{settings:...}, will gives us synchronous access to the dynamic settings directly in the injected script. The injected script <> extension communication is via postMessages, which is also not ideal, but seems to be the only possible way.

Here's a screenshot of the DevTools panel:

The repository can be found at: https://github.com/ThomasOrlita/untrusted-types-devtools

Thanks!

[filedescriptor]

Wow. This is beyond amazing and a lot better than my original tool! Actually, I wouldn't call mine a tool after seeing yours 😄. I have no problem and would love to integrate this to the original repo. Let me know if you think it's better for it to be standalone.

[ThomasOrlita]

Cool, I'm fine with adding it to this repo. Not sure what would be the best way, if it should be added to main or in a new (v2) branch? 🤔 Also, since now it requires npm & building it, I wanted to publish it to the Chrome Web Store so it'd be easier to get started using it.

[filedescriptor]

We should add it to main. After all, the old one I made is more of a toy project. (or we can move it to an "old" branch). Are you interested in becoming a collaborator?

[ThomasOrlita]

We should add it to main. or we can move it to an "old" branch

Right, let's rename the current main to old and add then new version into main.

Are you interested in becoming a collaborator?

Yeah, definitely.

[filedescriptor]

Added. Feel free to implement the necessary changes!

[ThomasOrlita]

Great, I'll add it here! You'll just need to rename the branch to old, it seems that I can't do that.

[filedescriptor]

Done. Let me know if I'll also need to create an empty main branch if you can't do it.

[ThomasOrlita]

I added the new version to main. Can you change main back as the default branch?

[filedescriptor]

Done! Thanks for the contribution.