将 javascript 代码转换为书签以便于访问

Question

我有这段代码，我想将其用作小书签。

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) })

我的代码来自：

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

通常小书签以“javascript:”关键字开头。我试图在字符串的开头添加它，但它没有获取预期的页面。

更新：

可能是我没有解释我想要实现的目标：

拖放小书签： https://codepen.io/shantanuo/pen/LYWRabE
访问技术页面，例如 https://pandas.pydata.org/docs/reference/api/pandas.read_csv.html
当您的活动选项卡显示上述页面的内容时，单击小书签。

您将在引用此页面的地方看到堆栈溢出问题。如果这可行，我想我可以使用 API 获取当前页面的摘要，这将节省我阅读整篇文章的时间。但是这个过程好像没有上面说的那么简单

Answer 1

Chrome 在新标签页上使用 fetch() 阻止小书签。尝试运行它作为另一个网站上的书签，例如 https://w3c.github.io，它应该可以工作。

Answer 2

您需要像这样将代码放入 IIFE -

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

所以你的代码应该是 -

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) }) })()

我已经在我的浏览器中测试过了。它在控制台中记录响应数据就好了。您可以像下图那样使用代码。它应该工作得很好。

Answer 3

javascript：指标

前导 javascript: 是浏览器识别小书签所必需的。这 part of a URI is called scheme 并决定接下来会发生什么。

“没有获取预期的页面”

javascript: 通过 URL 执行通常在 render_thread_impl.cc:992 中的所有 chrome:// 页面上被阻止：

 WebSecurityPolicy::RegisterURLSchemeAsNotAllowingJavascriptURLs(chrome_scheme);

新标签页是 chrome://newtab/，因此小书签在那里不起作用。输入 about:about 即可查看完整列表。如果您想使用小书签，您必须将位置更改为允许 javascript: 执行的位置。

同时切换位置和运行JS的小书签

通过使用 data URI scheme data: 生成一个 html 文件，并将小书签代码作为脚本标记。

// must escape >,< for eval of whosebug.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>

它将用这个 html 存根替换您的当前页面，这可能很烦人。切换到 http(s): URL 可能更容易。或者通过 extension.

将新标签页设置为这样

Answer 4

据我从您的编辑中了解到，您想从 hf.space/embed/Alifarsi/news_summarizer 获取当前页面的摘要。因此，代替 cp24.com，您必须将当前页面的 URL 传递给它，存储在 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>

不过，它对复杂的 API 文档帮助不大。通常这些都是以主要思想先于细节的方式编写的。对于您的示例 pandas.read_csv 它将是

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

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

要学习基础知识，教程比文档的 AI 摘要更好search。

将 javascript 代码转换为书签以便于访问

convert javascript code to bookmarklet for easy access

javascript

bookmarklet

userscripts

aws-lambda

aws-api-gateway

javascript：指标

“没有获取预期的页面”

同时切换位置和运行JS的小书签