依据相干数据显示，谷歌的 Chrome 浏览器目前已达近七成的市场占有率，成为浏览器的“霸主”。大家抉择 Chrome，除了是因为性能的优越以及弱小的兼容性之外，Chrome 短缺的扩大插件，能够让咱们的浏览器成为一个“百宝箱”。而谷歌浏览器插件更是一种用于定制浏览器体验的小程序，通过插件，咱们能够依据集体的需要定制浏览器的行为。Chrome 插件是一个用 Web 技术开发的软件，能够说只有把握了”前端三兄弟“（html、js、css），相当于会了 Chrome 插件开发的一大半。

通过 Chrome 插件，咱们能够翻译网页上的文字、咱们能够拾取网页上的色彩、咱们能够在线查词，咱们甚至能够将一个“Excel“集成到咱们的插件中。
置信对于大家对于 Chrome 插件应该不生疏了，多余的话就不多赘述，咱们间接开启插件开发的入门分享以及教大家如何实现将“Excel”集成到 Chrome 插件。

让你的插件说声“Hello world”

1、创立 manifest.json 文件。该文件是 Chrome 插件的入口文件，也就是配置文件，定义了插件的所有信息，这是一个 json 文件。

咱们能够看到这份 json 文件定义了一些根本的字段，包含插件的名称、形容、版本等。

2、给咱们的插件增加上一个合乎插件定位的图片。搁置在 default_icon 字段下，能够配置不同尺寸的 icon。

3、增加一个默认的 html 文件。咱们就是通过这个 html 将点击插件之后要展现的内容弹出。

4、实现之后，咱们将带有 hello.json、hello.png、manifest.json 的文件夹加载到浏览器中

5、点击自定义的图标，就能够看到咱们第一个自定义的 Chrome 插件的诞生。至此，咱们曾经实现了 Chrome 插件的简略入门。

给你的插件关上“一扇窗”（Popup）

Popup 是咱们点击插件之后弹出的一个窗口网页，用于简略的长期交互。当咱们点击非浏览器区域时，该窗口就会失去焦点而敞开，下面所形容的就是一个简略的例子。其申明周期就是从关上到敞开的过程。

Popup 简略来说就是一个 html 页面，创立好对应的 html 文件后，咱们将其在 ”browser_action” 字段下指定 ”default_popup” 的门路，就像上一部分的图 2。

想要长时间运行能够用“后盾”（Background）

通过 popup 咱们晓得他是生命周期比拟短的页面，要想插件不被点击的时候也能运行，能够用 background。他的生命周期是从浏览器关上开始，直至浏览器页面敞开。

增加的形式也很简略，咱们只须要在 manifest.json 中增加 background 字段。留神，能够通过“page”指定网页，也能够通过“script”指定一个 js 文件，两者用其一即可。

右键菜单（ContextMenus）将会十分实用

对于插件的模式，不仅仅是在于右上角的图标，定制浏览器的右键菜单，也是插件的一种。在增加前，咱们须要在 manifest.json 中申明右键菜单的权限。

而后在咱们的 js 文件中调用 Chrome 给咱们提供的接口，例如

咱们还能够在 icon 字段增加咱们想要实现的右键菜单图标。

实现以上操作后，在浏览器右键点击时，会呈现咱们定制的菜单项。

让你的插件会“谈话”（notifications）

Chrome 提供了 chrome.notifications API, 让咱们可能进行一些桌面推送。例如咱们的插件须要在后盾进行轮询的时候，能够定时依据最新的状态进行一个推送，收到音讯、有多少事件待处理这些都是典型的例子。

咱们能够间接连续下面右键菜单的例子，把咱们的推送和右键菜单做一个简略的联合。能够看到上面的代码，咱们在右键菜单的点击事件中，退出了 chrome 提供的 API chrome.notifications.create 创立一个新的推送。同时咱们能够定制这个推送的一些自定义信息，包含推送的类型、图标、名称、显示的信息。

将咱们的上述代码保留后，更新咱们的插件，通过右键菜单点击，右下角就会进行推送。

让你的插件会“办公”（嵌入 Excel）

Excel 是一款非常弱小的桌面办公软件，毛病是必须要装置对应的客户端。如果想实现咱们在浏览器中的”Excel”, 而不用装置任何内容，咱们能够通过以下内容实现：

1、最开始咱们先创立插件的文件夹，将咱们的配置信息（manifest.json）依据实需要进行填写。

1、咱们须要将组件版编辑器进行下载，而后集成到咱们的 Chrome 插件中。咱们能够到下方链接中进行下载，对于组件版编辑器也有介绍。

下载实现后，咱们能够在上面的门路找到组件版编辑器的示例，咱们用 purejs 的即可。

SpreadJS.Component.Designer.Release.V14.0\Designer Component\samples

3、把这个文件夹复制到咱们的 Chrome 插件文件夹中，而后把 cdn 的援用下载下来，改为本地援用（下图红框）。并创立一个新的 js 文件，把内嵌式援用改为外链式援用（下图蓝框）。

4、因为内容安全策略的限度，为了能失常引入咱们的 pdf 等模块，咱们须要在 manifest.json 中增加对应的申明。

5、至此，咱们要调整的相干内容曾经完结了，下图是整个插件的目录构造，咱们将其加载到浏览器后就能够失常应用了。

6、成果如下图所示，咱们实现了无需装置任何内容，即可在浏览器中实现 Excel 性能。

打包

实现开发后，咱们除了能够通过文件夹在本地引入进行拜访，还能够将其打包为一个 crx 文件，通过 Chrome 的商城公布，可能让所有人都能应用你开发的插件。

总结

以上就是 Chrome 插件开发的入门简介以及实现将“Excel”集成到咱们的 Chrome
插件中。Chrome 还为咱们提供了丰盛的接口包含但不限于音讯通信、动静注入、本地存储、网络申请。通过这些接口，咱们能够实现更多乏味、有用的性能。无关更多 Chrome 插件开发的信息能够查看档，外面会有更加具体全面的介绍。插件的模式也不仅限于下面的所形容的，多入手，就能摸索更多的可能。

感觉内容不错点个赞再走吧~

转载请注明出处：葡萄城官网，葡萄城为开发者提供业余的开发工具、解决方案和服务，赋能开发者。