A. 如何添加擴展程序到chrome
第一種方法;直接本地安裝
1. 下載擴展程序/腳本程序,將其保存在本地計算機內;
2. 將保存下來的 *.crx 文件或 *.js 文件直接拖拽到瀏覽器的擴展程序( chrome://chrome/extensions/)頁面。 ( 注:只有拖動到此頁面才能安裝,其它頁面無效)
3. 按照提示安裝
安裝第二種辦法,開發模式安裝
1, 也是先將擴展程序下載保存到本地,然後將下載來的文件後綴名 *.crx 改成 *.rar,這樣你就得到了一個壓縮文件,然後右鍵解壓這個壓縮文件得到一個文件夾。
2然後在瀏覽器里打開擴展程序頁面( chrome://settings/extensions),選中右上方開發人員模式復選框,然後再點擊左上方的載入正在開發的擴展程序按鈕,選中剛剛解壓出來的文件夾然後點確定即可。
3. 開啟瀏覽器支持 右擊 Chrome 桌面快捷方式,選擇-屬性-快捷方式,然後在目標一欄尾部添加參數 --enable-easy-off-store-extension-install ,然後再運行瀏覽器就可以像以前那樣正常安裝 Web Store 之外的第三方擴展應用及腳本程序了。 (注意破折號前的空格 )
B. 適合前端開發人員的vscode擴展插件有哪些
1,HTML snippets(Visual Studio Code HTML snippets)
這是一款前端開發者必備的擴展,它能將你從手動鍵入每個標簽中解放出來。只需輸入 div 然後按下回車,一對標簽就出現了。更厲害的是,對於需要嵌套的標簽,你可以直接用 ul>li>a 的格式表示,按下回車後就能看到你需要的嵌套。還有一點,這個擴展已經包括所有的 HMTL5 片段。
2,JavaScript (ES6) code snippets
幾乎每個前端程序員都是 JavaScript 的使用者,為了提高編寫 JS 代碼的效率,這個擴展很有用,並且它還支持 .ts, .tsx 和 .jsx 文件。
擴展中有很多快捷縮寫,比如想要調用 export default class ClassName{},輸入 ecl 按下空格即可。
3,CSS Peek
既然已經分別介紹了 HTML 和 JS 的助手,我們也不能落下 CSS。CSS Peek 是一個支持 .html 和 .js 文件的擴展,它能幫助開發者快速找到和查看選定類或 id 所用的樣式。對於那些不喜歡來回切換文件或者分屏的開發者來說這個擴展很有用。
4,Angular/React/Vue
既然提到了代碼片段,我們最好也提一下每個框架下的不同擴展。
對 AngularJS 來說,Angular Snippets(Version 8)是針對 AngularJS 8 的一款擴展,它為我們提供 Typescript 和 HTML 的代碼片段。
對於 React.js 框架,ES7 React/Rex/GraphQL/React-Native snippets 是一個優秀的擴展,它使用 ES7 提供 React 和 Rex 的代碼片段,用法和 Javascript snippets 類似,都是按空格鍵。
對 Vue.js 開發,有一個叫 Vetur 的擴展相當棒,它目前的下載量已經有將近2,000萬。Vetur 的功能很強大,包括代碼片段,Emmet,錯誤檢查,格式化,調試和高亮語法等。
5,ESLint
如果你想要寫出友好,易讀,干凈的代碼,我建議你在 VSC 中安裝一個 ESLint 擴展,它會幫助你持續養成好的編碼習慣,比如縮進等。
6,Prettier 代碼格式工具
說到漂亮整潔的代碼,Prettier 聽名字你就值得擁有。尤其在項目需要你和其他同事合作完成時,Prettier 會強勢地將代碼格式全部統一,讓你再也不用和同事討論自己的代碼。
7,GitLens
VSC 是整合了 git 功能的,通過安裝 GitLens 這個功能將會更強大,它能讓你看到每一行代碼是由誰在什麼時候寫的,並且快速查看代碼提交詳情,在團隊協作中這個擴展很有用。
8,Auto import 自動導入包
Auto import 是一個自動導入包擴展。如果目前手頭的項目是基於不同組件的,那麼你需要做的就是給每個組件命名,剩下的事交給 Auto import 就好。
9,Path autocomplete 路徑自動補全
提到了導入的問題,另一個重要的擴展就是能夠智能補全導入文件路徑的 Path autocomplete。使用時,輸入 ./ 後你就會看到一個包含所有文件名的下拉菜單。當文件目錄繁雜時,這個擴展真的是很好用,它為你省去了很多一層一層刨開目錄的痛苦。
10,Bracket Pair Colorizer 括弧著色器
括弧著色器能讓我們一眼看出當前代碼塊的反括弧在哪裡。有時候在稍微復雜的函數中,找到正確的那對代碼並不是那麼容易,但 Bracket Pair Colorizer 在你鍵入一個括弧時就為這一對括弧分配了自己的顏色,便於閱讀。
11,Indenticator 縮進指示器
Indenticator 可以高亮顯示出當前縮進的深度,深度由線和點表示,同樣使代碼更整潔,提高代碼易讀性。
12,Debugger for Chrome 調試器
放在最後的是重磅級的調試擴展 Debugger for Chrome。這個插件能讓你在 VSC 裡面直接調試 JS 文件,效果和 Chrome 的控制台中差不多,讓你不用打開瀏覽器就直接打斷點。 (BY三人行慕課)
C. Chrome擴展開發入門 2.怎樣使用Chrome Extensions API
Google提供的Chrome Extensions API是開發Chrome擴展用到的最權威資料之一,裡面詳細介紹Chrome擴展所能夠實現的各方面的功能和Chrome瀏覽器所提供的介面(比如怎麼調用用戶書簽)。
使用步驟如下:
後台HTML里的JS在瀏覽器被打開時就開始執行了,當瀏覽器關閉時停止工作。你可以在這里寫一些代碼監視瀏覽器動作(比如在監視到用戶創建了一個新標簽頁時邪惡的把它關閉,可以做定時任務(setInterval等),可以添加一段音樂。
用戶點擊擴展欄圖標時可以彈出一個頁面,當用戶點擊網頁部分時這個頁面就被關閉了。
可以使用js獲取用戶當前網頁的DOM數據,監聽用戶鍵盤、滑鼠動作。這些代碼是一個獨立的JS文件(而不是像後台、彈出窗等是一個HTML文件里的嵌入js代碼),通過擴展配置注入到相應的網頁。
讀取用戶計算機數據(NPAPI Plugins)。這個功能要用到dll(動態鏈接庫)知識,可以啟動用戶電腦的程序,刪除用戶文件等功能。相當於一個小Windows程序。利用Chrome提供的方法可以讓擴展的後台頁面與你的dll通信。