gpt4 book ai didi

javascript - 运行 chrome 扩展并在页面加载时将数据提交到 PHP 脚本(自动化过程)

转载 作者:行者123 更新时间:2023-11-30 14:55:19 30 4
gpt4 key购买 nike

我是第一次使用 chrome 扩展程序进行网络抓取。我在 HTML 弹出窗口中获取数据,然后在单击按钮时将其提交给 PHP 脚本。现在我想在页面加载时执行此功能。因此,将收集页面加载数据并将其提交给 PHP 脚本。我正在使用如下扩展

list .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"
}
}

内容.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);
}
});

弹出窗口

/* 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());
}

弹出窗口

 <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 扩展,然后数据呈现在 popup.html 中,当我点击提交按钮时,数据会转到 PHP。我想在页面加载时执行此操作,因此用户无需手动执行。

编辑:当我点击扩展(T 符号)时,我添加了 chrome 扩展的图像。然后它在弹出窗口中加载信息。当我单击弹出窗口中的提交数据时,转到 PHP 脚本

enter image description here

最佳答案

使用后台页面

在您的 list 中,将您当前的 "background" 键更改为:

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

和您的 "content_scripts" key :

"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);
}
});

那么你的 content.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 :)

关于javascript - 运行 chrome 扩展并在页面加载时将数据提交到 PHP 脚本(自动化过程),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47388140/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com