chrome扩展插件开发（chrome插件开发全攻略）

大家好！今天让创意岭的小编来大家介绍下关于chrome扩展插件开发的问题，以下是小编对此问题的归纳整理，让我们一起来看看吧。

ChatGPT国内免费在线使用，能给你生成想要的原创文章、方案、文案、工作计划、工作报告、论文、代码、作文、做题和对话答疑等等

你只需要给出你的关键词，它就能返回你想要的内容，越精准，写出的就越详细，有微信小程序端、在线网页版、PC客户端，官网：https://ai.de1919.com

本文目录:

• 1、Chrome 的插件与扩展有什么区别

• 2、如何管理Chrome的扩展，插件和应用

• 3、Chrome 的插件与扩展有什么区别

• 4、chrome 插件开发一个url拦截，重定向到另外一个地址，怎样做本地缓存

一、Chrome 的插件与扩展有什么区别

"扩展"和"插件"，其实都是软件组件的一种形式，Chrome 只不过是把两种类型的组件分别给与了专有名称，一个叫"扩展"，另一个叫"插件"。

扩展（Extension），指的是通过调用 Chrome 提供的 Chrome API 来扩展浏览器功能的一种组件，工作在浏览器层面，使用 HTML + Javascript 语言开发[*]。比如著名的 Adblock plus。

插件（Plug-in），指的是通过调用 Webkit 内核 NPAPI 来扩展内核功能的一种组件，工作在内核层面，理论上可以用任何一种生成本地二进制程序的语言开发，比如 C/C++、Delphi 等。比如Flash player 插件，就属于这种类型。一般在网页中用 <object> 或者 <embed> 标签声明的部分，就要靠插件来渲染。

至于哪种功能多的问题，这个不能比较，各有侧重。如果你想实现一个自动统计你上过的网站以及各自时间的功能，就要用扩展技术；如果你要实现一个让你的浏览器可以渲染 AutoCAD 文件的功能，就要用插件技术。

注：

* Chrome 扩展本身也支持包含 Plug-in 模块，这部分可以使用 C/C++ 等语言开发。比如 web QQ 的截图扩展，就是用了这项功能。

二、如何管理Chrome的扩展，插件和应用

管理Chrome的扩展，插件和应用的方法

扩展（Extension）的管理

扩展（Extension）和应用（Application）的管理方法类似，分为两种：Chrome自带的管理工具或者Extensions Manager (aka Switcher)扩展。

Chrome自带的管理工具

1. 点击右上角的菜单→工具→扩展程序或者直接在地址栏输入chrome://extensions/。

2. 这里可看到所有安装的扩展。亮色打勾得表示已经启用的，灰色未打勾的表示位启用的，右侧小垃圾桶可以删除相应扩展。把不用的扩展删除或者勾去掉即可。

3. 借力Extensions Manager (aka Switcher)

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

5. 点击aka Switcher图标，弹出下拉框，选择extensions，当前的扩展信息一目了然，勾选需要的扩展即可。

应用（Application）的管理

Chrome自带的管理工具

1. 点击左上角应用图标或者在地址栏输入chrome://apps，则可打开应用管理页面。

2. 自带的管理工具只能选择删除无法停用，因此需要aka Switcher扩展。

3. 借力Extensions Manager (aka Switcher)

4. 点击aka Switcher图标，弹出下拉框，选择applications，当前的应用信息一目了然，勾选需要的应用即可。

插件（Plugin）的管理

1. 除了上述两种“显而易见”的“外挂”外，还有一种藏的更深的“外挂”——插件（Plugin）。它通常不是我们主动安装的，往往是安装软件时软件本身顺带帮我们就安装了。

2. 插件（Plugin）可以在地址栏输入chrome://plugins打开管理页面。可以看到有和QQ相关的，也有和Office相关的。把不需要也不会影响浏览器使用的停用即可。

三、Chrome 的插件与扩展有什么区别

"扩展"和"插件"，其实都是软件组件的一种形式，Chrome 只不过是把两种类型的组件分别给与了专有名称，一个叫"扩展"，另一个叫"插件"。

扩展（Extension），指的是通过调用 Chrome 提供的 Chrome API 来扩展浏览器功能的一种组件，工作在浏览器层面，使用 HTML + Javascript 语言开发[*]。比如著名的 Adblock plus。

插件（Plug-

in），指的是通过调用 Webkit 内核 NPAPI

来扩展内核功能的一种组件，工作在内核层面，理论上可以用任何一种生成本地二进制程序的语言开发，比如 C/C++、Delphi 等。比如Flash

player 插件，就属于这种类型。一般在网页中用 <object> 或者 <embed>

标签声明的部分，就要靠插件来渲染。

至于哪种功能多的问题，这个不能比较，各有侧重。如果你想实现一个自动统计你上过的网站以及各自时间的功能，就要用扩展技术；如果你要实现一个让你的浏览器可以渲染 AutoCAD 文件的功能，就要用插件技术。

注：

* Chrome 扩展本身也支持包含 Plug-in 模块，这部分可以使用 C/C++ 等语言开发。比如 web QQ 的截图扩展，就是用了这项功能。

补充一点，最直观的，可以从chrome的管理上看到：

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

扩展管理页：chrome://extensions/

四、chrome 插件开发一个url拦截，重定向到另外一个地址，怎样做本地缓存

开始

为了着手创建你的扩展程序，你只需要为你的扩展创建一个文件夹。程序所必须的文件只有manifest.json.，不过也推荐准备一些图片用作图标，和至少一个JavaScript以提供功能。一般来说还会包含HTML文档、样式表、图片等等其他的资源。

Manifest文件

每个扩展都必须在其根目录下包含一个manifest.json文件。

这个文件里面声明了扩展的名称、版本、权限、设置选项和其他的一些和扩展相关的元数据。Manifest v1早在Chrome 18便已被弃用，而且会根据这个时间表逐渐淘汰使用Manifest v1的扩展。如果你在参考一些旧扩展的Manifest文件的话，请确认添加"manifest_version": 2.

Google发布的Manifest v2中支持的域

后台页

大多数扩展都会在其manfiest.json文件内有这样的内容：

1

2

3

4

5

{

"background": {

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

}

}

这一段代码指定了两个需要被加载而且要保持在后台运行的脚本，这些脚本会在扩展的后台页运行。后台页是一个在扩展的进程中生成并运行的页面，存在时间会和扩展的生命周期等长。后台页可用来作为扩展的其他界面的控制器，用来维护某个状态或者保持某些活动。如果你需要用后台页来声明一些标记来用，可以把一个HTML文件名指定给page选项。

事件页

后台页会从扩展被加载的时候被装载，而且会一直留在内存里。这是因为如果有些状态需要被长时间维护，或者需要被扩展的其他部分访问。但是如果你没有这个需求，那么应该尽可能的使用事件页。事件页其实只是相当于一个包含了地persistent地: false条目的后台页，这一行语句告诉Chrome可以不需要把后台页保留在内存里。相对来说，事件页也会在最开始被装载，但是一旦指定的脚本运行完毕，事件页便会从内存卸载，而且会在需要的时候被再次加载（比如用来回应某些操作）。

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

交互

利用Google提供的大量API，你的扩展与浏览器交互或者为用户提供功能都变得方便。

chrome.* APIs

Chrome的程序和扩展程序都非常喜欢调用chrome.* APIs，这些API可以让你通过不同的方式来操控浏览器，API通常会在后台脚本里面被调用，这是我找到的一些常用API：

chrome.tabs 标签页：新建、刷新、关闭、访问和操控标签页

chrome.history 历史：访问用户浏览历史

chrome.bookmarks 书签：添加、编辑、移除和搜索用户书签

chrome.events 事件：监听或者管理浏览器发生的事件

chrome.commands 命令：添加或者改变键盘命令

chrome.contextMenus 右键：添加条目到右键下文菜单

chrome.omnibox 多功能框（地址栏）：添加多功能框关键字，使用户可以向扩展发送指令或者激活扩展

其他API

Chrome程序和扩展程序通常也会用到其他的API，包括如本地存储、地理位置、缓存、画布等新型的HTML5 API。你也可以用普通的JavaScript或者webkit API来实现。

声明权限

有些Chrome API的功能必须要在manifest.json文件中声明相关权限才能被调用，通过在permissions 域中把值设成相应权限名称，或者是通识符组成的数组。

1

2

3

4

5

6

7

8

{

"permissions": [

"contextMenus",

"tabs",

"*",

"*"

]

}

在这一段声明代码中，数组中的头两个字符串是分别用来为chrome.contextMenus和chrome.tabs 的API授权的，最后的两个字符串则是用来匹配以 和 开头的地址。

用户界面

Chrome扩展的用户界面有着严格的限制，但是根据扩展的需要却可以有不同形式的界面。

浏览器按钮[a]

浏览器按钮允许你在右上角放置一个的16 x 16像素的图标，如果扩展应用的界面是全局的，而不是针对某个页面，那就应该使用浏览器操作。如果要使用浏览器按钮，你必须在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"

}

}

一个浏览器按钮可以有一个图标、提示、文字标记和一个弹出内容，文字标记可以将极少的文字（4字符）动态的覆盖在浏览器操作的图标上，你也可以通过chrome.browserActionAPI来对浏览器按钮相关的事件做出反应。

页面按钮

页面按钮允许你在多功能栏（地址栏）右边添加一个按钮，其实他和浏览器按钮很相似，区别之处在于页面按钮是专门用来处理某些指定的页面的。页面按钮必须在manfiest.json中声明， page_action域的使用和浏览器按钮一样。页面按钮可以通过chrome.pageAction API控制，可以在不同的标签页中灵活的显示或者隐藏。页面按钮也可以设置图标、提示和弹出内容，和浏览器按钮不同的是其没有文字标记功能。

右键菜单

右键菜单是另一个提供用户界面，方便用户和扩展交互的方式。Chrome的右键菜单通过右键激活，但根据激活内容的变化，菜单内容也会做相应改变。

chrome.contextMenusAPI允许你向为不同内容激活的右键菜单添加项目，若要使用此API，则在manifest.json文件中声明相应的contextMenus权限。

目前可用的激活内容有：

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

对应：所有内容、页面、框架、选择、链接、可编辑、图像、视频、音频，以下这个例子需要contextMenus 和tabs权限，他可以使扩展为右键菜单添加一个根项目，然后添加一个子菜单，用来复制当前的页面到一个新选项卡。[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 可以设置一个特定的激活字符串，当这个字符串被键入多功能框时扩展便可以对其做出反应。在manifest.json中做如下声明：

1

2

3

4

5

{

"omnibox": {

"keyword": "ext-"

}

}

这部分代码会把ext-作为激活字符串，当用户键入ext-并按下SPACE键或者TAB键时扩展会被激活。激活字符串必须通过manifest.json文件声明，故也不能通过JavaScript来更改。用户可以通过右键单击多功能框—–修改搜索引擎来更改。激活字符串是大小写敏感的，同时想为一个扩展声明多个激活字符串也是不可以的。

chrome.omnibox API可以让你添加激活字符串被键入之后的修改或者输入的事件处理器。

选项页面

选项页面是一个的常见的用户界面，在chrome://extensions里可以通过单击扩展右边的选项按钮来打开。通常这个页面会和存储API结合使用，以用来在计算机上为用户保存设置。而使用脚本通过chrome.tabsAPI来打开选项页面也是可以的。

页面重载

页面重载允许你完全替代一个以下指定页面（一个扩展程序只能重载一个页面）

书签管理器

通过访问chrome://bookmarks或者Chrome菜单打开的页面

历史

通过访问chrome://history或者Chrome菜单打开的页面

新选项卡

通过访问chrome://newtab或者新建选项卡出现的页面

这些被替换的页面必须在manifest.json文件中如下声明chrome_url_overrides域：

1

2

3

4

5

{

"chrome_url_overrides": {

"bookmarks": "newBookmarkManager.html"

}

}

内容脚本

内容脚本是和你的扩展有关，在网页中运行的脚本。这个脚本可以让你访问页面里相应的DOM元素，你可以像这样在manifest.json里通过指定content_scripts域定义一个内容脚本数组：

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以动态的把JavaScript或者CSS注入网页。

内容脚本有以下限制：

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

不能使用由扩展脚本定义的变量或函数

不能使用由网页所定义的变量或函数

不能使用由其他内容脚本定义的变量或函数

内容脚本可以通过消息传递间接的使用chrome.* API，或者是和扩展脚本交互。

以上就是关于chrome扩展插件开发相关问题的回答。希望能帮到你，如有更多相关问题，您也可以联系我们的客服进行咨询，客服也会为您讲解更多精彩的知识和内容。

推荐阅读：

CHATGPT怎样读音（chaptet怎么读）

Chat造句（chat造句简单带翻译）

vrchat最新版本（vrchat最新版本下载苹果手机）

小红书多少粉丝算大V（小红书多少粉丝算大号）

庭院设计艺术字