您的位置 首页 > 娱乐休闲

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

1.目录结构如下:

2.mani文件代码如下:

{ "description": "抓取页面数据", "manifest_version": 2, "name": "抓数", "version": "1.0", "icons": { "48": "icon; }, "browser_action": { "default_icon": { "48": "icon; }, "default_title": "抓数", "default_popup": "popu; }, "content_scripts": [ { "matches": [ "*://*.*" ], "js": [ "scri;, "scri; ] } ], //向浏览器申请的权限 "permissions": [ "tabs", "activeTab" ] }

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

//scri $(function () { // $('body').append("<div>9999</div>"); var list = $("#J_NavCommonRowItems_0").find("a").map(function (index, item) { return i; }); con(list) var title = $("#J_NavCommonRow_0 .title")[0].innerText; con(title); c( function (request, sender, sendResponse) { //request可以接收browser_action页面的js发送过来的数据 if == "send") { //发送给browser_action的数据 sendResponse({state: title + ''}); } if == "submit") { sendResponse({state: title, list: Array.from(list)}); } } ); })

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

//popu <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="index.css"/> </head> <body> <form action="; 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="../scri;></script> <script type="application/javascript" src="index.js"></script> </html>//popu $(function () { con(11) $('#submit').click(function () { c({active: true, currentWindow: true}, function (tab) { c(tab[0].id, //发送给content_script的数据 { action: "submit" }, function (response) { //response可以接收content_script发送过来的数据 $("#title").val); $("#sellCount").val); $("#storeCount").val.length); con.join(',')) }); }); }) })//popu body { width: 500px; height: 500px; background-color: #eee; } form { padding: 20px; text-align: center; } dd { padding: 10px; }

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

6.测试插件效果:

责任编辑: 鲁达

1.内容基于多重复合算法人工智能语言模型创作,旨在以深度学习研究为目的传播信息知识,内容观点与本网站无关,反馈举报请
2.仅供读者参考,本网站未对该内容进行证实,对其原创性、真实性、完整性、及时性不作任何保证;
3.本站属于非营利性站点无毒无广告,请读者放心使用!

“浏览器插件开发获取淘宝的品牌类型”边界阅读