Question

0

295

Vistas

convert javascript code to bookmarklet for easy access

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:

Drag & Drop the bookmarklet: https://codepen.io/shantanuo/pen/LYWRabE
Visit a tech page for e.g. https://pandas.pydata.org/docs/reference/api/pandas.read_csv.html
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.

about 4 years ago · Juan Pablo Isaza

3 Respuestas

Responde la pregunta

0

Responde la pregunta

Encuentra empleos remotos

Answer 1 · 2022-06-30T08:27:25.077Z

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 2 · 2022-06-30T08:27:25.085Z

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 3 · 2022-06-30T08:27:25.093Z

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.

0

295