I want to make a chrome extension that will take url from browser and pass it to python script that in present in same folder, which will scrape the web page and output a JSON file with data.
Manifest.json
{
"name":"Scraper",
"version":"1.0.0",
"manifest_version":2,
"content_scripts":[
{
"matches":["https://www.amazon.in/*"],
"js":["content.js"]
}
],
"browser_action":{
"default_popup":"popup.html",
"default_title":"Scraper"
},
"permissions":["activeTab"],
"content_security_policy": "script-src 'self' https://ajax.googleapis.com; object-src 'self'"
}
popup.js
document.addEventListener('DOMContentLoaded',function(){
document.querySelector('button').addEventListener('click',onclick,false)
function onclick(){
chrome.tabs.query({currentWindow:true,active:true},
function(tabs){
var link = tabs[0].url;
chrome.tabs.sendMessage(tabs[0].id,link);
})
}
},false)
myscraper.py
from bs4 import BeautifulSoup as soup
import pandas as pd
import requests
import datetime
import json
current_time = datetime.datetime.now()
my_url = input()
#my_url = 'https://www.amazon.in/Dell-9570-15-6-inch-i7-8750H-Integrated/dp/B08C5DSRHM/ref=sr_1_1_sspa?crid=X09BHN0D2TJA&dchild=1&keywords=dell+xps+15&qid=1597921046&sprefix=dell+xps%2Caps%2C269&sr=8-1-spons&psc=1&spLa=ZW5jcnlwdGVkUXVhbGlmaWVyPUE1V09ZSFVKVk9aVEcmZW5jcnlwdGVkSWQ9QTAxODcyOTkxQVdJWkxDSFU2UjlZJmVuY3J5cHRlZEFkSWQ9QTA2NTg1NTUxUDJBME5HUE5HS1FaJndpZGdldE5hbWU9c3BfYXRmJmFjdGlvbj1jbGlja1JlZGlyZWN0JmRvTm90TG9nQ2xpY2s9dHJ1ZQ=='
header={
"User-Agent":'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.125 Safari/537.36'
}
page = requests.get(my_url,headers = header)
page_soup = soup(page.content,'html.parser')
title = page_soup.find(id="productTitle").get_text()
price = page_soup.find(id="priceblock_ourprice").get_text()
available = page_soup.find(id="availability").get_text()
avail = available.split(".")
availability = avail[0]
dataPhone = {
'NAME':title.strip(),
'PRICE':price.strip(),
'AVAILABILITY':availability.strip(),
}
with open('amazon.json','w') as json_file:
json.dump(dataPhone,json_file)
content.js
chrome.runtime.onMessage.addListener(function(request){
alert(request)
$.ajax({
url: "./myscraper",
data: {param: link},
}).done(function() {
alert('finished python script');
});
console.log("Finished");
})
popup.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>Run Python</button>
<script src="jquery-3.5.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="popup.js"></script>
<script src="content.js"></script>
</body>
</html>
Currently the code giving this error "ReferenceError: $ is not defined" Can someone tell the problem or some other way to do it?
