今天由我来交大家使用谷歌浏览器扩展获取指定网页内容，并且把获取到的内容通过ajax发送给远程接口。有哪里不对的欢迎大家指正。
1.编写谷歌扩展配置文件,固定格式，固定名称 “manifest.json”。注意：谷歌扩展3版本
{
"name": "扩展名称",
"description": "扩展描述",
#扩展版本
"version": "1.0",
#申明谷歌扩展3
"manifest_version": 3,
#扩展核心js ，俗话中控系统
"background": {
"service_worker": "background.js"
},
#请求域名白名单 此处允许所有的域名
"host_permissions": [
"<all_urls>"
],
#扩展权限，自己网上查
"permissions": [
"management",
"storage",
"activeTab",
"tabs",
"notifications",
"webRequest",
"webRequestBlocking"
],
#扩展图片
"icons":
{
"16": "img/icon.png",
"48": "img/icon.png",
"128": "img/icon.png"
},
#右上角点击扩展图标，弹出的小页面
"action": {
"default_popup": "popup.html"
},
"content_scripts": [
{
#跟正则差不多，当前页面url跟正则里边的url匹配是，触发扩展 background.js，
"matches": ["*://m.baidu.com/*"],
#申明扩展允许执行的js白名单，就是申明这些js以后，扩展可以调用了
"js": ["common.js", "jquery.min.js", "getDetail.js"],
#申明扩展在页面加载完成以后执行，有三个选项，自己网上查，很重要的
"run_at":"document_idle"
}
]
}
2.编写核心 background.js(所有的权限都可以在这个js里边写),这个代码的作用就是监听消息有没有发送，当收到消息数据的时候，存在本地，并且使用 fetch 发送给远程接口
chrome.runtime.onMessage.addListener(async (msg, sender) => {
if (msg.data) {
chrome.storage.sync.getBytesInUse("paimingData",function(e){
#当本地数据大于800时发送给接口，否则就继续追加到本地
console.log("大小：" + e);
if(e>=800) {
chrome.storage.sync.get("paimingData", function(e){
if (e['paimingData']) {
var postdata = e['paimingData'];
} else {
return false;
}
var headers = new Headers();
headers.append("Content-Type", "application/x-www-form-urlencoded");
var fetchOptions = {
method: "POST",
cache: 'no-cache',
credentials: 'include',
headers: headers,
referrerPolicy: 'no-referrer-when-downgrade',
body:JSON.stringify({"data":postdata})
};
#要注意记得在配置中添加白名单
var url = "http://xx.xx.cn/newapi/savepaiming";
response = fetch(url,fetchOptions).then(function(response){
if (response.status==200) {
response.text().then(data => {
if(data == "success") {
console.log("成功了");
}
})
}
}).catch(function(err) {
console.log("失败了" + err);
});
})
} else {
#新数据追加到本地
chrome.storage.sync.get("paimingData", function(e2){
if(e2['paimingData']) {
var oldData = e2['paimingData']
}else {
var oldData = new Array();
}
console.log("laoshuju")
console.log(oldData)
var jg = msg.data;
for (var i in jg) {
oldData.push(jg[i])
}
chrome.storage.sync.set({"paimingData":oldData});
})
}
});
}
if (msg.close) {
#如果接收到需要关闭，那么久关闭当前的tab窗口
console.log("要关闭了啊")
setTimeout(function(){
chrome.tabs.remove(sender.tab.id)
},10000);
}
})
3.当扩展匹配到当前域名跟配置文件中的域名一致时，触发所有申明的js
1>第一个common.js 声明公共的函数
#checkDomTxt dom对象可以是js的也可以是jquery的，因为我申明了jquery，所以可以使用
#executeNum 执行次数，比如第几次执行，我这里不判断直到有dom对象位置
#callback 回调函数
#maxNum 最大循环次数，我没使用
#这个函数是我使用jquery 判断 .c-result result 这个对象有没有 ，我这个写法不严谨，各位同学不要模仿
function checkData(checkDomTxt, executeNum, callback, maxNum = 100) {
console.log("等待元素"+executeNum);
while (1) {
if ($(".c-result result")) {
callback()
break;
} else {
setTimeout(function(){
checkData(checkDomTxt, executeNum + 1, callback, maxNum)
},1000)
}
}
}
2>第二个getDetail.js 使用jquery获取页面dom对象，匹配页面元素 。配置文件中申明，只要匹配到域名，在dom加载完成后，执行该js
function getData() {
console.log("执行到获取元素了");
var current_url = window.location.href
var page = 1;
#我这里边判断url中的分页，我提交接口使用的参数，
if(current_url.indexOf("pn") == -1){
page = 1;
} else {
var preg = /pn=(\d+)/g;//加上g的话，就是全局匹配！
var pipei = current_url.match(preg)
if(pipei && pipei[0]) {
page = (pipei[0].match(/\d+/)/10) + 1;
}
}
var res = new Array();
var keyword = $("#kw").val();
#我这里匹配百度搜索列表中的所有结果，并且放到res2对象中
document.querySelectorAll(".c-result").forEach(function(v){
var jg = v.getAttribute("data-log")
var mulu = JSON.parse(jg)
var yumming = mulu['mu'];
var order = mulu['order'];
#这里是当搜索结果包含了 “ xxx.cn/abc” 就添加到对象中，这里就是查排名的关键了
if(yumming.indexOf("xxx.cn/abc") !== -1){
var res2 = {};
res2['keyword'] = keyword;
res2['order'] = order;
res2['yuming'] = yumming;
res2['page'] = page;
res.push(res2)
}
})
#因为我们申明的js没有发送接口的权限，所以必须吧结果发送到系统的 background.js ，并且需要关闭当前的tab窗口
chrome.runtime.sendMessage({ data: res, close: true })
}
#判断jquery对象是否存在，如果存在回调getData函数
checkData('.c-result result', 0, getData)
- popup.html这个页面也是系统定死的，就是点一下又上角那个图标，弹出来的小窗口页面，可以在这里边写。
popup.js 这个js，在4. popup.html中引入，具体有哪些权限大家可以网上查一下。
这个popup可以交互使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.wrap {
width: 300px;
padding: 24px;
}
</style>
</head>
<body>
<div class="wrap">
<button id="show">show data</button>
<div class="log"></div>
</div>
<script src="./popup.js"></script>
</body>
</html>
const btn = document.querySelector('#show')
function log(txt) {
document.querySelector('.log').appendChild(document.createElement('div')).innerText = "> " + txt;
}
btn.addEventListener('click', () => {
document.querySelector('.log').innerHTML = ''
chrome.storage.sync.get("paimingData", function(result) {
result['paimingData'].forEach(function(v){
console.log(JSON.stringify(v));
log(JSON.stringify(v))
})
})
})
5.添加扩展到谷歌浏览器
第一步输入： chrome://extensions/
第二步：点击右上角开发者模式
第三步：加载已解压的扩展程序
第四步：完成扩展了
第五步：查看background.js控制台要点击service worker ,查看其它js打开网页控制台就行
6.python 配合浏览器打开网页，然后扩展进行页面获取，并且发送给接口。
# coding=utf-8
import webbrowser
import time
import os
browser_path = r"C:\Users\wode\AppData\Local\Google\Chrome\Application\chrome.exe"
webbrowser.register('chrome', None, webbrowser.BackgroundBrowser(browser_path))
url = "https://m.baidu.com/ssid=12c5bfbfc6d7sssea367/s?word={}&sa=tb&ts=4051354&t_kt=0&ie=utf-8&rsv_t=61e4xG2ZksUq2VpMHCI%252B1MlSqOMuV2K3bd34tg3cRyLmKI5hsPZV&rsv_pq=7649134964387212888&gpc=&sugid=201453468124012&rqlang=zh&rsv_sug4=3927&inputT=2996&oq=%E5%AE%81%E5%A4%8F%E7%99%BD%E7%99%9C%E9%A3%8E%E5%8C%BB%E9%99%A2%E5%93%AA%E5%AE%B6%E5%A5%BD"
filename = "./chaxunci.txt"
with open(filename, "r", encoding='utf-8') as f:
for d in f.readlines():
keyword = d.strip()
if keyword:
request_url = ""
request_url = url.format(keyword)
print(request_url)
webbrowser.get('chrome').open(request_url, new=2, autoraise=True)
time.sleep(3.5)
os.system('taskkill /f /IM Chrome.exe')
以上就是使用谷歌浏览器扩展+python查百度收录排名情况了。仅供给个同学学习参考。
下载代码地址：https://download.csdn.net/download/wei042/86772347
2287
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
