ネストされたdivタグからデータをスクラップし、devツールからCSVにエクスポートする方法

Question

divタグの 'prod-details'をhereからエクスポートしようとしています。データを削ってCSVをエクスポートするChromeの開発ツールですか？

Answer 1

私はあなたのためにそれを実装するつもりはありません;）しかし、私はこのワークフローがあなたのところでほとんどの方法を得ると思います。

1. snippetを作成します。
2. スニペット内のデータをスクラップします。 document.querySelectorAll('.prod-details')が始まります。
3. スニペットでデータをCSVにフォーマットします。
4. XHRを使用して、スニペット内のGoogleスプレッドシート（​​または他の関連サービス）にCSV形式のデータを送信します。
5. ページが開いている間にスニペットを実行します。

Answer 2

Kayceはおそらくあなたにとってそれをしないのは正しいでしょうが、それは始めるのが難しいかもしれないので、ここではあなたが作業できるコメントを持つ基本的な実装をします。読んで、それをコピーして貼り付けるのではなく、理解してください。

// Create a list of the selectors within each prod-deatils you'd like to export as a column 
var columnSelectors = [".brand", ".model", ".finish", ".ProductPriceDetails"]; 

// Create an array with the column selectors at the top to act as a header 
[columnSelectors.join(",")].concat(
    // Grab the product details and arrayify it so we can use standard array functions 
    $(".prod-details").toArray() 
     // These are elements, and we want to be able to use jquery with them, so wrap each element with jquery 
     .map(d => $(d)) 
     // For each prod-detail element, we want to extract each of the columns 
     .map(d => 
      columnSelectors.map(
       // ... so we iterate the selectors and apply each one to the product, grab the text and trim() it to remove whitespace 
       sel => d.find(sel).text().trim() 
      ).join(",") // Finally join each of the columns with a comma so it follows CSV format 
     ) 
).join("\n"); // And join all the rows with newlines