開發chrome擴充套件程式

2022-04-01 17:17:57 字數 907 閱讀 9421

谷歌瀏覽器擴充套件程式官方文件:

#入門1. 建立資料夾如:c:\demo

2. 在該資料夾下建立名為manifest.json的檔案,內容格式為json格式,語法如下

3. 在demo資料夾中至少包含 icon.png(圖示),a.html(外掛程式按鈕被點下時顯示的網頁)

#安裝1. 開發版的chrome瀏覽器中(各個版本中操作稍有不同),依次點 工具圖示->工具->擴充套件程式,進入擴充套件程式管理頁面

2. 現在你已經進入外掛程式管理頁面,點選頁面右側的"開發人員模式", 點選「載入正在開發的擴充套件程式」

3. ok了

>注意的問題:某些時候看起來沒有任何錯誤的**卻沒有得到執行?可能是manifest.json檔案中沒有開啟**中用到的許可權

#如何除錯?

問題:外掛程式的除錯並不在當前瀏覽的頁面中,那有辦法除錯嗎?

好了,現在除錯的就是你的擴充套件程式了。如命令:console.dir(chrome),將顯示chrome的所有屬性

#如何把js指令碼載入到瀏覽的頁面中?

官方指導頁:

方法1: 

在配置檔案manifest.json中加入類似下面格式的內容

"content_scripts": [

]matches是匹配url,只有匹配的url才會新增這些內容

css是要附加的css檔案列表

js是要附加的js檔案列表

方法2: 

1. 在外掛程式目錄中建立js檔案,如test.js

2. 在popup指定的頁面中執行方法:chrome.tabs.executescript(null, );

Chrome 擴充套件程式開發

按chrome開發規範,我們首先建乙個資料夾,如d autoclickdemo 在該資料夾下新建乙個名為manifest.json的文字檔案,並按實際情況放乙個檔案,作為外掛程式的圖示。然後新建乙個名為myscript.js的js指令碼檔案,作為我們需要自定義執行的操作。最後,如果需要用到jquer...

chrome擴充套件程式開發

1 檢視及執行擴充套件程式 2 擴充套件的組成1 檢視擴充套件程式資訊 2 檢視popup頁面1 不可視的background頁面 2 可視頁面 browser action default icon 圖示 最好19px 19px default title 標題 default popup 彈出框...

如何製作chrome擴充套件程式

簡單實現了乙個 chrome 的擴充套件,方法如下 首先新建乙個資料夾,用編輯器寫乙個檔名為 manifest.json 的檔案 icons 這其中,如果需要多語言支援的話,可以新增default locale,並將name description欄位修改為 並在外掛程式目錄下新增 locales ...