convert javascript code to bookmarklet for easy access

Question

I have this code that I am trying to use as a bookmarklet.

fetch('https://hf.space/embed/Alifarsi/news_summarizer/+/api/predict/', { method: "POST", body: JSON.stringify({"data":[ "https://www.cp24.com/news/ontario-reports-481-new-covid-19-cases-1-death-1.5667950"]}), headers: { "Content-Type": "application/json" } }).then(function(response) { return response.json(); }).then(function(json_response){ console.log(json_response) })

I got the code from:

https://hf.space/embed/Alifarsi/news_summarizer/api

Usually the bookmarklets start with "javascript:" keyword. I tried to added that at the start of the string, but it did not fetch the expected page.

---

Update:

May be I have not explained what I am trying to achieve:

1. Drag & Drop the bookmarklet: https://codepen.io/shantanuo/pen/LYWRabE

2. Visit a tech page for e.g. https://pandas.pydata.org/docs/reference/api/pandas.read_csv.html

3. Click on the bookmarklet when you the active tab is showing the contents of the page mentioned above.

You will see the stack-overflow questions where this page is referred. If this works, I thought I can get the summary of current page using the API that will save my time reading the entire article. But this does not seem to be as easy as the process mentioned above.

Answer 1

As I understand from your edit, you want to get a summary of the current page from hf.space/embed/Alifarsi/news_summarizer. Therefore in place of cp24.com you must pass the current page's URL to it, stored in location.href:

<a href="
javascript:fetch('https://hf.space/embed/Alifarsi/news_summarizer/+/api/predict/', {
  method: 'POST',
  body: JSON.stringify({
    'data': [location.href]
  }),
  headers: {
    'Content-Type': 'application/json'
  }
})
.then(res => res.json())
.then(json => alert(json.data))
">Summarize the current page with Alifarsi/news_summarizer</a>

It won't help you much with complex API documentation though. Normally these are written in a way that the main idea comes before the details. For your example pandas.read_csv it would be

Read a comma-separated values (csv) file into DataFrame.

Also supports optionally iterating or breaking of the file into chunks.

To learn the basics, better search for a tutorial than an AI summary of the docs.

Answer 2

Chrome blocks bookmarklets using fetch() on a new Tab. Try running it as a bookmarklet on another site like for example https://w3c.github.io, and it should work.

Answer 3

You need to put you code inside an IIFE like this -

(function () {
    // your code here
})()

So your code should be -

javascript: (() => { fetch('https://hf.space/embed/Alifarsi/news_summarizer/+/api/predict/', { method: "POST", body: JSON.stringify({"data":[ "https://www.cp24.com/news/ontario-reports-481-new-covid-19-cases-1-death-1.5667950"]}), headers: { "Content-Type": "application/json" } }).then(function(response) { return response.json(); }).then(function(json_response){ console.log(json_response) }) })()

I have tested it in my browser. It logs the response data in the console just fine. You can just take the code do it like the image below. It should work just fine.

Answer 4

javascript: indicator

The leading javascript: is essential for the browser to recognize a bookmarklet. This part of a URI is called scheme and decides what happens next.

"did not fetch the expected page"

javascript: execution via URL is blocked in general on all chrome:// pages in render_thread_impl.cc:992:

 WebSecurityPolicy::RegisterURLSchemeAsNotAllowingJavascriptURLs(chrome_scheme);

The new tab page is chrome://newtab/, so bookmarklets do not work there. The complete list can be seen by entering about:about. If you want to work the bookmarklet, you must change location to where javascript: execution is allowed.

A trick bookmarklet to switch location and run JS at the same time

By using the data URI scheme data: generate an in place html file with the bookmarklet code as script tag.

// must escape >,< for eval of Stackoverflow.com snippets
dataUriPrefix = 'data:text/html,\<body\>\<script\>\n'

function bookmarklet() {
  document.body.style.backgroundColor = 'lightsteelblue';
  fetch('https://hf.space/embed/Alifarsi/news_summarizer/+/api/predict/', {
      method: 'POST',
      body: JSON.stringify({
        'data': ['https://www.cp24.com/news/ontario-reports-481-new-covid-19-cases-1-death-1.5667950']
      }),
      headers: {
        'Content-Type': 'application/json'
      }
    })
    .then(response => response.json())
    .then(json => alert(JSON.stringify(json, null, 4)))
}

let anchor = document.getElementsByTagName('a')[0]
let pre = anchor.firstElementChild
pre.innerText = dataUriPrefix +
  bookmarklet.toString().slice(26, -2).replace(/^ {1,4}/gm, '') +
  '\n\</script\>'
let oneline = pre.innerText.replaceAll('\n', ' ')
anchor.setAttribute('href', oneline)

a {
  text-decoration: none;
}

<h5> Bookmarklet with link as text </h5>
<a title="Usable as bookmarklet"><pre></pre></a>

It will replace your current page with this html stub, which can be annoying. Might be easier to just switch to an http(s): URL. Or set the new tab page to such on via extension.