User CSS and JavaScript

  • In Opera I customized a lot of pages with User CSS and User JavaScript - how can I manage that in Vivaldi? It was very easy to edit in separate files and to assign them to special URL's. I wish the same easy way would work in Vivaldi.

  • Moderator

    Wish is already registered in Devs Bugtracker. ๐Ÿ˜‰

    May be the first beta gives us such enhancment.

  • Ok and thank you for the information. So I still have to wait because that is the most important feature for me.

    I am looking forward to leave Opera finally ๐Ÿ™‚

  • Moderator

    Some "User CSS" is alreday built in Page actions at status bar.

    Search in your Vivaldi programdir for Application\โ€ฆ.\resources\vivaldi\user_files
    You can see, that there are some CSS ๐Ÿ˜‰

  • But this will get lost if I install a new version and most likely it is not supposed to be applied only for defined pages.

  • Moderator

    Yes, these will get lost after update to new versions. Its your task to copy until not real UserCSS is built in ๐Ÿ˜‰

  • I wait for the final implementation, especially because it is just one part of the combination user CSS and user JavaScript.

  • For user CSS, you can also install the Chrome extension Stylish. Been using it in Vivaldi since pretty much day one.

  • @Case:

    For user CSS, you can also install the Chrome extension Stylish. Been using it in Vivaldi since pretty much day one.

    For JS (and for CSS too, if you don't want to use Stylish for some reason), I recently discovered that writing one's own extensions isn't nearly as difficult or time-consuming as I somehow imagined it would be, and you can easily get fine control over which pages the CSS and JS get activated with the "matches" and "include_globs"/"exclude_globs" properties.

    You just write some .js file, put it in a directory along with a manifest.json file something like

    "manifest_version": 2,
    "content_scripts": [ {
    "css": [ "somestyles.css" ],
    "js": [ "somescript.js" ],
    "matches": [ "http://siteyouwantittoapplyto/",
    "run_at": "document_end"
    } ],
    "description": "Some description blah blah blah",
    "name": "Custom JS and CSS for",
    "version": "1.12345"

    then, in vivaldi://extensions , click "Developer mode", click "Load unpacked extensionโ€ฆ" and enter the directory (or if you want to pack it, click "Pack extension...", to generate a packed .crx file from such a directory-- Vivaldi will generate a signing .pem file you can reuse later, if you don't specify one -- then drag the generated packed .crx to the extensions page.)

    There's other stuff you can do, like add your own icons for the extension, but that's just window dressing and not necessary if you're just making a simple extension for your own javascript files you want to autorun on some pages.

    Then you can set keyboard listeners in your JS to do stuff. (Well, using the "commands" API is probably the prefered way, to make it so users can assign shortcuts through the UI by pressing the "Keyboard shortcuts" button on the vivaldi://extensions page, but I happened to hard-code some listeners into my JS.) For the moment, this has solved for me the current lack of bookmarklet support in Vivaldi.

Log in to reply

Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.