Chrome拡張機能のbackgroundでスクレイピングしたい
解決したいこと
メルカリの商品一覧のページで、発送までの日数と更新？出品？が何分前かを表示させたいです。
発生している問題・エラー
https://qiita.com/doran/items/c2d3249c53b97ddeed0d
を参考にしたところ、
ajax Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
というエラーが出て、
https://qiita.com/mtoutside/items/cee708841cad7e02f85c
を参考に
status.set({ 'Access-Control-Allow-Origin': '*' }); // ここでヘッダーにアクセス許可の情報を追加
を入れましたが、変わらずでした。
javascript自体初めてのため、これ以上調べても私には解決方法が見つけられませんでした。
該当するソースコード
menu.html
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>ページへアクセステスト</title>
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/menu.js"></script>
</head>
<body>
<div id="title" style="width: 100%;"></div>
<div id="view" style="width: 100%;"></div>
</body>
</html>
manifest.json
{
"name": "ページへアクセステスト",
"version": "1.00",
"description": "ページへアクセステスト",
"host_permissions": ["https://qiita.com/doran/items/*"],
"permissions": [],
"background": {
"service_worker": "js/background.js"
},
"manifest_version": 3
}
js/background.js
chrome.action.onClicked.addListener(function(){
chrome.tabs.create({"url": "menu.html"});
});
js/menu.js
$(function(){
$.ajax({
url: "https://jp.mercari.com/item/m********",
type: "GET",
contentType: "application/json",
success: function(ret, status, xhr){
var form = $(ret);
$("#title").text(form.find(".body__32cba457>span").text());
$("#view").text(form.find(".body__5616e150 secondary__5616e150").text());
},
error: function(XMLHttpRequest, status, errorThrown) {
console.log(errorThrown);
}
});
});
自分で試したこと
Geminiに聞いてみたところ、background.jsとcontent.jsで行えるような回答がありましたが、どんどん話がそれて訳が分からなくなってしまいました。
私の知識不足でこれ以上の検索は難しいため、お助けいただきたいです。
0
