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)

    #!/bin/bash
    
    # 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.

    #!/bin/bash
    
    # 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
    browserHtml="$findPath"/Resources/vivaldi/browser.html
    
    # 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
    


  • I wanted to share my current setup. Don't know how many Vivaldi modders are out there using macOS, but I hope it will help at least some of you automate the most repetitive tasks. Following a complete rundown of the steps required:

    Get your files ready. Personally I'm using 3 individual ones.

    • upviv.sh to patch the application whenever an update has finished installing.
    • modviv.sh to startup Vivaldi when you want to inspect its UI.
    • bakviv.sh to backup the files you are currently working on outside the browser

    The files use the extension .sh so they get opened by your default text editor automatically. I keep them on Dropbox just like custom.css and custom.js for backup. To run these scripts we will have to make them executable and change the file extension.

    • In Terminal open the directory you have saved the bash scripts to and issue following commands:
      chmod +x upviv.sh
      chmod +x modviv.sh
      chmod +x bakviv.sh
    • Now copy them and change the extension to .command instead of .sh. By default this will run them in your Terminal.

    We could leave it like that and just double click the files to execute, but a more elegant solution is to run them directly from the terminal as commands…

    • After making each file executable copy all of them to this directory /usr/local/bin/
    • Delete the filename extension .sh
    • Optionally tag each file so you can find it more easily.

    Now each command can be run from terminal by just typing its name.


    Below are the example files. Exchange PATH_TO_FILE for your own path. To get a full path you can drag and drop a file into terminal. Adapt these examples to your needs, make your own.

    upviv.sh

    #!/bin/bash
    
    # 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 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
    browserHtml="$findPath"/Resources/vivaldi/browser.html
    
    # 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 files in text editor
    open "$findPath"/Resources/vivaldi/style/custom.css
    open "$findPath"/Resources/vivaldi/custom.js
    
    # Open Vivaldi
    open /Applications/Vivaldi.app --args --debug-packed-apps --silent-debugger-extension-api
    
    

    modviv.sh

    #!/bin/bash
    osascript -e 'quit app "Vivaldi.app"'
    read -rsp $'Press [Enter] to restart Vivaldi...\n'
    open /Applications/Vivaldi.app --args --debug-packed-apps --silent-debugger-extension-api
    
    

    bakviv.sh

    #!/bin/bash
    findPath="`find /Applications/Vivaldi.app -name Vivaldi\ Framework.framework`"
    cp "$findPath"/Resources/vivaldi/style/custom.css /PATH_TO_FILE/custom.css
    cp "$findPath"/Resources/vivaldi/custom.js /PATH_TO_FILE/custom.js
    echo Backup completed.
    
    

Log in to reply
 

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