CODEWITHSUNDEEP
javascriptsafariapplescriptjavascript-objectssafari-extension
Kevin
Kevin

Reputation: 1106

JS from safari address bar?

I want to find a text on the current safari tab and change the color and the text to bold.

I assume that the JS code for this would be something like:

    // Define the text to search for
var searchText = "example text";

// Get all the text nodes in the current page
var textNodes = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null, false);

// Find the text in the text nodes and change the color and make the text bold
while(textNodes.nextNode()) {
  var node = textNodes.currentNode;
  if(node.nodeValue.includes(searchText)) {
    var span = document.createElement("span");
    span.style.color = "#FF0000";
    span.style.fontWeight = "bold";
    span.innerHTML = node.nodeValue;
    node.parentNode.replaceChild(span, node);
  }
}

but I don't know how to run this from the address bar ? I tried with "javascript:" as a prefix" but it didn't work.

A Safari exceptions would be probably more appropriate but I have no clue how to do it

if that can help, this is my AppleScript which do the same: -- this applescript also set the text from a list on the same page if I can do the exact same thing that will be even better

    set theList to {}
tell application "Safari" to tell tab 1 of window 1 to tell (do JavaScript "
    [...new Set( document.querySelectorAll('.sortable.webOrder') )]
    .map( x => x.textContent.trim() )
    .filter( x => x !== 'Web Order');") ¬
    to set theList to every text

tell application "Safari"
    activate
    set theWindow to front window
    tell theWindow
        tell current tab
            do JavaScript "document.designMode = 'on'"
            repeat with aText in theList
                do JavaScript "var sel = window.getSelection(); sel.collapse(document.body, 0); while (window.find('" & aText & "', true)) {document.execCommand('ForeColor', false, '#FF0000');document.execCommand('bold');}"
            end repeat
            do JavaScript "document.designMode = 'off'"
        end tell
    end tell
end tell

UPDATE:

I thing this javascript is more what I want to do (should work as my AppleSript) but I still have the same issue (I want to run it from the address bar so I can easily call it from the bookmark)

 // Get all elements with class "sortable webOrder" and filter out elements with text "Web Order"
var elements = Array.from(document.querySelectorAll('.sortable.webOrder'))
  .filter(x => x.textContent.trim() !== 'Web Order');

// Get the text content of the elements
var texts = elements.map(x => x.textContent.trim());

// Remove duplicates
var theList = [...new Set(texts)];

// Find the text in the current page and change color and make it bold
theList.forEach(aText => {
  var range, sel;
  if (document.createRange) {
    range = document.createRange();
    range.selectNodeContents(document.body);
    sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
    while (window.find(aText, true)) {
      document.execCommand("ForeColor", false, "#FF0000");
      document.execCommand("bold");
    }
    sel.removeAllRanges();
  }
});

Upvotes: 0

Views: 153

Answers (1)

Robert Kniazidis
Robert Kniazidis

Reputation: 1878

You got it almost already:

tell application "Safari"
    activate
    do JavaScript "    // Define the text to search for
var searchText = \"example text\";

// Get all the text nodes in the current page
var textNodes = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null, false);

// Find the text in the text nodes and change the color and make the text bold
while(textNodes.nextNode()) {
  var node = textNodes.currentNode;
  if(node.nodeValue.includes(searchText)) {
    var span = document.createElement(\"span\");
    span.style.color = \"#FF0000\";
    span.style.fontWeight = \"bold\";
    span.innerHTML = node.nodeValue;
    node.parentNode.replaceChild(span, node);
  }
}" in document 1
end tell

The same written other way:

set jxaScript to "

// Define the text to search for
var searchText = 'example text';

// Get all the text nodes in the current page
var textNodes = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null, false);

// Find the text in the text nodes and change the color and make the text bold
while(textNodes.nextNode()) {
  var node = textNodes.currentNode;
  if(node.nodeValue.includes(searchText)) {
    var span = document.createElement('span');
    span.style.color = '#FF0000';
    span.style.fontWeight = 'bold';
    span.innerHTML = node.nodeValue;
    node.parentNode.replaceChild(span, node);
  }
}
"


tell application "Safari"
    activate
    do JavaScript jxaScript in document 1
end tell

Upvotes: 1

Related Questions