浏览器插件开发--获取淘宝的品牌类型
生活随笔
收集整理的這篇文章主要介紹了
浏览器插件开发--获取淘宝的品牌类型
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
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.測試插件效果：
總結
以上是生活随笔為你收集整理的浏览器插件开发--获取淘宝的品牌类型的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 程序员每天应该思考的5个问题，你有思考过
- 下一篇： vue 实现点击“增加“”按钮，添加一个