chrome瀏覽器擴展開發入門

時間 2019-12-04

原文原文鏈接

1、環境安裝

安裝`nodejs`

首先須要安裝nodejs，能夠到官網下載，不過推薦使用nvs來安裝nodejs。這裏使用的是v11.5.0版本
html

安裝`yeoman`

npm -g install yo

安裝`generator-web-extension`

npm install -g generator-web-extension

2、項目搭建

# 建立項目目錄
mkdir helloworld && cd helloworld
# 生成項目文件
yo web-extension

而後根據提示完成項目配置
node

上圖是詢問是否須要UI Action
No：不須要
Browser：建立瀏覽器級別的UI Action
Page：建立頁面級別的UI Action

本示例選擇Page來進行演示
git

上圖是詢問是否須要覆蓋一些瀏覽器的默認頁面
No：不須要
Bookmarks Page：覆蓋瀏覽器的書籤頁面
History Page：覆蓋瀏覽器的歷史頁面
Newtab Page：覆蓋瀏覽器的新標籤頁面

本示例選擇No
github

上圖是詢問擴展須要的頁面或者腳本
Options Page：擴展的設置頁面
Devtools Page：在devtools裏面的頁面
Content Scripts：在訪問頁面中運行的腳本
Omnibox：給地址欄增長的功能

按空格鍵根據須要進行選擇，也能夠按a鍵所有選擇，本示例選擇來所有
web

上圖是詢問這個擴展須要的權限，由於這個擴展不僅能夠運行在 chrome，還能夠運行在 firefox等其餘一些瀏覽器上，有些權限是 chrome瀏覽器不支持的，能夠根據須要進行選擇，也能夠按 a全選，而後後面再刪除掉不支持的權限。這裏爲了簡單先全選。

而後接下來的一路按回車就能夠了
chrome

項目建立完畢

3、運行項目

編譯項目

npm run dev chrome

能夠看到編譯生成了不少文件，生成的擴展目錄是 dist/chrome/

用chrome把擴展加載起來

打開 chrome的擴展管理頁面，打開開發者模式，加載已解壓的擴展程序，選擇剛纔生成的 dist/chrome/目錄

能夠看到擴展已經加載了，可是有個錯誤按鈕。點擊這個按鈕查看錯誤信息

前面在選擇權限的時候選擇了全部權限，可是有些權限是 chrome不支持的，所以須要把這些權限刪掉

擴展須要的頁面、腳本、配置等都在app/目錄裏面，通常只須要修改裏面的文件就能夠了
要修改權限，打開app/manifest.json文件，找到提示的幾個權限所有刪除掉
npm

從新加載一下擴展
json

修改文件從新編譯有點慢，多點幾回應該就能夠了

隨便打開一個頁面，能夠看到擴展已經成功運行了
瀏覽器

4、打包

npm run build chrome

運行完打包命令以後，會在 packages/目錄下面生成擴展的壓縮包

5、其餘

使用`firefox`加載擴展

先進行編譯app

npm run dev firefox

用firefox進行加載

firefox須要選中 manifest.json文件

能夠看到擴展已經運行成功了

6、附錄

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。