brave/brave-browser

Allow Custom Scriptlets / Developer mode to assign different mime to the 'scriptlets'

Open

#43,108 opened on Jan 5, 2025

View on GitHub
 (0 comments) (0 reactions) (0 assignees)JavaScript (16,194 stars) (2,164 forks)batch import
OS/Desktopfeature-requestfeature/dev-toolsfeature/shields/adblock/custom-scriptletsgood first issuepriority/P5

Description

Platforms

all

Description

resources.json file contains the Scriptlets and Redirection resources a browser can use, each one is asigned a mime:

[
    {
        "name": "",
        "aliases": [ ],
        "kind": {
            "mime": ""
        },
        "content": ""
    },
]
JS - application/javascript
CSS - text/css
HTML - text/html
JSON - application/json
TXT - text/plain
EMPTY - application/octet-stream
XML - text/xml
MP3 - audio/mp3
MP4 - video/mp4
GIF - image/gif
PNG - image/png

It would be nice if Developer mode allows to be able to treat the 'scriptlets' as different type of mime and expand its uses, while redirecting JS is the most common thing, it would be nice to be able to replace a CSS or something with 'our own' redirection resource.

Right now for example, if you create a scriptlet user-testcss.js with the code

* {
    color: rgb(82, 30, 88) !important;
}

body {
    margin: 25px !important;
    background-color: rgb(91, 188, 206) !important;
    font-family: arial, sans-serif !important;
    font-size: 14px !important;
}

h1 {
    font-size: 35px !important;
    font-weight: normal !important;
    margin-top: 5px !important;
}

and then you use a rule like brave.com$css,redirect=user-testcss.js, you will not see it being parsed correctly, if you click on devtools you will see that the response/preview will show the code, but it is parsed as JS so it will not be parsed as css.

if you modify the resources file and add

    {
        "name": "user-testcss2.js",
        "aliases": [],
        "kind": {
            "mime": "text/css"
        },
        "content": "KiB7CiAgICBjb2xvcjogcmdiKDgyLCAzMCwgODgpICFpbXBvcnRhbnQ7Cn0KCmJvZHkgewogICAgbWFyZ2luOiAyNXB4ICFpbXBvcnRhbnQ7CiAgICBiYWNrZ3JvdW5kLWNvbG9yOiByZ2IoOTEsIDE4OCwgMjA2KSAhaW1wb3J0YW50OwogICAgZm9udC1mYW1pbHk6IGFyaWFsLCBzYW5zLXNlcmlmICFpbXBvcnRhbnQ7CiAgICBmb250LXNpemU6IDE0cHggIWltcG9ydGFudDsKfQoKaDEgewogICAgZm9udC1zaXplOiAzNXB4ICFpbXBvcnRhbnQ7CiAgICBmb250LXdlaWdodDogbm9ybWFsICFpbXBvcnRhbnQ7CiAgICBtYXJnaW4tdG9wOiA1cHggIWltcG9ydGFudDsKfQ=="
    }

and restart the browser or better: unchecl/check EasyCookie List and refresh the page, it will work fine, because what matters is the 'mime' not the name with ".js" the resource/scriptlet has.

So my request is to allow the scriptlets to have a different mime so that they can be treated as something else.

Of course this is advanced topic, but why limit the possibilities of the new Custom Scriptlets and Developer mode when it can be used for more? Of course, redirection of JS is more common than CSS, but to modify and fix the web in some cases it is needed to modify these types of things without needing to inject JS only.

So it would be nice if there was a way to assign different mimes to a scriptlet, so they can be 'read' in different ways.

The interesting thing is any mime being redirected as JS will work fine, for example this console.log("test"); with a mime video/mp4

    {
        "name": "user-test123.js",
        "aliases": [],
        "kind": {
            "mime": "video/mp4"
        },
        "content": "Y29uc29sZS5sb2coInRlc3QiKTs="
    },

but not the other way around, or like css, or having text/html to replace css. it has to be text/css to be parsed correctly and that's a cool thing to have in the new Developer Mode.

Only because it is not a common thing to do, doesn't mean it will not be used if available.

Contributor guide