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

我从：

/a>

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

---

更新：

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

1. drag＆amp;放下书签： https://codepen.io/shantanuo/penanuo/pen/pen/pen/pen/lywrabe

2. 例如 https://pandas.pydata.orgg/docs/reference/reference/reference/reference/reference/reference/reference/reference/reference/reference/reference/reference/reference/reference/ pandas.read_csv.html

3. 当您“活动”选项卡显示上述页面内容时，请单击“书签”。

您将看到此页面的列表。如果有效，我认为我可以使用API​​获取当前页面的摘要，以节省我阅读整篇文章的时间。但这似乎并不像上述过程那样容易。

Answer 1

Chrome在新选项卡上使用 fetch（）封锁书签。尝试在另一个网站上作为书签运行，例如 https://w3c.github.io 应该工作。

Answer 2

JavaScript：指示符

领先的 JavaScript：对于浏览器识别书签是必不可少的。此 uri 的一部分被称为方案并确定接下来会发生什么。

“没有获取预期的页面”

JavaScript：通过URL执行，一般会在 chrome：// 页面上被阻止。 COM/CHOMIUM/CHOMIUM/BLOB/6895919A91D3E5418359582D82375CDD9A4C1BA/content/content/renderer/renderer/render_thread_impl.cc＃l992“

  websecuritypolicy :: registerurlschemeasnotallowingjavascripturls（chrome_scheme）;
 

新的选项卡页面是 chrome：// newtab/，因此书签不起作用。完整列表可以通过输入大约：关于。如果要使用书签，则必须将位置更改为 JavaScript：允许执行。

rentrentrentr

通过使用数据uri方案 data：以脚本标记生成一个以书签代码为脚本的html文件。

// 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>

它将用此HTML存根替换您的当前页面，这可能很烦人。只需切换到 http（s）： url可能会更容易。或将新的选项卡页面设置为via 。

Answer 3

从您的编辑中了解，您希望从 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.pandas.read_cs.csv

将逗号分隔的值（CSV）文件读取到数据框中。

还可以选择将文件迭代或分解成块。

要学习基础知识，请更好地 search> search 比AI摘要文档。

Answer 4

您需要将代码放在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) }) })()

我已经在浏览器中对其进行了测试。它可以很好地记录控制台中的响应数据。您只需将代码像下面的图像一样。它应该很好。