浏览器插件开发--获取淘宝的品牌类型

1.目录结构如下：

2.manifest.json文件代码如下：

{"description": "抓取页面数据","manifest_version": 2,"name": "抓数","version": "1.0","icons": {"48": "icon/data_48.png"},"browser_action": {"default_icon": {"48": "icon/data_48.png"},"default_title": "抓数","default_popup": "popup/index.html"},"content_scripts": [{"matches": ["*://*.taobao.com/*"],"js": ["scripts/jquery-3.4.1.min.js","scripts/index.js"]}],//向浏览器申请的权限"permissions": ["tabs","activeTab"]
}

3.content_scripts的相关脚本如下(匹配matches的网址会自动加载对应的js的配置的脚本)：

//scripts/index.js
$(function () {// https://blog.csdn.net/qq_21859119/article/details/78805877$('body').append("<div>9999</div>");var list = $("#J_NavCommonRowItems_0").find("a").map(function (index, item) {return item.innerText;});console.log(list)var title = $("#J_NavCommonRow_0 .title")[0].innerText;console.log(title);chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {//request可以接收browser_action页面的js发送过来的数据if (request.action == "send") {//发送给browser_action的数据sendResponse({state: title + ''});}if (request.action == "submit") {sendResponse({state: title, list: Array.from(list)});}});
})

4.browser_action的相关脚本如下(点击浏览器插件时的弹出层)：

//popup/index.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="index.css"/>
</head>
<body>
<form action="http://www.baidu.com" method="post"><dl><dd><label for="title">标题</label><input id="title" name="title" type="text"/></dd><dd><label for="sellCount">品牌类型</label><input id="sellCount" name="sellCount" type="text"/></dd><dd><label for="storeCount">品牌数量</label><input id="storeCount" name="storeCount" type="text"/></dd><button id="submit">提交表单</button></dl></form>
</body>
<script type="application/javascript" src="../scripts/jquery-3.4.1.min.js"></script>
<script type="application/javascript" src="index.js"></script>
</html>

//popup/index.js
$(function () {console.log(11)$('#submit').click(function () {chrome.tabs.query({active: true, currentWindow: true}, function (tab) {chrome.tabs.sendMessage(tab[0].id,//发送给content_script的数据{action: "submit"},function (response) {//response可以接收content_script发送过来的数据$("#title").val(response.state);$("#sellCount").val(response.list);$("#storeCount").val(response.list.length);console.log(response.list.join(','))});});})})

//popup/index.css
body {width: 500px;height: 500px;background-color: #eee;
}form {padding: 20px;text-align: center;
}dd {padding: 10px;
}

5.输入扩展插件的地址，打开开发者模式，加载开发好的插件。

6.测试插件效果：

浏览器插件开发--获取淘宝的品牌类型相关推荐

Chrome浏览器插件开发－淘宝自动登录
http://www.cnblogs.com/oshine/p/5379349.html 浏览器插件的介绍 Chrome浏览器插件开发的准备工作 manifest.json配置介绍页面如何注入scr ...
使用selenium模拟浏览器,获取淘宝搜索页面商品名称销量等信息
作者:李忠林 Github: https://github.com/Leezhonglin Gitblog: https://leezhonglin.github.io/ 本文仅用于学习. 使用自动化 ...
python获取登录按钮_Python：Selenium模拟Chrome浏览器抓取淘宝商品信息
对于采用异步加载技术的网页,有时候想通过逆向工程的方式来设计爬虫进行爬取会比较困难,因此,要想通过python获取异步加载数据往往可以使用Selenium模拟浏览器的方式来获取. Selenium是一 ...
电商API分享：获取淘宝商品历史价格api调用示例参数说明
在网络购物中,TAO宝是相信许多人的首选平台之一,而对于一个谨慎的购物者来说,价格的变化是非常重要的.所以获取淘宝商品历史价格,可以帮助购物者更好地作出决策,实现理性消费.获取淘宝商品历史价格主要能帮 ...
3.使用Selenium模拟浏览器抓取淘宝商品美食信息
# 使用selenium+phantomJS模拟浏览器爬取淘宝商品信息 # 思路: # 第一步:利用selenium驱动浏览器,搜索商品信息,得到商品列表 # 第二步:分析商品页数,驱动浏览器翻页,并 ...
获取淘宝订单的解决方案
项目需求: 需求很简单,就是想获取淘宝的订单: 获取淘宝订单的几种方式: 聚石塔: 首先是该商家必须已经入驻了聚石塔,因为聚石塔可以共享改商家的淘宝.天猫.阿里云.支付宝等信息.所以你可以通过该商家的 ...
弘辽科技：如何获取淘宝推广链接？有哪些推广方法？
原标题<弘辽科技:如何获取淘宝推广链接?有哪些推广方法?> 今天为大家介绍一种推广方式,名字叫做淘宝客推广.淘宝用户们也可以成为淘宝客,通过淘宝客推广方式来赚取佣金,那么各位淘宝客们知道如 ...
模拟浏览器抓取淘宝书籍数据
淘宝的html是动态加载的,直接用requests请求并不能找到想要的数据,这里用selenium库模拟浏览器登录并操作导库 from selenium import webdriver 淘宝的ur ...
自动获取淘宝API数据访问的SessionKey
原文地址为: 自动获取淘宝API数据访问的SessionKey 最近在忙与淘宝做对接的工作,总体感觉淘宝的api文档做的还不错,不仅有沙箱测试环境,而且对于每一个api都可以通过api测试工具生成想要 ...
获取淘宝购买到的商品订单物流API，买家订单物流API接口，淘宝买家订单API接口
一.获取淘宝购买到的商品订单物流API,买家订单物流API接口,淘宝买家订单API接口代码对接如下: 1.公共参数: 名称类型必须描述 key String 是调用key(必须以GET方式拼接 ...

浏览器插件开发--获取淘宝的品牌类型

1.目录结构如下：

2.manifest.json文件代码如下：

3.content_scripts的相关脚本如下(匹配matches的网址会自动加载对应的js的配置的脚本)：

4.browser_action的相关脚本如下(点击浏览器插件时的弹出层)：

5.输入扩展插件的地址，打开开发者模式，加载开发好的插件。

6.测试插件效果：

浏览器插件开发--获取淘宝的品牌类型相关推荐

最新文章

热门文章