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.测试插件效果: