使用Javascript來訪問Disqus評論文本框？

Question

我正在瀏覽器擴展，它應該允許我訪問文本框內的評論/帖子。很多網站現在使用Disqus作爲評論的一種方式，但是我無法找到一種方法來訪問Disqus評論框（Disqus API並沒有多少說明），因爲正在輸入文本。

任何人都知道的方式來訪問它？

Answer 1

解決這個問題的最好方法是開始分析Disqus API如何執行其評論系統。此時，您最好的朋友是Chrome瀏覽器附帶的Inspector（開發人員工具）。

當您分析DOM（右鍵單擊並查找該評論文本區域）時，您會注意到它是一個iframe。您應該想到，它是Discus域的一個跨域請求，以獲取該評論框插件的信息。你可以通過查看標籤來看到，它有一個指向domain.disqus.com的href，其中domain是你正在查看的網站。

例如，當您訪問TechCrunch時，iframe將指向http://techcrunch.disqus.com注入評論框。

您可以使用Content-Scripts來讀取和操作這些注入的頁面，因爲Content-Scripts也可以通過全幀manifest名稱注入到IFrame中。

舉例來說，設置一個內容腳本，你需要在清單文件中的content_scripts部分：

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

然後，你cs.js內（內容腳本文件），你會發現評論框從搜索給定的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！」

希望能給你一個創造超棒Chrome擴展的推動:)上面的代碼工作，因爲我在本地測試它。