1

I'm using BetterTouchTool to customise touchbar on MacBook Pro. So far I've used script bellow to display list of tabs opened in Chrome. I would like to display favicon next to page name.

if application "Google Chrome" is running then
    tell application "Google Chrome"
        try
            set windowCount to number of windows
            repeat with x from 1 to windowCount
                set maxSize to 15
                set tabcount to number of tabs in window x
                repeat with y from 1 to tabcount
                    set tabName to title of tab 1 of window x
                    if length of tabName is greater than maxSize then
                        set tabName to text 1 thru (maxSize - 3) of tabName & "..."
                    end if
                    return tabName
                end repeat
            end repeat
        on error
            return ""
        end try
    end tell
else
    return ""
end if

Current result: enter image description here

Edit 1 (new script after the answer)

if application "Google Chrome" is running then
    tell application "Google Chrome"

        set windowCount to number of windows
        repeat with x from 1 to windowCount
            set maxSize to 15
            set tabcount to number of tabs in window x
            repeat with y from 1 to tabcount
                set tabName to title of tab 1 of window x
                if length of tabName is greater than maxSize then
                    set tabName to text 1 thru (maxSize - 3) of tabName & "..."
                end if
                set tabIcon to execute of tab 1 of window x javascript ¬
                    "document.head.querySelector('link[rel~=icon]').href;"
                return "{\"text\":\"" & (tabName) & "\",                                                 
\"icon_data\": \"base64_icon_data\",                                                 
\"icon_path\":\"" & (tabIcon) & "\",                                                 
\"background_color\": \"255,85,100,255\",                                                 
\"font_color\": \"100,200,100,255\",                                                 
\"font_size\": 10}"
            end repeat
        end repeat

    end tell
else
    return ""
end if

It's possible that I'm missing something very obvious since I'm new to Applescript.

aplaninsek
  • 134
  • 2
  • 11
  • 1
    Get rid of the `try`...`end try`. It's unnecessary, and will only be a hinderance. – CJK Aug 13 '19 at 03:58

1 Answers1

0

You can retrieve a webpage's favicon using a bit of JavaScript, provided you have set your browser to allow it to respond AppleScript events, and to allow it to run JavaScript in its browser tabs.

Given a reference to a particular tab, tab y, in a particular window, window x, of Chrome, this code is reasonably reliable at returning a URL to the website's favicon:

tell application id "com.google.Chrome"
    execute in tab y of window x javascript ¬ 
        "document.head.querySelector('link[rel~=icon]').href;"
end tell

It picks out the first <link> tag in the webpage's source document that has an attribute called rel with a value that contains the word "icon". It then retrieves the value of the href attribute. In most cases, this should suffice. For example, this StackOverflow webpage contains the following element:

<link rel="shortcut icon" href="https://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico?v=4f32ecc8f43d">

The AppleScript above returns the URL:

https://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico?v=4f32ecc8f43d

which links to this image:

There will be the odd website that, awkwardly, uses the word "icon" to reference something other than the favicon; or use a series of composite image files to layer mask one image over the other, which will result in the AppleScript returning only one component of the icon (in the case of GitHub, its icon file is just a black square, and the icon's detail is applied by way of an overlaid SVG mask). Sadly, there isn't going to be a perfect search parameter that will always return a 100% accurate image link—even isolating the URLs that point to a file called "favicon.ico" only returns reliably in about half of all cases, as a website can name its icon anything it wishes.

CJK
  • 5,732
  • 1
  • 8
  • 26
  • Thank you. Can you please tell me how can I retrieve and display the icon. It's my understanding that I need to return a JSON string like this: ```"{\"text\":\"newTitle\", \"icon_data\": \"base64_icon_data\", \"icon_path\":\"path_to_new_icon\", \"background_color\": \"255,85,100,255\", \"font_color\": \"100,200,100,255\", \"font_size\": 10}"``` – aplaninsek Aug 13 '19 at 19:41
  • I've tried it with the script in the edited question but it doesn't work. – aplaninsek Aug 13 '19 at 19:43