問題描述

我正在開發一個瀏覽器擴展程序，它應該允許我訪問文本框中的評論/帖子.現在很多網站都使用 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.

這篇關于Javascript 訪問 Disqus 評論文本框?的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！