Javascript to access Disqus comment textbox?

Question

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 o

Answer 1

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.

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.

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

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.!

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
  }

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!';
  }
}

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

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