使用谷歌浏览器扩展查排名（开发谷歌浏览器扩展）

今天由我来交大家使用谷歌浏览器扩展获取指定网页内容，并且把获取到的内容通过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.hrefvar 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-8import webbrowser
import time
import osbrowser_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

使用谷歌浏览器扩展查排名（开发谷歌浏览器扩展）相关推荐

使用python+selenium谷歌浏览器驱动查排名
这套程序仅供各位同学学习,不作为商业使用工具,该工具包含隐藏浏览器指纹特征,虽然该工具减少了百度弹验证码的频率,但是还是会有一次让手动滑动验证码,作者最后也不知道百度是如何判断模拟器的. 下面介绍使用 ...
谷歌浏览器安装Vue的调试开发工具扩展vue-devtools
想不想在浏览器的控制台中直接调试vue.js?那你一定要了解一下 vue-devtools! vue-devtools是用于调试 Vue.js 应用程序的浏览器开发工具扩展. 网上很多教程,都是下载源 ...
Chrome 插件下载、安装、加载正在开发的扩展程序和打包扩展程序
chrome vpn插件: https://www.jianshu.com/p/ba37c62b8f5e 怎么下载谷歌浏览器插件? 下载方法有好多种,我就说我知道的吧. 我常用的有两种 https:/ ...
利用Adobe AIR本地扩展支持Android开发
http://bbs.9ria.com/thread-180609-1-1.html 学前准备... 2 所需知识... 2 额外工具... 2 用户等级... 2 例子文件... 2 设置AIR S ...
使用Rekit开发可扩展的前端应用
近几年前端技术的快速发展,开发能力与开发难度在逐渐上升.一方面,大型项目中的技术选型,项目结构组织问题一直没有统一的实践方式.另一方面,前端项目的开发工具远远落后于技术本身的发展.大家现在使用的VSC ...
5分钟学会开发浏览器扩展
写在前面做web开发的同学,经常会用到各种chrome浏览器插件,那么我们寄几怎么开发一个插件呢(其实是浏览器扩展)?其实很简单,你意想不到的简单.只要有web开发基础,会写基本的html,css和 ...
Windows 下开发PHP扩展资源
1.Windows 下开发PHP扩展 http://www.shinrun.com/htmls/100101-37.html 2.windows下开发PHP扩展dll(无需Cygwin) http:/ ...
php编码和c语言,急求windows下用c语言开发PHP扩展时，在C语言里把字符串转成utf-8编码再打印的方法。...
因我是用windows下用c开发PHP扩展时, 想在C的函数内直接打印php_printf某字符串(其中含有汉字字符), 但在PHP调用这个函数时,看到的时汉字乱码.PHP页面用的是utf-8编码格式 ...
使用 C# 开发浏览器扩展
使用 C# + Blazor 开发浏览器扩展 Intro 前段时间听了 Justin 大佬分享的 Blazor 开发浏览器扩展,觉得很不错,C# 可以做更多有趣的事情了, 很多需要在服务器端做的事情可 ...

使用谷歌浏览器扩展查排名（开发谷歌浏览器扩展）

使用谷歌浏览器扩展查排名（开发谷歌浏览器扩展）相关推荐

最新文章

热门文章