创建Chrome浏览器插件

来源：互联网发布：联合石油数据库在哪看编辑：程序博客网时间：2024/05/21 07:52

这里尝试给大家描述一个最简单的插件(功能只有点击按钮触发弹窗)的创建过程并运行。

插件的详细属性可参看官方文档https://developer.chrome.com/extensions/getstarted。

创建插件相关文件

首先我们在磁盘任意目录下创建一个文件夹，命名是我们插件的名字。后面我们会在这个文件夹内创建以下几个必要的文件：

1.manifest.json

此文件相当于配置文件，里面存放此插件的相关信息。

官方说明如下：

This manifest is nothing more than a metadata file in JSON format that contains properties like your extension's name, description, version number and so on. At a high level, we will use it to declare to Chrome what the extension is going to do, and what permissions it requires in order to do those things.

所以我们首先创建一个manifest.json文件，将以下内容复制进去并保存：

{  "manifest_version": 2,  "name": "Getting started example",  "description": "This extension shows a Google Image search result for the current page",  "version": "1.0",  "browser_action": {    "default_icon": "icon.png",    "default_popup": "popup.html"  },  "permissions": [  ]}

这里的主要任务是创建一个最简单的插件并运行，所以上面每一样属性的意义我们在这里不说，大家可以参看官方文档。

2.icon.png

插件的图标，浏览器安装插件后会显示在浏览器上。我们这里是一个32*32像素的png图片，大家可以网上找一个也可以用画板画一个。

3.popup.html

此文件描述了插件的界面。其实插件就是一个Web程序。将以下内容复制进去并保存：

<!doctype html><html>  <head>    <title>Getting Started Extension's Popup</title>      </head>  <body><button id="hello-btn"">Start</button><script src="test.js"></script>  </body></html>

4.test.js

插件的脚本文件。此文件我们的内容如下：

function start(){alert("hello extension");};document.getElementById('hello-btn').addEventListener('click',function(){start();});

这里有一点要注意，插件的脚本代码不能写在html文件中，否则无法运行。

<!--      - JavaScript and HTML must be in separate files: see our Content Security      - Policy documentation[1] for details and explanation.      -      - [1]: https://developer.chrome.com/extensions/contentSecurityPolicy     -->

到这里，我们的插件就制作完毕了。接下来我们把它装载到Chrome浏览器中。

安装插件

1.在浏览器地址栏输入chrome://extensions/ 并回车。

2.在右上角的开发者模式(Developer mode)上打钩。

3.点击左边的“加载已解压的扩展程序(Load unpacked extension…)”按钮，并中我们刚才创建的文件夹，安装成功。

此时我们会看到浏览器的右上角多出一个图标，显示我们刚才设置的png图片。点击一下那个图标会弹出我们的插件界面，点击我们界面上的按钮会弹出一个警告窗。功能到此完成。

1 0