當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

chrome开发总结（交互/权限/存储）-爬虫

發布時間：2024/4/17 编程问答 28 豆豆

生活随笔收集整理的這篇文章主要介紹了 chrome开发总结（交互/权限/存储）-爬虫小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

chrome開發總結（交互/權限/存儲）-爬蟲
- 1.chrome-配置文件
- 2. chrome-js簡介
- 3. chrome-交互

chrome開發總結（交互/權限/存儲）-爬蟲

標簽（空格分隔）：雜亂之地

經過一翻折騰。還是選擇了chrome來做爬蟲。主要是為了解決一些ajax加載的問題以及代理的問題。

1.chrome-配置文件

manifest.json

{// 必選"manifest_version": 2,"name": "我的應用","version": "版本字符串",// 推薦"default_locale": "en","description": "純文本描述","icons": {...},// 選擇某一個（或者無）"browser_action": {...},"page_action": {...},// 可選"author": ...,"automation": ...,"background": {// 推薦"persistent": false},"background_page": ...,"commands": ...,"content_scripts": [{...}],"content_security_policy": "策略字符串","converted_from_user_script": ...,"current_locale": ...,"externally_connectable": {"matches": ["*://*.example.com/*"]},"homepage_url": "http://path/to/homepage","import": ...,"incognito": "spanning 或 split","key": "公鑰","minimum_chrome_version": "版本字符串","offline_enabled": true,"optional_permissions": ...,"options_page": "aFile.html","page_actions": ...,"permissions": [...],"plugins": [...],"requirements": {...},"script_badge": ...,"short_name": "短名稱","signature": ...,"spellcheck": ...,"storage": {"managed_schema": "schema.json"},"tts_engine": ...,"update_url": "http://path/to/updateInfo.xml","web_accessible_resources": [...] }

上面這些不是必須的。把自己需要的加上就可以了。基本上后面的都是不需要的。下面貼一個我的項目的配置

{"name": "siteSpider","manifest_version": 2,"version": "0.0.2","description": "相對單線程穩定版","browser_action": {"default_icon": "spider.png","default_title": "spider","default_popup": "popup.html"},"permissions": ["activeTab","webRequest","webNavigation","webRequestBlocking","proxy","*://*/*","tabs","storage","unlimitedStorage"],"background": { "scripts": ["js/jquery-1.11.2.min.js", "js/bk.js"] },"content_scripts": [{"matches": ["*://*/*"],"js": ["js/jquery-1.11.2.min.js","js/content.js"]}] }

2. chrome-js簡介

chrome一般情況下是3個js。這3個js分別是popup.js/background.js/content.js
這三個js的名字分別代表他們的位置及作用的地點。

popup.js是彈出的那個頁面用的js。假如在彈出的頁面引用了document.getElement.ById().則他獲取的是popup.html頁面的內容。而不是當前頁的。popup.js所作用的范圍就是popup.
background.js：顧名思義，他是一個后臺的js，在任何頁面都可以調用。他主要的作用就是調度及與我們的后臺發送ajax請求等。通過bk.js給popup/content來發送信息。操作tab以及做一些監聽等操作。
content.js:是頁面中的js，也就是tab中的js。在background.js可以通過

chrome.tabs.query(active:true,currentWindow:true,function(tabs){//發送一些操作指令 })

來發送一些指令進行操作。并且只能使用chrome.extension.*的api.

3. chrome-交互

chrome插件交互一般是3種js之間的交互。
下面演示一下popup.js跟background.js的交互。
這是一個popup.html

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script type="text/javascript" src="js/jquery-1.11.2.min.js"></script><script type="text/javascript" src="js/popup.js"></script> </head> <body> <div><div>抓取規則:<select id="rule"><option value="tb">淘寶</option></select></div><div>抓取頁數:<input type="text" id="fetchNum" value="1"/></div><button id="startFetch">抓取</button><button id="hasLoginOk">已登錄</button> </div> <div> 使用說明： 1.在淘寶搜索好關鍵詞（可選擇排序或其他淘寶功能）后，點擊抓取。 2.如果出現登錄驗證，請登錄后點擊已登錄，然后刷新當前網頁。 3.插件正常運行中，禁止使用該瀏覽器瀏覽其他網頁。 </div>  </body> </html>

下面是popup.js

$(function() {//綁定按鈕$("#startFetch").bind("click", startFetch);$("#hasLoginOk").bind("click",hasLoginOk); }) function hasLoginOk() {chrome.runtime.sendMessage({type: "mustLoginIsOk"},function(response) {}); } function startFetch() {var rule = $("#rule").val();var num = $("#fetchNum").val();var sku = $("#sku").val();var baseUrl = $("#baseUrl").val();chrome.runtime.sendMessage({//發送消息type: "fetchUrls",sku: sku,rule: rule,num: num,baseUrl: baseUrl},function(response) {$("#fetchTotal").html(response);}); }/* chrome.extension.onMessage.addListener(function(request,_,response){ if(request.totals){$("#fetchTotal").html("z");$("#fetchTotal").html(request.totals);} }) */

可以看到popup.js通過chrome.runtime.sendMessage()來發送消息。
在backgroundjs通過chrome.extension.onMessage.addListener()來放置一個監聽器。監聽所有的請求。

總結 chrome-js之間的通信都是通過chrome-api的chrome.tabs.sendMessage，chrome.runtime.sendMessage，chrome.extension.onMessage.addListener()來進行的。
api地址：http://chajian.baidu.com/developer/extensions/api_index.html
下面是代碼地址
https://github.com/wongloong/chromeSpider

轉載于:https://www.cnblogs.com/-10086/p/5171263.html

總結

以上是生活随笔為你收集整理的chrome开发总结（交互/权限/存储）-爬虫的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Jmeter使用笔记之意料之外的
下一篇：世界互联网发展史