正文

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

發(fā)布時(shí)間：2023-03-13 02:08:01 稿源：創(chuàng)意嶺閱讀： 109 問(wèn)大家

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

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

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

本文目錄:

1、Chrome 的插件與擴(kuò)展有什么區(qū)別
2、如何管理Chrome的擴(kuò)展，插件和應(yīng)用
3、Chrome 的插件與擴(kuò)展有什么區(qū)別
4、chrome 插件開(kāi)發(fā)一個(gè)url攔截，重定向到另外一個(gè)地址，怎樣做本地緩存

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

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

"擴(kuò)展"和"插件"，其實(shí)都是軟件組件的一種形式，Chrome 只不過(guò)是把兩種類(lèi)型的組件分別給與了專(zhuān)有名稱(chēng)，一個(gè)叫"擴(kuò)展"，另一個(gè)叫"插件"。

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

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

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

注：

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

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

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

擴(kuò)展（Extension）的管理

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

Chrome自帶的管理工具

點(diǎn)擊右上角的菜單→工具→擴(kuò)展程序或者直接在地址欄輸入chrome://extensions/。
這里可看到所有安裝的擴(kuò)展。亮色打勾得表示已經(jīng)啟用的，灰色未打勾的表示位啟用的，右側(cè)小垃圾桶可以刪除相應(yīng)擴(kuò)展。把不用的擴(kuò)展刪除或者勾去掉即可。
借力Extensions Manager (aka Switcher)
安裝Extensions Manager (aka Switcher)擴(kuò)展，擴(kuò)展中的“管家”，Chrome Web Store里可以搜到。
點(diǎn)擊aka Switcher圖標(biāo)，彈出下拉框，選擇extensions，當(dāng)前的擴(kuò)展信息一目了然，勾選需要的擴(kuò)展即可。

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

Chrome自帶的管理工具

點(diǎn)擊左上角應(yīng)用圖標(biāo)或者在地址欄輸入chrome://apps，則可打開(kāi)應(yīng)用管理頁(yè)面。
自帶的管理工具只能選擇刪除無(wú)法停用，因此需要aka Switcher擴(kuò)展。
借力Extensions Manager (aka Switcher)
點(diǎn)擊aka Switcher圖標(biāo)，彈出下拉框，選擇applications，當(dāng)前的應(yīng)用信息一目了然，勾選需要的應(yīng)用即可。

插件（Plugin）的管理

除了上述兩種“顯而易見(jiàn)”的“外掛”外，還有一種藏的更深的“外掛”——插件（Plugin）。它通常不是我們主動(dòng)安裝的，往往是安裝軟件時(shí)軟件本身順帶幫我們就安裝了。
插件（Plugin）可以在地址欄輸入chrome://plugins打開(kāi)管理頁(yè)面。可以看到有和QQ相關(guān)的，也有和Office相關(guān)的。把不需要也不會(huì)影響瀏覽器使用的停用即可。

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

插件（Plug-

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

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

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

標(biāo)簽聲明的部分，就要靠插件來(lái)渲染。

注：

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

補(bǔ)充一點(diǎn)，最直觀的，可以從chrome的管理上看到：

插件管理頁(yè)：chrome://plugins/

擴(kuò)展管理頁(yè)：chrome://extensions/

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

開(kāi)始

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

Manifest文件

每個(gè)擴(kuò)展都必須在其根目錄下包含一個(gè)manifest.json文件。

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

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

后臺(tái)頁(yè)

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

{

"background": {

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

}

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

事件頁(yè)

后臺(tái)頁(yè)會(huì)從擴(kuò)展被加載的時(shí)候被裝載，而且會(huì)一直留在內(nèi)存里。這是因?yàn)槿绻行顟B(tài)需要被長(zhǎng)時(shí)間維護(hù)，或者需要被擴(kuò)展的其他部分訪問(wèn)。但是如果你沒(méi)有這個(gè)需求，那么應(yīng)該盡可能的使用事件頁(yè)。事件頁(yè)其實(shí)只是相當(dāng)于一個(gè)包含了地persistent地: false條目的后臺(tái)頁(yè)，這一行語(yǔ)句告訴Chrome可以不需要把后臺(tái)頁(yè)保留在內(nèi)存里。相對(duì)來(lái)說(shuō)，事件頁(yè)也會(huì)在最開(kāi)始被裝載，但是一旦指定的腳本運(yùn)行完畢，事件頁(yè)便會(huì)從內(nèi)存卸載，而且會(huì)在需要的時(shí)候被再次加載（比如用來(lái)回應(yīng)某些操作）。

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

交互

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

chrome.* APIs

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

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

chrome.history 歷史：訪問(wèn)用戶(hù)瀏覽歷史

chrome.bookmarks 書(shū)簽：添加、編輯、移除和搜索用戶(hù)書(shū)簽

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

chrome.commands 命令：添加或者改變鍵盤(pán)命令

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

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

其他API

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

聲明權(quán)限

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

{

"permissions": [

"contextMenus",

"tabs",

"*",

"*"

]

}

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

用戶(hù)界面

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

瀏覽器按鈕[a]

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

{

"browser_action": {

"default_icon": {

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

"38": "images/icon38.png"

"default_title": "tooltip text here",

"default_popup": "popup.html"

}

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

頁(yè)面按鈕

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

右鍵菜單

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

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

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

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

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

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把地址欄/搜索欄稱(chēng)為多功能框，通過(guò)chrome.omnibox API，他可以讓擴(kuò)展有另一個(gè)界面。通過(guò)API 可以設(shè)置一個(gè)特定的激活字符串，當(dāng)這個(gè)字符串被鍵入多功能框時(shí)擴(kuò)展便可以對(duì)其做出反應(yīng)。在manifest.json中做如下聲明：

{

"omnibox": {

"keyword": "ext-"

}

這部分代碼會(huì)把ext-作為激活字符串，當(dāng)用戶(hù)鍵入ext-并按下SPACE鍵或者TAB鍵時(shí)擴(kuò)展會(huì)被激活。激活字符串必須通過(guò)manifest.json文件聲明，故也不能通過(guò)JavaScript來(lái)更改。用戶(hù)可以通過(guò)右鍵單擊多功能框—–修改搜索引擎來(lái)更改。激活字符串是大小寫(xiě)敏感的，同時(shí)想為一個(gè)擴(kuò)展聲明多個(gè)激活字符串也是不可以的。

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

選項(xiàng)頁(yè)面

選項(xiàng)頁(yè)面是一個(gè)的常見(jiàn)的用戶(hù)界面，在chrome://extensions里可以通過(guò)單擊擴(kuò)展右邊的選項(xiàng)按鈕來(lái)打開(kāi)。通常這個(gè)頁(yè)面會(huì)和存儲(chǔ)API結(jié)合使用，以用來(lái)在計(jì)算機(jī)上為用戶(hù)保存設(shè)置。而使用腳本通過(guò)chrome.tabsAPI來(lái)打開(kāi)選項(xiàng)頁(yè)面也是可以的。

頁(yè)面重載

頁(yè)面重載允許你完全替代一個(gè)以下指定頁(yè)面（一個(gè)擴(kuò)展程序只能重載一個(gè)頁(yè)面）

書(shū)簽管理器

通過(guò)訪問(wèn)chrome://bookmarks或者Chrome菜單打開(kāi)的頁(yè)面

歷史

通過(guò)訪問(wèn)chrome://history或者Chrome菜單打開(kāi)的頁(yè)面

新選項(xiàng)卡

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

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

{

"chrome_url_overrides": {

"bookmarks": "newBookmarkManager.html"

}

內(nèi)容腳本

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

{

"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"]

}

]

}

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

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

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

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

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

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

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

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