chrome外掛程式是乙個用web技術開發、用來增強瀏覽器功能的軟體,它其實就是乙個由html、css、js、等資源組成的乙個.crx字尾的壓縮包.
chrome外掛程式沒有嚴格的專案結構要求,只要保證本目錄有乙個manifest.json
即可,也不需要專門的ide,普通的web開發工具即可。
網上介紹chrome外掛程式開發的文章已經很多了,這裡就不贅述了,只列一些專案中需要的這是乙個chrome外掛程式最重要也是必不可少的檔案,用來配置所有和外掛程式相關的配置,必須放在根目錄。其中,
manifest_version
、name
、version
3個是必不可少的,description
和icons
是推薦的。
下面給出的是一些常見的配置項,均有中文注釋
,
// 會一直常駐的後台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_at
為document_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除...