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

by

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?

70 thoughts on “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”