Javascript 访问 Disqus 评论文本框?

2022-01-13 00:00:00 textbox google-chrome-extension javascript disqus

我正在开发一个浏览器扩展程序，它应该允许我访问文本框中的评论/帖子.现在很多网站都使用 Disqus 作为评论的一种方式，但是当正在输入文本时，我无法找到访问 Disqus 评论框的方法(Disqus API 也没有提供太多信息).

I am working on a browser extension which should allow me to access comments/posts inside textboxes. A lot of sites now use Disqus as a way to comment, but I can't figure out a way to access the Disqus comment box (the Disqus API doesn't tell much either) as text is being entered.

有人知道访问它的方法吗?

Anyone know of a way to access it?

推荐答案

解决这个问题的最好方法是开始分析 Disqus API 如何处理他们的评论系统.此时，您最好的朋友是 Google Chrome 附带的 Inspector(开发者工具).

The best way to figure it out is to begin analyzing how Disqus API does their comment system. Your best friend at this point is the Inspector (Developer Tools) that comes with Google Chrome.

当您分析 DOM(右键单击并定位该评论文本区域)时，您会注意到它是一个 iframe.您应该想到，这是对 Discus 域的跨域请求，以获取该评论框插件的信息.您可以通过查看标签看到，它有一个指向 domain.disqus.com 的 href，其中 domain 是您正在查看的网站.

When you analyze the DOM (right clicking and locating that comment text area), you will notice that it is an iframe. It should come to your mind that it is a cross-origin request to Discus domain to get the information for that comment box plugin. You can see that by looking at the tag, it has a href that points to domain.disqus.com where domain is the website your looking at.

例如，当您访问 TechCrunch 时，iframe 将指向 http://techcrunch.disqus.com注入评论框.

For example, when you visit TechCrunch, the iframe will point to http://techcrunch.disqus.com that injects the comment box.

您可以使用 Content-Scripts 来读取和操作这些注入的页面，因为 Content-Scripts 也可以通过所有框架 manifest 名称注入 IFrame.!

You can use Content-Scripts to read and manipulate those injected pages, because Content-Scripts can inject into IFrames too via all-frames manifest name.!

例如，要设置内容脚本，您需要清单文件中的 content_scripts 部分:

As an example, to setup a Content-Script, you need the content_scripts portion in the manifest file:

"content_scripts": [
  {
    "matches": ["http://*/*"],
    "js": ["cs.js"],
    "run_at": "document_end",
    "all_frames": true
  }

然后，在您的 cs.js(内容脚本文件)中，您可以通过搜索给定的 iframe 找到注释框.

Then, within your cs.js (content script file), you find the comment box from searching the given iframe.

// We just need to check if the IFrame origin is from discus.com
if (location.hostname.indexOf('.disqus.com') != -1) {
  // Extract the textarea (there must be exactly one)
  var commentBox = document.querySelector('#comment');
  if (commentBox) {
    // Inject some text!
    commentBox.innerText = 'Google Chrome Injected!';
  }
}

最后，你会看到Google Chrome Injected！"的精彩字眼！

At the end, you will see the wonderful words "Google Chrome Injected!"

希望能够推动您创建出色的 Chrome 扩展程序 :) 上面的代码有效，因为我在本地对其进行了测试.

Hope that gives you a push creating awesome Chrome Extensions :) The code above works, since I tested it locally.

相关文章