Запустите расширение chrome и отправьте данные в PHP-скрипт на загрузку страницы (автоматизируйте процесс)

Я впервые использую расширение chrome для веб-сканирования. Я получаю данные во всплывающем окне HTML, а затем отправляю его на PHP-скрипт при нажатии кнопки. Теперь я хочу использовать эту функцию при загрузке страницы. Таким образом, данные загрузки страницы будут собраны и отправлены на PHP-скрипт. Я использую расширение, как показано ниже.

menifest.json

{ "manifest_version": 2, "name": "Test Extension", "version": "1.0", "offline_enabled": true, "background": { "scripts": ["background.js"] }, "content_scripts": [{ "matches": [ "http://*/*", "https://*/*"], "js": ["jquery.min.js","content.js"], "run_at": "document_end" }], "permissions": [ "tabs", "http://*/*", "file:///*", "downloads" ], "page_action": { "default_title": "Test Extension", "default_popup": "popup.html" } }

content.js

 chrome.runtime.onMessage.addListener(function(msg, sender, response) { /* First, validate the message's structure */ if (msg.from && (msg.from === "popup") && msg.subject && (msg.subject === "DOMInfo")) { /* Collect the necessary data * (For your specific requirements `document.querySelectorAll(...)` * should be equivalent to jquery's `$(...)`)*/ var domInfo = { name : $('ul.companyDetails li:nth-child(1) > br').get(0).nextSibling.nodeValue.trim(), address : $('ul.companyDetails li:nth-child(2) > br').get(0).nextSibling.nodeValue.trim() + " " + $('ul.companyDetails li:nth-child(2) > br').get(1).nextSibling.nodeValue.trim(), reg_date : $('ul.companyDetails li:nth-child(3) > br').get(0).nextSibling.nodeValue.trim(), legal_form : $('ul.companyDetails li:nth-child(4) > br').get(0).nextSibling.nodeValue.trim() }; /* Directly respond to the sender (popup), * through the specified callback */ response(domInfo); } });

popup.js

 /* Update the relevant fields with the new data */ function setDOMInfo(info) { document.getElementById("name").value = info.name; document.getElementById("address").value = info.address; document.getElementById("reg_date").value = info.reg_date; document.getElementById("legal_form").value = info.legal_form; } /* Once the DOM is ready... */ window.addEventListener("DOMContentLoaded", function() { //console.log("DOMContented...") /* ...query for the active tab... */ chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) { /* ...and send a request for the DOM info... */ chrome.tabs.sendMessage( tabs[0].id, { from: "popup", subject: "DOMInfo" }, /* ...also specifying a callback to be called * from the receiving end (content script) */ setDOMInfo); }); }); document.addEventListener('DOMContentLoaded', function () { document.getElementById('btn_php_call') .addEventListener('click', download); }); function download() { event.preventDefault(); // The URL to POST our data to var postUrl = 'link to PHP script'; // Set up an asynchronous AJAX POST request var xhr = new XMLHttpRequest(); xhr.open('POST', postUrl, true); // Prepare the data to be POSTed by URLEncoding each field's contents // Handle request state change events xhr.onreadystatechange = function() { }; xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); // Send the request and set status xhr.send($('#frm_info').serialize()); }

popup.html

  <html> <head> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="popup.js"></script> </head> <body> <form id="frm_info"> <h3 style="font-weight:bold; text-align:center;"> DOM Info </h3> <input type="text" name="name" id="name" value=""> <input type="text" name="address" id="address" value=""> <input type="text" name="reg_date" id="reg_date" value=""> <input type="text" name="legal_form" id="legal_form" value=""> <input type="button" id="btn_php_call" value="submit"> </form> </body> </html>

В настоящее время мне нужно щелкнуть на chrome extension, затем данные отображаются в popup.html, и когда я нажимаю кнопку отправки, данные поступают на PHP. Я хочу сделать это на загрузке страницы, поэтому пользователю не нужно будет делать это вручную.

Edit: Я добавил изображение расширения chrome, когда я нажимаю на расширение (символ T). затем он загружает информацию во всплывающем окне. Когда я нажимаю на отправку данных, всплывающее окно переходит к скрипту PHP

введите описание изображения здесь

Использовать фоновый рисунок

В своем манифесте измените текущий "background" ключ с помощью:

"background": { "page" : "background.html", "persistent": true}

и ваш ключ "content_scripts" :

"content_scripts": [{"matches":"the_URLs_you_want_to_scrape", "js" : ["content.js"], "run_at": "document_idle"}]

Это будет background.html :

 <html> <body> <form id=myForm> <input type="text" name="name" id="name"> <input type="text" name="address" id="address"> <input type="text" name="reg_date" id="reg_date"> <input type="text" name="legal_form" id="legal_form"> </form> <script src="background.js"></script> </body> </html>

В вашем файле background.js укажите следующее:

 chrome.runtime.onMessage.addListener(function(message){ if (message.from == "cs") { document.getElementById("name").value = message.name; document.getElementById("address").value = message.address; document.getElementById("reg_date").value = message.reg_date; document.getElementById("legal_form").value = message.legal_form; var encodedData = [].reduce.call(document.getElementById("myForm").elements, function(acc,cur){ acc.push(cur.name+"="+encodeURIComponent(cur.value));return acc},[]).join("&"); var xhr = new XMLHttpRequest(); xhr.onload = function(){ //check the response } xhr.open("POST",your_link_to_PHP_script); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.send(encodedData); } });

Тогда ваш контент.js будет напрямую:

 var myMessage = { from: "cs", name : document.querySelector('ul.companyDetails li:nth-child(1) > br').nextSibling.nodeValue.trim(), address : document.querySelector('ul.companyDetails li:nth-child(2) > br').nextSibling.nodeValue.trim() + " " + document.querySelectorAll('ul.companyDetails li:nth-child(2) > br')[1].nextSibling.nodeValue.trim(), reg_date : document.querySelector('ul.companyDetails li:nth-child(3) > br').nextSibling.nodeValue.trim(), legal_form : document.querySelector('ul.companyDetails li:nth-child(4) > br').nextSibling.nodeValue.trim() }; chrome.runtime.sendMessage(myMessage);

Бонус: вам не нужен JQuery 🙂