テキストボックス内のコメント/投稿にアクセスできるようにするブラウザ拡張機能に取り組んでいます。現在、多くのサイトでコメントの手段としてDisqusが使用されていますが、テキストが入力されているため、Disqusのコメントボックスにアクセスする方法がわかりません(Disqus APIでもあまりわかりません)。
誰もがそれにアクセスする方法を知っていますか?
テキストボックス内のコメント/投稿にアクセスできるようにするブラウザ拡張機能に取り組んでいます。現在、多くのサイトでコメントの手段としてDisqusが使用されていますが、テキストが入力されているため、Disqusのコメントボックスにアクセスする方法がわかりません(Disqus APIでもあまりわかりません)。
誰もがそれにアクセスする方法を知っていますか?
それを理解する最善の方法は、Disqus API がコメント システムをどのように処理しているかを分析することです。この時点での親友は、Google Chrome に付属している Inspector (Developer Tools) です。
DOM を分析すると (右クリックしてそのコメント テキスト領域を見つけます)、それが iframe であることがわかります。そのコメント ボックス プラグインの情報を取得するための、Discus ドメインへのクロスオリジン リクエストであることに気付くはずです。タグを見ると、domain.disqus.com を指す href があることがわかります。ここで、domain はあなたが見ている Web サイトです。
たとえば、TechCrunch にアクセスすると、iframe はコメント ボックスを挿入するhttp://techcrunch.disqus.comを指します。
Content-Scripts はすべてのフレームのマニフェスト名を介して IFrame にも挿入できるため、Content-Scripts を使用して挿入されたページを読み取って操作できます。
例として、Content-Script をセットアップするには、マニフェスト ファイルに 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 拡張機能を作成するきっかけになれば幸いです :) ローカルでテストしたので、上記のコードは機能します。