OS X batch files for patching in CSS (update: and JS)

  • I originally posted this in another thread. At @luetage's suggestion, I'm posting this here too. Be careful; this works for me, but you may have some setup I'm not thinking of, so you might want to create extra an backup of the Vivaldi app before first trying this. It might also be neater to do the "find" only once and save that to a variable, but you get the idea. like I said below, you'll need to edit the ALL-CAPS path placehoders to suit your locations. It runs a "find" because in OS X vivaldi, the path changes every version to a different subdirectory in the app package.

    @TwisterMc said in Tab Loading Indicator:

    Is there a way to add custom CSS to an extension so I don't have to keep editing the custom.css? Or a CSS file that will remain after I update snapshot?

    What I've been doing is running up script file after every update. Of course, replace the paths to suit your file locations.

    (For Mac)

    # Copy the css file to whatever the right directory is for this version of Vivaldi
    cp SOMEPATH/vivaldi-custom.css "`find WHATEVERAPPLICATIONFOLDERPATHYOU'REUSNG/Vivaldi.app -name Vivaldi\ Framework.framework`"/Resources/vivaldi/style/
    # Find the path to browser.html and save that to a variable.
    browserHtml="`find WHATEVERAPPLICATIONFOLDERPATHYOU'REUSNG/Vivaldi.app -name Vivaldi\ Framework.framework`"/Resources/vivaldi/browser.html
    # insert in the stylesheet reference if it's not there and save that to browser.html.temp
    sed 's|  </head>|    <link rel="stylesheet" href="style/vivaldi-custom.css" /></head>|' "$browserHtml" > "$browserHtml".temp
    # Save a backup (why not).
    cp "$browserHtml" "$browserHtml".bak
    # Overwrite the browser.html file.
    mv "$browserHtml".temp "$browserHtml"

    2017.09.01 Update: See also @luetage's version below , which in addition to neatening the above script a bit, also closes the browser, copies a custom JS file (and adds a script tag to the end of the HTML body to link to it), pauses for the user to press Enter, opens the new copy of the custom.css, and starts the browser again.
    (As luetage described in the intervening posts, the pause is to deal with an issue where the script might not launch Vivaldi if the script issued the relaunch command too soon.)

  • This is really instructive. Thanks!
    I added the executable to usr/local/bin to make it easier to execute. Afterwards I tried to add some functionality and ran into a (non-)issue.

    # runs as first action
    osascript -e 'quit app "Vivaldi.app"'
    # runs at the end
    open -a "TextWrangler" "`find /Applications/Vivaldi.app -name Vivaldi\ Framework.framework`"/Resources/vivaldi/style/custom.css
    open -a "Vivaldi"

    When I'm using the script, it's in a situation when Vivaldi is open and without modifications (directly after an update). Therefore when running this script I want to first close Vivaldi, then run the script, and then open Vivaldi to have my customized version already started up. In between I also open the new custom.css file in my text editor. I just added this to above code to show what is different in my version. The issue is that Vivaldi successfully closes, but it doesn't open again at the end. Am I missing something? I also tried to open Vivaldi with another osascript command at the end, which doesn't work either. Both commands work from the shell though.

  • Hmm, I think I found the problem, I just needed to insert a pause, or Vivaldi tries to restart when it is still open. I'm using zsh, so don't know if this code will work in bash.

    echo "Customization successful. Press any key to restart Vivaldi."; read -k1 -s

  • Recently I started running js mods, therefore I added the needed adjustments to the batch file. Additionally I implemented the findPath variable, @Isildur has been suggesting in the OP. Maybe someone can use parts of this for their own version, so I thought I'd share too.

    # Quit Vivaldi
    osascript -e 'quit app "Vivaldi.app"'
    # Find path to Framework folder of current version and save it as variable
    findPath="`find /Applications/Vivaldi.app -name Vivaldi\ Framework.framework`"
    # Copy custom.css and custom.js files to Vivaldi.app
    cp /PATH_TO_FILE/custom.css "$findPath"/Resources/vivaldi/style/
    cp /PATH_TO_FILE/custom.js "$findPath"/Resources/vivaldi/
    # Save path to browser.html as variable
    # Insert references, if not present, and save to temporary file
    sed 's|  </head>|    <link rel="stylesheet" href="style/custom.css" /></head>|;s|  </body>|    <script src="custom.js"></script></body>|' "$browserHtml" > "$browserHtml".temp
    # Backup original file
    cp "$browserHtml" "$browserHtml".bak
    # Overwrite 
    mv "$browserHtml".temp "$browserHtml"
    # Pause script
    read -rsp $'Press [Enter] to restart Vivaldi...\n'
    # Open custom.css in text editor
    open -a "TextWrangler" "$findPath"/Resources/vivaldi/style/custom.css
    # Open Vivaldi
    open /Applications/Vivaldi.app --args --debug-packed-apps --silent-debugger-extension-api


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