爬蟲視覺化點選配置工具之chrome外掛程式簡介

2021-09-13 08:28:15 字數 3214 閱讀 8695

chrome外掛程式是乙個用web技術開發、用來增強瀏覽器功能的軟體,它其實就是乙個由html、css、js、等資源組成的乙個.crx字尾的壓縮包.

chrome外掛程式沒有嚴格的專案結構要求,只要保證本目錄有乙個manifest.json即可,也不需要專門的ide,普通的web開發工具即可。

網上介紹chrome外掛程式開發的文章已經很多了,這裡就不贅述了,只列一些專案中需要的
這是乙個chrome外掛程式最重要也是必不可少的檔案,用來配置所有和外掛程式相關的配置,必須放在根目錄。其中,manifest_versionnameversion3個是必不可少的,descriptionicons是推薦的。

下面給出的是一些常見的配置項,均有中文注釋

,

// 會一直常駐的後台js或後台頁面

"background":

,"browser_action":

,// 當某些特定頁面開啟才顯示的圖示

/*"page_action":

,*/// 需要直接注入頁面的js

"content_scripts": [,

// 這裡僅僅是為了演示content-script可以配置多個規則

],// 許可權申請

"permissions":

["contextmenus", // 右鍵選單

"tabs", // 標籤

"notifications", // 通知

"webrequest", // web請求

"webrequestblocking",

"storage", // 外掛程式本地儲存

"http://*/*", // 可以通過executescript或者insertcss訪問的**

"https://*/*" // 可以通過executescript或者insertcss訪問的**

],// 普通頁面能夠直接訪問的外掛程式資源列表,如果不設定是無法直接訪問的

"web_accessible_resources": ["js/inject.js"],

// 外掛程式主頁,這個很重要,不要浪費了這個免費廣告位

"homepage_url": "",

// 覆蓋瀏覽器預設頁面

"chrome_url_overrides":

,// chrome40以前的外掛程式配置頁寫法

"options_page": "options.html",

// chrome40以後的外掛程式配置頁寫法,如果2個都寫,新版chrome只認後面這乙個

"options_ui":

,// 向位址列註冊乙個關鍵字以提供搜尋建議,只能設定乙個關鍵字

"omnibox": ,

// 預設語言

"default_locale": "zh_cn",

// devtools頁面入口,注意只能指向乙個html檔案,不能是js檔案

"devtools_page": "devtools.html"

}

所謂content-scripts,其實就是chrome外掛程式中向頁面注入指令碼的一種形式(雖然名為script,其實還可以包括css的),借助content-scripts我們可以實現通過配置的方式輕鬆向指定頁面注入js和css(如果需要動態注入,可以參考下文),最常見的比如:廣告遮蔽、頁面css定製,等等。

示例配置:

],

}

特別注意,如果沒有主動指定run_atdocument_start(預設為document_idle),下面這種**是不會生效的

document.addeventlistener('domcontentloaded', function()

);

content-scripts和原始頁面共享dom,但是不共享js,如要訪問頁面js(例如某個js變數),只能通過`injected

js來實現。content-scripts不能訪問絕大部分chrome.***.api`,除了下面這4種:

由於content-script可以注入到頁面,所以我們將要開發的外掛程式的主要功能就在這裡

後台(姑且這麼翻譯吧),是乙個常駐的頁面,它的生命週期是外掛程式中所有型別頁面中最長的,它隨著瀏覽器的開啟而開啟,隨著瀏覽器的關閉而關閉,所以通常把需要一直執行

的、啟動就執行的、全域性的**放在background裡面。

background的許可權非常高,幾乎可以呼叫所有的chrome擴充套件api(除了devtools),而且它可以無限制跨域,也就是可以跨域訪問任何**而無需要

求對方設定cors

經過測試,其實不止是background,所有的直接通過chrome-extension://id/xx.html這種方式開啟的網頁都可以無限制跨域。
配置中,background可以通過page指定一張網頁,也可以通過scripts直接指定乙個js,chrome會自動為這個js生成乙個預設的網頁:

,

}

這裡順帶介紹一下event-pages,它是乙個什麼東西呢?鑑於background生命週期太長,長時間掛載後台可能會影響效能,所以google又弄乙個event-pages,在配置檔案上,它與background的唯一區別就是多了乙個persistent引數:

,

}

它的生命週期是:在被需要時載入,在空閒時被關閉,什麼叫被需要時呢?比如第一次安裝、外掛程式更新、有content-script向它傳送訊息,等等。

我們要開發的外掛程式目前用到了background和content_scripts這兩個選項,如果以後新增新功能時再看看其他的選項,對chrome外掛程式開發感興趣的同學可以看看這本書

視覺化管理 視覺化管理核心工具Andon系統

andon系統 也稱 安燈 暗燈 原為日語的音譯,日語的意思為 燈光 燈籠 最早起源於日本豐田汽車公司,用來實現 立即暫停制度 以即時解決質量問題 而不是下線返修 達到持續高品質地生產汽車。andon 安燈 系統,作為精益製造執行中的乙個核心工具,是加強工廠車間生產過程的管理,相關資訊做到目視化,資...

Redis 視覺化介面工具

現在比較出名的跨平台視覺化介面有兩款,web上的就比較多,但功能不是很強大,沒有native版本的強大。官網地扯 傳送門 原始碼方式安裝 git clone recursive redisdesktopmanager.git b 0.9 rdm cd rdm ubuntu cd src config...

視覺化除錯工具

rosrun rqt console rqt console 檢視日誌訊息,可filter highlight指定級別。rosrun rqt logger level rqt logger level 可設在日誌記錄器的嚴重級別 rosrun rqt topic rqt topic 顯示topic除...