chrome擴展插件開發(fā)（chrome插件開發(fā)全攻略）

大家好！今天讓創(chuàng)意嶺的小編來大家介紹下關(guān)于chrome擴展插件開發(fā)的問題，以下是小編對此問題的歸納整理，讓我們一起來看看吧。

ChatGPT國內(nèi)免費在線使用，能給你生成想要的原創(chuàng)文章、方案、文案、工作計劃、工作報告、論文、代碼、作文、做題和對話答疑等等

你只需要給出你的關(guān)鍵詞，它就能返回你想要的內(nèi)容，越精準，寫出的就越詳細，有微信小程序端、在線網(wǎng)頁版、PC客戶端，官網(wǎng)：https://ai.de1919.com

本文目錄:

• 1、Chrome 的插件與擴展有什么區(qū)別

• 2、如何管理Chrome的擴展，插件和應(yīng)用

• 3、Chrome 的插件與擴展有什么區(qū)別

• 4、chrome 插件開發(fā)一個url攔截，重定向到另外一個地址，怎樣做本地緩存

一、Chrome 的插件與擴展有什么區(qū)別

"擴展"和"插件"，其實都是軟件組件的一種形式，Chrome 只不過是把兩種類型的組件分別給與了專有名稱，一個叫"擴展"，另一個叫"插件"。

擴展（Extension），指的是通過調(diào)用 Chrome 提供的 Chrome API 來擴展瀏覽器功能的一種組件，工作在瀏覽器層面，使用 HTML + Javascript 語言開發(fā)[*]。比如著名的 Adblock plus。

插件（Plug-in），指的是通過調(diào)用 Webkit 內(nèi)核 NPAPI 來擴展內(nèi)核功能的一種組件，工作在內(nèi)核層面，理論上可以用任何一種生成本地二進制程序的語言開發(fā)，比如 C/C++、Delphi 等。比如Flash player 插件，就屬于這種類型。一般在網(wǎng)頁中用 <object> 或者 <embed> 標簽聲明的部分，就要靠插件來渲染。

至于哪種功能多的問題，這個不能比較，各有側(cè)重。如果你想實現(xiàn)一個自動統(tǒng)計你上過的網(wǎng)站以及各自時間的功能，就要用擴展技術(shù)；如果你要實現(xiàn)一個讓你的瀏覽器可以渲染 AutoCAD 文件的功能，就要用插件技術(shù)。

注：

* Chrome 擴展本身也支持包含 Plug-in 模塊，這部分可以使用 C/C++ 等語言開發(fā)。比如 web QQ 的截圖擴展，就是用了這項功能。

二、如何管理Chrome的擴展，插件和應(yīng)用

管理Chrome的擴展，插件和應(yīng)用的方法

擴展（Extension）的管理

擴展（Extension）和應(yīng)用（Application）的管理方法類似，分為兩種：Chrome自帶的管理工具或者Extensions Manager (aka Switcher)擴展。

Chrome自帶的管理工具

1. 點擊右上角的菜單→工具→擴展程序或者直接在地址欄輸入chrome://extensions/。

2. 這里可看到所有安裝的擴展。亮色打勾得表示已經(jīng)啟用的，灰色未打勾的表示位啟用的，右側(cè)小垃圾桶可以刪除相應(yīng)擴展。把不用的擴展刪除或者勾去掉即可。

3. 借力Extensions Manager (aka Switcher)

4. 安裝Extensions Manager (aka Switcher)擴展，擴展中的“管家”，Chrome Web Store里可以搜到。

5. 點擊aka Switcher圖標，彈出下拉框，選擇extensions，當前的擴展信息一目了然，勾選需要的擴展即可。

應(yīng)用（Application）的管理

Chrome自帶的管理工具

1. 點擊左上角應(yīng)用圖標或者在地址欄輸入chrome://apps，則可打開應(yīng)用管理頁面。

2. 自帶的管理工具只能選擇刪除無法停用，因此需要aka Switcher擴展。

3. 借力Extensions Manager (aka Switcher)

4. 點擊aka Switcher圖標，彈出下拉框，選擇applications，當前的應(yīng)用信息一目了然，勾選需要的應(yīng)用即可。

插件（Plugin）的管理

1. 除了上述兩種“顯而易見”的“外掛”外，還有一種藏的更深的“外掛”——插件（Plugin）。它通常不是我們主動安裝的，往往是安裝軟件時軟件本身順帶幫我們就安裝了。

2. 插件（Plugin）可以在地址欄輸入chrome://plugins打開管理頁面?？梢钥吹接泻蚎Q相關(guān)的，也有和Office相關(guān)的。把不需要也不會影響瀏覽器使用的停用即可。

三、Chrome 的插件與擴展有什么區(qū)別

"擴展"和"插件"，其實都是軟件組件的一種形式，Chrome 只不過是把兩種類型的組件分別給與了專有名稱，一個叫"擴展"，另一個叫"插件"。

擴展（Extension），指的是通過調(diào)用 Chrome 提供的 Chrome API 來擴展瀏覽器功能的一種組件，工作在瀏覽器層面，使用 HTML + Javascript 語言開發(fā)[*]。比如著名的 Adblock plus。

插件（Plug-

in），指的是通過調(diào)用 Webkit 內(nèi)核 NPAPI

來擴展內(nèi)核功能的一種組件，工作在內(nèi)核層面，理論上可以用任何一種生成本地二進制程序的語言開發(fā)，比如 C/C++、Delphi 等。比如Flash

player 插件，就屬于這種類型。一般在網(wǎng)頁中用 <object> 或者 <embed>

標簽聲明的部分，就要靠插件來渲染。

至于哪種功能多的問題，這個不能比較，各有側(cè)重。如果你想實現(xiàn)一個自動統(tǒng)計你上過的網(wǎng)站以及各自時間的功能，就要用擴展技術(shù)；如果你要實現(xiàn)一個讓你的瀏覽器可以渲染 AutoCAD 文件的功能，就要用插件技術(shù)。

注：

* Chrome 擴展本身也支持包含 Plug-in 模塊，這部分可以使用 C/C++ 等語言開發(fā)。比如 web QQ 的截圖擴展，就是用了這項功能。

補充一點，最直觀的，可以從chrome的管理上看到：

插件管理頁：chrome://plugins/

擴展管理頁：chrome://extensions/

四、chrome 插件開發(fā)一個url攔截，重定向到另外一個地址，怎樣做本地緩存

開始

為了著手創(chuàng)建你的擴展程序，你只需要為你的擴展創(chuàng)建一個文件夾。程序所必須的文件只有manifest.json.，不過也推薦準備一些圖片用作圖標，和至少一個JavaScript以提供功能。一般來說還會包含HTML文檔、樣式表、圖片等等其他的資源。

Manifest文件

每個擴展都必須在其根目錄下包含一個manifest.json文件。

這個文件里面聲明了擴展的名稱、版本、權(quán)限、設(shè)置選項和其他的一些和擴展相關(guān)的元數(shù)據(jù)。Manifest v1早在Chrome 18便已被棄用，而且會根據(jù)這個時間表逐漸淘汰使用Manifest v1的擴展。如果你在參考一些舊擴展的Manifest文件的話，請確認添加"manifest_version": 2.

Google發(fā)布的Manifest v2中支持的域

后臺頁

大多數(shù)擴展都會在其manfiest.json文件內(nèi)有這樣的內(nèi)容：

1

2

3

4

5

{

"background": {

"scripts": ["index.js", "other.js"]

}

}

這一段代碼指定了兩個需要被加載而且要保持在后臺運行的腳本，這些腳本會在擴展的后臺頁運行。后臺頁是一個在擴展的進程中生成并運行的頁面，存在時間會和擴展的生命周期等長。后臺頁可用來作為擴展的其他界面的控制器，用來維護某個狀態(tài)或者保持某些活動。如果你需要用后臺頁來聲明一些標記來用，可以把一個HTML文件名指定給page選項。

事件頁

后臺頁會從擴展被加載的時候被裝載，而且會一直留在內(nèi)存里。這是因為如果有些狀態(tài)需要被長時間維護，或者需要被擴展的其他部分訪問。但是如果你沒有這個需求，那么應(yīng)該盡可能的使用事件頁。事件頁其實只是相當于一個包含了地persistent地: false條目的后臺頁，這一行語句告訴Chrome可以不需要把后臺頁保留在內(nèi)存里。相對來說，事件頁也會在最開始被裝載，但是一旦指定的腳本運行完畢，事件頁便會從內(nèi)存卸載，而且會在需要的時候被再次加載（比如用來回應(yīng)某些操作）。

以上便是在為擴展添加功能之前所需要知道的。

交互

利用Google提供的大量API，你的擴展與瀏覽器交互或者為用戶提供功能都變得方便。

chrome.* APIs

Chrome的程序和擴展程序都非常喜歡調(diào)用chrome.* APIs，這些API可以讓你通過不同的方式來操控瀏覽器，API通常會在后臺腳本里面被調(diào)用，這是我找到的一些常用API：

chrome.tabs 標簽頁：新建、刷新、關(guān)閉、訪問和操控標簽頁

chrome.history 歷史：訪問用戶瀏覽歷史

chrome.bookmarks 書簽：添加、編輯、移除和搜索用戶書簽

chrome.events 事件：監(jiān)聽或者管理瀏覽器發(fā)生的事件

chrome.commands 命令：添加或者改變鍵盤命令

chrome.contextMenus 右鍵：添加條目到右鍵下文菜單

chrome.omnibox 多功能框（地址欄）：添加多功能框關(guān)鍵字，使用戶可以向擴展發(fā)送指令或者激活擴展

其他API

Chrome程序和擴展程序通常也會用到其他的API，包括如本地存儲、地理位置、緩存、畫布等新型的HTML5 API。你也可以用普通的JavaScript或者webkit API來實現(xiàn)。

聲明權(quán)限

有些Chrome API的功能必須要在manifest.json文件中聲明相關(guān)權(quán)限才能被調(diào)用，通過在permissions 域中把值設(shè)成相應(yīng)權(quán)限名稱，或者是通識符組成的數(shù)組。

1

2

3

4

5

6

7

8

{

"permissions": [

"contextMenus",

"tabs",

"*",

"*"

]

}

在這一段聲明代碼中，數(shù)組中的頭兩個字符串是分別用來為chrome.contextMenus和chrome.tabs 的API授權(quán)的，最后的兩個字符串則是用來匹配以 和 開頭的地址。

用戶界面

Chrome擴展的用戶界面有著嚴格的限制，但是根據(jù)擴展的需要卻可以有不同形式的界面。

瀏覽器按鈕[a]

瀏覽器按鈕允許你在右上角放置一個的16 x 16像素的圖標，如果擴展應(yīng)用的界面是全局的，而不是針對某個頁面，那就應(yīng)該使用瀏覽器操作。如果要使用瀏覽器按鈕，你必須在manifest.json中的browser_action域中做如下聲明：

1

2

3

4

5

6

7

8

9

10

{

"browser_action": {

"default_icon": {

"19": "images/icon19.png",

"38": "images/icon38.png"

},

"default_title": "tooltip text here",

"default_popup": "popup.html"

}

}

一個瀏覽器按鈕可以有一個圖標、提示、文字標記和一個彈出內(nèi)容，文字標記可以將極少的文字（4字符）動態(tài)的覆蓋在瀏覽器操作的圖標上，你也可以通過chrome.browserActionAPI來對瀏覽器按鈕相關(guān)的事件做出反應(yīng)。

頁面按鈕

頁面按鈕允許你在多功能欄（地址欄）右邊添加一個按鈕，其實他和瀏覽器按鈕很相似，區(qū)別之處在于頁面按鈕是專門用來處理某些指定的頁面的。頁面按鈕必須在manfiest.json中聲明， page_action域的使用和瀏覽器按鈕一樣。頁面按鈕可以通過chrome.pageAction API控制，可以在不同的標簽頁中靈活的顯示或者隱藏。頁面按鈕也可以設(shè)置圖標、提示和彈出內(nèi)容，和瀏覽器按鈕不同的是其沒有文字標記功能。

右鍵菜單

右鍵菜單是另一個提供用戶界面，方便用戶和擴展交互的方式。Chrome的右鍵菜單通過右鍵激活，但根據(jù)激活內(nèi)容的變化，菜單內(nèi)容也會做相應(yīng)改變。

chrome.contextMenusAPI允許你向為不同內(nèi)容激活的右鍵菜單添加項目，若要使用此API，則在manifest.json文件中聲明相應(yīng)的contextMenus權(quán)限。

目前可用的激活內(nèi)容有：

all, page, frame, selection, link, editable,image, video, audio

對應(yīng)：所有內(nèi)容、頁面、框架、選擇、鏈接、可編輯、圖像、視頻、音頻，以下這個例子需要contextMenus 和tabs權(quán)限，他可以使擴展為右鍵菜單添加一個根項目，然后添加一個子菜單，用來復制當前的頁面到一個新選項卡。[b]

1

2

3

4

5

6

7

8

9

10

11

12

13

var root = chrome.contextMenus.create({

title: 'MyExtension',

contexts: ['page']

}, function () {

var subMenu = chrome.contextMenus.create({

title: 'Duplicate Tab'

contexts: ['page'],

parentId: root,

onclick: function (evt) {

chrome.tabs.create({ url: evt.pageUrl })

}

});

});

多功能框

Chrome把地址欄/搜索欄稱為多功能框，通過chrome.omnibox API，他可以讓擴展有另一個界面。通過API 可以設(shè)置一個特定的激活字符串，當這個字符串被鍵入多功能框時擴展便可以對其做出反應(yīng)。在manifest.json中做如下聲明：

1

2

3

4

5

{

"omnibox": {

"keyword": "ext-"

}

}

這部分代碼會把ext-作為激活字符串，當用戶鍵入ext-并按下SPACE鍵或者TAB鍵時擴展會被激活。激活字符串必須通過manifest.json文件聲明，故也不能通過JavaScript來更改。用戶可以通過右鍵單擊多功能框—–修改搜索引擎來更改。激活字符串是大小寫敏感的，同時想為一個擴展聲明多個激活字符串也是不可以的。

chrome.omnibox API可以讓你添加激活字符串被鍵入之后的修改或者輸入的事件處理器。

選項頁面

選項頁面是一個的常見的用戶界面，在chrome://extensions里可以通過單擊擴展右邊的選項按鈕來打開。通常這個頁面會和存儲API結(jié)合使用，以用來在計算機上為用戶保存設(shè)置。而使用腳本通過chrome.tabsAPI來打開選項頁面也是可以的。

頁面重載

頁面重載允許你完全替代一個以下指定頁面（一個擴展程序只能重載一個頁面）

書簽管理器

通過訪問chrome://bookmarks或者Chrome菜單打開的頁面

歷史

通過訪問chrome://history或者Chrome菜單打開的頁面

新選項卡

通過訪問chrome://newtab或者新建選項卡出現(xiàn)的頁面

這些被替換的頁面必須在manifest.json文件中如下聲明chrome_url_overrides域：

1

2

3

4

5

{

"chrome_url_overrides": {

"bookmarks": "newBookmarkManager.html"

}

}

內(nèi)容腳本

內(nèi)容腳本是和你的擴展有關(guān)，在網(wǎng)頁中運行的腳本。這個腳本可以讓你訪問頁面里相應(yīng)的DOM元素，你可以像這樣在manifest.json里通過指定content_scripts域定義一個內(nèi)容腳本數(shù)組：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

{

"content_scripts": [

{

"matches": ["*"],

"css": ["custom-google-styles.css"],

"js": ["custom-google-script-1.js", "custom-google-script-2.js"]

},

{

"matches": ["http://*"],

"css": ["global-styles.css"],

"js": ["global-script.js"]

}

]

}

你也可以用通過chrome.tabs API以動態(tài)的把JavaScript或者CSS注入網(wǎng)頁。

內(nèi)容腳本有以下限制：

不能使用chrome.* API （chrome.extension的部分除外）

不能使用由擴展腳本定義的變量或函數(shù)

不能使用由網(wǎng)頁所定義的變量或函數(shù)

不能使用由其他內(nèi)容腳本定義的變量或函數(shù)

內(nèi)容腳本可以通過消息傳遞間接的使用chrome.* API，或者是和擴展腳本交互。

以上就是關(guān)于chrome擴展插件開發(fā)相關(guān)問題的回答。希望能幫到你，如有更多相關(guān)問題，您也可以聯(lián)系我們的客服進行咨詢，客服也會為您講解更多精彩的知識和內(nèi)容。

推薦閱讀：

CHATGPT怎樣讀音（chaptet怎么讀）

Chat造句（chat造句簡單帶翻譯）

vrchat最新版本（vrchat最新版本下載蘋果手機）

小紅書多少粉絲算大V（小紅書多少粉絲算大號）

庭院設(shè)計藝術(shù)字