Chrome自定義擴充套件外掛入門教學

2019-12-18 15:30:57

Chrome瀏覽器支援開發擴充套件外掛，並在指定頁面上執行自定義的js程式碼，實現相關自定義功能

建立如下結構的測試檔案

ChromeExtension

-- img （用於存放擴充套件外掛在瀏覽器上顯示的圖示）

-- js （放置自定義的js程式碼檔案）

-- manifest.json （符合chrome規則的Json設定項，將文字檔案改名為這個固定名字與字尾即可）

【img】資料夾

放置自定義擴充套件外掛的顯示圖片，解析度為 256x256，推薦這個比例，否則，可能出不來圖片

【js】資料夾

1）為了方便js操作，新增jquery檔案，如果某些頁面不支援注入jquery，則只能使用原生的js操作

2）自定義js的檔案，此處名字可以自定

【manifest.json】設定

1）manifest_version：2 => 此項固定為2即可

2）name：自定義擴充套件外掛的名字，自定即可

3）version：自定義擴充套件外掛的版本，自定即可

4）description：自定義擴充套件外掛的描述，自定即可

5）icons：各種解析度下的圖片都可以使用【img】資料夾放置的同一張大圖片

6）content_scripts：

A）matches：指定域名的url地址，將會在這些頁面上執行自定義擴充套件外掛。（["<all_urls>"）表示匹配所有地址

B）js：指定【js】資料夾下的自定義注入【matches】頁面的js檔案

C）css：之定義外掛注入的樣式，此項可能會影響原頁面的樣式，所以，使用時須小心

7）permissions：許可權，此項按照截圖固定即可

8）homepage_url：自定義外掛的主頁，可選項

【js】資料夾下的【custom.js】書寫這個擴充套件外掛將要做什麼操作

注意：此處有中文注釋，所以，檔案必須儲存為utf8編碼的檔案

在Chrome瀏覽器安裝自定義的擴充套件外掛

1）開啟Chrome瀏覽器

2）在位址列輸入 chrome://extensions/

3）點選【載入已解壓的擴充套件程式】按鈕，選擇上面建立的資料夾即可

開啟js中指定的頁面，此處可以看到主頁只出現了一瞬間，就到了搜尋結果介面